npm - @chayns-components/core - Versions diffs - 5.0.0-beta.992 → 5.0.0-beta.997 - Mend

@chayns-components/core 5.0.0-beta.992 → 5.0.0-beta.997

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 (36) hide show

package/lib/esm/components/popup/Popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /*\n The element over which the content of the `ContextMenu` should be displayed.\n /\n children?: ReactNode;\n /\n The element where the content of the `Popup` should be rendered via React Portal.\n /\n container?: Element;\n /\n The content that should be displayed inside the popup.\n /\n content: ReactNode;\n /\n Function to be executed when the content of the Context menu has been hidden.\n /\n onHide?: VoidFunction;\n /\n Function to be executed when the content of the Context menu has been shown.\n /\n onShow?: VoidFunction;\n /\n Whether the tooltip should be hidden after the children is not hovered.\n /\n shouldHideOnChildrenLeave?: boolean;\n /\n Whether the popup should be opened on hover. If not, the popup will be opened on click.\n /\n shouldShowOnHover?: boolean;\n /\n Whether the width of the children should be used.\n /\n shouldUseChildrenWidth?: boolean;\n /\n The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element \| null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') \|\|\n el.closest('.page-provider') \|\|\n el.closest('.tapp') \|\|\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const containerRect = newContainer?.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /*\n The element over which the content of the `ContextMenu` should be displayed.\n /\n children?: ReactNode;\n /\n The element where the content of the `Popup` should be rendered via React Portal.\n /\n container?: Element;\n /\n The content that should be displayed inside the popup.\n /\n content: ReactNode;\n /\n Function to be executed when the content of the Context menu has been hidden.\n /\n onHide?: VoidFunction;\n /\n Function to be executed when the content of the Context menu has been shown.\n /\n onShow?: VoidFunction;\n /\n Whether the tooltip should be hidden after the children is not hovered.\n /\n shouldHideOnChildrenLeave?: boolean;\n /\n Whether the popup should be opened on hover. If not, the popup will be opened on click.\n /\n shouldShowOnHover?: boolean;\n /\n Whether the width of the children should be used.\n /\n shouldUseChildrenWidth?: boolean;\n /\n The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element \| null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const containerRect = newContainer?.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) + childrenHeight + yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n } else {\n let isRight = false;\n\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n const x = childrenLeft - (containerRect?.left ?? 0) + childrenWidth / 2;\n const y = childrenTop - (containerRect?.top ?? 0) - yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y: y - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.js CHANGED Viewed

@@ -1,9 +1,8 @@
 import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTheme } from 'styled-components';
 import Icon from '../icon/Icon';
 import Input, { InputSize } from '../input/Input';
-import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
+import { StyledMotionSearchInputContentWrapper, StyledMotionSearchInputIconWrapperContent, StyledSearchInput } from './SearchInput.styles';
 const SearchInput = _ref => {
   let {
     iconColor,
@@ -17,7 +16,6 @@ const SearchInput = _ref => {
   } = _ref;
   const [isSearchInputActive, setIsSearchInputActive] = useState(isActive ?? (typeof value === 'string' && value.trim() !== ''));
   const inputRef = useRef(null);
-  const theme = useTheme();
   const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);
   const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);
   useEffect(() => {
@@ -36,30 +34,7 @@ const SearchInput = _ref => {
   return /*#__PURE__*/React.createElement(StyledSearchInput, {
     className: "beta-chayns-search-input",
     $size: size
-  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
-    initial: false
-  }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
-    animate: {
-      opacity: 1
-    },
-    exit: {
-      opacity: 0,
-      position: 'absolute'
-    },
-    initial: {
-      opacity: 0
-    },
-    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
-    transition: {
-      duration: 0.3
-    },
-    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    color: iconColor,
-    icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
-  })))), /*#__PURE__*/React.createElement(AnimatePresence, {
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {
     animate: {
@@ -79,10 +54,6 @@ const SearchInput = _ref => {
       duration: 0.3
     }
   }, /*#__PURE__*/React.createElement(Input, {
-    leftElement: /*#__PURE__*/React.createElement(Icon, {
-      color: theme.text,
-      icons: ['far fa-search']
-    }),
     onChange: onChange,
     onKeyDown: onKeyDown,
     placeholder: placeholder,
@@ -90,6 +61,27 @@ const SearchInput = _ref => {
     shouldShowClearIcon: true,
     size: size,
     value: value
+  })), /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      position: 'absolute'
+    },
+    initial: {
+      opacity: 0
+    },
+    key: isSearchInputActive ? 'backIcon' : 'searchIcon',
+    transition: {
+      duration: 0.3
+    },
+    id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: iconColor,
+    icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
+    size: 18
   }))));
 };
 SearchInput.displayName = 'SearchInput';

package/lib/esm/components/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","~~useTheme","~~Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","~~StyledMotionSearchInputIconWrapper","~~StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","~~theme","~~handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","~~exit~~","~~position~~","key","transition","duration","id","~~color~~","~~icons~~","~~onClick~~","~~width~~","~~leftElement~~","~~text~~","~~ref","shouldShowClearIcon","~~displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport ~~{ useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport~~ Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n ~~StyledMotionSearchInputIconWrapper,\n~~ StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n\n const ~~theme = useTheme() as Theme;\n\n const~~ handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n <~~StyledMotionSearchInputIconWrapper>\n <~~AnimatePresence initial={false}>\n <~~StyledMotionSearchInputIconWrapperContent~~\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, ~~position~~: ~~'absolute'~~ }}\n initial={{ opacity: 0 }}\n key~~={isSearchInputActive ? 'backIcon' : 'searchIcon'}~~\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n >\n <~~Icon~~\n ~~color~~={~~iconColor~~}\n ~~icons~~={~~isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']~~}\n ~~onClick~~={\n ~~isSearchInputActive ? handleBackIconClick : handleSearchIconClick~~\n }\n size={18}\n />\n </~~StyledMotionSearchInputIconWrapperContent~~>\n ~~</AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false~~}>\n ~~{isSearchInputActive && (~~\n ~~<StyledMotionSearchInputContentWrapper\n~~ animate={{ opacity: 1, ~~width: '100%'~~ }}\n exit={{ opacity: 0, ~~width~~: 0 }}\n initial={{ opacity: 0, ~~width: 0~~ }}\n key~~=\"searchInputContentWrapper~~\"\n transition={{ duration: 0.3 }}\n >\n <~~Input~~\n ~~leftElement={<Icon~~ color={~~theme.text~~} icons={['~~far~~ fa-search']} ~~/>}~~\n ~~onChange~~={~~onChange~~}\n ~~onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n~~ size={~~size~~}\n ~~value={value}\n~~ />\n </~~StyledMotionSearchInputContentWrapper~~>\n ~~)}\n~~ </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAIRC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,~~SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,~~OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,KAAK,IAAcC,SAAS,QAAQ,gBAAgB;AAC3D,SACIC,qCAAqC,EACrCC,~~kCAAkC,EAClCC,~~yCAAyC,EACzCC,iBAAiB,QACd,sBAAsB;AAqC7B,MAAMC,WAAiC,GAAGC,IAAA,IASpC;EAAA,IATqC;IACvCC,SAAS;IACTC,QAAQ;IACRC,cAAc;IACdC,QAAQ;IACRC,SAAS;IACTC,WAAW;IACXC,IAAI,~~GAAGb~~,SAAS,~~CAACc~~,MAAM;IACvBC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,mBAAmB,EAAEC,sBAAsB,CAAC,~~GAAGrB~~,QAAQ,~~CAC1DY~~,QAAQ,KAAK,OAAOO,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACG,IAAI,CAAC,CAAC,KAAK,EAAE,CACjE,CAAC;EAED,MAAMC,QAAQ,~~GAAGxB~~,MAAM,CAAW,IAAI,CAAC;EAEvC,~~MAAMyB~~,~~KAAK,GAAGvB,QAAQ,CAAC,CAAU;EAEjC,MAAMwB,~~mBAAmB,~~GAAG5B~~,WAAW,CAAC,~~MAAMwB~~,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAEhF,~~MAAMK~~,qBAAqB,~~GAAG7B~~,WAAW,CAAC,~~MAAMwB~~,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;~~EAEjFvB~~,SAAS,CAAC,MAAM;IACZ,IAAI,~~OAAOe~~,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACO,mBAAmB,CAAC;IACvC;IAEA,IAAIA,mBAAmB,EAAE;MACrBG,QAAQ,~~CAACI~~,OAAO,EAAEC,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC,EAAE,~~CAACR~~,mBAAmB,EAAEP,cAAc,CAAC,CAAC;~~EAEzCf~~,SAAS,CAAC,MAAM;IACZ,IAAI,~~OAAOc~~,QAAQ,KAAK,SAAS,EAAE;MAC/BS,sBAAsB,CAACT,QAAQ,CAAC;IACpC;EACJ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,~~oBACIhB~~,KAAA,~~CAAAiC~~,aAAA,~~CAACrB~~,iBAAiB;~~IAACsB~~,SAAS,EAAC,0BAA0B;IAACC,KAAK,~~EAAEd~~;EAAK,~~gBAChErB~~,KAAA,~~CAAAiC~~,aAAA,~~CAACvB,kCAAkC,qBAC~~/BV,~~KAAA,CAAAiC,aAAA,CAAClC,~~eAAe;~~IAACqC~~,OAAO,EAAE;EAAM,~~gBAC5BpC~~,KAAA,~~CAAAiC~~,aAAA,CAACtB,~~yCAAyC~~;~~IACtC0B~~,OAAO,EAAE;MAAEC,OAAO,EAAE;~~IAAE~~,CAAE;~~IACxBC~~,IAAI,EAAE;~~MAAED~~,OAAO,EAAE,CAAC;~~MAAEE~~,~~QAAQ~~,EAAE;~~IAAW~~,CAAE;~~IAC3CJ~~,OAAO,EAAE;MAAEE,OAAO,EAAE;IAAE,CAAE;~~IACxBG~~,GAAG,~~EAAEjB~~,~~mBAAmB,GAAG,UAAU,GAAG,YAAa~~;~~IACrDkB~~,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI~~,CAAE~~;~~IAC9BC,~~EAAE,~~EACEpB~~,~~mBAAmB,GACb,uBAAuB,GACvB;EACT,gBAEDxB,~~KAAA,~~CAAAiC~~,aAAA,~~CAAC3B~~,~~IAAI~~;~~IACDuC~~,~~KAAK~~,~~EAAE9B~~,~~SAAU~~;~~IACjB+B~~,~~KAAK~~,~~EAAEtB~~,~~mBAAmB~~,~~GAAG~~,~~CAAC~~,~~kBAAkB~~,~~CAAC,~~GAAG,~~CAAC~~,~~cAAc,CAAE~~;~~IACrEuB~~,~~OAAO,EACHvB,~~mBAAmB~~,GAAGK,mBAAmB,GAAGC,qBAC/C~~;~~IACDT~~,IAAI,~~EAAE;EAAG~~,~~CACZ,CACsC,CAC9B,CACe,CAAC,eACrCrB,KAAA,CAAAiC,aAAA,CAAClC,eAAe~~;~~IAACqC~~,~~OAAO~~,~~EAAE~~;EAAM,~~GAC3BZ~~,~~mBAAmB~~,~~iBAChBxB~~,KAAA,~~CAAAiC~~,aAAA,~~CAACxB~~,~~qCAAqC~~;~~IAClC4B~~,OAAO,EAAE;MAAEC,OAAO,EAAE~~,CAAC~~;~~MAAEU~~,~~KAAK,EAAE;IAAO,~~CAAE;~~IACvCT~~,IAAI,EAAE;~~MAAED~~,OAAO,EAAE,CAAC;~~MAAEU~~,~~KAAK~~,EAAE;~~IAAE~~,CAAE;~~IAC/BZ~~,OAAO,EAAE;MAAEE,OAAO,EAAE~~,CAAC~~;~~MAAEU,KAAK,EAAE;~~IAAE,CAAE;~~IAClCP~~,GAAG,~~EAAC~~,~~2BAA2B~~;~~IAC/BC~~,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,~~gBAE9B3C~~,~~KAAA~~,~~CAAAiC~~,~~aAAA~~,~~CAAC1B,KAAK~~;~~IACF0C~~,~~WAAW~~,~~eAAEjD,~~KAAA,~~CAAAiC~~,aAAA,~~CAAC3B~~,IAAI;~~MAACuC~~,KAAK,~~EAAEjB~~,~~KAAK,CAACsB,IAAK~~;~~MAACJ~~,KAAK,~~EAAE~~,~~CAAC~~,~~eAAe;IAAE~~,~~CAAE~~,~~CAAE;IACnE5B~~,~~QAAQ~~,~~EAAEA~~,~~QAAS;IACnBC~~,~~SAAS~~,~~EAAEA,SAAU~~;~~IACrBC~~,~~WAAW~~,~~EAAEA~~,~~WAAY;IACzB+B~~,~~GAAG~~,~~EAAExB~~,~~QAAS;IACdyB~~,~~mBAAmB~~;~~IACnB/B~~,IAAI,~~EAAEA,IAAK~~;~~IACXE~~,~~KAAK~~,~~EAAEA;EAAM~~,~~CAChB~~,~~CACkC,CAE9B,~~CACF,CAAC;AAE5B,CAAC;~~AAEDV~~,WAAW,~~CAACwC~~,WAAW,GAAG,aAAa;AAEvC,~~eAAexC~~,WAAW","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","SearchInput","_ref","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","Medium","value","isSearchInputActive","setIsSearchInputActive","trim","inputRef","handleBackIconClick","handleSearchIconClick","current","focus","createElement","className","$size","initial","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","position","id","color","icons","onClick","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.styles.js CHANGED Viewed

@@ -1,24 +1,34 @@
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 export const StyledSearchInput = styled.div`
-    align-items: center;
     display: flex;
-    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    border-radius: 3px;
     height: ${_ref => {
   let {
     $size
   } = _ref;
   return $size === 'medium' ? '42px' : '32px';
 }};
-    justify-content: flex-end;
-    width: 100%;
+    &:hover {
+        background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme[103];
+}};
+    }
 `;
 export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
+    position: absolute;
+    top: 0;
+    right: 0;
     overflow: hidden;
 `;
-export const StyledMotionSearchInputIconWrapper = styled.div`
-    width: 18px;
-`;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
 `;

package/lib/esm/components/search-input/SearchInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","~~StyledMotionSearchInputContentWrapper~~","~~StyledMotionSearchInputIconWrapper~~","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = {\n $size: InputSize;\n};\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n align-items: center;\n ~~display~~: ~~flex~~;\n ~~gap~~: ~~8px~~;\n height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n ~~justify~~-~~content~~: ~~flex-end~~;\n ~~width: 100%;\~~n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n ~~overflow~~: ~~hidden~~;\n~~`;\~~n~~\nexport~~ ~~const StyledMotionSearchInputIconWrapper = styled.div`\~~n ~~width~~: ~~18px~~;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;~~EAAM~~,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;~~AACnE~~;AACA;AACA,~~CAAC~~;~~AAED~~,~~OAAO~~,~~MAAMC~~,~~qCAAqC~~,~~GAAGL~~,~~MAAM~~,~~CAACD~~,~~MAAM~~,~~CAACG,~~GAAG,~~CAAqB~~;~~AAC3F~~;AACA,CAAC;AAED,OAAO,~~MAAMI~~,~~kCAAkC~~,~~GAAGN~~,MAAM,~~CAACE~~,GAAG;~~AAC5D~~;AACA,CAAC;AAED,OAAO,~~MAAMK~~,yCAAyC,~~GAAGP~~,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","StyledSearchInput","div","_ref","$size","_ref2","theme","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n border-radius: 3px;\n\n height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n &:hover {\n background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n position: absolute;\n top: 0;\n right: 0;\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAQtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAMC,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC3F;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,GAAG,CAAC;AAAA;AAC7E;AACA,CAAC;AAED,OAAO,MAAMC,qCAAqC,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMM,yCAAyC,GAAGR,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.js CHANGED Viewed

@@ -4,6 +4,8 @@ import { v4 as uuidv4 } from 'uuid';
 import Badge from '../badge/Badge';
 import Icon from '../icon/Icon';
 import { StyledTagInput, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
+// ToDo: Add reference with "save" function to return unsaved tags
 const TagInput = _ref => {
   let {
     placeholder,

package/lib/esm/components/tag-input/TagInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.js","names":["React","useCallback","useEffect","useMemo","useState","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","theme","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","newSelectedId","length","prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","items","forEach","_ref2","push","createElement","backgroundColor","icons","onClick","onKeyDown","onChange"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n /*\n Function to be executed when a tag is added.\n /\n onAdd?: (tag: Tag) => void;\n /\n Function to be executed when a tag is removed.\n /\n onRemove?: (id: string) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n const [internalTags, setInternalTags] = useState<Tag[]>();\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const theme = useTheme();\n\n useEffect(() => {\n if (tags) {\n setInternalTags(tags);\n }\n }, [tags]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n setInternalTags((prevTags) => {\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n onAdd(newTag);\n }\n\n return prevTags ? [...prevTags, newTag] : [newTag];\n });\n\n return '';\n });\n }\n\n if (event.key === 'Backspace' && currentValue === '') {\n if (!selectedId) {\n if (!internalTags) {\n return;\n }\n\n const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n setSelectedId(newSelectedId);\n\n return;\n }\n\n setInternalTags((prevState) => {\n if (!prevState) {\n return prevState;\n }\n\n const removedId = prevState[prevState.length - 1]?.id;\n\n if (!removedId) {\n return prevState;\n }\n\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n if (typeof onRemove === 'function') {\n onRemove(removedId);\n }\n\n setSelectedId(undefined);\n\n return updatedTags;\n });\n }\n },\n [currentValue, internalTags, onAdd, onRemove, selectedId],\n );\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n };\n\n const handleIconClick = useCallback(\n (id: string) => {\n setInternalTags((prevState) => {\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n return updatedTags;\n });\n },\n [onRemove],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!internalTags) {\n return items;\n }\n\n internalTags.forEach(({ text, id }) => {\n items.push(\n <Badge\n key={`tag-input-${id}`}\n backgroundColor={\n id === selectedId ? (theme['206'] as string) ?? undefined : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n });\n\n return items;\n }, [handleIconClick, internalTags, selectedId, theme]);\n\n return useMemo(\n () => (\n <StyledTagInput>\n {content}\n <StyledTagInputTagInput\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n value={currentValue}\n />\n </StyledTagInput>\n ),\n [content, currentValue, handleKeyDown, placeholder, tags],\n );\n};\n\nexport default TagInput;\n"],"mappings":"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~~GAAIE~~,KAAK,CAAC,KAAK,CAAC,IAAegB,SAAS,~~GAAGA~~;~~MAC/D~~,gBAED1C,KAAA,CAAAoD,aAAA,CAACxC,wBAAwB,qBACrBZ,KAAA,CAAAoD,aAAA,CAACvC,4BAA4B,QAAEqB,IAAmC,CAAC,eACnElC,KAAA,CAAAoD,aAAA,CAAC3C,IAAI;QAAC6C,KAAK,EAAE,CAAC,UAAU,CAAE;QAACC,OAAO,EAAEA,CAAA,KAAMT,eAAe,CAACb,EAAE;MAAE,CAAE,CAC1C,CACvB,CACX,CAAC;IACL,CAAC,CAAC;IAEF,OAAOe,KAAK;EAChB,CAAC,EAAE,CAACF,eAAe,EAAE1B,YAAY,EAAEI,UAAU,EAAEE,KAAK,CAAC,CAAC;EAEtD,OAAOvB,OAAO,CACV,mBACIH,KAAA,CAAAoD,aAAA,CAAC1C,cAAc,QACVqC,OAAO,eACR/C,KAAA,CAAAoD,aAAA,CAACzC,sBAAsB;IACnBK,WAAW,EAAEC,IAAI,IAAIA,IAAI,CAACmB,MAAM,GAAG,CAAC,GAAGM,SAAS,GAAG1B,WAAY;IAC/DwC,SAAS,EAAE7B,aAAc;IACzB8B,QAAQ,EAAEd,YAAa;IACvBE,KAAK,EAAEvB;EAAa,CACvB,CACW,CACnB,EACD,CAACyB,OAAO,EAAEzB,YAAY,EAAEK,aAAa,EAAEX,WAAW,EAAEC,IAAI,CAC5D,CAAC;AACL,CAAC;AAED,eAAeH,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.js","names":["React","useCallback","useEffect","useMemo","useState","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","theme","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","newSelectedId","length","prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","items","forEach","_ref2","push","createElement","backgroundColor","icons","onClick","onKeyDown","onChange"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n /*\n Function to be executed when a tag is added.\n /\n onAdd?: (tag: Tag) => void;\n /\n Function to be executed when a tag is removed.\n /\n onRemove?: (id: string) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\n// ToDo: Add reference with \"save\" function to return unsaved tags\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n const [internalTags, setInternalTags] = useState<Tag[]>();\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const theme = useTheme();\n\n useEffect(() => {\n if (tags) {\n setInternalTags(tags);\n }\n }, [tags]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n setInternalTags((prevTags) => {\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n onAdd(newTag);\n }\n\n return prevTags ? [...prevTags, newTag] : [newTag];\n });\n\n return '';\n });\n }\n\n if (event.key === 'Backspace' && currentValue === '') {\n if (!selectedId) {\n if (!internalTags) {\n return;\n }\n\n const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n setSelectedId(newSelectedId);\n\n return;\n }\n\n setInternalTags((prevState) => {\n if (!prevState) {\n return prevState;\n }\n\n const removedId = prevState[prevState.length - 1]?.id;\n\n if (!removedId) {\n return prevState;\n }\n\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n if (typeof onRemove === 'function') {\n onRemove(removedId);\n }\n\n setSelectedId(undefined);\n\n return updatedTags;\n });\n }\n },\n [currentValue, internalTags, onAdd, onRemove, selectedId],\n );\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n };\n\n const handleIconClick = useCallback(\n (id: string) => {\n setInternalTags((prevState) => {\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n return updatedTags;\n });\n },\n [onRemove],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!internalTags) {\n return items;\n }\n\n internalTags.forEach(({ text, id }) => {\n items.push(\n <Badge\n key={`tag-input-${id}`}\n backgroundColor={\n id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n });\n\n return items;\n }, [handleIconClick, internalTags, selectedId, theme]);\n\n return useMemo(\n () => (\n <StyledTagInput>\n {content}\n <StyledTagInputTagInput\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n value={currentValue}\n />\n </StyledTagInput>\n ),\n [content, currentValue, handleKeyDown, placeholder, tags],\n );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/api/theme/get.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';
+export declare const getDesignSettings: (siteId?: string) => Promise<DesignSettings | undefined>;
+export declare const getParagraphFormat: (siteId?: string) => Promise<ParagraphFormat[] | undefined>;

package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts CHANGED Viewed

@@ -36,6 +36,10 @@ export type ColorSchemeProviderProps = {
      * The secondary hex color to be used for the children
      */
     secondaryColor?: string;
+    /**
+     * The site id of the page for which the design settings should be fetched
+     */
+    siteId?: string;
     /**
      * Additional styles set on the root element
      */

package/lib/types/components/search-input/SearchInput.styles.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { InputSize } from '../input/Input';
-type StyledSearchInputProps = {
+type StyledSearchInputProps = WithTheme<{
     $size: InputSize;
-};
+}>;
 export declare const StyledSearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSearchInputProps>> & string;
 export declare const StyledMotionSearchInputContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
@@ -269,7 +270,6 @@ export declare const StyledMotionSearchInputContentWrapper: import("styled-compo
 }, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledMotionSearchInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledMotionSearchInputIconWrapperContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.992",
+    "version": "5.0.0-beta.997",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -62,6 +62,7 @@
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^10.0.0",
         "babel-loader": "^9.2.1",
+        "chayns-api": "^2.2.0-beta.2",
         "cross-env": "^7.0.3",
         "lerna": "^8.1.9",
         "react": "^18.3.1",
@@ -78,7 +79,7 @@
         "uuid": "^10.0.0"
     },
     "peerDependencies": {
-        "chayns-api": "^2.2.0-beta.2",
+        "chayns-api": ">=2.0.0",
         "framer-motion": ">=10.18.0",
         "react": ">=18.0.0",
         "react-dom": ">=18.0.0",
@@ -87,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9c7ff0545e285c85e242074da863cdb599d2e2c7"
+    "gitHead": "88b9adc4186af824999d62f8a1a5e907fceebb06"
 }