@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/feedback/FeedbackReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackReactions.js","sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\n\nimport useHover from '../../hooks/useHover';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: string;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`rioglyph rioglyph-${iconName} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"names":["FeedbackReactions","props","headline","animated","labelUp","labelDown","labelPosition","size","colorFillUp","colorFillDown","colorHoverUp","colorHoverDown","onVoteUp","onVoteDown","itemClassName","remainingProps","wrapperClassName","classNames","jsxs","jsx","FeedbackItem","text","iconName","onClick","fillColor","hoverColor","className","ref","useRef","isHover","useHover","iconClasses","isUp","motion"],"mappings":"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"}
+{"version":3,"file":"FeedbackReactions.js","sources":["../../../src/components/feedback/FeedbackReactions.tsx"],"sourcesContent":["import React, { type ComponentProps, useRef } from 'react';\nimport { motion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport useHover from '../../hooks/useHover';\n\ntype FeedbackReactionsProps = ComponentProps<'div'> & {\n    /**\n     * Optional headline inlined with the buttons.\n     */\n    headline?: React.ReactNode;\n\n    /**\n     * Size of the reaction buttons.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md';\n\n    /**\n     * Position of the reaction button labels.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: 'right' | 'bottom';\n\n    /**\n     * Label for the up button.\n     */\n    labelUp?: React.ReactNode;\n\n    /**\n     * Label for the down button.\n     */\n    labelDown?: React.ReactNode;\n\n    /**\n     * Custom fill color for the up button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillUp?: string;\n\n    /**\n     * Custom fill color for the down button.\n     *\n     * @default 'bg-lightest'\n     */\n    colorFillDown?: string;\n\n    /**\n     * Custom hover color for the up button.\n     *\n     * @default 'primary'\n     */\n    colorHoverUp?: string;\n\n    /**\n     * Custom hover color for the down button.\n     *\n     * @default 'primary'\n     */\n    colorHoverDown?: string;\n\n    /**\n     * Callback function triggered on up vote.\n     */\n    onVoteUp?: VoidFunction;\n\n    /**\n     * Callback function triggered on down vote.\n     */\n    onVoteDown?: VoidFunction;\n\n    /**\n     * Additional classes applied to the individual reaction item (button and label).\n     */\n    itemClassName?: string;\n\n    /**\n     * Defines whether the reaction icon is animated.\n     *\n     * @default false\n     */\n    animated?: boolean;\n};\n\nconst FeedbackReactions = (props: FeedbackReactionsProps) => {\n    const {\n        headline,\n        animated,\n        labelUp,\n        labelDown,\n        labelPosition = 'bottom',\n        size = 'md',\n        colorFillUp = '',\n        colorFillDown = '',\n        colorHoverUp = 'primary',\n        colorHoverDown = 'primary',\n        onVoteUp = () => {},\n        onVoteDown = () => {},\n        itemClassName,\n        ...remainingProps\n    } = props;\n\n    const hasLabels = !!labelUp || !!labelDown;\n\n    const wrapperClassName = classNames(\n        hasLabels ? 'display-grid grid-cols-2' : 'display-flex',\n        'gap-15',\n        'padding-top-5',\n        'user-select-none'\n    );\n\n    return (\n        <div {...remainingProps} className={wrapperClassName}>\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillDown}\n                hoverColor={colorHoverDown}\n                animated={animated}\n                iconName='thumbs-down'\n                text={labelDown}\n                labelPosition={labelPosition}\n                onClick={onVoteDown}\n                className={itemClassName}\n            />\n            <FeedbackItem\n                size={size}\n                fillColor={colorFillUp}\n                hoverColor={colorHoverUp}\n                animated={animated}\n                iconName='thumbs-up'\n                text={labelUp}\n                labelPosition={labelPosition}\n                onClick={onVoteUp}\n                className={itemClassName}\n            />\n        </div>\n    );\n};\n\ntype FeedbackItemProps = {\n    text?: React.ReactNode;\n    iconName: string;\n    onClick: VoidFunction;\n    fillColor: string;\n    hoverColor: string;\n    animated?: boolean;\n    labelPosition?: 'right' | 'bottom';\n    size?: 'sm' | 'md';\n    className?: string;\n};\n\nconst FeedbackItem = (props: FeedbackItemProps) => {\n    const {\n        size,\n        text,\n        iconName,\n        onClick,\n        fillColor,\n        hoverColor,\n        animated = false,\n        labelPosition = 'bottom',\n        className,\n    } = props;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const isHover = useHover(ref);\n\n    const iconClasses = classNames(\n        size === 'sm' ? 'width-40' : 'width-50',\n        'aspect-ratio-1',\n        'border rounded-circle',\n        fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest',\n        isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest',\n        'display-grid place-items-center',\n        'text-size-14'\n    );\n\n    const wrapperClassName = classNames(\n        'display-flex',\n        'gap-10',\n        labelPosition === 'bottom' ? 'flex-column' : '',\n        'align-items-center',\n        'text-center',\n        'cursor-pointer',\n        className\n    );\n\n    const isUp = iconName.includes('up');\n\n    return (\n        <div ref={ref} className={wrapperClassName} onClick={onClick}>\n            <div className={iconClasses}>\n                <motion.span\n                    initial={{ y: 0, rotate: 0 }}\n                    animate={\n                        animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }\n                    }\n                    transition={{\n                        duration: 0.6,\n                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,\n                        repeatType: 'loop',\n                    }}\n                    className={`rioglyph rioglyph-${iconName} text-size-200pct`}\n                />\n            </div>\n            <div\n                className={`text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`}\n            >\n                {text}\n            </div>\n        </div>\n    );\n};\n\nexport default FeedbackReactions;\n"],"names":["FeedbackReactions","props","headline","animated","labelUp","labelDown","labelPosition","size","colorFillUp","colorFillDown","colorHoverUp","colorHoverDown","onVoteUp","onVoteDown","itemClassName","remainingProps","wrapperClassName","classNames","jsxs","jsx","FeedbackItem","text","iconName","onClick","fillColor","hoverColor","className","ref","useRef","isHover","useHover","iconClasses","isUp","motion"],"mappings":"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"}

package/components/filepicker/FilePicker.d.ts

@@ -35,8 +35,6 @@ export type FilePickerProps = {
     onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;
     /**
      * Additional classes for the select button.
-     *
-     * @default ''
      */
     className?: string;
     /**

package/components/filepicker/FilePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker.js","sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     *\n     * @default ''\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => {\n                    return (\n                        <div {...getRootProps()}>\n                            <input {...getInputProps()} />\n                            {showDropzone && children && children({ isDragActive })}\n                        </div>\n                    );\n                }}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"names":["FilePicker","props","displayMode","multiple","label","maxSize","onPick","noop","className","accept","fullHeight","children","remainingProps","dropzoneRef","useRef","wrapperRef","isFull","showButton","showDropzone","handleDrop","useCallback","acceptedFiles","rejectedFiles","files","mimeType","file","handleClick","useEffect","jsxs","jsx","Button","Dropzone","getRootProps","getInputProps","isDragActive"],"mappings":";;;;;AAwEA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAoB,IAAI,GACtCC,IAAaD,EAAuB,IAAI,GAExCE,IAASd,MAAgB,QACzBe,IAAaD,KAAUd,MAAgB,UACvCgB,IAAeF,KAAUd,MAAgB,YAEzCiB,IAAmDC;AAAA,IACrD,CAACC,GAAeC,MAAkB;AAE9B,YAAMC,IADgBd,KAAU,OAAO,KAAKA,CAAM,EAAE,KAAK,CAAAe,MAAYA,EAAS,WAAW,OAAO,CAAC,IAE3FH,EAAc,IAAI,CAAAI,MAAQ,OAAO,OAAOA,GAAM,EAAE,SAAS,IAAI,gBAAgBA,CAAI,EAAA,CAAG,CAAC,IACrFJ;AAEN,MAAAf,EAAOiB,GAAOD,CAAa;AAAA,IAC/B;AAAA,IACA,CAAChB,GAAQG,CAAM;AAAA,EAAA,GAGbiB,IAAc,MAAMb,EAAY,SAAS,KAAA;AAE/C,SAAAc,EAAU,MAAM;AAGZ,IAAIZ,EAAW,WAAWL,KACtBK,EAAW,QAAQ,cAAc,mBAAmB,GAAG,aAAa,SAAS,eAAe;AAAA,EAEpG,GAAG,CAACL,GAAYK,EAAW,OAAO,CAAC,GAG/B,gBAAAa,EAAC,OAAA,EAAI,KAAKb,GAAY,WAAU,cAC3B,UAAA;AAAA,IAAAE,KACG,gBAAAY,EAACC,GAAA,EAAO,SAASJ,GAAa,WAAAlB,GACzB,UAAAJ,GACL;AAAA,IAEJ,gBAAAyB;AAAA,MAACE;AAAA,MAAA;AAAA,QACI,GAAGnB;AAAA,QACJ,QAAQO;AAAA,QACR,QAAAV;AAAA,QACA,UAAAN;AAAA,QACA,SAAAE;AAAA,QACA,KAAKQ;AAAA,QAEJ,UAAA,CAAC,EAAE,cAAAmB,GAAc,eAAAC,GAAe,cAAAC,QAEzB,gBAAAN,EAAC,OAAA,EAAK,GAAGI,EAAA,GACL,UAAA;AAAA,UAAA,gBAAAH,EAAC,SAAA,EAAO,GAAGI,EAAA,EAAc,CAAG;AAAA,UAC3Bf,KAAgBP,KAAYA,EAAS,EAAE,cAAAuB,GAAc;AAAA,QAAA,GAC1D;AAAA,MAER;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAEAlC,EAAW,sBAAsB;AACjCA,EAAW,wBAAwB;AACnCA,EAAW,oBAAoB;"}
+{"version":3,"file":"FilePicker.js","sources":["../../../src/components/filepicker/FilePicker.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useEffect, useRef } from 'react';\nimport Dropzone, { type FileRejection, type DropzoneProps, type DropzoneRef } from 'react-dropzone';\nimport { noop } from 'es-toolkit/compat';\n\nimport Button from '../button/Button';\n\ntype FilePickerRenderProps = {\n    isDragActive: boolean;\n};\n\nexport type FilePickerProps = {\n    /**\n     * Defines the file picker display mode.\n     *\n     * Possible values are `'button'` for a single button, `'dropzone'` for a custom dropzone passed as child function,\n     * or `'full'` for showing both.\n     *\n     * @default 'button'\n     */\n    displayMode?: 'button' | 'dropzone' | 'full';\n\n    /**\n     * Indicating if multiple files may be selected.\n     *\n     * @default true\n     */\n    multiple?: boolean; // multi select\n\n    /**\n     * Text to display on Button if displayMode is set to \"button\".\n     *\n     * @default 'Select files'\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Maximum file size in byte. 5 MB = 5,242,880 byte\n     */\n    maxSize?: number;\n\n    /**\n     * Function called after one or multiple files have been picked.\n     */\n    onPick?: (files: File[], rejectedFiles: FileRejection[]) => void;\n\n    /**\n     * Additional classes for the select button.\n     */\n    className?: string;\n\n    /**\n     * Flag to set the dropzone wrapper element to 100% height.\n     *\n     * This comes in handy, when the dropzone should have 100 % height so it can grow.\n     *\n     * @default false\n     */\n    fullHeight?: boolean;\n\n    /**\n     * Object list of accepted Mime Types as keys and file extensions array as value.\n     */\n    accept?: { [mimeType: string]: string[] };\n\n    /**\n     * Pass a custom dropzone element as function receiving some render props.\n     */\n    children?: ({ isDragActive }: FilePickerRenderProps) => React.ReactElement;\n};\n\nconst FilePicker = (props: FilePickerProps) => {\n    const {\n        displayMode = 'button',\n        multiple = true,\n        label = 'Select files',\n        maxSize,\n        onPick = noop,\n        className = '',\n        accept,\n        fullHeight = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const dropzoneRef = useRef<DropzoneRef>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    const isFull = displayMode === 'full';\n    const showButton = isFull || displayMode === 'button';\n    const showDropzone = isFull || displayMode === 'dropzone';\n\n    const handleDrop: NonNullable<DropzoneProps['onDrop']> = useCallback(\n        (acceptedFiles, rejectedFiles) => {\n            const hasImagesType = accept && Object.keys(accept).some(mimeType => mimeType.startsWith('image'));\n            const files = hasImagesType\n                ? acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))\n                : acceptedFiles;\n\n            onPick(files, rejectedFiles);\n        },\n        [onPick, accept]\n    );\n\n    const handleClick = () => dropzoneRef.current?.open();\n\n    useEffect(() => {\n        // Set height to dropzones inner presentation div where there is no other access to this DOM element.\n        // This comes in handy, when the dropzone should have 100 % height so it can grow.\n        if (wrapperRef.current && fullHeight) {\n            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');\n        }\n    }, [fullHeight, wrapperRef.current]);\n\n    return (\n        <div ref={wrapperRef} className='FilePicker'>\n            {showButton && (\n                <Button onClick={handleClick} className={className}>\n                    {label}\n                </Button>\n            )}\n            <Dropzone\n                {...remainingProps}\n                onDrop={handleDrop}\n                accept={accept}\n                multiple={multiple}\n                maxSize={maxSize}\n                ref={dropzoneRef}\n            >\n                {({ getRootProps, getInputProps, isDragActive }) => {\n                    return (\n                        <div {...getRootProps()}>\n                            <input {...getInputProps()} />\n                            {showDropzone && children && children({ isDragActive })}\n                        </div>\n                    );\n                }}\n            </Dropzone>\n        </div>\n    );\n};\n\nFilePicker.DISPLAY_MODE_BUTTON = 'button' as const;\nFilePicker.DISPLAY_MODE_DROPZONE = 'dropzone' as const;\nFilePicker.DISPLAY_MODE_FULL = 'full' as const;\n\nexport default FilePicker;\n"],"names":["FilePicker","props","displayMode","multiple","label","maxSize","onPick","noop","className","accept","fullHeight","children","remainingProps","dropzoneRef","useRef","wrapperRef","isFull","showButton","showDropzone","handleDrop","useCallback","acceptedFiles","rejectedFiles","files","mimeType","file","handleClick","useEffect","jsxs","jsx","Button","Dropzone","getRootProps","getInputProps","isDragActive"],"mappings":";;;;;AAsEA,MAAMA,IAAa,CAACC,MAA2B;AAC3C,QAAM;AAAA,IACF,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,SAAAC;AAAA,IACA,QAAAC,IAASC;AAAA,IACT,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAcC,EAAoB,IAAI,GACtCC,IAAaD,EAAuB,IAAI,GAExCE,IAASd,MAAgB,QACzBe,IAAaD,KAAUd,MAAgB,UACvCgB,IAAeF,KAAUd,MAAgB,YAEzCiB,IAAmDC;AAAA,IACrD,CAACC,GAAeC,MAAkB;AAE9B,YAAMC,IADgBd,KAAU,OAAO,KAAKA,CAAM,EAAE,KAAK,CAAAe,MAAYA,EAAS,WAAW,OAAO,CAAC,IAE3FH,EAAc,IAAI,CAAAI,MAAQ,OAAO,OAAOA,GAAM,EAAE,SAAS,IAAI,gBAAgBA,CAAI,EAAA,CAAG,CAAC,IACrFJ;AAEN,MAAAf,EAAOiB,GAAOD,CAAa;AAAA,IAC/B;AAAA,IACA,CAAChB,GAAQG,CAAM;AAAA,EAAA,GAGbiB,IAAc,MAAMb,EAAY,SAAS,KAAA;AAE/C,SAAAc,EAAU,MAAM;AAGZ,IAAIZ,EAAW,WAAWL,KACtBK,EAAW,QAAQ,cAAc,mBAAmB,GAAG,aAAa,SAAS,eAAe;AAAA,EAEpG,GAAG,CAACL,GAAYK,EAAW,OAAO,CAAC,GAG/B,gBAAAa,EAAC,OAAA,EAAI,KAAKb,GAAY,WAAU,cAC3B,UAAA;AAAA,IAAAE,KACG,gBAAAY,EAACC,GAAA,EAAO,SAASJ,GAAa,WAAAlB,GACzB,UAAAJ,GACL;AAAA,IAEJ,gBAAAyB;AAAA,MAACE;AAAA,MAAA;AAAA,QACI,GAAGnB;AAAA,QACJ,QAAQO;AAAA,QACR,QAAAV;AAAA,QACA,UAAAN;AAAA,QACA,SAAAE;AAAA,QACA,KAAKQ;AAAA,QAEJ,UAAA,CAAC,EAAE,cAAAmB,GAAc,eAAAC,GAAe,cAAAC,QAEzB,gBAAAN,EAAC,OAAA,EAAK,GAAGI,EAAA,GACL,UAAA;AAAA,UAAA,gBAAAH,EAAC,SAAA,EAAO,GAAGI,EAAA,EAAc,CAAG;AAAA,UAC3Bf,KAAgBP,KAAYA,EAAS,EAAE,cAAAuB,GAAc;AAAA,QAAA,GAC1D;AAAA,MAER;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAEAlC,EAAW,sBAAsB;AACjCA,EAAW,wBAAwB;AACnCA,EAAW,oBAAoB;"}

package/components/formLabel/FormLabel.js

@@ -1,6 +1,6 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
 import { useRef as d, useState as g, useEffect as b } from "react";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 const w = (f) => {
   const { className: l = "", children: o, supportingText: e, ...n } = f, i = d(null), [t, c] = g(null), u = "htmlFor" in n;
   b(() => {
@@ -22,13 +22,10 @@ const w = (f) => {
       e && "display-inline-flex flex-wrap justify-content-between width-100pct",
       l
     );
-    return (
-      // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-      /* @__PURE__ */ p("label", { ref: i, ...n, className: s, children: [
-        /* @__PURE__ */ r("span", { children: o }),
-        e && /* @__PURE__ */ r("span", { className: m, children: e })
-      ] })
-    );
+    return /* @__PURE__ */ p("label", { ref: i, ...n, className: s, children: [
+      /* @__PURE__ */ r("span", { children: o }),
+      e && /* @__PURE__ */ r("span", { className: m, children: e })
+    ] });
   }
   const x = a(
     "text-color-dark",
@@ -42,7 +39,7 @@ const w = (f) => {
     l
   );
   return (
-    // @ts-ignore
+    // @ts-expect-error
     /* @__PURE__ */ p("div", { ref: i, ...n, className: x, children: [
       o,
       e && /* @__PURE__ */ r("span", { className: m, children: e })

package/components/formLabel/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../src/components/formLabel/FormLabel.tsx"],"sourcesContent":["import React, { type PropsWithChildren, type ComponentProps, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\n\nexport type FormLabelProps = ComponentProps<'label'> & {\n    /**\n     * Additional supporting text displayed next to the label.\n     */\n    supportingText?: string | React.ReactElement;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst FormLabel = (props: PropsWithChildren<FormLabelProps>) => {\n    const { className = '', children, supportingText, ...remainingProps } = props;\n\n    const elementRef = useRef<HTMLDivElement | HTMLLabelElement>(null);\n\n    const [parentSize, setParentSize] = useState<'lg' | 'sm' | null>(null);\n\n    const isLabel = 'htmlFor' in remainingProps;\n\n    useEffect(() => {\n        if (!elementRef.current) {\n            return;\n        }\n\n        const parent = elementRef.current.parentElement;\n        if (!parent) {\n            return;\n        }\n\n        if (parent.classList.contains('form-group-lg')) {\n            setParentSize('lg');\n        } else if (parent.classList.contains('form-group-sm')) {\n            setParentSize('sm');\n        }\n    }, []);\n\n    const supportingTextClasses = classNames(\n        'text-color-gray',\n        typeof supportingText === 'string' && 'text-italic',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12'\n    );\n\n    if (isLabel && remainingProps.htmlFor) {\n        const labelClasses = classNames(\n            !supportingText && 'display-inline-block',\n            supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n            className\n        );\n\n        return (\n            // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>\n            <label ref={elementRef as React.RefObject<HTMLLabelElement>} {...remainingProps} className={labelClasses}>\n                <span>{children}</span>\n                {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n            </label>\n        );\n    }\n\n    const classes = classNames(\n        'text-color-dark',\n        'max-width-100pct',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12',\n        !supportingText && 'display-inline-block',\n        supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n        !className.includes('margin-bottom') && 'margin-bottom-5',\n        className\n    );\n\n    return (\n        // @ts-ignore\n        <div ref={elementRef} {...remainingProps} className={classes}>\n            {children}\n            {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n        </div>\n    );\n};\n\nexport default FormLabel;\n"],"names":["FormLabel","props","className","children","supportingText","remainingProps","elementRef","useRef","parentSize","setParentSize","useState","isLabel","useEffect","parent","supportingTextClasses","classNames","labelClasses","jsx","classes"],"mappings":";;;AAeA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,gBAAAC,GAAgB,GAAGC,MAAmBJ,GAElEK,IAAaC,EAA0C,IAAI,GAE3D,CAACC,GAAYC,CAAa,IAAIC,EAA6B,IAAI,GAE/DC,IAAU,aAAaN;AAE7B,EAAAO,EAAU,MAAM;AACZ,QAAI,CAACN,EAAW;AACZ;AAGJ,UAAMO,IAASP,EAAW,QAAQ;AAClC,IAAKO,MAIDA,EAAO,UAAU,SAAS,eAAe,IACzCJ,EAAc,IAAI,IACXI,EAAO,UAAU,SAAS,eAAe,KAChDJ,EAAc,IAAI;AAAA,EAE1B,GAAG,CAAA,CAAE;AAEL,QAAMK,IAAwBC;AAAA,IAC1B;AAAA,IACA,OAAOX,KAAmB,YAAY;AAAA,IACtCI,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,EAAA;AAGnB,MAAIG,KAAWN,EAAe,SAAS;AACnC,UAAMW,IAAeD;AAAA,MACjB,CAACX,KAAkB;AAAA,MACnBA,KAAkB;AAAA,MAClBF;AAAA,IAAA;AAGJ;AAAA;AAAA,wBAEK,SAAA,EAAM,KAAKI,GAAkD,GAAGD,GAAgB,WAAWW,GACxF,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAM,UAAAd,GAAS;AAAA,QACfC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,MAAA,EAAA,CAC/E;AAAA;AAAA,EAER;AAEA,QAAMc,IAAUH;AAAA,IACZ;AAAA,IACA;AAAA,IACAP,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,IACf,CAACJ,KAAkB;AAAA,IACnBA,KAAkB;AAAA,IAClB,CAACF,EAAU,SAAS,eAAe,KAAK;AAAA,IACxCA;AAAA,EAAA;AAGJ;AAAA;AAAA,sBAEK,OAAA,EAAI,KAAKI,GAAa,GAAGD,GAAgB,WAAWa,GAChD,UAAA;AAAA,MAAAf;AAAA,MACAC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,IAAA,EAAA,CAC/E;AAAA;AAER;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../src/components/formLabel/FormLabel.tsx"],"sourcesContent":["import React, { type PropsWithChildren, type ComponentProps, useEffect, useRef, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type FormLabelProps = ComponentProps<'label'> & {\n    /**\n     * Additional supporting text displayed next to the label.\n     */\n    supportingText?: string | React.ReactElement;\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst FormLabel = (props: PropsWithChildren<FormLabelProps>) => {\n    const { className = '', children, supportingText, ...remainingProps } = props;\n\n    const elementRef = useRef<HTMLDivElement | HTMLLabelElement>(null);\n\n    const [parentSize, setParentSize] = useState<'lg' | 'sm' | null>(null);\n\n    const isLabel = 'htmlFor' in remainingProps;\n\n    useEffect(() => {\n        if (!elementRef.current) {\n            return;\n        }\n\n        const parent = elementRef.current.parentElement;\n        if (!parent) {\n            return;\n        }\n\n        if (parent.classList.contains('form-group-lg')) {\n            setParentSize('lg');\n        } else if (parent.classList.contains('form-group-sm')) {\n            setParentSize('sm');\n        }\n    }, []);\n\n    const supportingTextClasses = classNames(\n        'text-color-gray',\n        typeof supportingText === 'string' && 'text-italic',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12'\n    );\n\n    if (isLabel && remainingProps.htmlFor) {\n        const labelClasses = classNames(\n            !supportingText && 'display-inline-block',\n            supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n            className\n        );\n\n        return (\n            <label ref={elementRef as React.RefObject<HTMLLabelElement>} {...remainingProps} className={labelClasses}>\n                <span>{children}</span>\n                {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n            </label>\n        );\n    }\n\n    const classes = classNames(\n        'text-color-dark',\n        'max-width-100pct',\n        parentSize === 'sm' && 'text-size-10',\n        parentSize === 'lg' && 'text-size-14',\n        !parentSize && 'text-size-12',\n        !supportingText && 'display-inline-block',\n        supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct',\n        !className.includes('margin-bottom') && 'margin-bottom-5',\n        className\n    );\n\n    return (\n        // @ts-expect-error\n        <div ref={elementRef} {...remainingProps} className={classes}>\n            {children}\n            {supportingText && <span className={supportingTextClasses}>{supportingText}</span>}\n        </div>\n    );\n};\n\nexport default FormLabel;\n"],"names":["FormLabel","props","className","children","supportingText","remainingProps","elementRef","useRef","parentSize","setParentSize","useState","isLabel","useEffect","parent","supportingTextClasses","classNames","labelClasses","jsx","classes"],"mappings":";;;AAgBA,MAAMA,IAAY,CAACC,MAA6C;AAC5D,QAAM,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,gBAAAC,GAAgB,GAAGC,MAAmBJ,GAElEK,IAAaC,EAA0C,IAAI,GAE3D,CAACC,GAAYC,CAAa,IAAIC,EAA6B,IAAI,GAE/DC,IAAU,aAAaN;AAE7B,EAAAO,EAAU,MAAM;AACZ,QAAI,CAACN,EAAW;AACZ;AAGJ,UAAMO,IAASP,EAAW,QAAQ;AAClC,IAAKO,MAIDA,EAAO,UAAU,SAAS,eAAe,IACzCJ,EAAc,IAAI,IACXI,EAAO,UAAU,SAAS,eAAe,KAChDJ,EAAc,IAAI;AAAA,EAE1B,GAAG,CAAA,CAAE;AAEL,QAAMK,IAAwBC;AAAA,IAC1B;AAAA,IACA,OAAOX,KAAmB,YAAY;AAAA,IACtCI,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,EAAA;AAGnB,MAAIG,KAAWN,EAAe,SAAS;AACnC,UAAMW,IAAeD;AAAA,MACjB,CAACX,KAAkB;AAAA,MACnBA,KAAkB;AAAA,MAClBF;AAAA,IAAA;AAGJ,6BACK,SAAA,EAAM,KAAKI,GAAkD,GAAGD,GAAgB,WAAWW,GACxF,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAM,UAAAd,GAAS;AAAA,MACfC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,IAAA,GAC/E;AAAA,EAER;AAEA,QAAMc,IAAUH;AAAA,IACZ;AAAA,IACA;AAAA,IACAP,MAAe,QAAQ;AAAA,IACvBA,MAAe,QAAQ;AAAA,IACvB,CAACA,KAAc;AAAA,IACf,CAACJ,KAAkB;AAAA,IACnBA,KAAkB;AAAA,IAClB,CAACF,EAAU,SAAS,eAAe,KAAK;AAAA,IACxCA;AAAA,EAAA;AAGJ;AAAA;AAAA,sBAEK,OAAA,EAAI,KAAKI,GAAa,GAAGD,GAAgB,WAAWa,GAChD,UAAA;AAAA,MAAAf;AAAA,MACAC,KAAkB,gBAAAa,EAAC,QAAA,EAAK,WAAWH,GAAwB,UAAAV,EAAA,CAAe;AAAA,IAAA,EAAA,CAC/E;AAAA;AAER;"}

package/components/formLabel/LabeledElement.js

@@ -1,5 +1,5 @@
 import { jsxs as d, jsx as p } from "react/jsx-runtime";
-import e from "classnames";
+import e from "../../utils/classNames.js";
 import f from "./FormLabel.js";
 const L = (l) => {
   const { label: a, htmlFor: s, labelProps: m = {}, noGap: o = !1, className: r = "", children: n, ...t } = l, { className: c, ...i } = m, b = e(c, o && "margin-bottom-0");

package/components/formLabel/LabeledElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledElement.js","sources":["../../../src/components/formLabel/LabeledElement.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport FormLabel, { type FormLabelProps } from './FormLabel';\n\nexport type LabeledElementProps = {\n    /**\n     * The text to display for the label.\n     */\n    label: string | React.ReactElement;\n\n    /**\n     * Optional ID of the element associated with the label.\n     */\n    htmlFor?: string;\n\n    /**\n     * Additional props for the FormLabel, excluding children and htmlFor.\n     */\n    labelProps?: Omit<FormLabelProps, 'children'>;\n\n    /**\n     * If true, removes the bottom margin from the label.\n     *\n     * @default false\n     */\n    noGap?: boolean;\n\n    /**\n     * Additional classes for styling the wrapper.\n     */\n    className?: string;\n};\n\nconst LabeledElement = (props: PropsWithChildren<LabeledElementProps>) => {\n    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;\n\n    // Extract and handle the `className` prop separately for the label\n    const { className: labelClassName, ...otherLabelProps } = labelProps;\n    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');\n\n    return (\n        <div {...remainingProps} className={classNames('LabeledElement display-flex flex-column', className)}>\n            <FormLabel htmlFor={htmlFor} {...otherLabelProps} className={combinedLabelClassName}>\n                {label}\n            </FormLabel>\n            {children}\n        </div>\n    );\n};\n\nexport default LabeledElement;\n"],"names":["LabeledElement","props","label","htmlFor","labelProps","noGap","className","children","remainingProps","labelClassName","otherLabelProps","combinedLabelClassName","classNames","jsxs","jsx","FormLabel"],"mappings":";;;AAmCA,MAAMA,IAAiB,CAACC,MAAkD;AACtE,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,YAAAC,IAAa,CAAA,GAAI,OAAAC,IAAQ,IAAO,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBP,GAGlG,EAAE,WAAWQ,GAAgB,GAAGC,MAAoBN,GACpDO,IAAyBC,EAAWH,GAAgBJ,KAAS,iBAAiB;AAEpF,SACI,gBAAAQ,EAAC,SAAK,GAAGL,GAAgB,WAAWI,EAAW,2CAA2CN,CAAS,GAC/F,UAAA;AAAA,IAAA,gBAAAQ,EAACC,KAAU,SAAAZ,GAAmB,GAAGO,GAAiB,WAAWC,GACxD,UAAAT,GACL;AAAA,IACCK;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"LabeledElement.js","sources":["../../../src/components/formLabel/LabeledElement.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport FormLabel, { type FormLabelProps } from './FormLabel';\n\nexport type LabeledElementProps = {\n    /**\n     * The text to display for the label.\n     */\n    label: string | React.ReactElement;\n\n    /**\n     * Optional ID of the element associated with the label.\n     */\n    htmlFor?: string;\n\n    /**\n     * Additional props for the FormLabel, excluding children and htmlFor.\n     */\n    labelProps?: Omit<FormLabelProps, 'children'>;\n\n    /**\n     * If true, removes the bottom margin from the label.\n     *\n     * @default false\n     */\n    noGap?: boolean;\n\n    /**\n     * Additional classes for styling the wrapper.\n     */\n    className?: string;\n};\n\nconst LabeledElement = (props: PropsWithChildren<LabeledElementProps>) => {\n    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;\n\n    // Extract and handle the `className` prop separately for the label\n    const { className: labelClassName, ...otherLabelProps } = labelProps;\n    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');\n\n    return (\n        <div {...remainingProps} className={classNames('LabeledElement display-flex flex-column', className)}>\n            <FormLabel htmlFor={htmlFor} {...otherLabelProps} className={combinedLabelClassName}>\n                {label}\n            </FormLabel>\n            {children}\n        </div>\n    );\n};\n\nexport default LabeledElement;\n"],"names":["LabeledElement","props","label","htmlFor","labelProps","noGap","className","children","remainingProps","labelClassName","otherLabelProps","combinedLabelClassName","classNames","jsxs","jsx","FormLabel"],"mappings":";;;AAmCA,MAAMA,IAAiB,CAACC,MAAkD;AACtE,QAAM,EAAE,OAAAC,GAAO,SAAAC,GAAS,YAAAC,IAAa,CAAA,GAAI,OAAAC,IAAQ,IAAO,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,MAAmBP,GAGlG,EAAE,WAAWQ,GAAgB,GAAGC,MAAoBN,GACpDO,IAAyBC,EAAWH,GAAgBJ,KAAS,iBAAiB;AAEpF,SACI,gBAAAQ,EAAC,SAAK,GAAGL,GAAgB,WAAWI,EAAW,2CAA2CN,CAAS,GAC/F,UAAA;AAAA,IAAA,gBAAAQ,EAACC,KAAU,SAAAZ,GAAmB,GAAGO,GAAiB,WAAWC,GACxD,UAAAT,GACL;AAAA,IACCK;AAAA,EAAA,GACL;AAER;"}

package/components/groupedItemList/GroupedItemList.d.ts

@@ -8,25 +8,26 @@ export type GroupedItemListProps<T> = {
     /**
      * The list of items to be grouped and rendered.
      *
-     * By default, the component assumes an item object containing an 'id' and 'name' property
+     * By default, the component assumes an item object containing an `id` and `name` property
      * plus some other attributes.
      */
     items: T[];
     /**
      * The property of the items to group by as a string, or a custom group function.
-     * Defaults to 'name' if not provided.
+     * Defaults to `name` if not provided.
      *
      * @default 'name'
      */
     groupBy?: keyof T | ((item: T) => string);
     /**
-     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.
-     * @default 'asc'.
+     * The order in which to sort the groups. Accepts `asc` for ascending or `desc` for descending.
+     * @default 'asc'
      */
     groupSortOrder?: SortDirectionType;
     /**
-     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.
-     * @default 'asc'.
+     * The order in which to sort the items inside a group. Accepts `asc` for ascending or `desc` for descending.
+     *
+     * @default 'asc'
      */
     itemSortOrder?: SortDirectionType;
     /**
@@ -49,7 +50,9 @@ export type GroupedItemListProps<T> = {
     renderItem?: (item: T) => React.ReactNode;
     /**
      * Specifies the HTML element to use for the list inside each group.
-     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.
+     * Default is `div`. Use `ul` for rendering the list items as `<li>` elements.
+     *
+     * @default 'div'
      */
     listElement?: 'div' | 'ul';
     /**

package/components/groupedItemList/GroupedItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedItemList.js","sources":["../../../src/components/groupedItemList/GroupedItemList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { naturalSortByProperty, sortByProperty, type SortDirectionType } from '../../SortUtils';\n\nexport type Group = {\n    groupKey: string;\n    items: any[];\n};\n\nexport type GroupedItemListProps<T> = {\n    /**\n     * The list of items to be grouped and rendered.\n     *\n     * By default, the component assumes an item object containing an 'id' and 'name' property\n     * plus some other attributes.\n     */\n    items: T[];\n\n    /**\n     * The property of the items to group by as a string, or a custom group function.\n     * Defaults to 'name' if not provided.\n     *\n     * @default 'name'\n     */\n    groupBy?: keyof T | ((item: T) => string);\n\n    /**\n     * The order in which to sort the groups. Accepts 'asc' for ascending or 'desc' for descending.\n     * @default 'asc'.\n     */\n    groupSortOrder?: SortDirectionType;\n\n    /**\n     * The order in which to sort the items inside a group. Accepts 'asc' for ascending or 'desc' for descending.\n     * @default 'asc'.\n     */\n    itemSortOrder?: SortDirectionType;\n\n    /**\n     * Sorting function for the groups.\n     */\n    groupSortFunction?: (groups: Group[]) => Group[];\n\n    /**\n     * Sorting function for the items within each group.\n     */\n    itemSortFunction?: (items: T[]) => T[];\n\n    /**\n     * A custom render function for the group divider.\n     * Receives the group key (e.g., letter or date) as a parameter.\n     */\n    renderDivider?: (groupKey: string) => React.ReactNode;\n\n    /**\n     * A custom render function for individual list items.\n     * Receives an item as a parameter.\n     */\n    renderItem?: (item: T) => React.ReactNode;\n\n    /**\n     * Specifies the HTML element to use for the list inside each group.\n     * Default is 'div'. Use 'ul' for rendering the list items as `<li>` elements.\n     */\n    listElement?: 'div' | 'ul';\n\n    /**\n     * Optional class name for the list element inside each group.\n     * Applied to the `div` or `ul` wrapping the items.\n     */\n    listElementClassName?: string;\n\n    /**\n     * Optional class name for the divider element in each group.\n     * Applied to the `div` wrapping each group divider.\n     */\n    dividerElementClassName?: string;\n\n    /**\n     * Optional class name for the outer wrapper element.\n     * Applied to the outer `div` wrapping the entire component.\n     */\n    className?: string;\n};\n\n/**\n * A React component that groups and renders a list of items based on a specified property.\n * The component can be customized to render dividers and list items in different styles.\n *\n * @param {GroupedItemListProps} props - The props for the component.\n * @returns {JSX.Element} The grouped and rendered list component.\n */\nconst GroupedItemList = <T,>(props: GroupedItemListProps<T>) => {\n    const {\n        items,\n        groupBy = 'name',\n        groupSortOrder = 'asc', // Default to ascending order if not specified\n        groupSortFunction,\n        itemSortFunction,\n        itemSortOrder = 'asc', // Default to ascending order if not specified\n        renderDivider,\n        renderItem,\n        listElement = 'div', // Default to 'div' if not specified\n        listElementClassName,\n        dividerElementClassName,\n        className,\n    } = props;\n\n    // Default group sorting function or specific function provided\n    const groupSortFn = groupSortFunction\n        ? groupSortFunction\n        : (groups: Group[]) => naturalSortByProperty(groups, 'groupKey', groupSortOrder);\n\n    // Default item sorting within groups or specific function provided\n    const itemSortFn = itemSortFunction\n        ? itemSortFunction\n        : (itemsToSort: T[]) => sortByProperty(itemsToSort, groupBy as keyof T, itemSortOrder);\n\n    // Determine the grouping function based on the type of groupBy\n    // const getGroupKey = (item: T): string => {\n    //     if (typeof groupBy === 'string') {\n    //         if (groupBy === 'name') {\n    //             return (item as any).name?.[0]?.toUpperCase() ?? '';\n    //         }\n    //         return (item as any)[groupBy]?.toString() ?? '';\n    //     } else if (typeof groupBy === 'function') {\n    //         return groupBy(item);\n    //     }\n    //     throw new Error('Please define a \"groupBy\" property as a string or function.');\n    // };\n\n    const getGroupKey =\n        typeof groupBy === 'function'\n            ? groupBy\n            : (item: T) => ((item as any)[groupBy] as string)?.[0]?.toUpperCase() ?? '';\n\n    // Group items by the specified property\n    // const allGroups = useMemo(\n    //     () =>\n    //         items.reduce<Record<string, T[]>>((acc, item) => {\n    //             const groupKey = getGroupKey(item);\n    //             if (!acc[groupKey]) {\n    //                 acc[groupKey] = [];\n    //             }\n    //             acc[groupKey].push(item);\n    //             return acc;\n    //         }, {}),\n    //     [items, getGroupKey]\n    // );\n\n    // Group items by the specified property\n    const groupedItems = useMemo(() => {\n        // Explicitly typing the accumulator as Record<string, T[]>\n        const groups: Record<string, T[]> = items.reduce(\n            (acc: Record<string, T[]>, item: T) => {\n                const groupKey = getGroupKey(item);\n                if (!acc[groupKey]) {\n                    acc[groupKey] = [];\n                }\n                acc[groupKey].push(item);\n                return acc;\n            },\n            {} as Record<string, T[]>\n        );\n\n        return Object.keys(groups).map(groupKey => ({\n            groupKey,\n            items: groups[groupKey],\n        }));\n    }, [items, getGroupKey]);\n\n    // Assign the specified list element ('div' or 'ul')\n    const ListElement = listElement;\n\n    // Sort groups using the provided sort function\n    const sortedGroups = useMemo(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);\n\n    return (\n        <div className={`grouped-item-list ${className ?? ''}`}>\n            {sortedGroups.map(group => (\n                <React.Fragment key={group.groupKey}>\n                    <div className={`group-divider ${dividerElementClassName ?? ''}`}>\n                        {renderDivider ? renderDivider(group.groupKey) : group.groupKey}\n                    </div>\n                    <ListElement className={listElementClassName}>\n                        {itemSortFn(group.items).map(item =>\n                            renderItem ? (\n                                renderItem(item)\n                            ) : (\n                                <React.Fragment key={(item as any).id ?? crypto.randomUUID()}>\n                                    <div className='item-name'>{(item as any).name}</div>\n                                </React.Fragment>\n                            )\n                        )}\n                    </ListElement>\n                </React.Fragment>\n            ))}\n        </div>\n    );\n};\n\nexport default GroupedItemList;\n"],"names":["GroupedItemList","props","items","groupBy","groupSortOrder","groupSortFunction","itemSortFunction","itemSortOrder","renderDivider","renderItem","listElement","listElementClassName","dividerElementClassName","className","groupSortFn","groups","naturalSortByProperty","itemSortFn","itemsToSort","sortByProperty","getGroupKey","item","groupedItems","useMemo","acc","groupKey","ListElement","sortedGroups","jsx","group","jsxs","React"],"mappings":";;;AA4FA,MAAMA,IAAkB,CAAKC,MAAmC;AAC5D,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,gBAAAC,IAAiB;AAAA;AAAA,IACjB,mBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC,IAAc;AAAA;AAAA,IACd,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACAZ,GAGEa,IAAcT,MAEd,CAACU,MAAoBC,EAAsBD,GAAQ,YAAYX,CAAc,IAG7Ea,IAAaX,MAEb,CAACY,MAAqBC,EAAeD,GAAaf,GAAoBI,CAAa,IAenFa,IACF,OAAOjB,KAAY,aACbA,IACA,CAACkB,MAAcA,EAAalB,CAAO,IAAe,CAAC,GAAG,iBAAiB,IAiB3EmB,IAAeC,EAAQ,MAAM;AAE/B,UAAMR,IAA8Bb,EAAM;AAAA,MACtC,CAACsB,GAA0BH,MAAY;AACnC,cAAMI,IAAWL,EAAYC,CAAI;AACjC,eAAKG,EAAIC,CAAQ,MACbD,EAAIC,CAAQ,IAAI,CAAA,IAEpBD,EAAIC,CAAQ,EAAE,KAAKJ,CAAI,GAChBG;AAAA,MACX;AAAA,MACA,CAAA;AAAA,IAAC;AAGL,WAAO,OAAO,KAAKT,CAAM,EAAE,IAAI,CAAAU,OAAa;AAAA,MACxC,UAAAA;AAAA,MACA,OAAOV,EAAOU,CAAQ;AAAA,IAAA,EACxB;AAAA,EACN,GAAG,CAACvB,GAAOkB,CAAW,CAAC,GAGjBM,IAAchB,GAGdiB,IAAeJ,EAAQ,MAAMT,EAAYQ,CAAY,GAAG,CAACA,GAAcR,CAAW,CAAC;AAEzF,SACI,gBAAAc,EAAC,OAAA,EAAI,WAAW,qBAAqBf,KAAa,EAAE,IAC/C,UAAAc,EAAa,IAAI,CAAAE,MACd,gBAAAC,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAW,iBAAiBhB,KAA2B,EAAE,IACzD,UAAAJ,IAAgBA,EAAcqB,EAAM,QAAQ,IAAIA,EAAM,UAC3D;AAAA,sBACCH,GAAA,EAAY,WAAWf,GACnB,UAAAM,EAAWY,EAAM,KAAK,EAAE;AAAA,MAAI,CAAAR,MACzBZ,IACIA,EAAWY,CAAI,IAEf,gBAAAO,EAACG,EAAM,UAAN,EACG,UAAA,gBAAAH,EAAC,SAAI,WAAU,aAAc,YAAa,KAAA,CAAK,EAAA,GAD7BP,EAAa,MAAM,OAAO,YAEhD;AAAA,IAAA,EAER,CACJ;AAAA,EAAA,EAAA,GAdiBQ,EAAM,QAe3B,CACH,GACL;AAER;"}
+{"version":3,"file":"GroupedItemList.js","sources":["../../../src/components/groupedItemList/GroupedItemList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { naturalSortByProperty, sortByProperty, type SortDirectionType } from '../../SortUtils';\n\nexport type Group = {\n    groupKey: string;\n    items: any[];\n};\n\nexport type GroupedItemListProps<T> = {\n    /**\n     * The list of items to be grouped and rendered.\n     *\n     * By default, the component assumes an item object containing an `id` and `name` property\n     * plus some other attributes.\n     */\n    items: T[];\n\n    /**\n     * The property of the items to group by as a string, or a custom group function.\n     * Defaults to `name` if not provided.\n     *\n     * @default 'name'\n     */\n    groupBy?: keyof T | ((item: T) => string);\n\n    /**\n     * The order in which to sort the groups. Accepts `asc` for ascending or `desc` for descending.\n     * @default 'asc'\n     */\n    groupSortOrder?: SortDirectionType;\n\n    /**\n     * The order in which to sort the items inside a group. Accepts `asc` for ascending or `desc` for descending.\n     *\n     * @default 'asc'\n     */\n    itemSortOrder?: SortDirectionType;\n\n    /**\n     * Sorting function for the groups.\n     */\n    groupSortFunction?: (groups: Group[]) => Group[];\n\n    /**\n     * Sorting function for the items within each group.\n     */\n    itemSortFunction?: (items: T[]) => T[];\n\n    /**\n     * A custom render function for the group divider.\n     * Receives the group key (e.g., letter or date) as a parameter.\n     */\n    renderDivider?: (groupKey: string) => React.ReactNode;\n\n    /**\n     * A custom render function for individual list items.\n     * Receives an item as a parameter.\n     */\n    renderItem?: (item: T) => React.ReactNode;\n\n    /**\n     * Specifies the HTML element to use for the list inside each group.\n     * Default is `div`. Use `ul` for rendering the list items as `<li>` elements.\n     *\n     * @default 'div'\n     */\n    listElement?: 'div' | 'ul';\n\n    /**\n     * Optional class name for the list element inside each group.\n     * Applied to the `div` or `ul` wrapping the items.\n     */\n    listElementClassName?: string;\n\n    /**\n     * Optional class name for the divider element in each group.\n     * Applied to the `div` wrapping each group divider.\n     */\n    dividerElementClassName?: string;\n\n    /**\n     * Optional class name for the outer wrapper element.\n     * Applied to the outer `div` wrapping the entire component.\n     */\n    className?: string;\n};\n\n/**\n * A React component that groups and renders a list of items based on a specified property.\n * The component can be customized to render dividers and list items in different styles.\n *\n * @param {GroupedItemListProps} props - The props for the component.\n * @returns {JSX.Element} The grouped and rendered list component.\n */\nconst GroupedItemList = <T,>(props: GroupedItemListProps<T>) => {\n    const {\n        items,\n        groupBy = 'name',\n        groupSortOrder = 'asc', // Default to ascending order if not specified\n        groupSortFunction,\n        itemSortFunction,\n        itemSortOrder = 'asc', // Default to ascending order if not specified\n        renderDivider,\n        renderItem,\n        listElement = 'div', // Default to 'div' if not specified\n        listElementClassName,\n        dividerElementClassName,\n        className,\n    } = props;\n\n    // Default group sorting function or specific function provided\n    const groupSortFn = groupSortFunction\n        ? groupSortFunction\n        : (groups: Group[]) => naturalSortByProperty(groups, 'groupKey', groupSortOrder);\n\n    // Default item sorting within groups or specific function provided\n    const itemSortFn = itemSortFunction\n        ? itemSortFunction\n        : (itemsToSort: T[]) => sortByProperty(itemsToSort, groupBy as keyof T, itemSortOrder);\n\n    // Determine the grouping function based on the type of groupBy\n    // const getGroupKey = (item: T): string => {\n    //     if (typeof groupBy === 'string') {\n    //         if (groupBy === 'name') {\n    //             return (item as any).name?.[0]?.toUpperCase() ?? '';\n    //         }\n    //         return (item as any)[groupBy]?.toString() ?? '';\n    //     } else if (typeof groupBy === 'function') {\n    //         return groupBy(item);\n    //     }\n    //     throw new Error('Please define a \"groupBy\" property as a string or function.');\n    // };\n\n    const getGroupKey =\n        typeof groupBy === 'function'\n            ? groupBy\n            : (item: T) => ((item as any)[groupBy] as string)?.[0]?.toUpperCase() ?? '';\n\n    // Group items by the specified property\n    // const allGroups = useMemo(\n    //     () =>\n    //         items.reduce<Record<string, T[]>>((acc, item) => {\n    //             const groupKey = getGroupKey(item);\n    //             if (!acc[groupKey]) {\n    //                 acc[groupKey] = [];\n    //             }\n    //             acc[groupKey].push(item);\n    //             return acc;\n    //         }, {}),\n    //     [items, getGroupKey]\n    // );\n\n    // Group items by the specified property\n    const groupedItems = useMemo(() => {\n        // Explicitly typing the accumulator as Record<string, T[]>\n        const groups: Record<string, T[]> = items.reduce(\n            (acc: Record<string, T[]>, item: T) => {\n                const groupKey = getGroupKey(item);\n                if (!acc[groupKey]) {\n                    acc[groupKey] = [];\n                }\n                acc[groupKey].push(item);\n                return acc;\n            },\n            {} as Record<string, T[]>\n        );\n\n        return Object.keys(groups).map(groupKey => ({\n            groupKey,\n            items: groups[groupKey],\n        }));\n    }, [items, getGroupKey]);\n\n    // Assign the specified list element ('div' or 'ul')\n    const ListElement = listElement;\n\n    // Sort groups using the provided sort function\n    const sortedGroups = useMemo(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);\n\n    return (\n        <div className={`grouped-item-list ${className ?? ''}`}>\n            {sortedGroups.map(group => (\n                <React.Fragment key={group.groupKey}>\n                    <div className={`group-divider ${dividerElementClassName ?? ''}`}>\n                        {renderDivider ? renderDivider(group.groupKey) : group.groupKey}\n                    </div>\n                    <ListElement className={listElementClassName}>\n                        {itemSortFn(group.items).map(item =>\n                            renderItem ? (\n                                renderItem(item)\n                            ) : (\n                                <React.Fragment key={(item as any).id ?? crypto.randomUUID()}>\n                                    <div className='item-name'>{(item as any).name}</div>\n                                </React.Fragment>\n                            )\n                        )}\n                    </ListElement>\n                </React.Fragment>\n            ))}\n        </div>\n    );\n};\n\nexport default GroupedItemList;\n"],"names":["GroupedItemList","props","items","groupBy","groupSortOrder","groupSortFunction","itemSortFunction","itemSortOrder","renderDivider","renderItem","listElement","listElementClassName","dividerElementClassName","className","groupSortFn","groups","naturalSortByProperty","itemSortFn","itemsToSort","sortByProperty","getGroupKey","item","groupedItems","useMemo","acc","groupKey","ListElement","sortedGroups","jsx","group","jsxs","React"],"mappings":";;;AA+FA,MAAMA,IAAkB,CAAKC,MAAmC;AAC5D,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,gBAAAC,IAAiB;AAAA;AAAA,IACjB,mBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC,IAAc;AAAA;AAAA,IACd,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACAZ,GAGEa,IAAcT,MAEd,CAACU,MAAoBC,EAAsBD,GAAQ,YAAYX,CAAc,IAG7Ea,IAAaX,MAEb,CAACY,MAAqBC,EAAeD,GAAaf,GAAoBI,CAAa,IAenFa,IACF,OAAOjB,KAAY,aACbA,IACA,CAACkB,MAAcA,EAAalB,CAAO,IAAe,CAAC,GAAG,iBAAiB,IAiB3EmB,IAAeC,EAAQ,MAAM;AAE/B,UAAMR,IAA8Bb,EAAM;AAAA,MACtC,CAACsB,GAA0BH,MAAY;AACnC,cAAMI,IAAWL,EAAYC,CAAI;AACjC,eAAKG,EAAIC,CAAQ,MACbD,EAAIC,CAAQ,IAAI,CAAA,IAEpBD,EAAIC,CAAQ,EAAE,KAAKJ,CAAI,GAChBG;AAAA,MACX;AAAA,MACA,CAAA;AAAA,IAAC;AAGL,WAAO,OAAO,KAAKT,CAAM,EAAE,IAAI,CAAAU,OAAa;AAAA,MACxC,UAAAA;AAAA,MACA,OAAOV,EAAOU,CAAQ;AAAA,IAAA,EACxB;AAAA,EACN,GAAG,CAACvB,GAAOkB,CAAW,CAAC,GAGjBM,IAAchB,GAGdiB,IAAeJ,EAAQ,MAAMT,EAAYQ,CAAY,GAAG,CAACA,GAAcR,CAAW,CAAC;AAEzF,SACI,gBAAAc,EAAC,OAAA,EAAI,WAAW,qBAAqBf,KAAa,EAAE,IAC/C,UAAAc,EAAa,IAAI,CAAAE,MACd,gBAAAC,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAW,iBAAiBhB,KAA2B,EAAE,IACzD,UAAAJ,IAAgBA,EAAcqB,EAAM,QAAQ,IAAIA,EAAM,UAC3D;AAAA,sBACCH,GAAA,EAAY,WAAWf,GACnB,UAAAM,EAAWY,EAAM,KAAK,EAAE;AAAA,MAAI,CAAAR,MACzBZ,IACIA,EAAWY,CAAI,IAEf,gBAAAO,EAACG,EAAM,UAAN,EACG,UAAA,gBAAAH,EAAC,SAAI,WAAU,aAAc,YAAa,KAAA,CAAK,EAAA,GAD7BP,EAAa,MAAM,OAAO,YAEhD;AAAA,IAAA,EAER,CACJ;AAAA,EAAA,EAAA,GAdiBQ,EAAM,QAe3B,CACH,GACL;AAER;"}

package/components/listMenu/ListMenu.js

@@ -1,7 +1,7 @@
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
 import { useState as i, useRef as b, useEffect as x } from "react";
 import { isEmpty as _ } from "es-toolkit/compat";
-import j from "classnames";
+import j from "../../utils/classNames.js";
 import A from "../../hooks/useEffectOnce.js";
 import D from "../clearableInput/ClearableInput.js";
 import G from "../expander/ExpanderPanel.js";
@@ -87,10 +87,7 @@ const J = 10, Q = 580, U = (n, s, r) => n.map((o) => ({
       h && h
     ] }) }),
     !Y(I) && /* @__PURE__ */ t("div", { className: "padding-top-25 text-center text-color-gray", children: L }),
-    I.map((e, p) => (
-      // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates
-      /* @__PURE__ */ t(V, { className: k, menuGroup: e }, p)
-    ))
+    I.map((e, p) => /* @__PURE__ */ t(V, { className: k, menuGroup: e }, p))
   ] });
   return f && T ? /* @__PURE__ */ t(
     G,

package/components/listMenu/ListMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenu.js","sources":["../../../src/components/listMenu/ListMenu.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: <explanation>\nimport React, { useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport classNames from 'classnames';\n\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport ExpanderPanel from '../expander/ExpanderPanel';\nimport ListMenuGroup, { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';\nimport useEsc from '../../hooks/useEsc';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useKey from '../../hooks/useKey';\nimport { debounce } from 'es-toolkit/function';\n\nexport type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';\n\nconst RESIZE_THROTTLING = 10;\nconst MOBILE_MAX_WIDTH = 580;\n\nconst filterMenuItems = <T extends ListMenuNavItem>(\n    items: ListMenuItem<T>[],\n    value: string,\n    filterKey: keyof T\n): ListMenuItem<T>[] =>\n    items.map(item => ({\n        ...item,\n        navItems: item.navItems.filter(navItem =>\n            (navItem[filterKey] as string).toLowerCase().includes(value.toLowerCase())\n        ),\n    }));\n\nconst hasMenuItems = <T extends ListMenuNavItem>(items: ListMenuItem<T>[]) =>\n    items.find(({ navItems }) => !isEmpty(navItems));\n\nexport type ListMenuProps<T extends ListMenuNavItem> = {\n    /**\n     * List of menu item groups to be shown.\n     */\n    menuItems: ListMenuItem<T>[];\n\n    /**\n     * Enables the filter.\n     *\n     * @default false\n     */\n    enableFilter?: boolean;\n\n    /**\n     * Focus the filter input.\n     *\n     * @default false\n     */\n    focusFilter?: boolean;\n\n    /**\n     * Define the attribute key for filtering.\n     *\n     * @default 'key'\n     */\n    filterKey?: keyof T;\n\n    /**\n     * The placeholder text for the filter input.\n     */\n    filterPlaceholder?: string;\n\n    /**\n     * Gets called when the filter input changes.\n     *\n     * @param value\n     * @returns\n     */\n    onFilterChange?: (value: string) => void;\n\n    /**\n     * A localized message to be shown when the filter result is empty.\n     */\n    notFoundMessage?: string | ReactNode;\n\n    /**\n     * The menu uses collapses on smaller screens using an expander panel.\n     *\n     * @default true\n     */\n    responsive?: boolean;\n\n    /**\n     * Enables automatic closing of the expander panel.\n     *\n     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when\n     * clicking on a list item!\n     *\n     * Using `event.stopPropagation()` will prevent the panel from closing.\n     *\n     * @default true\n     */\n    autoClose?: boolean;\n\n    /**\n     * Additional classes to be set on the menu group element.\n     */\n    groupClassName?: string;\n\n    /**\n     * Additional addon for the input group.\n     */\n    trailingInputAddon?: React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst ListMenu = <T extends ListMenuNavItem>(props: ListMenuProps<T>) => {\n    const {\n        menuItems,\n        focusFilter = false,\n        enableFilter = false,\n        filterPlaceholder,\n        onFilterChange = () => {},\n        notFoundMessage,\n        className = '',\n        groupClassName = '',\n        responsive = true,\n        autoClose = true,\n        filterKey = 'key',\n        trailingInputAddon,\n        ...remainingProps\n    } = props;\n\n    const [filterValue, setFilterValue] = useState('');\n    const [isMobileMode, setIsMobileMode] = useState(false);\n    const [isExpanderOpen, setIsExpanderOpen] = useState(false);\n    const [mobileHeader, setMobileHeader] = useState<ReactNode>('');\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    const buildMobileHeader = () => {\n        if (responsive && listRef.current) {\n            const [activeElement] = listRef.current.getElementsByClassName('active') as HTMLCollectionOf<HTMLElement>;\n            setMobileHeader(\n                <div className='display-flex align-items-center'>\n                    <span className='rioglyph rioglyph-menu-hamburger margin-right-10' />\n                    <span>{activeElement?.innerText}</span>\n                </div>\n            );\n        }\n    };\n\n    // clear filter input on esc\n    useEsc(() => {\n        if (enableFilter && inputRef.current === document.activeElement) {\n            setFilterValue('');\n        }\n    });\n\n    // Convert the menu to an expandable panel for smaller screens\n    const handleMobileSize = debounce(() => {\n        buildMobileHeader();\n        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);\n    }, RESIZE_THROTTLING);\n\n    // Render a dropdown menu on mobile on mount\n    useEffect(handleMobileSize, []);\n\n    useWindowResize(handleMobileSize);\n\n    const focusInput = () => {\n        inputRef.current?.focus();\n    };\n\n    useKey((event: KeyboardEvent) => {\n        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n            event.preventDefault();\n            focusInput();\n        }\n    });\n\n    // Focus filter input if requested\n    useEffectOnce(() => {\n        focusFilter && focusInput();\n    });\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => buildMobileHeader, [menuItems]);\n\n    const handleClear = () => focusFilter && focusInput();\n\n    const handleFilterChange = (value: string) => {\n        setFilterValue(value);\n        onFilterChange(value);\n    };\n\n    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);\n\n    const handleExpanderBodyClick = (event: MouseEvent) => {\n        const isListItem = (event.target as HTMLDivElement).parentElement?.tagName.toLowerCase() === 'li';\n        if (autoClose && isListItem) {\n            setIsExpanderOpen(false);\n        }\n    };\n\n    const formClassNames = classNames(\n        'form-group',\n        'margin-bottom-5',\n        'padding-left-15',\n        'padding-right-15',\n        'padding-bottom-15',\n        'position-sticky',\n        'top-0',\n        'z-index-1'\n    );\n\n    const listMenu = (\n        <div {...remainingProps} className={`ListMenu ${className} ${filterValue ? 'filtered' : ''}`} ref={listRef}>\n            {enableFilter && (\n                <div className={formClassNames}>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                        </span>\n                        <ClearableInput\n                            value={filterValue}\n                            inputRef={inputRef}\n                            placeholder={filterPlaceholder}\n                            onChange={handleFilterChange}\n                            onClear={handleClear}\n                        />\n                        {trailingInputAddon && trailingInputAddon}\n                    </div>\n                </div>\n            )}\n\n            {!hasMenuItems(filteredMenuItems) && (\n                <div className='padding-top-25 text-center text-color-gray'>{notFoundMessage}</div>\n            )}\n\n            {filteredMenuItems.map((menuGroup, index) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates\n                <ListMenuGroup key={index} className={groupClassName} menuGroup={menuGroup} />\n            ))}\n        </div>\n    );\n\n    if (responsive && isMobileMode) {\n        return (\n            <ExpanderPanel\n                title={mobileHeader}\n                bsStyle='default'\n                open={isExpanderOpen}\n                onToggle={() => setIsExpanderOpen(!isExpanderOpen)}\n                unmountOnExit={false}\n                className='shadow-default'\n            >\n                <div onClick={handleExpanderBodyClick}>{listMenu}</div>\n            </ExpanderPanel>\n        );\n    }\n\n    return listMenu;\n};\n\nexport default ListMenu;\n"],"names":["RESIZE_THROTTLING","MOBILE_MAX_WIDTH","filterMenuItems","items","value","filterKey","item","navItem","hasMenuItems","navItems","isEmpty","ListMenu","props","menuItems","focusFilter","enableFilter","filterPlaceholder","onFilterChange","notFoundMessage","className","groupClassName","responsive","autoClose","trailingInputAddon","remainingProps","filterValue","setFilterValue","useState","isMobileMode","setIsMobileMode","isExpanderOpen","setIsExpanderOpen","mobileHeader","setMobileHeader","inputRef","useRef","listRef","buildMobileHeader","activeElement","jsxs","jsx","useEsc","handleMobileSize","debounce","useEffect","useWindowResize","focusInput","useKey","event","useEffectOnce","handleClear","handleFilterChange","filteredMenuItems","handleExpanderBodyClick","isListItem","formClassNames","classNames","listMenu","ClearableInput","menuGroup","index","ListMenuGroup","ExpanderPanel"],"mappings":"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"}
+{"version":3,"file":"ListMenu.js","sources":["../../../src/components/listMenu/ListMenu.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type MouseEvent, type ReactNode } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport useEffectOnce from '../../hooks/useEffectOnce';\nimport ClearableInput from '../clearableInput/ClearableInput';\nimport ExpanderPanel from '../expander/ExpanderPanel';\nimport ListMenuGroup, { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';\nimport useEsc from '../../hooks/useEsc';\nimport useWindowResize from '../../hooks/useWindowResize';\nimport useKey from '../../hooks/useKey';\nimport { debounce } from 'es-toolkit/function';\n\nexport type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';\n\nconst RESIZE_THROTTLING = 10;\nconst MOBILE_MAX_WIDTH = 580;\n\nconst filterMenuItems = <T extends ListMenuNavItem>(\n    items: ListMenuItem<T>[],\n    value: string,\n    filterKey: keyof T\n): ListMenuItem<T>[] =>\n    items.map(item => ({\n        ...item,\n        navItems: item.navItems.filter(navItem =>\n            (navItem[filterKey] as string).toLowerCase().includes(value.toLowerCase())\n        ),\n    }));\n\nconst hasMenuItems = <T extends ListMenuNavItem>(items: ListMenuItem<T>[]) =>\n    items.find(({ navItems }) => !isEmpty(navItems));\n\nexport type ListMenuProps<T extends ListMenuNavItem> = {\n    /**\n     * List of menu item groups to be shown.\n     */\n    menuItems: ListMenuItem<T>[];\n\n    /**\n     * Enables the filter.\n     *\n     * @default false\n     */\n    enableFilter?: boolean;\n\n    /**\n     * Focus the filter input.\n     *\n     * @default false\n     */\n    focusFilter?: boolean;\n\n    /**\n     * Define the attribute key for filtering.\n     *\n     * @default 'key'\n     */\n    filterKey?: keyof T;\n\n    /**\n     * The placeholder text for the filter input.\n     */\n    filterPlaceholder?: string;\n\n    /**\n     * Gets called when the filter input changes.\n     *\n     * @param value\n     * @returns\n     */\n    onFilterChange?: (value: string) => void;\n\n    /**\n     * A localized message to be shown when the filter result is empty.\n     */\n    notFoundMessage?: string | ReactNode;\n\n    /**\n     * The menu uses collapses on smaller screens using an expander panel.\n     *\n     * @default true\n     */\n    responsive?: boolean;\n\n    /**\n     * Enables automatic closing of the expander panel.\n     *\n     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when\n     * clicking on a list item!\n     *\n     * Using `event.stopPropagation()` will prevent the panel from closing.\n     *\n     * @default true\n     */\n    autoClose?: boolean;\n\n    /**\n     * Additional classes to be set on the menu group element.\n     */\n    groupClassName?: string;\n\n    /**\n     * Additional addon for the input group.\n     */\n    trailingInputAddon?: React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst ListMenu = <T extends ListMenuNavItem>(props: ListMenuProps<T>) => {\n    const {\n        menuItems,\n        focusFilter = false,\n        enableFilter = false,\n        filterPlaceholder,\n        onFilterChange = () => {},\n        notFoundMessage,\n        className = '',\n        groupClassName = '',\n        responsive = true,\n        autoClose = true,\n        filterKey = 'key',\n        trailingInputAddon,\n        ...remainingProps\n    } = props;\n\n    const [filterValue, setFilterValue] = useState('');\n    const [isMobileMode, setIsMobileMode] = useState(false);\n    const [isExpanderOpen, setIsExpanderOpen] = useState(false);\n    const [mobileHeader, setMobileHeader] = useState<ReactNode>('');\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    const buildMobileHeader = () => {\n        if (responsive && listRef.current) {\n            const [activeElement] = listRef.current.getElementsByClassName('active') as HTMLCollectionOf<HTMLElement>;\n            setMobileHeader(\n                <div className='display-flex align-items-center'>\n                    <span className='rioglyph rioglyph-menu-hamburger margin-right-10' />\n                    <span>{activeElement?.innerText}</span>\n                </div>\n            );\n        }\n    };\n\n    // clear filter input on esc\n    useEsc(() => {\n        if (enableFilter && inputRef.current === document.activeElement) {\n            setFilterValue('');\n        }\n    });\n\n    // Convert the menu to an expandable panel for smaller screens\n    const handleMobileSize = debounce(() => {\n        buildMobileHeader();\n        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);\n    }, RESIZE_THROTTLING);\n\n    // Render a dropdown menu on mobile on mount\n    useEffect(handleMobileSize, []);\n\n    useWindowResize(handleMobileSize);\n\n    const focusInput = () => {\n        inputRef.current?.focus();\n    };\n\n    useKey((event: KeyboardEvent) => {\n        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {\n            event.preventDefault();\n            focusInput();\n        }\n    });\n\n    // Focus filter input if requested\n    useEffectOnce(() => {\n        focusFilter && focusInput();\n    });\n\n    useEffect(() => buildMobileHeader, [menuItems]);\n\n    const handleClear = () => focusFilter && focusInput();\n\n    const handleFilterChange = (value: string) => {\n        setFilterValue(value);\n        onFilterChange(value);\n    };\n\n    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);\n\n    const handleExpanderBodyClick = (event: MouseEvent) => {\n        const isListItem = (event.target as HTMLDivElement).parentElement?.tagName.toLowerCase() === 'li';\n        if (autoClose && isListItem) {\n            setIsExpanderOpen(false);\n        }\n    };\n\n    const formClassNames = classNames(\n        'form-group',\n        'margin-bottom-5',\n        'padding-left-15',\n        'padding-right-15',\n        'padding-bottom-15',\n        'position-sticky',\n        'top-0',\n        'z-index-1'\n    );\n\n    const listMenu = (\n        <div {...remainingProps} className={`ListMenu ${className} ${filterValue ? 'filtered' : ''}`} ref={listRef}>\n            {enableFilter && (\n                <div className={formClassNames}>\n                    <div className='input-group width-100pct'>\n                        <span className='input-group-addon'>\n                            <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                        </span>\n                        <ClearableInput\n                            value={filterValue}\n                            inputRef={inputRef}\n                            placeholder={filterPlaceholder}\n                            onChange={handleFilterChange}\n                            onClear={handleClear}\n                        />\n                        {trailingInputAddon && trailingInputAddon}\n                    </div>\n                </div>\n            )}\n\n            {!hasMenuItems(filteredMenuItems) && (\n                <div className='padding-top-25 text-center text-color-gray'>{notFoundMessage}</div>\n            )}\n\n            {filteredMenuItems.map((menuGroup, index) => (\n                <ListMenuGroup key={index} className={groupClassName} menuGroup={menuGroup} />\n            ))}\n        </div>\n    );\n\n    if (responsive && isMobileMode) {\n        return (\n            <ExpanderPanel\n                title={mobileHeader}\n                bsStyle='default'\n                open={isExpanderOpen}\n                onToggle={() => setIsExpanderOpen(!isExpanderOpen)}\n                unmountOnExit={false}\n                className='shadow-default'\n            >\n                <div onClick={handleExpanderBodyClick}>{listMenu}</div>\n            </ExpanderPanel>\n        );\n    }\n\n    return listMenu;\n};\n\nexport default ListMenu;\n"],"names":["RESIZE_THROTTLING","MOBILE_MAX_WIDTH","filterMenuItems","items","value","filterKey","item","navItem","hasMenuItems","navItems","isEmpty","ListMenu","props","menuItems","focusFilter","enableFilter","filterPlaceholder","onFilterChange","notFoundMessage","className","groupClassName","responsive","autoClose","trailingInputAddon","remainingProps","filterValue","setFilterValue","useState","isMobileMode","setIsMobileMode","isExpanderOpen","setIsExpanderOpen","mobileHeader","setMobileHeader","inputRef","useRef","listRef","buildMobileHeader","activeElement","jsxs","jsx","useEsc","handleMobileSize","debounce","useEffect","useWindowResize","focusInput","useKey","event","useEffectOnce","handleClear","handleFilterChange","filteredMenuItems","handleExpanderBodyClick","isListItem","formClassNames","classNames","listMenu","ClearableInput","menuGroup","index","ListMenuGroup","ExpanderPanel"],"mappings":"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"}

package/components/listMenu/ListMenuGroup.d.ts

@@ -9,7 +9,7 @@ export type ListMenuNavItem = {
     /**
      * The menu nav item itself.
      *
-     * This can be a simple `a`, `NavLink`, `Link`, `span` or even a `FormattedMessage`.
+     * This can be a simple `<a>`, `<NavLink>`, `<Link>`, `<span>` or even a `<FormattedMessage>`.
      */
     item: string | ReactNode;
     /**
@@ -49,6 +49,7 @@ export type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {
      * The type of badge to display.
      *
      * Determines the visual style of the badge. Available types include:
+     *
      * - `muted`: A subdued badge style.
      * - `success`: Indicates a successful state.
      * - `info`: Represents informational content.

package/components/listMenu/ListMenuGroup.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import l from "classnames";
+import l from "../../utils/classNames.js";
 import i from "./ListMenuHeader.js";
 const o = ({ menuGroup: e, className: r }) => e.navItems.length ? /* @__PURE__ */ t("ul", { className: `ListMenuGroup ${r}`, children: [
   /* @__PURE__ */ a(i, { ...e }),
-  e.navItems.map((s) => /* @__PURE__ */ a("li", { className: l({ disabled: s.disabled, subitem: s.isSubItem }), children: s.item }, s.key))
+  e.navItems.map((s) => /* @__PURE__ */ a("li", { className: l(s.disabled && "disabled", s.isSubItem && "subitem"), children: s.item }, s.key))
 ] }) : null;
 export {
   o as default

package/components/listMenu/ListMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListMenuGroup.js","sources":["../../../src/components/listMenu/ListMenuGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport ListMenuHeader from './ListMenuHeader';\n\nexport type ListMenuNavItem = {\n    /**\n     * The name or key of the menu nav item.\n     *\n     * This key will be used for filtering, hence it should match the translated menu item name.\n     */\n    key: string;\n\n    /**\n     * The menu nav item itself.\n     *\n     * This can be a simple `a`, `NavLink`, `Link`, `span` or even a `FormattedMessage`.\n     */\n    item: string | ReactNode;\n\n    /**\n     * Disables the list item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the current menu item is a child of another menu item.\n     */\n    isSubItem?: boolean;\n} & {\n    [otherFilterKey: Exclude<string, 'key' | 'item' | 'disabled' | 'isSubItem'>]: unknown;\n};\n\nexport type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {\n    /**\n     * The optional group header to be shown.\n     *\n     * This can also be a component such as a `FormattedMessage`.\n     */\n    group?: string | ReactNode;\n\n    /**\n     * The optional group header link to be shown.\n     *\n     * This can be a link component such as `NavLink` or `Link`. This way, the header can be a link itself. In this\n     * case, the `group` prop can be omitted.\n     */\n    groupNavItem?: string | ReactNode;\n\n    /**\n     * The optional badge displayed alongside the group or nav items.\n     *\n     * This can be text or a React node for additional flexibility.\n     */\n    badge?: string | ReactNode;\n\n    /**\n     * The type of badge to display.\n     *\n     * Determines the visual style of the badge. Available types include:\n     * - `muted`: A subdued badge style.\n     * - `success`: Indicates a successful state.\n     * - `info`: Represents informational content.\n     * - `warning`: Warns of potential issues.\n     * - `danger`: Highlights a critical state.\n     */\n    badgeType?: 'muted' | 'success' | 'info' | 'warning' | 'danger';\n\n    /**\n     * The list of all menu items of a group.\n     */\n    navItems: T[];\n};\n\ntype ListMenuGroupProps<T extends ListMenuNavItem> = {\n    menuGroup: ListMenuItem<T>;\n    className: string;\n};\n\nconst ListMenuGroup = <T extends ListMenuNavItem>({ menuGroup, className }: ListMenuGroupProps<T>) => {\n    if (!menuGroup.navItems.length) {\n        return null;\n    }\n\n    return (\n        <ul className={`ListMenuGroup ${className}`}>\n            <ListMenuHeader {...menuGroup} />\n\n            {menuGroup.navItems.map(item => (\n                <li key={item.key} className={classNames({ disabled: item.disabled, subitem: item.isSubItem })}>\n                    {item.item}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nexport default ListMenuGroup;\n"],"names":["ListMenuGroup","menuGroup","className","jsxs","jsx","ListMenuHeader","item","classNames"],"mappings":";;;AAiFA,MAAMA,IAAgB,CAA4B,EAAE,WAAAC,GAAW,WAAAC,QACtDD,EAAU,SAAS,SAKpB,gBAAAE,EAAC,MAAA,EAAG,WAAW,iBAAiBD,CAAS,IACrC,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAgB,GAAGJ,GAAW;AAAA,EAE9BA,EAAU,SAAS,IAAI,CAAAK,wBACnB,MAAA,EAAkB,WAAWC,EAAW,EAAE,UAAUD,EAAK,UAAU,SAASA,EAAK,WAAW,GACxF,UAAAA,EAAK,KAAA,GADDA,EAAK,GAEd,CACH;AAAA,GACL,IAZO;"}
+{"version":3,"file":"ListMenuGroup.js","sources":["../../../src/components/listMenu/ListMenuGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport ListMenuHeader from './ListMenuHeader';\n\nexport type ListMenuNavItem = {\n    /**\n     * The name or key of the menu nav item.\n     *\n     * This key will be used for filtering, hence it should match the translated menu item name.\n     */\n    key: string;\n\n    /**\n     * The menu nav item itself.\n     *\n     * This can be a simple `<a>`, `<NavLink>`, `<Link>`, `<span>` or even a `<FormattedMessage>`.\n     */\n    item: string | ReactNode;\n\n    /**\n     * Disables the list item.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the current menu item is a child of another menu item.\n     */\n    isSubItem?: boolean;\n} & {\n    [otherFilterKey: Exclude<string, 'key' | 'item' | 'disabled' | 'isSubItem'>]: unknown;\n};\n\nexport type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {\n    /**\n     * The optional group header to be shown.\n     *\n     * This can also be a component such as a `FormattedMessage`.\n     */\n    group?: string | ReactNode;\n\n    /**\n     * The optional group header link to be shown.\n     *\n     * This can be a link component such as `NavLink` or `Link`. This way, the header can be a link itself. In this\n     * case, the `group` prop can be omitted.\n     */\n    groupNavItem?: string | ReactNode;\n\n    /**\n     * The optional badge displayed alongside the group or nav items.\n     *\n     * This can be text or a React node for additional flexibility.\n     */\n    badge?: string | ReactNode;\n\n    /**\n     * The type of badge to display.\n     *\n     * Determines the visual style of the badge. Available types include:\n     *\n     * - `muted`: A subdued badge style.\n     * - `success`: Indicates a successful state.\n     * - `info`: Represents informational content.\n     * - `warning`: Warns of potential issues.\n     * - `danger`: Highlights a critical state.\n     */\n    badgeType?: 'muted' | 'success' | 'info' | 'warning' | 'danger';\n\n    /**\n     * The list of all menu items of a group.\n     */\n    navItems: T[];\n};\n\ntype ListMenuGroupProps<T extends ListMenuNavItem> = {\n    menuGroup: ListMenuItem<T>;\n    className: string;\n};\n\nconst ListMenuGroup = <T extends ListMenuNavItem>({ menuGroup, className }: ListMenuGroupProps<T>) => {\n    if (!menuGroup.navItems.length) {\n        return null;\n    }\n\n    return (\n        <ul className={`ListMenuGroup ${className}`}>\n            <ListMenuHeader {...menuGroup} />\n\n            {menuGroup.navItems.map(item => (\n                <li key={item.key} className={classNames(item.disabled && 'disabled', item.isSubItem && 'subitem')}>\n                    {item.item}\n                </li>\n            ))}\n        </ul>\n    );\n};\n\nexport default ListMenuGroup;\n"],"names":["ListMenuGroup","menuGroup","className","jsxs","jsx","ListMenuHeader","classNames","item"],"mappings":";;;AAkFA,MAAMA,IAAgB,CAA4B,EAAE,WAAAC,GAAW,WAAAC,QACtDD,EAAU,SAAS,SAKpB,gBAAAE,EAAC,MAAA,EAAG,WAAW,iBAAiBD,CAAS,IACrC,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAA,EAAgB,GAAGJ,GAAW;AAAA,EAE9BA,EAAU,SAAS,IAAI,OACpB,gBAAAG,EAAC,MAAA,EAAkB,WAAWE,EAAWC,EAAK,YAAY,YAAYA,EAAK,aAAa,SAAS,GAC5F,YAAK,KAAA,GADDA,EAAK,GAEd,CACH;AAAA,GACL,IAZO;"}

package/components/loadMore/LoadMoreButton.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import h from "classnames";
+import h from "../../utils/classNames.js";
 import { LoadMoreProgress as N } from "./LoadMoreProgress.js";
 const f = (i) => {
   const {

package/components/loadMore/LoadMoreButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMoreButton.js","sources":["../../../src/components/loadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport classNames from 'classnames';\n\nimport { LoadMoreProgress, type ProgressBarStyle } from './LoadMoreProgress';\n\ntype LoadMoreButtonProps = {\n    /**\n     * The number of already loaded elements. If set to 0 the progress bar will not be shown.\n     * @default 0\n     */\n    loaded?: number;\n\n    /**\n     * The number of all elements. If set to 0 the progress bar will not be shown.\n     * @default 100\n     */\n    total?: number;\n\n    /**\n     * The message that will be shown when everything is loaded.\n     */\n    noMoreMessage?: string | ReactNode;\n\n    /**\n     * The text for the load more button.\n     */\n    loadMoreMessage?: string | ReactNode;\n\n    /**\n     * If set to `false`, the button will not be rendered. The loadMoreMessage will be shown as text.\n     * @default true\n     */\n    isInteractive?: boolean;\n\n    /**\n     * Callback fired when clicking on the load more button.\n     */\n    onLoadMore?: VoidFunction;\n\n    /**\n     * In case the component is used on white background, set the progress bar style to `gray`.\n     * @default 'white'\n     */\n    progressBarStyle?: ProgressBarStyle;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nexport const LoadMoreButton = (props: LoadMoreButtonProps) => {\n    const {\n        loaded = 0,\n        total = 100,\n        onLoadMore = () => {},\n        loadMoreMessage = '',\n        noMoreMessage = '',\n        isInteractive = true,\n        progressBarStyle,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const wrapperClassNames = classNames(\n        'LoadMoreButton',\n        'align-items-center',\n        'display-flex',\n        'justify-content-center',\n        'margin-top-25',\n        'margin-bottom-25',\n        'non-printable',\n        className\n    );\n\n    const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='min-width-150'>\n                <LoadMoreProgress loaded={loaded} total={total} progressBarStyle={progressBarStyle} />\n                <div className='display-flex justify-content-center'>\n                    {hasMoreToLoad && isInteractive && (\n                        <button\n                            className='btn btn-link padding-right-20 margin-top--5'\n                            type='button'\n                            onClick={onLoadMore}\n                        >\n                            <span className='rioglyph rioglyph-arrow-down' />\n                            {loadMoreMessage}\n                        </button>\n                    )}\n                    {hasMoreToLoad && !isInteractive && (\n                        <span className='padding-top-4 padding-bottom-10'>{loadMoreMessage}</span>\n                    )}\n                    {!hasMoreToLoad && <span className='padding-top-4 padding-bottom-10'>{noMoreMessage}</span>}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LoadMoreButton;\n"],"names":["LoadMoreButton","props","loaded","total","onLoadMore","loadMoreMessage","noMoreMessage","isInteractive","progressBarStyle","className","remainingProps","wrapperClassNames","classNames","hasMoreToLoad","jsx","jsxs","LoadMoreProgress"],"mappings":";;;AAmDO,MAAMA,IAAiB,CAACC,MAA+B;AAC1D,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,iBAAAC,IAAkB;AAAA,IAClB,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAH;AAAA,EAAA,GAGEI,IAAgBX,IAAS,KAAKC,IAAQ,KAAKD,IAASC;AAE1D,SACI,gBAAAW,EAAC,SAAK,GAAGJ,GAAgB,WAAWC,GAChC,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,QAAAd,GAAgB,OAAAC,GAAc,kBAAAK,EAAA,CAAoC;AAAA,IACpF,gBAAAO,EAAC,OAAA,EAAI,WAAU,uCACV,UAAA;AAAA,MAAAF,KAAiBN,KACd,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAASX;AAAA,UAET,UAAA;AAAA,YAAA,gBAAAU,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,YAC9CT;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGRQ,KAAiB,CAACN,uBACd,QAAA,EAAK,WAAU,mCAAmC,UAAAF,GAAgB;AAAA,MAEtE,CAACQ,KAAiB,gBAAAC,EAAC,QAAA,EAAK,WAAU,mCAAmC,UAAAR,EAAA,CAAc;AAAA,IAAA,EAAA,CACxF;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}
+{"version":3,"file":"LoadMoreButton.js","sources":["../../../src/components/loadMore/LoadMoreButton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { LoadMoreProgress, type ProgressBarStyle } from './LoadMoreProgress';\n\ntype LoadMoreButtonProps = {\n    /**\n     * The number of already loaded elements. If set to 0 the progress bar will not be shown.\n     * @default 0\n     */\n    loaded?: number;\n\n    /**\n     * The number of all elements. If set to 0 the progress bar will not be shown.\n     * @default 100\n     */\n    total?: number;\n\n    /**\n     * The message that will be shown when everything is loaded.\n     */\n    noMoreMessage?: string | ReactNode;\n\n    /**\n     * The text for the load more button.\n     */\n    loadMoreMessage?: string | ReactNode;\n\n    /**\n     * If set to `false`, the button will not be rendered. The loadMoreMessage will be shown as text.\n     * @default true\n     */\n    isInteractive?: boolean;\n\n    /**\n     * Callback fired when clicking on the load more button.\n     */\n    onLoadMore?: VoidFunction;\n\n    /**\n     * In case the component is used on white background, set the progress bar style to `gray`.\n     * @default 'white'\n     */\n    progressBarStyle?: ProgressBarStyle;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nexport const LoadMoreButton = (props: LoadMoreButtonProps) => {\n    const {\n        loaded = 0,\n        total = 100,\n        onLoadMore = () => {},\n        loadMoreMessage = '',\n        noMoreMessage = '',\n        isInteractive = true,\n        progressBarStyle,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const wrapperClassNames = classNames(\n        'LoadMoreButton',\n        'align-items-center',\n        'display-flex',\n        'justify-content-center',\n        'margin-top-25',\n        'margin-bottom-25',\n        'non-printable',\n        className\n    );\n\n    const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className='min-width-150'>\n                <LoadMoreProgress loaded={loaded} total={total} progressBarStyle={progressBarStyle} />\n                <div className='display-flex justify-content-center'>\n                    {hasMoreToLoad && isInteractive && (\n                        <button\n                            className='btn btn-link padding-right-20 margin-top--5'\n                            type='button'\n                            onClick={onLoadMore}\n                        >\n                            <span className='rioglyph rioglyph-arrow-down' />\n                            {loadMoreMessage}\n                        </button>\n                    )}\n                    {hasMoreToLoad && !isInteractive && (\n                        <span className='padding-top-4 padding-bottom-10'>{loadMoreMessage}</span>\n                    )}\n                    {!hasMoreToLoad && <span className='padding-top-4 padding-bottom-10'>{noMoreMessage}</span>}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LoadMoreButton;\n"],"names":["LoadMoreButton","props","loaded","total","onLoadMore","loadMoreMessage","noMoreMessage","isInteractive","progressBarStyle","className","remainingProps","wrapperClassNames","classNames","hasMoreToLoad","jsx","jsxs","LoadMoreProgress"],"mappings":";;;AAmDO,MAAMA,IAAiB,CAACC,MAA+B;AAC1D,QAAM;AAAA,IACF,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa,MAAM;AAAA,IAAC;AAAA,IACpB,iBAAAC,IAAkB;AAAA,IAClB,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,kBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAH;AAAA,EAAA,GAGEI,IAAgBX,IAAS,KAAKC,IAAQ,KAAKD,IAASC;AAE1D,SACI,gBAAAW,EAAC,SAAK,GAAGJ,GAAgB,WAAWC,GAChC,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,iBACX,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,QAAAd,GAAgB,OAAAC,GAAc,kBAAAK,EAAA,CAAoC;AAAA,IACpF,gBAAAO,EAAC,OAAA,EAAI,WAAU,uCACV,UAAA;AAAA,MAAAF,KAAiBN,KACd,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,MAAK;AAAA,UACL,SAASX;AAAA,UAET,UAAA;AAAA,YAAA,gBAAAU,EAAC,QAAA,EAAK,WAAU,+BAAA,CAA+B;AAAA,YAC9CT;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGRQ,KAAiB,CAACN,uBACd,QAAA,EAAK,WAAU,mCAAmC,UAAAF,GAAgB;AAAA,MAEtE,CAACQ,KAAiB,gBAAAC,EAAC,QAAA,EAAK,WAAU,mCAAmC,UAAAR,EAAA,CAAc;AAAA,IAAA,EAAA,CACxF;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;"}

package/components/loadMore/LoadMoreProgress.js

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import l from "react";
-import o from "classnames";
+import o from "../../utils/classNames.js";
 const t = {
   WHITE: "white",
   GRAY: "gray"

package/components/loadMore/LoadMoreProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadMoreProgress.js","sources":["../../../src/components/loadMore/LoadMoreProgress.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nconst STYLE = {\n    WHITE: 'white',\n    GRAY: 'gray',\n} as const;\n\nexport type ProgressBarStyle = (typeof STYLE)[keyof typeof STYLE];\n\ntype LoadMoreProgressProps = {\n    loaded: number;\n    total: number;\n    progressBarStyle?: ProgressBarStyle;\n};\n\nexport const LoadMoreProgress = ({ loaded = 0, total = 0, progressBarStyle = STYLE.WHITE }: LoadMoreProgressProps) => {\n    if (!loaded || !total) {\n        return null;\n    }\n\n    const width = `${(loaded / total) * 100}%`;\n\n    const progressClassName = classNames(\n        'progress',\n        'height-2 margin-bottom-10',\n        progressBarStyle === STYLE.GRAY ? 'bg-lighter' : 'bg-white'\n    );\n\n    const progressBarClassName = classNames(\n        'progress-bar',\n        progressBarStyle === STYLE.GRAY &&\n            width !== '100%' &&\n            'border border-right-only border-color-white border-width-2'\n    );\n\n    return (\n        <React.Fragment>\n            <div className='text-center margin-bottom-3'>\n                <span className='text-medium'>{loaded}</span>\n                <span className='margin-left-5 margin-right-5'>/</span>\n                <span className='text-medium'>{total}</span>\n            </div>\n            <div className={progressClassName}>\n                <div className={progressBarClassName} style={{ width }} />\n            </div>\n        </React.Fragment>\n    );\n};\n\nexport default LoadMoreProgress;\n"],"names":["STYLE","LoadMoreProgress","loaded","total","progressBarStyle","width","progressClassName","classNames","progressBarClassName","jsxs","React","jsx"],"mappings":";;;AAGA,MAAMA,IAAQ;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AACV,GAUaC,IAAmB,CAAC,EAAE,QAAAC,IAAS,GAAG,OAAAC,IAAQ,GAAG,kBAAAC,IAAmBJ,EAAM,YAAmC;AAClH,MAAI,CAACE,KAAU,CAACC;AACZ,WAAO;AAGX,QAAME,IAAQ,GAAIH,IAASC,IAAS,GAAG,KAEjCG,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,MAAqBJ,EAAM,OAAO,eAAe;AAAA,EAAA,GAG/CQ,IAAuBD;AAAA,IACzB;AAAA,IACAH,MAAqBJ,EAAM,QACvBK,MAAU,UACV;AAAA,EAAA;AAGR,SACI,gBAAAI,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAT,GAAO;AAAA,MACtC,gBAAAS,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,KAAC;AAAA,MAChD,gBAAAA,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAR,EAAA,CAAM;AAAA,IAAA,GACzC;AAAA,IACA,gBAAAQ,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAAsB,OAAO,EAAE,OAAAH,EAAA,EAAM,CAAG,EAAA,CAC5D;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"LoadMoreProgress.js","sources":["../../../src/components/loadMore/LoadMoreProgress.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst STYLE = {\n    WHITE: 'white',\n    GRAY: 'gray',\n} as const;\n\nexport type ProgressBarStyle = (typeof STYLE)[keyof typeof STYLE];\n\ntype LoadMoreProgressProps = {\n    loaded: number;\n    total: number;\n    progressBarStyle?: ProgressBarStyle;\n};\n\nexport const LoadMoreProgress = ({ loaded = 0, total = 0, progressBarStyle = STYLE.WHITE }: LoadMoreProgressProps) => {\n    if (!loaded || !total) {\n        return null;\n    }\n\n    const width = `${(loaded / total) * 100}%`;\n\n    const progressClassName = classNames(\n        'progress',\n        'height-2 margin-bottom-10',\n        progressBarStyle === STYLE.GRAY ? 'bg-lighter' : 'bg-white'\n    );\n\n    const progressBarClassName = classNames(\n        'progress-bar',\n        progressBarStyle === STYLE.GRAY &&\n            width !== '100%' &&\n            'border border-right-only border-color-white border-width-2'\n    );\n\n    return (\n        <React.Fragment>\n            <div className='text-center margin-bottom-3'>\n                <span className='text-medium'>{loaded}</span>\n                <span className='margin-left-5 margin-right-5'>/</span>\n                <span className='text-medium'>{total}</span>\n            </div>\n            <div className={progressClassName}>\n                <div className={progressBarClassName} style={{ width }} />\n            </div>\n        </React.Fragment>\n    );\n};\n\nexport default LoadMoreProgress;\n"],"names":["STYLE","LoadMoreProgress","loaded","total","progressBarStyle","width","progressClassName","classNames","progressBarClassName","jsxs","React","jsx"],"mappings":";;;AAIA,MAAMA,IAAQ;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AACV,GAUaC,IAAmB,CAAC,EAAE,QAAAC,IAAS,GAAG,OAAAC,IAAQ,GAAG,kBAAAC,IAAmBJ,EAAM,YAAmC;AAClH,MAAI,CAACE,KAAU,CAACC;AACZ,WAAO;AAGX,QAAME,IAAQ,GAAIH,IAASC,IAAS,GAAG,KAEjCG,IAAoBC;AAAA,IACtB;AAAA,IACA;AAAA,IACAH,MAAqBJ,EAAM,OAAO,eAAe;AAAA,EAAA,GAG/CQ,IAAuBD;AAAA,IACzB;AAAA,IACAH,MAAqBJ,EAAM,QACvBK,MAAU,UACV;AAAA,EAAA;AAGR,SACI,gBAAAI,EAACC,EAAM,UAAN,EACG,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,+BACX,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAT,GAAO;AAAA,MACtC,gBAAAS,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,KAAC;AAAA,MAChD,gBAAAA,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAR,EAAA,CAAM;AAAA,IAAA,GACzC;AAAA,IACA,gBAAAQ,EAAC,OAAA,EAAI,WAAWL,GACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWH,GAAsB,OAAO,EAAE,OAAAH,EAAA,EAAM,CAAG,EAAA,CAC5D;AAAA,EAAA,GACJ;AAER;"}

package/components/map/components/Map.js.map

@@ -1 +1 @@
-{"version":3,"file":"Map.js","sources":["../../../../src/components/map/components/Map.tsx"],"sourcesContent":["import { useRef, useState, useEffect, type CSSProperties } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { isEqual } from 'es-toolkit/predicate';\n\nimport {\n    MAP_TYPE_DEFAULT,\n    MAP_TYPE_FLEET_STYLE,\n    MAP_TYPE_SATELLITE,\n    MAP_TYPE_TERRAIN,\n    MAP_TYPE_NIGHT,\n    MAP_LAYER_INCIDENTS,\n    MAP_LAYER_TRAFFIC,\n    MAP_LAYER_ROAD_RESTRICTIONS,\n    DEFAULT_MIN_ZOOM,\n    DEFAULT_MAX_ZOOM,\n    DEFAULT_PIXEL_RATIO,\n} from './constants';\n\nimport { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandling';\nimport { MapContext } from './MapContext';\nimport { createUtils, getMapBounds } from '../utils/mapUtils';\nimport { getHereUi } from '../utils/mapUi';\nimport useDarkMode from '../../../hooks/useDarkMode';\nimport MapZoom from './features/MapZoom';\nimport MapOverlayLayers from './features/layers/MapOverlayLayers';\nimport MapSize from './MapSize';\nimport MapPosition from './MapPosition';\nimport MapElements from './MapElements';\nimport type { MapApi, MapLayer, MapProps, MapType } from '../utils/mapTypes';\nimport { getPlatform, getEngineType, getBaseLayer } from '../utils/rendering';\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nconst Map = (props: MapProps) => {\n    const {\n        children,\n        credentials,\n        width,\n        height,\n        language: lang = 'en',\n        center,\n        zoom,\n        zoomAnimation = false,\n        boundingBox,\n        hideClusterSettings = false,\n        hideMapLayerSettings = false,\n        disableMapEvents,\n        disableBehavior = false,\n        disableZoomMomentum = true,\n        eventListenerMap,\n        mapType = MAP_TYPE_DEFAULT,\n        mapLayer = [],\n        showCluster: externalShowCluster = true,\n        showScaleBar = false,\n        onMapLayerChange = () => {},\n        onMapTypeChange = () => {},\n        onShowClusterChange = () => {},\n        onZoomIn = () => {},\n        onZoomOut = () => {},\n        onIncidentsChange = () => {},\n        mapSettingsTooltip,\n        mapSettings,\n        enableWebGL = true,\n        enableDevicePixelRatio = true,\n        pixelRatio = DEFAULT_PIXEL_RATIO,\n        minZoom = DEFAULT_MIN_ZOOM,\n        maxZoom = DEFAULT_MAX_ZOOM,\n    } = props;\n\n    let safeMaxZoom = maxZoom;\n\n    if (minZoom > maxZoom) {\n        // Avoid crashing the map for invalid zoom limits\n        safeMaxZoom = DEFAULT_MAX_ZOOM;\n        console.error('Invalid condition for zoom limits: min <= max)');\n    }\n\n    const mapRef = useRef<HTMLDivElement>(null);\n\n    const [isMapInitialized, setMapInitialized] = useState(false);\n\n    const [api, setApi] = useState<MapApi>();\n\n    const [baseLayer, setBaseLayer] = useState<MapType>(mapType);\n    const [activeLayers, setActiveLayers] = useState<MapLayer[]>(mapLayer);\n    const [showCluster, setShowCluster] = useState(externalShowCluster);\n\n    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || pixelRatio : pixelRatio;\n\n    // Only short locale is supported by HERE Map\n    const language = (locale => (locale === 'nb' ? 'no' : locale))(lang.split('-')[0].toLowerCase());\n\n    useEffect(() => {\n        let allMapObjects: H.map.Object[] = [];\n\n        if (api?.map) {\n            allMapObjects = api.map.getObjects();\n            console.debug('re-initialize here map');\n        } else {\n            console.debug('initialize here map');\n        }\n\n        if (api?.map) {\n            // Cleanup any previously initialized map before doing anything else\n            console.debug('disposing previous map');\n            removeEventListenerMap(api.map);\n\n            if (api.mapEvents) {\n                api.mapEvents.dispose();\n            }\n\n            api.map.dispose();\n        }\n\n        const bounds = boundingBox && getMapBounds(boundingBox);\n\n        // Initialize communication with the platform\n        const platform = getPlatform(credentials);\n\n        // Specify engine type. In this example, we use HARP rendering engine, which is capable\n        // of rendering vector data using the style configuration exported from the HERE Style Editor.\n        // HARP engine is not the default engine, and it's not included in the mapsjs-core.js module.\n        // To use this engine, you need to include mapsjs-harp.js file to your HTML page\n        const engineType = getEngineType(baseLayer, enableWebGL);\n\n        // Obtain the default map types from the platform object\n        // @ts-ignore-next-line: according to the Here docs, the engine type exists\n        // see https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/harp-migrate.html\n        const defaultLayers = platform.createDefaultLayers({ engineType, lg: language, pois: true });\n\n        getBaseLayer({\n            baseLayerName: baseLayer,\n            defaultLayers,\n            enableWebGL,\n            platform,\n            engineType,\n            vehicleRestrictions: activeLayers.includes(MAP_LAYER_ROAD_RESTRICTIONS),\n            language,\n            minZoom,\n            maxZoom: safeMaxZoom,\n        }).then(defaultLayerMap => {\n            // Initialize the map\n            const hereMap = new H.Map(mapRef.current as Element, defaultLayerMap.baseLayer, {\n                zoom,\n                center,\n                bounds,\n                engineType,\n                pixelRatio: devicePixelRatio,\n                fixedCenter: true,\n            });\n\n            if (defaultLayerMap.overlayLayer) {\n                // Special case for satellite map where we render street labels and road signs as well as additional pois as vector data\n                // hereMap.setBaseLayer(defaultLayerMap.baseLayer);\n                hereMap.addLayer(defaultLayerMap.overlayLayer);\n            }\n\n            setMapInitialized(true);\n\n            let hereMapEvents: H.mapevents.MapEvents | false = false;\n            let hereBehavior: H.mapevents.Behavior | undefined;\n\n            if (!disableMapEvents) {\n                // Enable the map event system\n                hereMapEvents = new H.mapevents.MapEvents(hereMap);\n            }\n\n            if (!(disableMapEvents || disableBehavior)) {\n                hereBehavior = new H.mapevents.Behavior(hereMapEvents as H.mapevents.MapEvents);\n                // @ts-ignore-next-line\n                hereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);\n\n                if (disableZoomMomentum) {\n                    // Disable the inertia that occurs on WebGL maps when scrolling/zooming.\n                    // This resulted in a very high scroll sensitivity.\n                    // @ts-ignore-next-line\n                    hereBehavior.disable(H.mapevents.Behavior.Feature.ZOOM_MOMENTUM);\n                }\n            }\n\n            addEventListenerMap(hereMap, eventListenerMap, hereMap);\n\n            const hereUi = getHereUi(hereMap, defaultLayers, showScaleBar, language);\n\n            // The api will be passed to services when using a render function.\n            // This allows the service to access the map internals\n            setApi({\n                credentials,\n                defaultLayers,\n                map: hereMap,\n                mapEvents: hereMapEvents,\n                behavior: hereBehavior,\n                platform,\n                ui: hereUi,\n                utils: createUtils(hereMap),\n                // Put settings back into the map API object so the invoking service\n                // can check on these settings for instance inside a test\n                settings: {\n                    enableWebGL,\n                    baseLayer,\n                    activeLayers,\n                    showCluster,\n                    minZoom,\n                    maxZoom: safeMaxZoom,\n                },\n            });\n\n            if (allMapObjects) {\n                // If the base layer changed, re-add all previous objects again,\n                // otherwise the map would be empty\n                hereMap.addObjects(allMapObjects);\n            }\n        });\n    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer, minZoom, maxZoom]);\n\n    const isDarkMode = useDarkMode();\n    useEffect(() => {\n        // Toggle night map only if current map type is default\n        if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {\n            handleMapTypeChange(MAP_TYPE_NIGHT);\n        }\n        // Toggle back to default map only if current map type is night\n        else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {\n            handleMapTypeChange(MAP_TYPE_DEFAULT);\n        }\n    }, [isDarkMode, language]);\n\n    // Update MapType from outside\n    useEffect(() => handleMapTypeChange(mapType), [mapType]);\n\n    // Update MapLayer from outside\n    const [previousMapLayer, setPreviousMapLayer] = useState(mapLayer);\n    if (!isEqual(mapLayer, previousMapLayer)) {\n        setActiveLayers(mapLayer);\n        setPreviousMapLayer(mapLayer);\n    }\n\n    // Update Cluster setting from outside\n    useEffect(() => setShowCluster(externalShowCluster), [externalShowCluster]);\n\n    const handleMapTypeChange = (newMapType: MapType) => {\n        setBaseLayer(newMapType);\n        onMapTypeChange(newMapType, mapType);\n    };\n\n    const handleMapLayerChange = (layer: MapLayer) => {\n        const removeLayer = (layerToRemove: string) => activeLayers.filter(item => item !== layerToRemove);\n        const newActiveLayers = activeLayers.includes(layer) ? removeLayer(layer) : [...activeLayers, layer];\n        setActiveLayers(newActiveLayers);\n        onMapLayerChange(newActiveLayers, activeLayers);\n    };\n\n    const handleShowClusterChange = (newShowCluster: boolean) => {\n        setShowCluster(newShowCluster);\n        onShowClusterChange(newShowCluster);\n    };\n\n    // Note: For performance reasons, we deactivate pointer events and hence CSS style recalculation for the\n    // the body. Having for instance many assets in the tree causes a performance loss when clicking on the map\n    // to move it and zoom in/out since the map triggers a style invalidation and recalculation and\n    // due to the nature of the AssetTree with it's hundreds DOM nodes, applying the CSS selectors\n    // takes time.\n    const handleMapInteractionStart = () => {\n        document.querySelector('.AssetTree')?.classList.add('pointer-events-none');\n    };\n    const handleMapInteractionEnd = () => {\n        document.querySelector('.AssetTree')?.classList.remove('pointer-events-none');\n    };\n\n    const style: CSSProperties = {};\n    if (height) {\n        style.height = height;\n    }\n    if (width) {\n        style.width = width;\n    }\n    const autoHeightClass = isEmpty(style) ? 'height-100pct' : '';\n\n    return (\n        <div\n            className={`Map position-relative map-type-${baseLayer.toLowerCase()} ${autoHeightClass}`}\n            style={style}\n            ref={mapRef}\n            onTouchStart={handleMapInteractionStart}\n            onTouchEnd={handleMapInteractionEnd}\n            onMouseEnter={handleMapInteractionStart}\n            onMouseOut={handleMapInteractionEnd}\n            onBlur={handleMapInteractionEnd}\n        >\n            {isMapInitialized && api && (\n                <MapContext.Provider\n                    value={{\n                        api,\n                        language,\n                        enableWebGL,\n                        showCluster,\n                        activeLayers,\n                        baseLayer,\n                        hideMapLayerSettings,\n                        hideClusterSettings,\n                        onMapTypeChange: handleMapTypeChange,\n                        onMapLayerChange: handleMapLayerChange,\n                        onShowClusterChange: handleShowClusterChange,\n                        mapSettingsTooltip,\n                        onIncidentsChange,\n                        devicePixelRatio,\n                    }}\n                >\n                    <MapPosition api={api} boundingBox={boundingBox} center={center} zoomAnimation={zoomAnimation} />\n                    <MapSize api={api} />\n                    <MapZoom\n                        zoom={zoom}\n                        hideZoomButtons={disableBehavior}\n                        onZoomIn={onZoomIn}\n                        onZoomOut={onZoomOut}\n                        zoomAnimation={zoomAnimation}\n                    />\n                    {mapSettings && mapSettings}\n                    <MapOverlayLayers layers={activeLayers} />\n                    <MapElements api={api}>{children}</MapElements>\n                </MapContext.Provider>\n            )}\n        </div>\n    );\n};\n\nMap.TYPE_DEFAULT = MAP_TYPE_DEFAULT;\nMap.TYPE_FLEET_STYLE = MAP_TYPE_FLEET_STYLE;\nMap.TYPE_SATELLITE = MAP_TYPE_SATELLITE;\nMap.TYPE_TERRAIN = MAP_TYPE_TERRAIN;\nMap.TYPE_NIGHT = MAP_TYPE_NIGHT;\n\nMap.LAYER_INCIDENTS = MAP_LAYER_INCIDENTS;\nMap.LAYER_TRAFFIC = MAP_LAYER_TRAFFIC;\nMap.LAYER_ROAD_RESTRICTIONS = MAP_LAYER_ROAD_RESTRICTIONS;\n\nexport default Map;\n"],"names":["Map","props","children","credentials","width","height","lang","center","zoom","zoomAnimation","boundingBox","hideClusterSettings","hideMapLayerSettings","disableMapEvents","disableBehavior","disableZoomMomentum","eventListenerMap","mapType","MAP_TYPE_DEFAULT","mapLayer","externalShowCluster","showScaleBar","onMapLayerChange","onMapTypeChange","onShowClusterChange","onZoomIn","onZoomOut","onIncidentsChange","mapSettingsTooltip","mapSettings","enableWebGL","enableDevicePixelRatio","pixelRatio","DEFAULT_PIXEL_RATIO","minZoom","DEFAULT_MIN_ZOOM","maxZoom","DEFAULT_MAX_ZOOM","safeMaxZoom","mapRef","useRef","isMapInitialized","setMapInitialized","useState","api","setApi","baseLayer","setBaseLayer","activeLayers","setActiveLayers","showCluster","setShowCluster","devicePixelRatio","language","locale","useEffect","allMapObjects","removeEventListenerMap","bounds","getMapBounds","platform","getPlatform","engineType","getEngineType","defaultLayers","getBaseLayer","MAP_LAYER_ROAD_RESTRICTIONS","defaultLayerMap","hereMap","hereMapEvents","hereBehavior","addEventListenerMap","hereUi","getHereUi","createUtils","isDarkMode","useDarkMode","handleMapTypeChange","MAP_TYPE_NIGHT","previousMapLayer","setPreviousMapLayer","isEqual","newMapType","handleMapLayerChange","layer","removeLayer","layerToRemove","item","newActiveLayers","handleShowClusterChange","newShowCluster","handleMapInteractionStart","handleMapInteractionEnd","style","autoHeightClass","isEmpty","jsx","jsxs","MapContext","MapPosition","MapSize","MapZoom","MapOverlayLayers","MapElements","MAP_TYPE_FLEET_STYLE","MAP_TYPE_SATELLITE","MAP_TYPE_TERRAIN","MAP_LAYER_INCIDENTS","MAP_LAYER_TRAFFIC"],"mappings":";;;;;;;;;;;;;;;;AAgCA,MAAMA,IAAM,CAACC,MAAoB;AAC7B,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAUC,IAAO;AAAA,IACjB,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,aAAAC;AAAA,IACA,qBAAAC,KAAsB;AAAA,IACtB,sBAAAC,KAAuB;AAAA,IACvB,kBAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,qBAAAC,KAAsB;AAAA,IACtB,kBAAAC;AAAA,IACA,SAAAC,IAAUC;AAAA,IACV,UAAAC,IAAW,CAAA;AAAA,IACX,aAAaC,IAAsB;AAAA,IACnC,cAAAC,KAAe;AAAA,IACf,kBAAAC,KAAmB,MAAM;AAAA,IAAC;AAAA,IAC1B,iBAAAC,KAAkB,MAAM;AAAA,IAAC;AAAA,IACzB,qBAAAC,KAAsB,MAAM;AAAA,IAAC;AAAA,IAC7B,UAAAC,KAAW,MAAM;AAAA,IAAC;AAAA,IAClB,WAAAC,KAAY,MAAM;AAAA,IAAC;AAAA,IACnB,mBAAAC,KAAoB,MAAM;AAAA,IAAC;AAAA,IAC3B,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,wBAAAC,IAAyB;AAAA,IACzB,YAAAC,IAAaC;AAAA,IACb,SAAAC,IAAUC;AAAA,IACV,SAAAC,IAAUC;AAAA,EAAA,IACVpC;AAEJ,MAAIqC,IAAcF;AAElB,EAAIF,IAAUE,MAEVE,IAAcD,GACd,QAAQ,MAAM,gDAAgD;AAGlE,QAAME,IAASC,GAAuB,IAAI,GAEpC,CAACC,IAAkBC,EAAiB,IAAIC,EAAS,EAAK,GAEtD,CAACC,GAAKC,EAAM,IAAIF,EAAA,GAEhB,CAACG,GAAWC,EAAY,IAAIJ,EAAkB1B,CAAO,GACrD,CAAC+B,GAAcC,CAAe,IAAIN,EAAqBxB,CAAQ,GAC/D,CAAC+B,GAAaC,CAAc,IAAIR,EAASvB,CAAmB,GAE5DgC,IAAmBrB,KAAyB,OAAO,oBAAoBC,GAGvEqB,IAAY,kBAAAC,MAAWA,MAAW,OAAO,OAAOA,GAAShD,EAAK,MAAM,GAAG,EAAE,CAAC,EAAE,aAAa;AAE/F,EAAAiD,EAAU,MAAM;AACZ,QAAIC,IAAgC,CAAA;AAEpC,IAAIZ,GAAK,OACLY,IAAgBZ,EAAI,IAAI,WAAA,GACxB,QAAQ,MAAM,wBAAwB,KAEtC,QAAQ,MAAM,qBAAqB,GAGnCA,GAAK,QAEL,QAAQ,MAAM,wBAAwB,GACtCa,GAAuBb,EAAI,GAAG,GAE1BA,EAAI,aACJA,EAAI,UAAU,QAAA,GAGlBA,EAAI,IAAI,QAAA;AAGZ,UAAMc,IAAShD,KAAeiD,GAAajD,CAAW,GAGhDkD,IAAWC,GAAY1D,CAAW,GAMlC2D,IAAaC,GAAcjB,GAAWhB,CAAW,GAKjDkC,IAAgBJ,EAAS,oBAAoB,EAAE,YAAAE,GAAY,IAAIT,GAAU,MAAM,IAAM;AAE3F,IAAAY,GAAa;AAAA,MACT,eAAenB;AAAA,MACf,eAAAkB;AAAA,MACA,aAAAlC;AAAA,MACA,UAAA8B;AAAA,MACA,YAAAE;AAAA,MACA,qBAAqBd,EAAa,SAASkB,CAA2B;AAAA,MACtE,UAAAb;AAAA,MACA,SAAAnB;AAAA,MACA,SAASI;AAAA,IAAA,CACZ,EAAE,KAAK,CAAA6B,MAAmB;AAEvB,YAAMC,IAAU,IAAI,EAAE,IAAI7B,EAAO,SAAoB4B,EAAgB,WAAW;AAAA,QAC5E,MAAA3D;AAAA,QACA,QAAAD;AAAA,QACA,QAAAmD;AAAA,QACA,YAAAI;AAAA,QACA,YAAYV;AAAA,QACZ,aAAa;AAAA,MAAA,CAChB;AAED,MAAIe,EAAgB,gBAGhBC,EAAQ,SAASD,EAAgB,YAAY,GAGjDzB,GAAkB,EAAI;AAEtB,UAAI2B,IAA+C,IAC/CC;AAEJ,MAAKzD,MAEDwD,IAAgB,IAAI,EAAE,UAAU,UAAUD,CAAO,IAG/CvD,KAAoBC,MACtBwD,IAAe,IAAI,EAAE,UAAU,SAASD,CAAsC,GAE9EC,EAAa,QAAQ,EAAE,UAAU,SAAS,QAAQ,eAAe,GAE7DvD,MAIAuD,EAAa,QAAQ,EAAE,UAAU,SAAS,QAAQ,aAAa,IAIvEC,GAAoBH,GAASpD,IAAkBoD,CAAO;AAEtD,YAAMI,KAASC,GAAUL,GAASJ,GAAe3C,IAAcgC,CAAQ;AAIvE,MAAAR,GAAO;AAAA,QACH,aAAA1C;AAAA,QACA,eAAA6D;AAAA,QACA,KAAKI;AAAA,QACL,WAAWC;AAAA,QACX,UAAUC;AAAA,QACV,UAAAV;AAAA,QACA,IAAIY;AAAA,QACJ,OAAOE,GAAYN,CAAO;AAAA;AAAA;AAAA,QAG1B,UAAU;AAAA,UACN,aAAAtC;AAAA,UACA,WAAAgB;AAAA,UACA,cAAAE;AAAA,UACA,aAAAE;AAAA,UACA,SAAAhB;AAAA,UACA,SAASI;AAAA,QAAA;AAAA,MACb,CACH,GAEGkB,KAGAY,EAAQ,WAAWZ,CAAa;AAAA,IAExC,CAAC;AAAA,EACL,GAAG,CAAC1B,GAAaC,GAAwBsB,GAAUP,GAAWZ,GAASE,CAAO,CAAC;AAE/E,QAAMuC,IAAaC,GAAA;AACnB,EAAArB,EAAU,MAAM;AAEZ,IAAIoB,KAAc7B,MAAc5B,IAC5B2D,EAAoBC,CAAc,IAG7B,CAACH,KAAc7B,MAAcgC,KAClCD,EAAoB3D,CAAgB;AAAA,EAE5C,GAAG,CAACyD,GAAYtB,CAAQ,CAAC,GAGzBE,EAAU,MAAMsB,EAAoB5D,CAAO,GAAG,CAACA,CAAO,CAAC;AAGvD,QAAM,CAAC8D,IAAkBC,EAAmB,IAAIrC,EAASxB,CAAQ;AACjE,EAAK8D,GAAQ9D,GAAU4D,EAAgB,MACnC9B,EAAgB9B,CAAQ,GACxB6D,GAAoB7D,CAAQ,IAIhCoC,EAAU,MAAMJ,EAAe/B,CAAmB,GAAG,CAACA,CAAmB,CAAC;AAE1E,QAAMyD,IAAsB,CAACK,MAAwB;AACjD,IAAAnC,GAAamC,CAAU,GACvB3D,GAAgB2D,GAAYjE,CAAO;AAAA,EACvC,GAEMkE,KAAuB,CAACC,MAAoB;AAC9C,UAAMC,IAAc,CAACC,MAA0BtC,EAAa,OAAO,CAAAuC,MAAQA,MAASD,CAAa,GAC3FE,IAAkBxC,EAAa,SAASoC,CAAK,IAAIC,EAAYD,CAAK,IAAI,CAAC,GAAGpC,GAAcoC,CAAK;AACnG,IAAAnC,EAAgBuC,CAAe,GAC/BlE,GAAiBkE,GAAiBxC,CAAY;AAAA,EAClD,GAEMyC,KAA0B,CAACC,MAA4B;AACzD,IAAAvC,EAAeuC,CAAc,GAC7BlE,GAAoBkE,CAAc;AAAA,EACtC,GAOMC,IAA4B,MAAM;AACpC,aAAS,cAAc,YAAY,GAAG,UAAU,IAAI,qBAAqB;AAAA,EAC7E,GACMC,IAA0B,MAAM;AAClC,aAAS,cAAc,YAAY,GAAG,UAAU,OAAO,qBAAqB;AAAA,EAChF,GAEMC,IAAuB,CAAA;AAC7B,EAAIxF,MACAwF,EAAM,SAASxF,IAEfD,MACAyF,EAAM,QAAQzF;AAElB,QAAM0F,KAAkBC,GAAQF,CAAK,IAAI,kBAAkB;AAE3D,SACI,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,kCAAkClD,EAAU,YAAA,CAAa,IAAIgD,EAAe;AAAA,MACvF,OAAAD;AAAA,MACA,KAAKtD;AAAA,MACL,cAAcoD;AAAA,MACd,YAAYC;AAAA,MACZ,cAAcD;AAAA,MACd,YAAYC;AAAA,MACZ,QAAQA;AAAA,MAEP,gBAAoBhD,KACjB,gBAAAqD;AAAA,QAACC,GAAW;AAAA,QAAX;AAAA,UACG,OAAO;AAAA,YACH,KAAAtD;AAAA,YACA,UAAAS;AAAA,YACA,aAAAvB;AAAA,YACA,aAAAoB;AAAA,YACA,cAAAF;AAAA,YACA,WAAAF;AAAA,YACA,sBAAAlC;AAAA,YACA,qBAAAD;AAAA,YACA,iBAAiBkE;AAAA,YACjB,kBAAkBM;AAAA,YAClB,qBAAqBM;AAAA,YACrB,oBAAA7D;AAAA,YACA,mBAAAD;AAAA,YACA,kBAAAyB;AAAA,UAAA;AAAA,UAGJ,UAAA;AAAA,YAAA,gBAAA4C,EAACG,IAAA,EAAY,KAAAvD,GAAU,aAAAlC,GAA0B,QAAAH,GAAgB,eAAAE,GAA8B;AAAA,YAC/F,gBAAAuF,EAACI,MAAQ,KAAAxD,GAAU;AAAA,YACnB,gBAAAoD;AAAA,cAACK;AAAA,cAAA;AAAA,gBACG,MAAA7F;AAAA,gBACA,iBAAiBM;AAAA,gBACjB,UAAAW;AAAA,gBACA,WAAAC;AAAA,gBACA,eAAAjB;AAAA,cAAA;AAAA,YAAA;AAAA,YAEHoB,KAAeA;AAAA,YAChB,gBAAAmE,EAACM,IAAA,EAAiB,QAAQtD,EAAA,CAAc;AAAA,YACxC,gBAAAgD,EAACO,IAAA,EAAY,KAAA3D,GAAW,UAAA1C,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACrC;AAAA,EAAA;AAIhB;AAEAF,EAAI,eAAekB;AACnBlB,EAAI,mBAAmBwG;AACvBxG,EAAI,iBAAiByG;AACrBzG,EAAI,eAAe0G;AACnB1G,EAAI,aAAa8E;AAEjB9E,EAAI,kBAAkB2G;AACtB3G,EAAI,gBAAgB4G;AACpB5G,EAAI,0BAA0BkE;"}
+{"version":3,"file":"Map.js","sources":["../../../../src/components/map/components/Map.tsx"],"sourcesContent":["import { useRef, useState, useEffect, type CSSProperties } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { isEqual } from 'es-toolkit/predicate';\n\nimport {\n    MAP_TYPE_DEFAULT,\n    MAP_TYPE_FLEET_STYLE,\n    MAP_TYPE_SATELLITE,\n    MAP_TYPE_TERRAIN,\n    MAP_TYPE_NIGHT,\n    MAP_LAYER_INCIDENTS,\n    MAP_LAYER_TRAFFIC,\n    MAP_LAYER_ROAD_RESTRICTIONS,\n    DEFAULT_MIN_ZOOM,\n    DEFAULT_MAX_ZOOM,\n    DEFAULT_PIXEL_RATIO,\n} from './constants';\n\nimport { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandling';\nimport { MapContext } from './MapContext';\nimport { createUtils, getMapBounds } from '../utils/mapUtils';\nimport { getHereUi } from '../utils/mapUi';\nimport useDarkMode from '../../../hooks/useDarkMode';\nimport MapZoom from './features/MapZoom';\nimport MapOverlayLayers from './features/layers/MapOverlayLayers';\nimport MapSize from './MapSize';\nimport MapPosition from './MapPosition';\nimport MapElements from './MapElements';\nimport type { MapApi, MapLayer, MapProps, MapType } from '../utils/mapTypes';\nimport { getPlatform, getEngineType, getBaseLayer } from '../utils/rendering';\n\nconst Map = (props: MapProps) => {\n    const {\n        children,\n        credentials,\n        width,\n        height,\n        language: lang = 'en',\n        center,\n        zoom,\n        zoomAnimation = false,\n        boundingBox,\n        hideClusterSettings = false,\n        hideMapLayerSettings = false,\n        disableMapEvents,\n        disableBehavior = false,\n        disableZoomMomentum = true,\n        eventListenerMap,\n        mapType = MAP_TYPE_DEFAULT,\n        mapLayer = [],\n        showCluster: externalShowCluster = true,\n        showScaleBar = false,\n        onMapLayerChange = () => {},\n        onMapTypeChange = () => {},\n        onShowClusterChange = () => {},\n        onZoomIn = () => {},\n        onZoomOut = () => {},\n        onIncidentsChange = () => {},\n        mapSettingsTooltip,\n        mapSettings,\n        enableWebGL = true,\n        enableDevicePixelRatio = true,\n        pixelRatio = DEFAULT_PIXEL_RATIO,\n        minZoom = DEFAULT_MIN_ZOOM,\n        maxZoom = DEFAULT_MAX_ZOOM,\n    } = props;\n\n    let safeMaxZoom = maxZoom;\n\n    if (minZoom > maxZoom) {\n        // Avoid crashing the map for invalid zoom limits\n        safeMaxZoom = DEFAULT_MAX_ZOOM;\n        console.error('Invalid condition for zoom limits: min <= max)');\n    }\n\n    const mapRef = useRef<HTMLDivElement>(null);\n\n    const [isMapInitialized, setMapInitialized] = useState(false);\n\n    const [api, setApi] = useState<MapApi>();\n\n    const [baseLayer, setBaseLayer] = useState<MapType>(mapType);\n    const [activeLayers, setActiveLayers] = useState<MapLayer[]>(mapLayer);\n    const [showCluster, setShowCluster] = useState(externalShowCluster);\n\n    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || pixelRatio : pixelRatio;\n\n    // Only short locale is supported by HERE Map\n    const language = (locale => (locale === 'nb' ? 'no' : locale))(lang.split('-')[0].toLowerCase());\n\n    useEffect(() => {\n        let allMapObjects: H.map.Object[] = [];\n\n        if (api?.map) {\n            allMapObjects = api.map.getObjects();\n            console.debug('re-initialize here map');\n        } else {\n            console.debug('initialize here map');\n        }\n\n        if (api?.map) {\n            // Cleanup any previously initialized map before doing anything else\n            console.debug('disposing previous map');\n            removeEventListenerMap(api.map);\n\n            if (api.mapEvents) {\n                api.mapEvents.dispose();\n            }\n\n            api.map.dispose();\n        }\n\n        const bounds = boundingBox && getMapBounds(boundingBox);\n\n        // Initialize communication with the platform\n        const platform = getPlatform(credentials);\n\n        // Specify engine type. In this example, we use HARP rendering engine, which is capable\n        // of rendering vector data using the style configuration exported from the HERE Style Editor.\n        // HARP engine is not the default engine, and it's not included in the mapsjs-core.js module.\n        // To use this engine, you need to include mapsjs-harp.js file to your HTML page\n        const engineType = getEngineType(baseLayer, enableWebGL);\n\n        // Obtain the default map types from the platform object\n        // @ts-expect-error-next-line: according to the Here docs, the engine type exists\n        // see https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/harp-migrate.html\n        const defaultLayers = platform.createDefaultLayers({ engineType, lg: language, pois: true });\n\n        getBaseLayer({\n            baseLayerName: baseLayer,\n            defaultLayers,\n            enableWebGL,\n            platform,\n            engineType,\n            vehicleRestrictions: activeLayers.includes(MAP_LAYER_ROAD_RESTRICTIONS),\n            language,\n            minZoom,\n            maxZoom: safeMaxZoom,\n        }).then(defaultLayerMap => {\n            // Initialize the map\n            const hereMap = new H.Map(mapRef.current as Element, defaultLayerMap.baseLayer, {\n                zoom,\n                center,\n                bounds,\n                engineType,\n                pixelRatio: devicePixelRatio,\n                fixedCenter: true,\n            });\n\n            if (defaultLayerMap.overlayLayer) {\n                // Special case for satellite map where we render street labels and road signs as well as additional pois as vector data\n                // hereMap.setBaseLayer(defaultLayerMap.baseLayer);\n                hereMap.addLayer(defaultLayerMap.overlayLayer);\n            }\n\n            setMapInitialized(true);\n\n            let hereMapEvents: H.mapevents.MapEvents | false = false;\n            let hereBehavior: H.mapevents.Behavior | undefined;\n\n            if (!disableMapEvents) {\n                // Enable the map event system\n                hereMapEvents = new H.mapevents.MapEvents(hereMap);\n            }\n\n            if (!(disableMapEvents || disableBehavior)) {\n                hereBehavior = new H.mapevents.Behavior(hereMapEvents as H.mapevents.MapEvents);\n                // @ts-expect-error-next-line\n                hereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);\n\n                if (disableZoomMomentum) {\n                    // Disable the inertia that occurs on WebGL maps when scrolling/zooming.\n                    // This resulted in a very high scroll sensitivity.\n                    // @ts-expect-error-next-line\n                    hereBehavior.disable(H.mapevents.Behavior.Feature.ZOOM_MOMENTUM);\n                }\n            }\n\n            addEventListenerMap(hereMap, eventListenerMap, hereMap);\n\n            const hereUi = getHereUi(hereMap, defaultLayers, showScaleBar, language);\n\n            // The api will be passed to services when using a render function.\n            // This allows the service to access the map internals\n            setApi({\n                credentials,\n                defaultLayers,\n                map: hereMap,\n                mapEvents: hereMapEvents,\n                behavior: hereBehavior,\n                platform,\n                ui: hereUi,\n                utils: createUtils(hereMap),\n                // Put settings back into the map API object so the invoking service\n                // can check on these settings for instance inside a test\n                settings: {\n                    enableWebGL,\n                    baseLayer,\n                    activeLayers,\n                    showCluster,\n                    minZoom,\n                    maxZoom: safeMaxZoom,\n                },\n            });\n\n            if (allMapObjects) {\n                // If the base layer changed, re-add all previous objects again,\n                // otherwise the map would be empty\n                hereMap.addObjects(allMapObjects);\n            }\n        });\n    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer, minZoom, maxZoom]);\n\n    const isDarkMode = useDarkMode();\n    useEffect(() => {\n        // Toggle night map only if current map type is default\n        if (isDarkMode && baseLayer === MAP_TYPE_DEFAULT) {\n            handleMapTypeChange(MAP_TYPE_NIGHT);\n        }\n        // Toggle back to default map only if current map type is night\n        else if (!isDarkMode && baseLayer === MAP_TYPE_NIGHT) {\n            handleMapTypeChange(MAP_TYPE_DEFAULT);\n        }\n    }, [isDarkMode, language]);\n\n    // Update MapType from outside\n    useEffect(() => handleMapTypeChange(mapType), [mapType]);\n\n    // Update MapLayer from outside\n    const [previousMapLayer, setPreviousMapLayer] = useState(mapLayer);\n    if (!isEqual(mapLayer, previousMapLayer)) {\n        setActiveLayers(mapLayer);\n        setPreviousMapLayer(mapLayer);\n    }\n\n    // Update Cluster setting from outside\n    useEffect(() => setShowCluster(externalShowCluster), [externalShowCluster]);\n\n    const handleMapTypeChange = (newMapType: MapType) => {\n        setBaseLayer(newMapType);\n        onMapTypeChange(newMapType, mapType);\n    };\n\n    const handleMapLayerChange = (layer: MapLayer) => {\n        const removeLayer = (layerToRemove: string) => activeLayers.filter(item => item !== layerToRemove);\n        const newActiveLayers = activeLayers.includes(layer) ? removeLayer(layer) : [...activeLayers, layer];\n        setActiveLayers(newActiveLayers);\n        onMapLayerChange(newActiveLayers, activeLayers);\n    };\n\n    const handleShowClusterChange = (newShowCluster: boolean) => {\n        setShowCluster(newShowCluster);\n        onShowClusterChange(newShowCluster);\n    };\n\n    // Note: For performance reasons, we deactivate pointer events and hence CSS style recalculation for the\n    // the body. Having for instance many assets in the tree causes a performance loss when clicking on the map\n    // to move it and zoom in/out since the map triggers a style invalidation and recalculation and\n    // due to the nature of the AssetTree with it's hundreds DOM nodes, applying the CSS selectors\n    // takes time.\n    const handleMapInteractionStart = () => {\n        document.querySelector('.AssetTree')?.classList.add('pointer-events-none');\n    };\n    const handleMapInteractionEnd = () => {\n        document.querySelector('.AssetTree')?.classList.remove('pointer-events-none');\n    };\n\n    const style: CSSProperties = {};\n    if (height) {\n        style.height = height;\n    }\n    if (width) {\n        style.width = width;\n    }\n    const autoHeightClass = isEmpty(style) ? 'height-100pct' : '';\n\n    return (\n        <div\n            className={`Map position-relative map-type-${baseLayer.toLowerCase()} ${autoHeightClass}`}\n            style={style}\n            ref={mapRef}\n            onTouchStart={handleMapInteractionStart}\n            onTouchEnd={handleMapInteractionEnd}\n            onMouseEnter={handleMapInteractionStart}\n            onMouseOut={handleMapInteractionEnd}\n            onBlur={handleMapInteractionEnd}\n        >\n            {isMapInitialized && api && (\n                <MapContext.Provider\n                    value={{\n                        api,\n                        language,\n                        enableWebGL,\n                        showCluster,\n                        activeLayers,\n                        baseLayer,\n                        hideMapLayerSettings,\n                        hideClusterSettings,\n                        onMapTypeChange: handleMapTypeChange,\n                        onMapLayerChange: handleMapLayerChange,\n                        onShowClusterChange: handleShowClusterChange,\n                        mapSettingsTooltip,\n                        onIncidentsChange,\n                        devicePixelRatio,\n                    }}\n                >\n                    <MapPosition api={api} boundingBox={boundingBox} center={center} zoomAnimation={zoomAnimation} />\n                    <MapSize api={api} />\n                    <MapZoom\n                        zoom={zoom}\n                        hideZoomButtons={disableBehavior}\n                        onZoomIn={onZoomIn}\n                        onZoomOut={onZoomOut}\n                        zoomAnimation={zoomAnimation}\n                    />\n                    {mapSettings && mapSettings}\n                    <MapOverlayLayers layers={activeLayers} />\n                    <MapElements api={api}>{children}</MapElements>\n                </MapContext.Provider>\n            )}\n        </div>\n    );\n};\n\nMap.TYPE_DEFAULT = MAP_TYPE_DEFAULT;\nMap.TYPE_FLEET_STYLE = MAP_TYPE_FLEET_STYLE;\nMap.TYPE_SATELLITE = MAP_TYPE_SATELLITE;\nMap.TYPE_TERRAIN = MAP_TYPE_TERRAIN;\nMap.TYPE_NIGHT = MAP_TYPE_NIGHT;\n\nMap.LAYER_INCIDENTS = MAP_LAYER_INCIDENTS;\nMap.LAYER_TRAFFIC = MAP_LAYER_TRAFFIC;\nMap.LAYER_ROAD_RESTRICTIONS = MAP_LAYER_ROAD_RESTRICTIONS;\n\nexport default Map;\n"],"names":["Map","props","children","credentials","width","height","lang","center","zoom","zoomAnimation","boundingBox","hideClusterSettings","hideMapLayerSettings","disableMapEvents","disableBehavior","disableZoomMomentum","eventListenerMap","mapType","MAP_TYPE_DEFAULT","mapLayer","externalShowCluster","showScaleBar","onMapLayerChange","onMapTypeChange","onShowClusterChange","onZoomIn","onZoomOut","onIncidentsChange","mapSettingsTooltip","mapSettings","enableWebGL","enableDevicePixelRatio","pixelRatio","DEFAULT_PIXEL_RATIO","minZoom","DEFAULT_MIN_ZOOM","maxZoom","DEFAULT_MAX_ZOOM","safeMaxZoom","mapRef","useRef","isMapInitialized","setMapInitialized","useState","api","setApi","baseLayer","setBaseLayer","activeLayers","setActiveLayers","showCluster","setShowCluster","devicePixelRatio","language","locale","useEffect","allMapObjects","removeEventListenerMap","bounds","getMapBounds","platform","getPlatform","engineType","getEngineType","defaultLayers","getBaseLayer","MAP_LAYER_ROAD_RESTRICTIONS","defaultLayerMap","hereMap","hereMapEvents","hereBehavior","addEventListenerMap","hereUi","getHereUi","createUtils","isDarkMode","useDarkMode","handleMapTypeChange","MAP_TYPE_NIGHT","previousMapLayer","setPreviousMapLayer","isEqual","newMapType","handleMapLayerChange","layer","removeLayer","layerToRemove","item","newActiveLayers","handleShowClusterChange","newShowCluster","handleMapInteractionStart","handleMapInteractionEnd","style","autoHeightClass","isEmpty","jsx","jsxs","MapContext","MapPosition","MapSize","MapZoom","MapOverlayLayers","MapElements","MAP_TYPE_FLEET_STYLE","MAP_TYPE_SATELLITE","MAP_TYPE_TERRAIN","MAP_LAYER_INCIDENTS","MAP_LAYER_TRAFFIC"],"mappings":"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"}