@chayns-components/core 5.2.8-alpha.0 → 5.3.0

package/lib/cjs/components/combobox/ComboBox.utils.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getComboBoxWidthResult = void 0;
+var _calculate = require("../../utils/calculate");
+var _ComboBox = require("./ComboBox.constants");
+const getPrefixWidth = (prefix, prefixMinWidth, functions, values) => {
+  if (!prefix) {
+    return 0;
+  }
+  const prefixTextWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+    list: [{
+      text: prefix,
+      value: 'prefix'
+    }],
+    functions,
+    values
+  });
+  return Math.max(prefixTextWidth + _ComboBox.COMBO_BOX_PREFIX_GAP_PX, prefixMinWidth ?? _ComboBox.COMBO_BOX_PREFIX_MIN_WIDTH_PX);
+};
+const clampToParentWidth = (width, parentWidth) => parentWidth > 0 ? Math.min(width, parentWidth) : width;
+const getComboBoxWidthResult = ({
+  functions,
+  internalSelectedItem,
+  lists,
+  parentWidth,
+  placeholder,
+  prefix,
+  prefixMinWidth,
+  selectedItem,
+  shouldDropDownUseMaxItemWidth,
+  shouldShowBigImage,
+  shouldShowClearIcon,
+  shouldUseCurrentItemWidth,
+  shouldUseFullWidth,
+  values
+}) => {
+  const allItems = lists.flatMap(list => list.list);
+  const effectiveSelectedItem = selectedItem ?? internalSelectedItem;
+  const maxItemWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+    list: [...allItems, {
+      text: placeholder,
+      value: 'placeholder'
+    }, ...(effectiveSelectedItem ? [effectiveSelectedItem] : [])],
+    functions,
+    shouldShowBigImage,
+    values
+  });
+  const prefixWidth = getPrefixWidth(prefix, prefixMinWidth, functions, values);
+  const triggerWidthBase = maxItemWidth + _ComboBox.COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + _ComboBox.COMBO_BOX_HEADER_BORDER_WIDTH_PX + _ComboBox.COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? _ComboBox.COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + _ComboBox.COMBO_BOX_ROUNDING_BUFFER_PX + prefixWidth;
+  const desiredBodyMinWidth = maxItemWidth + _ComboBox.COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX;
+  if (shouldDropDownUseMaxItemWidth) {
+    const width = clampToParentWidth(desiredBodyMinWidth, parentWidth);
+    return {
+      minWidth: width,
+      bodyMinWidth: width
+    };
+  }
+  if (shouldUseFullWidth) {
+    const width = clampToParentWidth(parentWidth, parentWidth);
+    return {
+      minWidth: width,
+      bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
+    };
+  }
+  if (shouldUseCurrentItemWidth && effectiveSelectedItem) {
+    const selectedItemWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+      list: [effectiveSelectedItem],
+      functions,
+      shouldShowBigImage,
+      values
+    });
+    const width = clampToParentWidth(selectedItemWidth + _ComboBox.COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX + _ComboBox.COMBO_BOX_HEADER_BORDER_WIDTH_PX + _ComboBox.COMBO_BOX_ACTION_ICON_WIDTH_PX + (shouldShowClearIcon ? _ComboBox.COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) + _ComboBox.COMBO_BOX_ROUNDING_BUFFER_PX + prefixWidth, parentWidth);
+    return {
+      minWidth: width,
+      bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
+    };
+  }
+  const width = clampToParentWidth(triggerWidthBase, parentWidth);
+  return {
+    minWidth: width,
+    bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth)
+  };
+};
+exports.getComboBoxWidthResult = getComboBoxWidthResult;
+//# sourceMappingURL=ComboBox.utils.js.map

package/lib/cjs/components/combobox/ComboBox.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.utils.js","names":["_calculate","require","_ComboBox","getPrefixWidth","prefix","prefixMinWidth","functions","values","prefixTextWidth","calculateMaxComboBoxItemWidth","list","text","value","Math","max","COMBO_BOX_PREFIX_GAP_PX","COMBO_BOX_PREFIX_MIN_WIDTH_PX","clampToParentWidth","width","parentWidth","min","getComboBoxWidthResult","internalSelectedItem","lists","placeholder","selectedItem","shouldDropDownUseMaxItemWidth","shouldShowBigImage","shouldShowClearIcon","shouldUseCurrentItemWidth","shouldUseFullWidth","allItems","flatMap","effectiveSelectedItem","maxItemWidth","prefixWidth","triggerWidthBase","COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX","COMBO_BOX_HEADER_BORDER_WIDTH_PX","COMBO_BOX_ACTION_ICON_WIDTH_PX","COMBO_BOX_CLEAR_ICON_WIDTH_PX","COMBO_BOX_ROUNDING_BUFFER_PX","desiredBodyMinWidth","COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX","minWidth","bodyMinWidth","selectedItemWidth","exports"],"sources":["../../../../src/components/combobox/ComboBox.utils.ts"],"sourcesContent":["import type { ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport { calculateMaxComboBoxItemWidth } from '../../utils/calculate';\nimport type { IComboBoxItem, IComboBoxItems } from './ComboBox.types';\nimport {\n    COMBO_BOX_ACTION_ICON_WIDTH_PX,\n    COMBO_BOX_CLEAR_ICON_WIDTH_PX,\n    COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX,\n    COMBO_BOX_PREFIX_GAP_PX,\n    COMBO_BOX_PREFIX_MIN_WIDTH_PX,\n    COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX,\n    COMBO_BOX_HEADER_BORDER_WIDTH_PX,\n    COMBO_BOX_ROUNDING_BUFFER_PX,\n} from './ComboBox.constants';\n\nexport type ComboBoxWidthOptions = {\n    functions: ChaynsReactFunctions;\n    internalSelectedItem?: IComboBoxItem;\n    lists: IComboBoxItems[];\n    parentWidth: number;\n    placeholder: string;\n    prefix?: string;\n    prefixMinWidth?: number;\n    selectedItem?: IComboBoxItem;\n    shouldDropDownUseMaxItemWidth?: boolean;\n    shouldShowBigImage?: boolean;\n    shouldShowClearIcon?: boolean;\n    shouldUseCurrentItemWidth?: boolean;\n    shouldUseFullWidth?: boolean;\n    values: ChaynsReactValues;\n};\n\nexport type ComboBoxWidthResult = {\n    minWidth?: number;\n    bodyMinWidth: number;\n};\n\nconst getPrefixWidth = (\n    prefix: ComboBoxWidthOptions['prefix'],\n    prefixMinWidth: ComboBoxWidthOptions['prefixMinWidth'],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    if (!prefix) {\n        return 0;\n    }\n\n    const prefixTextWidth = calculateMaxComboBoxItemWidth({\n        list: [{ text: prefix, value: 'prefix' }],\n        functions,\n        values,\n    });\n\n    return Math.max(\n        prefixTextWidth + COMBO_BOX_PREFIX_GAP_PX,\n        prefixMinWidth ?? COMBO_BOX_PREFIX_MIN_WIDTH_PX,\n    );\n};\n\nconst clampToParentWidth = (width: number, parentWidth: number) =>\n    parentWidth > 0 ? Math.min(width, parentWidth) : width;\n\nexport const getComboBoxWidthResult = ({\n    functions,\n    internalSelectedItem,\n    lists,\n    parentWidth,\n    placeholder,\n    prefix,\n    prefixMinWidth,\n    selectedItem,\n    shouldDropDownUseMaxItemWidth,\n    shouldShowBigImage,\n    shouldShowClearIcon,\n    shouldUseCurrentItemWidth,\n    shouldUseFullWidth,\n    values,\n}: ComboBoxWidthOptions): ComboBoxWidthResult => {\n    const allItems = lists.flatMap((list) => list.list);\n    const effectiveSelectedItem = selectedItem ?? internalSelectedItem;\n\n    const maxItemWidth = calculateMaxComboBoxItemWidth({\n        list: [\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(effectiveSelectedItem ? [effectiveSelectedItem] : []),\n        ],\n        functions,\n        shouldShowBigImage,\n        values,\n    });\n\n    const prefixWidth = getPrefixWidth(prefix, prefixMinWidth, functions, values);\n    const triggerWidthBase =\n        maxItemWidth +\n        COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX +\n        COMBO_BOX_HEADER_BORDER_WIDTH_PX +\n        COMBO_BOX_ACTION_ICON_WIDTH_PX +\n        (shouldShowClearIcon ? COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) +\n        COMBO_BOX_ROUNDING_BUFFER_PX +\n        prefixWidth;\n\n    const desiredBodyMinWidth = maxItemWidth + COMBO_BOX_DROPDOWN_HORIZONTAL_PADDING_PX;\n\n    if (shouldDropDownUseMaxItemWidth) {\n        const width = clampToParentWidth(desiredBodyMinWidth, parentWidth);\n\n        return {\n            minWidth: width,\n            bodyMinWidth: width,\n        };\n    }\n\n    if (shouldUseFullWidth) {\n        const width = clampToParentWidth(parentWidth, parentWidth);\n\n        return {\n            minWidth: width,\n            bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth),\n        };\n    }\n\n    if (shouldUseCurrentItemWidth && effectiveSelectedItem) {\n        const selectedItemWidth = calculateMaxComboBoxItemWidth({\n            list: [effectiveSelectedItem],\n            functions,\n            shouldShowBigImage,\n            values,\n        });\n\n        const width = clampToParentWidth(\n            selectedItemWidth +\n                COMBO_BOX_HEADER_HORIZONTAL_PADDING_PX +\n                COMBO_BOX_HEADER_BORDER_WIDTH_PX +\n                COMBO_BOX_ACTION_ICON_WIDTH_PX +\n                (shouldShowClearIcon ? COMBO_BOX_CLEAR_ICON_WIDTH_PX : 0) +\n                COMBO_BOX_ROUNDING_BUFFER_PX +\n                prefixWidth,\n            parentWidth,\n        );\n\n        return {\n            minWidth: width,\n            bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth),\n        };\n    }\n\n    const width = clampToParentWidth(triggerWidthBase, parentWidth);\n\n    return {\n        minWidth: width,\n        bodyMinWidth: clampToParentWidth(Math.max(desiredBodyMinWidth, width), parentWidth),\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js

@@ -13,26 +13,26 @@ var _dropdown2 = require("../../hooks/dropdown");
 var _container = require("../../hooks/container");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const DropdownBodyWrapper = ({
+const DropdownBodyWrapper = /*#__PURE__*/(0, _react.forwardRef)(({
   anchorElement,
   bodyWidth,
   children,
   container: containerProp,
   contentHeight = 0,
   direction = _dropdown.DropdownDirection.BOTTOM_RIGHT,
-  maxHeight = 300,
+  maxHeight,
   minBodyWidth = 0,
   onClose,
   onOutsideClick,
   onMeasure,
   shouldCaptureEvents = true,
   shouldShowDropdown
-}) => {
+}, ref) => {
   const isInChaynsWalletRef = (0, _react.useRef)(false);
   const [measuredContentHeight, setMeasuredContentHeight] = (0, _react.useState)(0);
   const [measuredContentWidth, setMeasuredContentWidth] = (0, _react.useState)(0);
   const [portal, setPortal] = (0, _react.useState)();
-  const ref = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
   const shouldPreventClickRef = (0, _react.useRef)(false);
   const touchTimeoutRef = (0, _react.useRef)(undefined);
   const container = (0, _container.useContainer)({
@@ -61,7 +61,7 @@ const DropdownBodyWrapper = ({
    * This function closes the body
    */
   const handleClick = (0, _react.useCallback)(event => {
-    if (ref.current && shouldShowDropdown && !anchorElement.contains(event.target) && !ref.current.contains(event.target)) {
+    if (contentRef.current && shouldShowDropdown && !anchorElement.contains(event.target) && !contentRef.current.contains(event.target)) {
       event.preventDefault();
       event.stopPropagation();
       const shouldPreventCloseOnClick = (onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick()) ?? false;
@@ -143,11 +143,14 @@ const DropdownBodyWrapper = ({
       $minWidth: minBodyWidth,
       $maxHeight: maxHeight,
       $direction: direction,
-      ref: ref
+      ref: contentRef,
+      className: typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined,
+      tabIndex: 0
     }, children)), container));
   }, [children, container, coordinates, direction, handleContentMeasure, maxHeight, minBodyWidth, shouldShowDropdown, transform, width]);
+  (0, _react.useImperativeHandle)(ref, () => contentRef.current, []);
   return /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.StyledDropdownBodyWrapper, null, portal);
-};
+});
 DropdownBodyWrapper.displayName = 'DropdownBodyWrapper';
 var _default = exports.default = DropdownBodyWrapper;
 //# sourceMappingURL=DropdownBodyWrapper.js.map

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","contentWidth","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldCaptureEvents = true,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        anchorElement,\n        container,\n        contentHeight,\n        contentWidth: bodyWidth ?? measuredContentWidth,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            setMeasuredContentWidth(measurements.width);\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n        shouldCaptureEvents,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","forwardRef","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","contentWidth","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","useImperativeHandle","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper = forwardRef<HTMLDivElement, DropdownBodyWrapperProps>(\n    (\n        {\n            anchorElement,\n            bodyWidth,\n            children,\n            container: containerProp,\n            contentHeight = 0,\n            direction = DropdownDirection.BOTTOM_RIGHT,\n            maxHeight,\n            minBodyWidth = 0,\n            onClose,\n            onOutsideClick,\n            onMeasure,\n            shouldCaptureEvents = true,\n            shouldShowDropdown,\n        },\n        ref,\n    ) => {\n        const isInChaynsWalletRef = useRef(false);\n\n        const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n        const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const contentRef = useRef<HTMLDivElement>(null);\n        const shouldPreventClickRef = useRef<boolean>(false);\n        const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n        const container = useContainer({ anchorElement, container: containerProp });\n\n        const { transform, width, coordinates } = useDropdown({\n            anchorElement,\n            container,\n            contentHeight,\n            contentWidth: bodyWidth ?? measuredContentWidth,\n            direction,\n            shouldShowDropdown,\n        });\n\n        const handleClose = useCallback(() => {\n            if (typeof onClose === 'function') {\n                onClose();\n            }\n        }, [onClose]);\n\n        /**\n         * This function closes the body\n         */\n        const handleClick = useCallback(\n            (event: MouseEvent) => {\n                if (\n                    contentRef.current &&\n                    shouldShowDropdown &&\n                    !anchorElement.contains(event.target as Node) &&\n                    !contentRef.current.contains(event.target as Node)\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                    if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                        handleClose();\n                    }\n                }\n\n                shouldPreventClickRef.current = false;\n            },\n            [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n        );\n\n        const handleContentMeasure = useCallback(\n            (measurements: DropdownMeasurements) => {\n                // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n                // unnecessary renders, we only set the height if the content is shown in the wallet.\n                if (isInChaynsWalletRef.current) {\n                    setMeasuredContentHeight(measurements.height);\n                }\n\n                setMeasuredContentWidth(measurements.width);\n\n                if (typeof onMeasure === 'function') {\n                    onMeasure(measurements);\n                }\n            },\n            [onMeasure],\n        );\n\n        const handleTouchEnd = useCallback(() => {\n            clearTimeout(touchTimeoutRef.current);\n        }, []);\n\n        const handleTouchStart = useCallback(() => {\n            touchTimeoutRef.current = window.setTimeout(() => {\n                shouldPreventClickRef.current = true;\n            }, 500);\n        }, []);\n\n        /**\n         * This hook listens for clicks\n         */\n        useDropdownListener({\n            onClick: handleClick,\n            onClose: handleClose,\n            onTouchEnd: handleTouchEnd,\n            onTouchStart: handleTouchStart,\n            shouldCaptureEvents,\n        });\n\n        useEffect(() => {\n            const isBottomDirection = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n                ContainerAnchor.RESERVATION_WRAPPER,\n            );\n\n            isInChaynsWalletRef.current =\n                !!(\n                    reservationWrapperElement && reservationWrapperElement.contains(anchorElement)\n                ) || true;\n\n            // This effect checks if additional space is needed to show dropdown content in chayns cards.\n            if (\n                isBottomDirection &&\n                isInChaynsWalletRef.current &&\n                measuredContentHeight > 0 &&\n                reservationWrapperElement &&\n                shouldShowDropdown\n            ) {\n                const availableHeight =\n                    window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n                // If the content height is greater than the available height, we need to add additional space.\n                // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n                const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n                if (additionalNeededSpace > 0) {\n                    // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                    reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n                } else {\n                    // Reset the margin bottom if no additional space is needed.\n                    reservationWrapperElement.style.marginBottom = '0px';\n                }\n            }\n\n            if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n                // Reset the margin bottom when the dropdown is closed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n\n            return () => {\n                if (reservationWrapperElement) {\n                    reservationWrapperElement.style.marginBottom = '0px';\n                }\n            };\n        }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n        useEffect(() => {\n            if (!container) return;\n\n            setPortal(() =>\n                createPortal(\n                    <DelayedDropdownContent\n                        coordinates={coordinates}\n                        onMeasure={handleContentMeasure}\n                        shouldShowContent={shouldShowDropdown}\n                        transform={transform}\n                    >\n                        <StyledDropdownBodyWrapperContent\n                            $width={width}\n                            $minWidth={minBodyWidth}\n                            $maxHeight={maxHeight}\n                            $direction={direction}\n                            ref={contentRef}\n                            className={\n                                typeof maxHeight === 'number' ? 'chayns-scrollbar' : undefined\n                            }\n                            tabIndex={0}\n                        >\n                            {children}\n                        </StyledDropdownBodyWrapperContent>\n                    </DelayedDropdownContent>,\n                    container,\n                ),\n            );\n        }, [\n            children,\n            container,\n            coordinates,\n            direction,\n            handleContentMeasure,\n            maxHeight,\n            minBodyWidth,\n            shouldShowDropdown,\n            transform,\n            width,\n        ]);\n\n        useImperativeHandle(ref, () => contentRef.current!, []);\n\n        return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n    },\n);\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js

@@ -12,19 +12,25 @@ const StyledDropdownBodyWrapperContent = exports.StyledDropdownBodyWrapperConten
     width: ${({
   $width
 }) => $width}px;
-    max-height: ${({
-  $maxHeight
-}) => $maxHeight}px;
     min-width: ${({
   $minWidth
 }) => $minWidth}px;
 
+    overflow: hidden;
+
+    ${({
+  $maxHeight
+}) => typeof $maxHeight === 'number' && (0, _styledComponents.css)`
+            max-height: ${$maxHeight}px;
+            overflow-y: auto;
+            overflow-x: hidden;
+        `}
+
     // Basic styles
     background: ${({
   theme
 }) => theme['000']};
     border: 1px solid rgba(160, 160, 160, 0.3);
-    overflow: hidden;
     box-shadow: 0 0 0 1px
         rgba(${({
   theme

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBodyWrapper.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledDropdownBodyWrapper","exports","styled","div","StyledDropdownBodyWrapperContent","$width","$maxHeight","$minWidth","theme","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","css"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\n\nexport const StyledDropdownBodyWrapper = styled.div``;\n\ntype StyledDropdownBodyWrapperContentProps = WithTheme<{\n    $width: number;\n    $maxHeight: number;\n    $minWidth: number;\n    $direction: DropdownDirection;\n}>;\n\nexport const StyledDropdownBodyWrapperContent = styled.div<StyledDropdownBodyWrapperContentProps>`\n    width: ${({ $width }) => $width}px;\n    max-height: ${({ $maxHeight }) => $maxHeight}px;\n    min-width: ${({ $minWidth }) => $minWidth}px;\n\n    // Basic styles\n    background: ${({ theme }: StyledDropdownBodyWrapperContentProps) => theme['000']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    overflow: hidden;\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledDropdownBodyWrapperContentProps) => theme['009-rgb']}, 0.08) inset;\n\n    ${({ $direction }) => {\n        if (\n            [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n        ) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AAAyD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElD,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAS9C,MAAMC,gCAAgC,GAAAH,OAAA,CAAAG,gCAAA,GAAGF,yBAAM,CAACC,GAA0C;AACjG,aAAa,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AACnC,kBAAkB,CAAC;EAAEC;AAAW,CAAC,KAAKA,UAAU;AAChD,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAKA,SAAS;AAC7C;AACA;AACA,kBAAkB,CAAC;EAAEC;AAA6C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACpF;AACA;AACA;AACA,eAAe,CAAC;EAAEA;AAA6C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACrF;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAK;EAClB,IACI,CACIC,2BAAiB,CAACC,MAAM,EACxBD,2BAAiB,CAACE,WAAW,EAC7BF,2BAAiB,CAACG,YAAY,CACjC,CAACC,QAAQ,CAACL,UAAU,CAAC,EACxB;IACE,OAAO,IAAAM,qBAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"DropdownBodyWrapper.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledDropdownBodyWrapper","exports","styled","div","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","css","theme","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\n\nexport const StyledDropdownBodyWrapper = styled.div``;\n\ntype StyledDropdownBodyWrapperContentProps = WithTheme<{\n    $width: number;\n    $maxHeight?: number;\n    $minWidth: number;\n    $direction: DropdownDirection;\n}>;\n\nexport const StyledDropdownBodyWrapperContent = styled.div<StyledDropdownBodyWrapperContentProps>`\n    width: ${({ $width }) => $width}px;\n    min-width: ${({ $minWidth }) => $minWidth}px;\n\n    overflow: hidden;\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: auto;\n            overflow-x: hidden;\n        `}\n\n    // Basic styles\n    background: ${({ theme }: StyledDropdownBodyWrapperContentProps) => theme['000']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledDropdownBodyWrapperContentProps) => theme['009-rgb']}, 0.08) inset;\n\n    ${({ $direction }) => {\n        if (\n            [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n        ) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AAAyD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElD,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAS9C,MAAMC,gCAAgC,GAAAH,OAAA,CAAAG,gCAAA,GAAGF,yBAAM,CAACC,GAA0C;AACjG,aAAa,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AACnC,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAKA,SAAS;AAC7C;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9B,IAAAC,qBAAG;AACX,0BAA0BD,UAAU;AACpC;AACA;AACA,SAAS;AACT;AACA;AACA,kBAAkB,CAAC;EAAEE;AAA6C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACpF;AACA;AACA,eAAe,CAAC;EAAEA;AAA6C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACrF;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KAAK;EAClB,IACI,CACIC,2BAAiB,CAACC,MAAM,EACxBD,2BAAiB,CAACE,WAAW,EAC7BF,2BAAiB,CAACG,YAAY,CACjC,CAACC,QAAQ,CAACL,UAAU,CAAC,EACxB;IACE,OAAO,IAAAF,qBAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FILTER_CONTENT_ROW_GAP_PX = void 0;
+const FILTER_CONTENT_ROW_GAP_PX = exports.FILTER_CONTENT_ROW_GAP_PX = 10;
+//# sourceMappingURL=FilterContent.constants.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.constants.js","names":["FILTER_CONTENT_ROW_GAP_PX","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.constants.ts"],"sourcesContent":["export const FILTER_CONTENT_ROW_GAP_PX = 10;\n"],"mappings":";;;;;;AAAO,MAAMA,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,EAAE","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.js

@@ -13,9 +13,9 @@ var _ComboBox = _interopRequireDefault(require("../../combobox/ComboBox"));
 var _Checkbox = _interopRequireDefault(require("../../checkbox/Checkbox"));
 var _textstring = require("@chayns-components/textstring");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
+var _FilterContent2 = require("./FilterContent.utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const FilterContent = ({
   searchConfig,
   sortConfig,
@@ -24,9 +24,7 @@ const FilterContent = ({
   comboboxConfig,
   shouldAutoFocus
 }) => {
-  const sortTextRef = (0, _react.useRef)(null);
   const searchRef = (0, _react.useRef)(null);
-  const [sortTextWidth, setSortTextWidth] = (0, _react.useState)(0);
   const ts = _textStrings.default.components.filter.filterContent;
   const handleSelectSortItem = (0, _react.useCallback)(item => {
     if (!item) {
@@ -43,11 +41,6 @@ const FilterContent = ({
       });
     }
   }, [sortConfig]);
-  (0, _react.useEffect)(() => {
-    if (sortTextRef.current) {
-      setSortTextWidth(sortTextRef.current.clientWidth + 20);
-    }
-  }, []);
   (0, _react.useEffect)(() => {
     if (shouldAutoFocus) {
       var _searchRef$current;
@@ -67,34 +60,20 @@ const FilterContent = ({
     leftElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       icons: ['fa fa-search']
     })
-  }), filterButtonConfig && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, filterButtonConfig), sortConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterSort, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterSortText, {
-    ref: sortTextRef
-  }, /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
+  }), filterButtonConfig && /*#__PURE__*/_react.default.createElement(_FilterButtons.default, filterButtonConfig), sortConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
     textstring: (0, _textstring.ttsToITextString)(ts.sort)
-  })), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxWrapper, {
-    $textWidth: sortTextWidth
-  }, /*#__PURE__*/_react.default.createElement(_ComboBox.default, {
-    lists: [{
-      list: sortConfig.items.map(({
-        text,
-        id
-      }) => ({
-        text,
-        value: id
-      }))
-    }],
+  })), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentControlWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, {
+    lists: (0, _FilterContent2.getSortComboBoxLists)(sortConfig),
     placeholder: "",
     selectedItem: {
       text: sortConfig.selectedItem.text,
       value: sortConfig.selectedItem.id
     },
     onSelect: handleSelectSortItem
-  }))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInline, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInlineLabel, null, comboboxConfig.label), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInlineComboboxWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, _extends({
-    shouldUseCurrentItemWidth: true
-  }, comboboxConfig)))), checkboxConfig &&
+  }))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabeledRow, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterContentControlWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, comboboxConfig))), checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  _react.default.createElement(_Checkbox.default, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth, ts.input.placeholder, ts.sort]);
+  _react.default.createElement(_Checkbox.default, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, ts.input.placeholder, ts.sort]);
 };
 FilterContent.displayName = 'FilterContent';
 var _default = exports.default = FilterContent;

package/lib/cjs/components/filter/filter-content/FilterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","_textstring","_textStrings","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","sortTextRef","useRef","searchRef","sortTextWidth","setSortTextWidth","useState","ts","textStrings","components","filter","filterContent","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","current","clientWidth","_searchRef$current","focus","useMemo","createElement","TextstringProvider","libraryName","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","Textstring","textstring","ttsToITextString","input","searchValue","shouldShowClearIcon","leftElement","icons","StyledFilterSort","StyledFilterSortText","sort","StyledFilterComboboxWrapper","$textWidth","lists","list","items","map","selectedItem","onSelect","StyledFilterComboboxInline","StyledFilterComboboxInlineLabel","label","StyledFilterComboboxInlineComboboxWrapper","shouldUseCurrentItemWidth","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledFilterComboboxInline,\n    StyledFilterComboboxInlineComboboxWrapper,\n    StyledFilterComboboxInlineLabel,\n    StyledFilterComboboxWrapper,\n    StyledFilterContent,\n    StyledFilterSort,\n    StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\n\nexport type FilterContentProps = {\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    comboboxConfig?: ComboboxConfig;\n    shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    comboboxConfig,\n    shouldAutoFocus,\n}) => {\n    const sortTextRef = useRef<HTMLDivElement>(null);\n    const searchRef = useRef<InputRef>(null);\n\n    const [sortTextWidth, setSortTextWidth] = useState(0);\n\n    const ts = textStrings.components.filter.filterContent;\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (sortTextRef.current) {\n            setSortTextWidth(sortTextRef.current.clientWidth + 20);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <StyledFilterContent>\n                    {searchConfig && (\n                        <Input\n                            ref={searchRef}\n                            onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                            placeholder={\n                                <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n                            }\n                            value={searchConfig.searchValue}\n                            shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                            leftElement={<Icon icons={['fa fa-search']} />}\n                        />\n                    )}\n                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                    {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n                    {sortConfig && (\n                        <StyledFilterSort>\n                            <StyledFilterSortText ref={sortTextRef}>\n                                <Textstring textstring={ttsToITextString(ts.sort)} />\n                            </StyledFilterSortText>\n                            <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n                                <ComboBox\n                                    lists={[\n                                        {\n                                            list: sortConfig.items.map(({ text, id }) => ({\n                                                text,\n                                                value: id,\n                                            })),\n                                        },\n                                    ]}\n                                    placeholder=\"\"\n                                    selectedItem={{\n                                        text: sortConfig.selectedItem.text,\n                                        value: sortConfig.selectedItem.id,\n                                    }}\n                                    onSelect={handleSelectSortItem}\n                                />\n                            </StyledFilterComboboxWrapper>\n                        </StyledFilterSort>\n                    )}\n                    {comboboxConfig && (\n                        <StyledFilterComboboxInline>\n                            <StyledFilterComboboxInlineLabel>\n                                {comboboxConfig.label}\n                            </StyledFilterComboboxInlineLabel>\n                            <StyledFilterComboboxInlineComboboxWrapper>\n                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                                <ComboBox shouldUseCurrentItemWidth {...comboboxConfig} />\n                            </StyledFilterComboboxInlineComboboxWrapper>\n                        </StyledFilterComboboxInline>\n                    )}\n                    {checkboxConfig && (\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        <Checkbox {...checkboxConfig} />\n                    )}\n                </StyledFilterContent>\n            </TextstringProvider>\n        ),\n        [\n            checkboxConfig,\n            comboboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            sortConfig,\n            sortTextWidth,\n            ts.input.placeholder,\n            ts.sort,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AASA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,cAAA,GAAAF,sBAAA,CAAAH,OAAA;AAQA,IAAAM,SAAA,GAAAH,sBAAA,CAAAH,OAAA;AACA,IAAAO,SAAA,GAAAJ,sBAAA,CAAAH,OAAA;AAEA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,YAAA,GAAAN,sBAAA,CAAAH,OAAA;AAAyD,SAAAG,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,SAAAgB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAf,CAAA,aAAAN,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAG,CAAA,GAAAmB,SAAA,CAAAtB,CAAA,YAAAK,CAAA,IAAAF,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAZ,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAa,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAWzD,MAAMG,aAAqC,GAAGA,CAAC;EAC3CC,YAAY;EACZC,UAAU;EACVC,kBAAkB;EAClBC,cAAc;EACdC,cAAc;EACdC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAChD,MAAMC,SAAS,GAAG,IAAAD,aAAM,EAAW,IAAI,CAAC;EAExC,MAAM,CAACE,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAErD,MAAMC,EAAE,GAAGC,oBAAW,CAACC,UAAU,CAACC,MAAM,CAACC,aAAa;EAEtD,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EACnCC,IAA+B,IAAK;IACjC,IAAI,CAACA,IAAI,EAAE;MACP;IACJ;IAEA,MAAM;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAGF,IAAI;IAE5B,IAAIlB,UAAU,EAAE;MACZA,UAAU,CAACqB,YAAY,CAAC;QAAEF,IAAI;QAAEG,EAAE,EAAEF;MAAM,CAAC,CAAC;IAChD;EACJ,CAAC,EACD,CAACpB,UAAU,CACf,CAAC;EAED,IAAAuB,gBAAS,EAAC,MAAM;IACZ,IAAIlB,WAAW,CAACmB,OAAO,EAAE;MACrBf,gBAAgB,CAACJ,WAAW,CAACmB,OAAO,CAACC,WAAW,GAAG,EAAE,CAAC;IAC1D;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAF,gBAAS,EAAC,MAAM;IACZ,IAAInB,eAAe,EAAE;MAAA,IAAAsB,kBAAA;MACjB,CAAAA,kBAAA,GAAAnB,SAAS,CAACiB,OAAO,cAAAE,kBAAA,eAAjBA,kBAAA,CAAmBC,KAAK,CAAC,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACvB,eAAe,CAAC,CAAC;EAErB,OAAO,IAAAwB,cAAO,EACV,mBACInE,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC1D,WAAA,CAAA2D,kBAAkB;IAACC,WAAW,EAAC;EAAyB,gBACrDtE,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,cAAA,CAAAoE,mBAAmB,QACfjC,YAAY,iBACTtC,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAChE,MAAA,CAAAU,OAAK;IACF0D,GAAG,EAAE1B,SAAU;IACf2B,QAAQ,EAAGC,EAAE,IAAKpC,YAAY,CAACqC,cAAc,CAACD,EAAE,CAACE,MAAM,CAACjB,KAAK,CAAE;IAC/DkB,WAAW,eACP7E,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC1D,WAAA,CAAAoE,UAAU;MAACC,UAAU,EAAE,IAAAC,4BAAgB,EAAC9B,EAAE,CAAC+B,KAAK,CAACJ,WAAW;IAAE,CAAE,CACpE;IACDlB,KAAK,EAAErB,YAAY,CAAC4C,WAAY;IAChCC,mBAAmB,EAAE7C,YAAY,CAAC4C,WAAW,CAAC/C,MAAM,GAAG,CAAE;IACzDiD,WAAW,eAAEpF,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC9D,KAAA,CAAAQ,OAAI;MAACuE,KAAK,EAAE,CAAC,cAAc;IAAE,CAAE;EAAE,CAClD,CACJ,EAEA7C,kBAAkB,iBAAIxC,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC7D,cAAA,CAAAO,OAAa,EAAK0B,kBAAqB,CAAC,EAC/DD,UAAU,iBACPvC,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,cAAA,CAAAmF,gBAAgB,qBACbtF,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,cAAA,CAAAoF,oBAAoB;IAACf,GAAG,EAAE5B;EAAY,gBACnC5C,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC1D,WAAA,CAAAoE,UAAU;IAACC,UAAU,EAAE,IAAAC,4BAAgB,EAAC9B,EAAE,CAACsC,IAAI;EAAE,CAAE,CAClC,CAAC,eACvBxF,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,cAAA,CAAAsF,2BAA2B;IAACC,UAAU,EAAE3C;EAAc,gBACnD/C,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC5D,SAAA,CAAAM,OAAQ;IACL6E,KAAK,EAAE,CACH;MACIC,IAAI,EAAErD,UAAU,CAACsD,KAAK,CAACC,GAAG,CAAC,CAAC;QAAEpC,IAAI;QAAEG;MAAG,CAAC,MAAM;QAC1CH,IAAI;QACJC,KAAK,EAAEE;MACX,CAAC,CAAC;IACN,CAAC,CACH;IACFgB,WAAW,EAAC,EAAE;IACdkB,YAAY,EAAE;MACVrC,IAAI,EAAEnB,UAAU,CAACwD,YAAY,CAACrC,IAAI;MAClCC,KAAK,EAAEpB,UAAU,CAACwD,YAAY,CAAClC;IACnC,CAAE;IACFmC,QAAQ,EAAEzC;EAAqB,CAClC,CACwB,CACf,CACrB,EACAb,cAAc,iBACX1C,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,cAAA,CAAA8F,0BAA0B,qBACvBjG,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,cAAA,CAAA+F,+BAA+B,QAC3BxD,cAAc,CAACyD,KACa,CAAC,eAClCnG,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAACjE,cAAA,CAAAiG,yCAAyC,qBAEtCpG,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC5D,SAAA,CAAAM,OAAQ,EAAAiB,QAAA;IAACsE,yBAAyB;EAAA,GAAK3D,cAAc,CAAG,CAClB,CACnB,CAC/B,EACAD,cAAc;EAAA;EACX;EACAzC,MAAA,CAAAc,OAAA,CAAAsD,aAAA,CAAC3D,SAAA,CAAAK,OAAQ,EAAK2B,cAAiB,CAElB,CACL,CACvB,EACD,CACIA,cAAc,EACdC,cAAc,EACdF,kBAAkB,EAClBe,oBAAoB,EACpBjB,YAAY,EACZC,UAAU,EACVQ,aAAa,EACbG,EAAE,CAAC+B,KAAK,CAACJ,WAAW,EACpB3B,EAAE,CAACsC,IAAI,CAEf,CAAC;AACL,CAAC;AAEDnD,aAAa,CAACiE,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1F,OAAA,GAE7BuB,aAAa","ignoreList":[]}
+{"version":3,"file":"FilterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","_textstring","_textStrings","_FilterContent2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","searchRef","useRef","ts","textStrings","components","filter","filterContent","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","_searchRef$current","current","focus","useMemo","createElement","TextstringProvider","libraryName","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","Textstring","textstring","ttsToITextString","input","searchValue","shouldShowClearIcon","length","leftElement","icons","StyledFilterContentLabeledRow","StyledFilterContentLabel","sort","StyledFilterContentControlWrapper","lists","getSortComboBoxLists","selectedItem","onSelect","label","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n    StyledFilterContentControlWrapper,\n    StyledFilterContentLabel,\n    StyledFilterContentLabeledRow,\n    StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    comboboxConfig,\n    shouldAutoFocus,\n}) => {\n    const searchRef = useRef<InputRef>(null);\n\n    const ts = textStrings.components.filter.filterContent;\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <TextstringProvider libraryName=\"@chayns-components-core\">\n                <StyledFilterContent>\n                    {searchConfig && (\n                        <Input\n                            ref={searchRef}\n                            onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                            placeholder={\n                                <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n                            }\n                            value={searchConfig.searchValue}\n                            shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                            leftElement={<Icon icons={['fa fa-search']} />}\n                        />\n                    )}\n                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                    {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n                    {sortConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                <Textstring textstring={ttsToITextString(ts.sort)} />\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                <ComboBox\n                                    lists={getSortComboBoxLists(sortConfig)}\n                                    placeholder=\"\"\n                                    selectedItem={{\n                                        text: sortConfig.selectedItem.text,\n                                        value: sortConfig.selectedItem.id,\n                                    }}\n                                    onSelect={handleSelectSortItem}\n                                />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {comboboxConfig && (\n                        <StyledFilterContentLabeledRow>\n                            <StyledFilterContentLabel>\n                                {comboboxConfig.label}\n                            </StyledFilterContentLabel>\n                            <StyledFilterContentControlWrapper>\n                                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                                <ComboBox {...comboboxConfig} />\n                            </StyledFilterContentControlWrapper>\n                        </StyledFilterContentLabeledRow>\n                    )}\n                    {checkboxConfig && (\n                        // eslint-disable-next-line react/jsx-props-no-spreading\n                        <Checkbox {...checkboxConfig} />\n                    )}\n                </StyledFilterContent>\n            </TextstringProvider>\n        ),\n        [\n            checkboxConfig,\n            comboboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            sortConfig,\n            ts.input.placeholder,\n            ts.sort,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.styles.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFilterSortText = exports.StyledFilterSort = exports.StyledFilterContent = exports.StyledFilterComboboxWrapper = exports.StyledFilterComboboxInlineLabel = exports.StyledFilterComboboxInlineComboboxWrapper = exports.StyledFilterComboboxInline = void 0;
+exports.StyledFilterContentLabeledRow = exports.StyledFilterContentLabel = exports.StyledFilterContentControlWrapper = exports.StyledFilterContent = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _FilterContent = require("./FilterContent.constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledFilterContent = exports.StyledFilterContent = _styledComponents.default.div`
     background-color: ${({
@@ -17,36 +18,21 @@ const StyledFilterContent = exports.StyledFilterContent = _styledComponents.defa
     flex-direction: column;
     gap: 10px;
 `;
-const StyledFilterSort = exports.StyledFilterSort = _styledComponents.default.div`
+const StyledFilterContentLabeledRow = exports.StyledFilterContentLabeledRow = _styledComponents.default.div`
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-`;
-const StyledFilterSortText = exports.StyledFilterSortText = _styledComponents.default.div`
-    flex: 0 0 auto;
-`;
-const StyledFilterComboboxWrapper = exports.StyledFilterComboboxWrapper = _styledComponents.default.div`
-    display: flex;
-    justify-content: end;
-    
-    width: ${({
-  $textWidth
-}) => `calc(100% - ${$textWidth}px)`}}
-`;
-const StyledFilterComboboxInline = exports.StyledFilterComboboxInline = _styledComponents.default.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
+    gap: ${_FilterContent.FILTER_CONTENT_ROW_GAP_PX}px;
+    width: 100%;
+    min-width: 0;
 `;
-const StyledFilterComboboxInlineLabel = exports.StyledFilterComboboxInlineLabel = _styledComponents.default.div`
+const StyledFilterContentLabel = exports.StyledFilterContentLabel = _styledComponents.default.div`
     flex: 0 0 auto;
+    white-space: nowrap;
 `;
-const StyledFilterComboboxInlineComboboxWrapper = exports.StyledFilterComboboxInlineComboboxWrapper = _styledComponents.default.div`
+const StyledFilterContentControlWrapper = exports.StyledFilterContentControlWrapper = _styledComponents.default.div`
     display: flex;
-    justify-content: end;
     flex: 1 1 auto;
     min-width: 0;
+    justify-content: flex-end;
 `;
 //# sourceMappingURL=FilterContent.styles.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","StyledFilterComboboxInline","StyledFilterComboboxInlineLabel","StyledFilterComboboxInlineComboboxWrapper"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n    background-color: ${({ theme }) => theme['100']};\n\n    padding: 12px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n`;\n\nexport const StyledFilterSort = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n`;\n\nexport const StyledFilterSortText = styled.div`\n    flex: 0 0 auto;\n`;\n\ntype StyledFilterComboboxWrapperProps = WithTheme<{\n    $textWidth: number;\n}>;\n\nexport const StyledFilterComboboxWrapper = styled.div<StyledFilterComboboxWrapperProps>`\n    display: flex;\n    justify-content: end;\n    \n    width: ${({ $textWidth }) => `calc(100% - ${$textWidth}px)`}}\n`;\n\nexport const StyledFilterComboboxInline = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 10px;\n`;\n\nexport const StyledFilterComboboxInlineLabel = styled.div`\n    flex: 0 0 auto;\n`;\n\nexport const StyledFilterComboboxInlineComboboxWrapper = styled.div`\n    display: flex;\n    justify-content: end;\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gBAAgB,GAAAJ,OAAA,CAAAI,gBAAA,GAAGH,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMG,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC9C;AACA,CAAC;AAMM,MAAMI,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA,aAAa,CAAC;EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC;AAEM,MAAMC,0BAA0B,GAAAR,OAAA,CAAAQ,0BAAA,GAAGP,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMO,+BAA+B,GAAAT,OAAA,CAAAS,+BAAA,GAAGR,yBAAM,CAACC,GAAG;AACzD;AACA,CAAC;AAEM,MAAMQ,yCAAyC,GAAAV,OAAA,CAAAU,yCAAA,GAAGT,yBAAM,CAACC,GAAG;AACnE;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_FilterContent","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterContentLabeledRow","FILTER_CONTENT_ROW_GAP_PX","StyledFilterContentLabel","StyledFilterContentControlWrapper"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { FILTER_CONTENT_ROW_GAP_PX } from './FilterContent.constants';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n    background-color: ${({ theme }) => theme['100']};\n\n    padding: 12px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n`;\n\nexport const StyledFilterContentLabeledRow = styled.div`\n    display: flex;\n    align-items: center;\n    gap: ${FILTER_CONTENT_ROW_GAP_PX}px;\n    width: 100%;\n    min-width: 0;\n`;\n\nexport const StyledFilterContentLabel = styled.div`\n    flex: 0 0 auto;\n    white-space: nowrap;\n`;\n\nexport const StyledFilterContentControlWrapper = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    justify-content: flex-end;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAAsE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAI/D,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACC,GAAG;AACvD;AACA;AACA,WAAWG,wCAAyB;AACpC;AACA;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAN,OAAA,CAAAM,wBAAA,GAAGL,yBAAM,CAACC,GAAG;AAClD;AACA;AACA,CAAC;AAEM,MAAMK,iCAAiC,GAAAP,OAAA,CAAAO,iCAAA,GAAGN,yBAAM,CAACC,GAAG;AAC3D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=FilterContent.types.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.types.js","names":[],"sources":["../../../../../src/components/filter/filter-content/FilterContent.types.ts"],"sourcesContent":["import type {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\n\n/**\n * Props for the `FilterContent` component.\n */\nexport type FilterContentProps = {\n    /**\n     * Search configuration for the optional search input.\n     */\n    searchConfig?: SearchConfig;\n    /**\n     * Configuration for the optional filter button group.\n     */\n    filterButtonConfig?: FilterButtonConfig;\n    /**\n     * Configuration for the optional sort combobox.\n     */\n    sortConfig?: SortConfig;\n    /**\n     * Configuration for the optional checkbox.\n     */\n    checkboxConfig?: CheckboxConfig;\n    /**\n     * Configuration for the optional labeled combobox.\n     */\n    comboboxConfig?: ComboboxConfig;\n    /**\n     * Whether the search input should receive focus when the filter opens.\n     */\n    shouldAutoFocus: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortComboBoxLists = void 0;
+const getSortComboBoxLists = sortConfig => [{
+  list: sortConfig.items.map(({
+    text,
+    id
+  }) => ({
+    text,
+    value: id
+  }))
+}];
+exports.getSortComboBoxLists = getSortComboBoxLists;
+//# sourceMappingURL=FilterContent.utils.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterContent.utils.js","names":["getSortComboBoxLists","sortConfig","list","items","map","text","id","value","exports"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.utils.ts"],"sourcesContent":["import type { IComboBoxItems } from '../../combobox/ComboBox.types';\nimport type { SortConfig } from '../../../types/filter';\n\nexport const getSortComboBoxLists = (sortConfig: SortConfig): IComboBoxItems[] => [\n    {\n        list: sortConfig.items.map(({ text, id }) => ({\n            text,\n            value: id,\n        })),\n    },\n];\n"],"mappings":";;;;;;AAGO,MAAMA,oBAAoB,GAAIC,UAAsB,IAAuB,CAC9E;EACIC,IAAI,EAAED,UAAU,CAACE,KAAK,CAACC,GAAG,CAAC,CAAC;IAAEC,IAAI;IAAEC;EAAG,CAAC,MAAM;IAC1CD,IAAI;IACJE,KAAK,EAAED;EACX,CAAC,CAAC;AACN,CAAC,CACJ;AAACE,OAAA,CAAAR,oBAAA,GAAAA,oBAAA","ignoreList":[]}

package/lib/cjs/components/search-box/SearchBox.js

@@ -578,7 +578,6 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     anchorElement: boxRef.current,
     container: container,
     direction: dropdownDirection,
-    maxHeight: 300,
     onClose: handleClose,
     onOutsideClick: handleDropdownOutsideClick,
     shouldShowDropdown: shouldShowDropdown