npm - @chayns-components/core - Versions diffs - 5.2.8-alpha.0 → 5.3.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownBodyWrapper.js","names":["React","useCallback","useEffect","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","displayName"],"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":[]}
1	+ {"version":3,"file":"DropdownBodyWrapper.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","ref","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","contentRef","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","className","tabIndex","displayName"],"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/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js CHANGED Viewed

@@ -5,19 +5,25 @@ export const StyledDropdownBodyWrapperContent = styled.div`
     width: ${({
   $width
 }) => $width}px;
-    max-height: ${({
-  $maxHeight
-}) => $maxHeight}px;
     min-width: ${({
   $minWidth
 }) => $minWidth}px;
+    overflow: hidden;
+    ${({
+  $maxHeight
+}) => typeof $maxHeight === 'number' && 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/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownBodyWrapper.styles.js","names":["styled","css","DropdownDirection","StyledDropdownBodyWrapper","div","StyledDropdownBodyWrapperContent","$width","$~~maxHeight~~","$~~minWidth~~","theme","$direction","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 ~~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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACI,GAAG,EAAE;AASrD,OAAO,MAAMC,gCAAgC,GAAGL,MAAM,CAACI,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,CACIR,iBAAiB,CAACS,MAAM,EACxBT,iBAAiB,CAACU,WAAW,EAC7BV,iBAAiB,CAACW,YAAY,CACjC,CAACC,QAAQ,CAACJ,UAAU,CAAC,EACxB;IACE,OAAOT,GAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"DropdownBodyWrapper.styles.js","names":["styled","css","DropdownDirection","StyledDropdownBodyWrapper","div","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","theme","$direction","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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACI,GAAG,EAAE;AASrD,OAAO,MAAMC,gCAAgC,GAAGL,MAAM,CAACI,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,IAC9BP,GAAG;AACX,0BAA0BO,UAAU;AACpC;AACA;AACA,SAAS;AACT;AACA;AACA,kBAAkB,CAAC;EAAEC;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,CACIR,iBAAiB,CAACS,MAAM,EACxBT,iBAAiB,CAACU,WAAW,EAC7BV,iBAAiB,CAACW,YAAY,CACjC,CAACC,QAAQ,CAACJ,UAAU,CAAC,EACxB;IACE,OAAOT,GAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/esm/components/filter/filter-content/FilterContent.constants.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export const FILTER_CONTENT_ROW_GAP_PX = 10;
2	+ //# sourceMappingURL=FilterContent.constants.js.map

package/lib/esm/components/filter/filter-content/FilterContent.constants.js.map ADDED Viewed

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

package/lib/esm/components/filter/filter-content/FilterContent.js CHANGED Viewed

@@ -1,6 +1,5 @@
-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); }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { StyledFilterComboboxInline, StyledFilterComboboxInlineComboboxWrapper, StyledFilterComboboxInlineLabel, StyledFilterComboboxWrapper, StyledFilterContent, StyledFilterSort, StyledFilterSortText } from './FilterContent.styles';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { StyledFilterContentControlWrapper, StyledFilterContentLabel, StyledFilterContentLabeledRow, StyledFilterContent } from './FilterContent.styles';
 import Input from '../../input/Input';
 import Icon from '../../icon/Icon';
 import FilterButtons from '../../filter-buttons/FilterButtons';
@@ -8,6 +7,7 @@ import ComboBox from '../../combobox/ComboBox';
 import Checkbox from '../../checkbox/Checkbox';
 import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';
 import textStrings from '../../../constants/textStrings';
+import { getSortComboBoxLists } from './FilterContent.utils';
 const FilterContent = ({
   searchConfig,
   sortConfig,
@@ -16,9 +16,7 @@ const FilterContent = ({
   comboboxConfig,
   shouldAutoFocus
 }) => {
-  const sortTextRef = useRef(null);
   const searchRef = useRef(null);
-  const [sortTextWidth, setSortTextWidth] = useState(0);
   const ts = textStrings.components.filter.filterContent;
   const handleSelectSortItem = useCallback(item => {
     if (!item) {
@@ -35,11 +33,6 @@ const FilterContent = ({
       });
     }
   }, [sortConfig]);
-  useEffect(() => {
-    if (sortTextRef.current) {
-      setSortTextWidth(sortTextRef.current.clientWidth + 20);
-    }
-  }, []);
   useEffect(() => {
     if (shouldAutoFocus) {
       searchRef.current?.focus();
@@ -58,34 +51,20 @@ const FilterContent = ({
     leftElement: /*#__PURE__*/React.createElement(Icon, {
       icons: ['fa fa-search']
     })
-  }), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, filterButtonConfig), sortConfig && /*#__PURE__*/React.createElement(StyledFilterSort, null, /*#__PURE__*/React.createElement(StyledFilterSortText, {
-    ref: sortTextRef
-  }, /*#__PURE__*/React.createElement(Textstring, {
+  }), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, filterButtonConfig), sortConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, /*#__PURE__*/React.createElement(Textstring, {
     textstring: ttsToITextString(ts.sort)
-  })), /*#__PURE__*/React.createElement(StyledFilterComboboxWrapper, {
-    $textWidth: sortTextWidth
-  }, /*#__PURE__*/React.createElement(ComboBox, {
-    lists: [{
-      list: sortConfig.items.map(({
-        text,
-        id
-      }) => ({
-        text,
-        value: id
-      }))
-    }],
+  })), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, {
+    lists: getSortComboBoxLists(sortConfig),
     placeholder: "",
     selectedItem: {
       text: sortConfig.selectedItem.text,
       value: sortConfig.selectedItem.id
     },
     onSelect: handleSelectSortItem
-  }))), comboboxConfig && /*#__PURE__*/React.createElement(StyledFilterComboboxInline, null, /*#__PURE__*/React.createElement(StyledFilterComboboxInlineLabel, null, comboboxConfig.label), /*#__PURE__*/React.createElement(StyledFilterComboboxInlineComboboxWrapper, null, /*#__PURE__*/React.createElement(ComboBox, _extends({
-    shouldUseCurrentItemWidth: true
-  }, comboboxConfig)))), checkboxConfig &&
+  }))), comboboxConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, comboboxConfig.label), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, comboboxConfig))), checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  React.createElement(Checkbox, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth, ts.input.placeholder, ts.sort]);
+  React.createElement(Checkbox, checkboxConfig))), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, ts.input.placeholder, ts.sort]);
 };
 FilterContent.displayName = 'FilterContent';
 export default FilterContent;

package/lib/esm/components/filter/filter-content/FilterContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","StyledFilterComboboxInline","StyledFilterComboboxInlineComboboxWrapper","StyledFilterComboboxInlineLabel","StyledFilterComboboxWrapper","StyledFilterContent","StyledFilterSort","StyledFilterSortText","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","sortTextRef","searchRef","sortTextWidth","setSortTextWidth","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","clientWidth","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","sort","$textWidth","lists","list","items","map","selectedItem","onSelect","label","_extends","shouldUseCurrentItemWidth","displayName"],"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,OAAOA,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACpF,SACIC,0BAA0B,EAC1BC,yCAAyC,EACzCC,+BAA+B,EAC/BC,2BAA2B,EAC3BC,mBAAmB,EACnBC,gBAAgB,EAChBC,oBAAoB,QACjB,wBAAwB;AAC/B,OAAOC,KAAK,MAAoB,mBAAmB;AACnD,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,aAAa,MAAM,oCAAoC;AAQ9D,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,OAAOC,QAAQ,MAAM,yBAAyB;AAE9C,SAASC,UAAU,EAAEC,kBAAkB,EAAEC,gBAAgB,QAAQ,+BAA+B;AAChG,OAAOC,WAAW,MAAM,gCAAgC;AAWxD,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,YAAY;EACZC,UAAU;EACVC,kBAAkB;EAClBC,cAAc;EACdC,cAAc;EACdC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGzB,MAAM,CAAiB,IAAI,CAAC;EAChD,MAAM0B,SAAS,GAAG1B,MAAM,CAAW,IAAI,CAAC;EAExC,MAAM,CAAC2B,aAAa,EAAEC,gBAAgB,CAAC,GAAG3B,QAAQ,CAAC,CAAC,CAAC;EAErD,MAAM4B,EAAE,GAAGZ,WAAW,CAACa,UAAU,CAACC,MAAM,CAACC,aAAa;EAEtD,MAAMC,oBAAoB,GAAGpC,WAAW,CACnCqC,IAA+B,IAAK;IACjC,IAAI,CAACA,IAAI,EAAE;MACP;IACJ;IAEA,MAAM;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAGF,IAAI;IAE5B,IAAId,UAAU,EAAE;MACZA,UAAU,CAACiB,YAAY,CAAC;QAAEF,IAAI;QAAEG,EAAE,EAAEF;MAAM,CAAC,CAAC;IAChD;EACJ,CAAC,EACD,CAAChB,UAAU,CACf,CAAC;EAEDtB,SAAS,CAAC,MAAM;IACZ,IAAI2B,WAAW,CAACc,OAAO,EAAE;MACrBX,gBAAgB,CAACH,WAAW,CAACc,OAAO,CAACC,WAAW,GAAG,EAAE,CAAC;IAC1D;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN1C,SAAS,CAAC,MAAM;IACZ,IAAI0B,eAAe,EAAE;MACjBE,SAAS,CAACa,OAAO,EAAEE,KAAK,CAAC,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACjB,eAAe,CAAC,CAAC;EAErB,OAAOzB,OAAO,CACV,mBACIH,KAAA,CAAA8C,aAAA,CAAC3B,kBAAkB;IAAC4B,WAAW,EAAC;EAAyB,gBACrD/C,KAAA,CAAA8C,aAAA,CAACpC,mBAAmB,QACfa,YAAY,iBACTvB,KAAA,CAAA8C,aAAA,CAACjC,KAAK;IACFmC,GAAG,EAAElB,SAAU;IACfmB,QAAQ,EAAGC,EAAE,IAAK3B,YAAY,CAAC4B,cAAc,CAACD,EAAE,CAACE,MAAM,CAACZ,KAAK,CAAE;IAC/Da,WAAW,eACPrD,KAAA,CAAA8C,aAAA,CAAC5B,UAAU;MAACoC,UAAU,EAAElC,gBAAgB,CAACa,EAAE,CAACsB,KAAK,CAACF,WAAW;IAAE,CAAE,CACpE;IACDb,KAAK,EAAEjB,YAAY,CAACiC,WAAY;IAChCC,mBAAmB,EAAElC,YAAY,CAACiC,WAAW,CAACE,MAAM,GAAG,CAAE;IACzDC,WAAW,eAAE3D,KAAA,CAAA8C,aAAA,CAAChC,IAAI;MAAC8C,KAAK,EAAE,CAAC,cAAc;IAAE,CAAE;EAAE,CAClD,CACJ,EAEAnC,kBAAkB,iBAAIzB,KAAA,CAAA8C,aAAA,CAAC/B,aAAa,EAAKU,kBAAqB,CAAC,EAC/DD,UAAU,iBACPxB,KAAA,CAAA8C,aAAA,CAACnC,gBAAgB,qBACbX,KAAA,CAAA8C,aAAA,CAAClC,oBAAoB;IAACoC,GAAG,EAAEnB;EAAY,gBACnC7B,KAAA,CAAA8C,aAAA,CAAC5B,UAAU;IAACoC,UAAU,EAAElC,gBAAgB,CAACa,EAAE,CAAC4B,IAAI;EAAE,CAAE,CAClC,CAAC,eACvB7D,KAAA,CAAA8C,aAAA,CAACrC,2BAA2B;IAACqD,UAAU,EAAE/B;EAAc,gBACnD/B,KAAA,CAAA8C,aAAA,CAAC9B,QAAQ;IACL+C,KAAK,EAAE,CACH;MACIC,IAAI,EAAExC,UAAU,CAACyC,KAAK,CAACC,GAAG,CAAC,CAAC;QAAE3B,IAAI;QAAEG;MAAG,CAAC,MAAM;QAC1CH,IAAI;QACJC,KAAK,EAAEE;MACX,CAAC,CAAC;IACN,CAAC,CACH;IACFW,WAAW,EAAC,EAAE;IACdc,YAAY,EAAE;MACV5B,IAAI,EAAEf,UAAU,CAAC2C,YAAY,CAAC5B,IAAI;MAClCC,KAAK,EAAEhB,UAAU,CAAC2C,YAAY,CAACzB;IACnC,CAAE;IACF0B,QAAQ,EAAE/B;EAAqB,CAClC,CACwB,CACf,CACrB,EACAV,cAAc,iBACX3B,KAAA,CAAA8C,aAAA,CAACxC,0BAA0B,qBACvBN,KAAA,CAAA8C,aAAA,CAACtC,+BAA+B,QAC3BmB,cAAc,CAAC0C,KACa,CAAC,eAClCrE,KAAA,CAAA8C,aAAA,CAACvC,yCAAyC,qBAEtCP,KAAA,CAAA8C,aAAA,CAAC9B,QAAQ,EAAAsD,QAAA;IAACC,yBAAyB;EAAA,GAAK5C,cAAc,CAAG,CAClB,CACnB,CAC/B,EACAD,cAAc;EAAA;EACX;EACA1B,KAAA,CAAA8C,aAAA,CAAC7B,QAAQ,EAAKS,cAAiB,CAElB,CACL,CACvB,EACD,CACIA,cAAc,EACdC,cAAc,EACdF,kBAAkB,EAClBY,oBAAoB,EACpBd,YAAY,EACZC,UAAU,EACVO,aAAa,EACbE,EAAE,CAACsB,KAAK,CAACF,WAAW,EACpBpB,EAAE,CAAC4B,IAAI,CAEf,CAAC;AACL,CAAC;AAEDvC,aAAa,CAACkD,WAAW,GAAG,eAAe;AAE3C,eAAelD,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","sort","lists","selectedItem","onSelect","label","displayName"],"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/esm/components/filter/filter-content/FilterContent.styles.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { FILTER_CONTENT_ROW_GAP_PX } from './FilterContent.constants';
 export const StyledFilterContent = styled.div`
     background-color: ${({
   theme
@@ -10,36 +11,21 @@ export const StyledFilterContent = styled.div`
     flex-direction: column;
     gap: 10px;
 `;
-export const StyledFilterSort = styled.div`
+export const StyledFilterContentLabeledRow = styled.div`
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-`;
-export const StyledFilterSortText = styled.div`
-    flex: 0 0 auto;
-`;
-export const StyledFilterComboboxWrapper = styled.div`
-    display: flex;
-    justify-content: end;
-    width: ${({
-  $textWidth
-}) => `calc(100% - ${$textWidth}px)`}}
-`;
-export const StyledFilterComboboxInline = styled.div`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
+    gap: ${FILTER_CONTENT_ROW_GAP_PX}px;
+    width: 100%;
+    min-width: 0;
 `;
-export const StyledFilterComboboxInlineLabel = styled.div`
+export const StyledFilterContentLabel = styled.div`
     flex: 0 0 auto;
+    white-space: nowrap;
 `;
-export const StyledFilterComboboxInlineComboboxWrapper = styled.div`
+export const StyledFilterContentControlWrapper = styled.div`
     display: flex;
-    justify-content: end;
     flex: 1 1 auto;
     min-width: 0;
+    justify-content: flex-end;
 `;
 //# sourceMappingURL=FilterContent.styles.js.map

package/lib/esm/components/filter/filter-content/FilterContent.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterContent.styles.js","names":["styled","StyledFilterContent","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,OAAOA,MAAM,MAAM,mBAAmB;~~AAKtC~~,OAAO,MAAMC,mBAAmB,~~GAAGD~~,MAAM,~~CAACE~~,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,~~gBAAgB~~,~~GAAGJ~~,MAAM,~~CAACE~~,GAAG;~~AAC1C~~;AACA;AACA~~;AACA;AACA~~,~~CAAC;AAED~~,~~OAAO,MAAMG,oBAAoB,GAAGL,MAAM,CAACE,GAAG~~;~~AAC9C~~;AACA~~,CAAC~~;~~AAMD,OAAO,MAAMI,2BAA2B,GAAGN,MAAM,CAACE,GAAqC;AACvF;~~AACA~~;AACA;AACA~~,~~aAAa,~~CAAC;~~EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC;~~AAED,OAAO,~~MAAMC~~,~~0BAA0B~~,~~GAAGR~~,MAAM,~~CAACE~~,GAAG;~~AACpD~~;AACA;AACA~~;AACA;AACA~~,CAAC;AAED,OAAO,~~MAAMO,+BAA+B~~,~~GAAGT~~,~~MAAM~~,~~CAACE,GAAG;AACzD;AACA,CAAC;AAED,OAAO,MAAMQ,yCAAyC,GAAGV,~~MAAM,~~CAACE~~,GAAG;~~AACnE~~;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"FilterContent.styles.js","names":["styled","FILTER_CONTENT_ROW_GAP_PX","StyledFilterContent","div","theme","StyledFilterContentLabeledRow","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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,yBAAyB,QAAQ,2BAA2B;AAIrE,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGL,MAAM,CAACG,GAAG;AACvD;AACA;AACA,WAAWF,yBAAyB;AACpC;AACA;AACA,CAAC;AAED,OAAO,MAAMK,wBAAwB,GAAGN,MAAM,CAACG,GAAG;AAClD;AACA;AACA,CAAC;AAED,OAAO,MAAMI,iCAAiC,GAAGP,MAAM,CAACG,GAAG;AAC3D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/filter/filter-content/FilterContent.types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=FilterContent.types.js.map

package/lib/esm/components/filter/filter-content/FilterContent.types.js.map ADDED Viewed

@@ -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/esm/components/filter/filter-content/FilterContent.utils.js ADDED Viewed

@@ -0,0 +1,10 @@
+export const getSortComboBoxLists = sortConfig => [{
+  list: sortConfig.items.map(({
+    text,
+    id
+  }) => ({
+    text,
+    value: id
+  }))
+}];
+//# sourceMappingURL=FilterContent.utils.js.map

package/lib/esm/components/filter/filter-content/FilterContent.utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FilterContent.utils.js","names":["getSortComboBoxLists","sortConfig","list","items","map","text","id","value"],"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":"AAGA,OAAO,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","ignoreList":[]}

package/lib/esm/components/search-box/SearchBox.js CHANGED Viewed

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