@kelvininc/ui-components/dist/collection/components/dropdown/dropdown.helper.js

Kelvin UI Components

import { flip, offset, size } from "@floating-ui/dom";
import { isEmpty } from "lodash-es";
import { DEFAULT_DROPDOWN_OFFSET, HELP_TEXT_HEIGHT_PX } from "./dropdown.config";
export const getDefaultDropdownPositionConfig = (inputConfig) => {
    const helpTextOffset = isEmpty(inputConfig.helpText) ? 0 : HELP_TEXT_HEIGHT_PX;
    return {
        placement: 'bottom',
        middleware: [
            offset(DEFAULT_DROPDOWN_OFFSET - helpTextOffset),
            flip({
                padding: 16,
                fallbackPlacements: ['top-end', 'bottom-end', 'top-start', 'bottom-start']
            }),
            size({
                apply({ rects, elements }) {
                    Object.assign(elements.floating.style, {
                        width: `${rects.reference.width}px`
                    });
                }
            })
        ]
    };
};