npm - @chayns-components/core - Versions diffs - 5.0.0-beta.662 → 5.0.0-beta.665 - Mend

@chayns-components/core 5.0.0-beta.662 → 5.0.0-beta.665

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

package/lib/cjs/components/accordion/Accordion.js CHANGED Viewed

@@ -121,7 +121,6 @@ const Accordion = ({
   const accordionContextProviderValue = (0, _react.useMemo)(() => ({
     isWrapped: isWrapped === true
   }), [isWrapped]);
-  console.log(title, isLastAccordion);
   const areaContextProviderValue = (0, _react.useMemo)(() => ({
     shouldChangeColor: true
   }), []);

package/lib/cjs/components/accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","useMemo","length","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","console","log","areaContextProviderValue","shouldChangeColor","createElement","StyledAccordion","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside.\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n Icon to be displayed on the right side in the search input\n /\n searchIcon?: string[];\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n */\n titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n}) => {\n const {\n isWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n console.log(title, isLastAccordion);\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n return (\n <StyledAccordion\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchIcon={searchIcon}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","useMemo","length","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","createElement","StyledAccordion","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside.\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n Icon to be displayed on the right side in the search input\n /\n searchIcon?: string[];\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n */\n titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n}) => {\n const {\n isWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n return (\n <StyledAccordion\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchIcon={searchIcon}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.js CHANGED Viewed

@@ -22,7 +22,6 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   onFocus,
   onKeyDown,
   placeholder,
-  placeholderElement,
   rightElement,
   shouldShowOnlyBottomBorder,
   shouldRemainPlaceholder = false,
@@ -90,9 +89,9 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       };
     }
     return {
-      left: placeholderElement ? 2 : -1
+      left: -1
     };
-  }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
+  }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
   return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
     className: "beta-chayns-input",
     $isDisabled: isDisabled
@@ -132,21 +131,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       type: 'tween',
       duration: 0.1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputElement, {
-    animate: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? {
-      scale: 0.4,
-      x: '6px',
-      y: '1px'
-    } : {
-      scale: 1
-    },
-    initial: false,
-    layout: true,
-    transition: {
-      type: 'tween',
-      duration: 0.1
-    }
-  }, placeholderElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,

package/lib/cjs/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledMotionInputElement","scale","x","y","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputElement,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\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 the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Element to be displayed next to or instead of the \"placeholder\"\n /\n placeholderElement?: ReactNode;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n Input type set for input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: placeholderElement ? 2 : -1 };\n }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledMotionInputElement\n animate={\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? { scale: 0.4, x: '6px', y: '1px' }\n : { scale: 1 }\n }\n initial={false}\n layout\n transition={{ type: 'tween', duration: 0.1 }}\n >\n {placeholderElement}\n </StyledMotionInputElement>\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\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 the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n Input type set for input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: -1 };\n }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAiBA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AAEA,IAAAI,KAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAUwB,SAAAK,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AA4FxB,MAAMW,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CACI;EACIC,WAAW;EACXC,SAAS;EACTC,UAAU;EACVC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,WAAW;EACXC,YAAY;EACZC,0BAA0B;EAC1BC,uBAAuB,GAAG,KAAK;EAC/BC,mBAAmB,GAAG,KAAK;EAC3BC,yBAAyB,GAAG,KAAK;EACjCC,IAAI,GAAG,MAAM;EACbC,KAAK;EACLC,kBAAkB,GAAG,KAAK;EAC1BC,SAAS,GAAG,KAAK;EACjBC;AACJ,CAAC,EACDC,GAAG,KACF;EAAA,IAAAC,mBAAA;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,OAAOR,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EACnF,MAAM,CAACS,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,EAAC,CAAC,CAAC;EAE3D,MAAMG,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAErD,MAAME,eAAe,GAAG,IAAAC,8BAAc,EAACF,cAAc,CAAC;EAEtD,IAAAG,gBAAS,EAAC,MAAM;IACZ,IAAIF,eAAe,IAAIxB,0BAA0B,EAAE;MAC/Ce,mBAAmB,CAACS,eAAe,CAACG,KAAK,GAAG,CAAC,CAAC;IAClD;EACJ,CAAC,EAAE,CAACH,eAAe,EAAExB,0BAA0B,CAAC,CAAC;EAEjD,MAAM4B,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMb,YAAY,CAACY,iBAAiB,IAAI,KAAK,EAC7C,CAACZ,YAAY,CAACY,iBAAiB,CACnC,CAAC;EAED,MAAME,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC3C,IAAIV,QAAQ,CAACW,OAAO,EAAE;MAClBX,QAAQ,CAACW,OAAO,CAAC3B,KAAK,GAAG,EAAE;MAE3BO,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAEsC,MAAM,EAAEZ,QAAQ,CAACW;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAACrC,QAAQ,CAAC,CAAC;;EAEd;EACA,MAAMuC,gBAAgB,GAAG,CAAAnC,YAAY,aAAZA,YAAY,gBAAAW,mBAAA,GAAZX,YAAY,CAAEoC,KAAK,cAAAzB,mBAAA,gBAAAA,mBAAA,GAAnBA,mBAAA,CAAqB0B,KAAK,cAAA1B,mBAAA,uBAA1BA,mBAAA,CAA4B2B,eAAe,MAAKC,SAAS;EAElF,MAAMC,sBAAsB,GAAG,IAAAR,kBAAW,EACrCS,KAAoC,IAAK;IACtC5B,WAAW,CAAC4B,KAAK,CAACP,MAAM,CAAC5B,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOV,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC6C,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAAC7C,QAAQ,CACb,CAAC;EAED,IAAA8C,0BAAmB,EACfhC,GAAG,EACH,OAAO;IACHiC,KAAK,EAAEA,CAAA;MAAA,IAAAC,iBAAA;MAAA,QAAAA,iBAAA,GAAMtB,QAAQ,CAACW,OAAO,cAAAW,iBAAA,uBAAhBA,iBAAA,CAAkBD,KAAK,CAAC,CAAC;IAAA;EAC1C,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAAhB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOrB,KAAK,KAAK,QAAQ,EAAE;MAC3BO,WAAW,CAACP,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAMuC,aAAa,GAAG,IAAAf,cAAO,EAAC,MAAM;IAChC,IAAIlB,QAAQ,IAAI,CAACV,uBAAuB,EAAE;MACtC,OAAOD,0BAA0B,GAC3B;QAAE6C,KAAK,EAAE,CAAC;QAAEC,GAAG,EAAE,CAAC;MAAI,CAAC,GACvB;QAAEC,MAAM,EAAE,CAAC,EAAE;QAAEF,KAAK,EAAE,CAAC;MAAE,CAAC;IACpC;IAEA,OAAO;MAAEG,IAAI,EAAE,CAAC;IAAE,CAAC;EACvB,CAAC,EAAE,CAACrC,QAAQ,EAAEV,uBAAuB,EAAED,0BAA0B,CAAC,CAAC;EAEnE,oBACIxC,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAAkF,WAAW;IAACC,SAAS,EAAC,mBAAmB;IAACC,WAAW,EAAE3D;EAAW,gBAC/DjC,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAAqF,yBAAyB;IACtBC,kBAAkB,EAAE1B,iBAAkB;IACtC2B,UAAU,EAAEhD,SAAU;IACtBiD,wBAAwB,EAAEtB,gBAAiB;IAC3CuB,2BAA2B,EAAEzD;EAA2B,GAEvDT,WAAW,iBAAI/B,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAA0F,sBAAsB,QAAEnE,WAAoC,CAAC,eAC9E/B,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAA2F,kBAAkB;IAACF,2BAA2B,EAAEzD;EAA2B,gBACxExC,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAA4F,gBAAgB;IACbC,iBAAiB,EAAE/C,gBAAiB;IACpCN,EAAE,EAAEA,EAAG;IACPsD,QAAQ,EAAErE,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAE4C,sBAAuB;IACjC3C,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBY,GAAG,EAAEY,QAAS;IACdjB,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACb0D,SAAS,EAAEzD,kBAAmB;IAC9Bd,SAAS,EAAEA,SAAU;IACrB+D,UAAU,EAAEhD,SAAU;IACtByD,0BAA0B,EAAE7D;EAA0B,CACzD,CAAC,eACF3C,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAAiG,6BAA6B;IAC1BC,OAAO,EAAE;MACLC,QAAQ,EACJxD,QAAQ,IACR,CAACX,0BAA0B,IAC3B,CAACC,uBAAuB,GAClB,KAAK,GACL;IACd,CAAE;IACFmE,OAAO,EAAE,KAAM;IACfC,MAAM;IACN5D,GAAG,EAAEc,cAAe;IACpBa,KAAK,EAAE;MAAE,GAAGQ;IAAc,CAAE;IAC5B0B,UAAU,EAAE;MAAElE,IAAI,EAAE,OAAO;MAAEmE,QAAQ,EAAE;IAAI;EAAE,gBAE7C/G,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAAwG,gBAAgB;IAACjB,UAAU,EAAEhD;EAAU,GACnCT,WACa,CACS,CACf,CAAC,EACpBI,mBAAmB,iBAChB1C,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAAyG,0BAA0B;IACvBhB,2BAA2B,EAAEzD,0BAA2B;IACxDkE,OAAO,EAAE;MAAEQ,OAAO,EAAE/D,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCyD,OAAO,EAAE,KAAM;IACfO,OAAO,EAAE7C,oBAAqB;IAC9BwC,UAAU,EAAE;MAAElE,IAAI,EAAE;IAAQ;EAAE,gBAE9B5C,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACnF,KAAA,CAAAK,OAAI;IACDyG,KAAK,EAAE,CAAC,aAAa,CAAE;IACvBC,KAAK,EAAEtE,SAAS,GAAGY,KAAK,CAAC2D,KAAK,GAAGxC;EAAU,CAC9C,CACuB,CAC/B,EACAvC,YAAY,IAAImC,gBAAgB,IAAInC,YACd,CAAC,EAC3BA,YAAY,IAAI,CAACmC,gBAAgB,iBAC9B1E,MAAA,CAAAW,OAAA,CAAA8E,aAAA,CAACjF,MAAA,CAAA+G,uBAAuB,QAAEhF,YAAsC,CAE3D,CAAC;AAEtB,CACJ,CAAC;AAEDV,KAAK,CAAC2F,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA/G,OAAA,GAEbkB,KAAK","ignoreList":[]}

package/lib/cjs/components/text-area/TextArea.styles.js CHANGED Viewed

@@ -87,5 +87,8 @@ const StyledTextAreaLabel = exports.StyledTextAreaLabel = _styledComponents.defa
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: ${({
+  theme
+}) => theme['006']};
 `;
 //# sourceMappingURL=TextArea.styles.js.map

package/lib/cjs/components/text-area/TextArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","StyledTextAreaInput","textarea","theme","$shouldChangeColor","colorMode","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","StyledTextAreaInput","textarea","theme","$shouldChangeColor","colorMode","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme }: StyledTextAreaLabelProps) => theme['006']};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/hooks/useElementSize.js CHANGED Viewed

@@ -7,13 +7,14 @@ exports.useElementSize = void 0;
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
 var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
 const useElementSize = (ref, {
   shouldUseChildElement = false
 } = {}) => {
   var _ref$current;
   const [size, setSize] = (0, _react.useState)();
   const element = (shouldUseChildElement ? (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.firstElementChild : ref.current) ?? null;
-  (0, _react.useLayoutEffect)(() => {
+  useIsomorphicLayoutEffect(() => {
     if (element) {
       setSize(element.getBoundingClientRect());
     } else {

package/lib/cjs/hooks/useElementSize.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useElementSize.js","names":["_resizeObserver","_interopRequireDefault","require","_react","e","__esModule","default","useElementSize","ref","shouldUseChildElement","_ref$current","size","setSize","useState","element","current","firstElementChild","~~useLayoutEffect","~~getBoundingClientRect","undefined","useResizeObserver","entry","contentRect","exports"],"sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import useResizeObserver from '@react-hook/resize-observer';\nimport { MutableRefObject, useLayoutEffect, useState } from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n const element = ((shouldUseChildElement ? ref.current?.firstElementChild : ref.current) ??\n null) as HTMLDivElement \| HTMLLabelElement \| null;\n\n ~~useLayoutEffect~~(() => {\n if (element) {\n setSize(element.getBoundingClientRect());\n } else {\n setSize(undefined);\n }\n }, [element]);\n\n useResizeObserver(element, (entry) => setSize((entry as ResizeObserverEntry).contentRect));\n\n return size;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;~~AAAoE~~,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;~~AAM7D~~,MAAMG,cAAc,GAAGA,CAC1BC,GAA+D,EAC/D;EAAEC,qBAAqB,GAAG;AAA6B,CAAC,GAAG,CAAC,CAAC,KAC/B;EAAA,IAAAC,YAAA;EAC9B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAkB,CAAC;EAEnD,MAAMC,OAAO,GAAI,CAACL,qBAAqB,IAAAC,YAAA,GAAGF,GAAG,CAACO,OAAO,cAAAL,YAAA,uBAAXA,YAAA,CAAaM,iBAAiB,GAAGR,GAAG,CAACO,OAAO,KAClF,IAAiD;~~EAErD~~,~~IAAAE~~,~~sBAAe~~,~~EAAC,~~MAAM;~~IAClB~~,~~IAAIH~~,OAAO,EAAE;MACTF,OAAO,CAACE,OAAO,~~CAACI~~,qBAAqB,CAAC,CAAC,CAAC;IAC5C,CAAC,MAAM;~~MACHN~~,OAAO,~~CAACO~~,SAAS,CAAC;IACtB;EACJ,CAAC,EAAE,~~CAACL~~,OAAO,CAAC,CAAC;EAEb,~~IAAAM~~,uBAAiB,~~EAACN~~,OAAO,~~EAAGO~~,KAAK,~~IAAKT~~,OAAO,~~CAAES~~,KAAK,CAAyBC,WAAW,CAAC,CAAC;EAE1F,~~OAAOX~~,IAAI;AACf,CAAC;~~AAACY~~,OAAA,~~CAAAhB~~,cAAA,GAAAA,cAAA","ignoreList":[]}
1	+ {"version":3,"file":"useElementSize.js","names":["_resizeObserver","_interopRequireDefault","require","_react","e","__esModule","default","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useElementSize","ref","shouldUseChildElement","_ref$current","size","setSize","useState","element","current","firstElementChild","getBoundingClientRect","undefined","useResizeObserver","entry","contentRect","exports"],"sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import useResizeObserver from '@react-hook/resize-observer';\nimport { MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n const element = ((shouldUseChildElement ? ref.current?.firstElementChild : ref.current) ??\n null) as HTMLDivElement \| HTMLLabelElement \| null;\n\n useIsomorphicLayoutEffect(() => {\n if (element) {\n setSize(element.getBoundingClientRect());\n } else {\n setSize(undefined);\n }\n }, [element]);\n\n useResizeObserver(element, (entry) => setSize((entry as ResizeObserverEntry).contentRect));\n\n return size;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAA+E,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/E,MAAMG,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGC,sBAAe,GAAGC,gBAAS;AAMtF,MAAMC,cAAc,GAAGA,CAC1BC,GAA+D,EAC/D;EAAEC,qBAAqB,GAAG;AAA6B,CAAC,GAAG,CAAC,CAAC,KAC/B;EAAA,IAAAC,YAAA;EAC9B,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAkB,CAAC;EAEnD,MAAMC,OAAO,GAAI,CAACL,qBAAqB,IAAAC,YAAA,GAAGF,GAAG,CAACO,OAAO,cAAAL,YAAA,uBAAXA,YAAA,CAAaM,iBAAiB,GAAGR,GAAG,CAACO,OAAO,KAClF,IAAiD;EAErDZ,yBAAyB,CAAC,MAAM;IAC5B,IAAIW,OAAO,EAAE;MACTF,OAAO,CAACE,OAAO,CAACG,qBAAqB,CAAC,CAAC,CAAC;IAC5C,CAAC,MAAM;MACHL,OAAO,CAACM,SAAS,CAAC;IACtB;EACJ,CAAC,EAAE,CAACJ,OAAO,CAAC,CAAC;EAEb,IAAAK,uBAAiB,EAACL,OAAO,EAAGM,KAAK,IAAKR,OAAO,CAAEQ,KAAK,CAAyBC,WAAW,CAAC,CAAC;EAE1F,OAAOV,IAAI;AACf,CAAC;AAACW,OAAA,CAAAf,cAAA,GAAAA,cAAA","ignoreList":[]}

package/lib/esm/components/accordion/Accordion.js CHANGED Viewed

@@ -113,7 +113,6 @@ const Accordion = _ref => {
   const accordionContextProviderValue = useMemo(() => ({
     isWrapped: isWrapped === true
   }), [isWrapped]);
-  console.log(title, isLastAccordion);
   const areaContextProviderValue = useMemo(() => ({
     shouldChangeColor: true
   }), []);

package/lib/esm/components/accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","console","log","areaContextProviderValue","shouldChangeColor","createElement","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside.\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n Icon to be displayed on the right side in the search input\n /\n searchIcon?: string[];\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n */\n titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n}) => {\n const {\n isWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n console.log(title, isLastAccordion);\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n return (\n <StyledAccordion\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchIcon={searchIcon}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","createElement","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside.\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n Icon to be displayed on the right side in the search input\n /\n searchIcon?: string[];\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n */\n titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n}) => {\n const {\n isWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n return (\n <StyledAccordion\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchIcon={searchIcon}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/input/Input.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { useTheme } from 'styled-components';
 import { useElementSize } from '../../hooks/useElementSize';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import Icon from '../icon/Icon';
-import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputElement, StyledMotionInputLabelWrapper } from './Input.styles';
+import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInputField, StyledInputIconWrapper, StyledInputLabel, StyledInputRightElement, StyledMotionInputClearIcon, StyledMotionInputLabelWrapper } from './Input.styles';
 const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     leftElement,
@@ -14,7 +14,6 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     onFocus,
     onKeyDown,
     placeholder,
-    placeholderElement,
     rightElement,
     shouldShowOnlyBottomBorder,
     shouldRemainPlaceholder = false,
@@ -78,9 +77,9 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       };
     }
     return {
-      left: placeholderElement ? 2 : -1
+      left: -1
     };
-  }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
+  }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
   return /*#__PURE__*/React.createElement(StyledInput, {
     className: "beta-chayns-input",
     $isDisabled: isDisabled
@@ -120,21 +119,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       type: 'tween',
       duration: 0.1
     }
-  }, /*#__PURE__*/React.createElement(StyledMotionInputElement, {
-    animate: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? {
-      scale: 0.4,
-      x: '6px',
-      y: '1px'
-    } : {
-      scale: 1
-    },
-    initial: false,
-    layout: true,
-    transition: {
-      type: 'tween',
-      duration: 0.1
-    }
-  }, placeholderElement), /*#__PURE__*/React.createElement(StyledInputLabel, {
+  }, /*#__PURE__*/React.createElement(StyledInputLabel, {
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,

package/lib/esm/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputElement","StyledMotionInputLabelWrapper","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","scale","x","y","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputElement,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\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 the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Element to be displayed next to or instead of the \"placeholder\"\n /\n placeholderElement?: ReactNode;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n Input type set for input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n placeholderElement,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: placeholderElement ? 2 : -1 };\n }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledMotionInputElement\n animate={\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? { scale: 0.4, x: '6px', y: '1px' }\n : { scale: 1 }\n }\n initial={false}\n layout\n transition={{ type: 'tween', duration: 0.1 }}\n >\n {placeholderElement}\n </StyledMotionInputElement>\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","opacity","onClick","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\nexport type InputProps = {\n /*\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\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 the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n Input type set for input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n id,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: -10, right: -6 };\n }\n\n return { left: -1 };\n }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldChangeColor={shouldChangeColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n <StyledInputField\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={{\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : '16px',\n }}\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{ type: 'tween', duration: 0.1 }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n );\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.styles.js CHANGED Viewed

@@ -100,5 +100,11 @@ export const StyledTextAreaLabel = styled.label`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme['006'];
+}};
 `;
 //# sourceMappingURL=TextArea.styles.js.map

package/lib/esm/components/text-area/TextArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","StyledTextAreaInput","textarea","_ref","theme","$shouldChangeColor","colorMode","_ref2","text","_ref3","$isOverflowing","_ref4","$maxHeight","_ref5","$minHeight","_ref6","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref7"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAG;AACxC;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,QAAkC;AAC5E;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA6C,CAAC,GAAAF,IAAA;EAAA,OACxEC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAAgC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA;AAChE;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAChF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEZ;EAAgC,CAAC,GAAAW,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBlB,GAAG;AACjB,0CAA0CM,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDN,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CM,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMa,0BAA0B,GAAGpB,MAAM,CAACqB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGtB,MAAM,CAACqB,KAA+B;AACzE,kBAAkBE,KAAA;EAAA,IAAC;IAAEhB;EAAgC,CAAC,GAAAgB,KAAA;EAAA,OAAKhB,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","StyledTextAreaInput","textarea","_ref","theme","$shouldChangeColor","colorMode","_ref2","text","_ref3","$isOverflowing","_ref4","$maxHeight","_ref5","$minHeight","_ref6","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref7","_ref8"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser \| 'bot' \| null \| undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme }: StyledTextAreaLabelProps) => theme['006']};\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAG;AACxC;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,QAAkC;AAC5E;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA6C,CAAC,GAAAF,IAAA;EAAA,OACxEC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAAgC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA;AAChE;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAChF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OACnD,OAAOC,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AAAA;AACvE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEZ;EAAgC,CAAC,GAAAW,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBlB,GAAG;AACjB,0CAA0CM,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDN,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CM,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMa,0BAA0B,GAAGpB,MAAM,CAACqB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGtB,MAAM,CAACqB,KAA+B;AACzE,kBAAkBE,KAAA;EAAA,IAAC;IAAEhB;EAAgC,CAAC,GAAAgB,KAAA;EAAA,OAAKhB,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA,aAAaiB,KAAA;EAAA,IAAC;IAAEjB;EAAgC,CAAC,GAAAiB,KAAA;EAAA,OAAKjB,KAAK,CAAC,KAAK,CAAC;AAAA;AAClE,CAAC","ignoreList":[]}

package/lib/esm/hooks/useElementSize.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import useResizeObserver from '@react-hook/resize-observer';
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 export const useElementSize = function (ref) {
   let {
     shouldUseChildElement = false
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const [size, setSize] = useState();
   const element = (shouldUseChildElement ? ref.current?.firstElementChild : ref.current) ?? null;
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (element) {
       setSize(element.getBoundingClientRect());
     } else {

package/lib/esm/hooks/useElementSize.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useElementSize.js","names":["useResizeObserver","useLayoutEffect","useState","useElementSize","ref","shouldUseChildElement","arguments","length","undefined","size","setSize","element","current","firstElementChild","getBoundingClientRect","entry","contentRect"],"sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import useResizeObserver from '@react-hook/resize-observer';\nimport { MutableRefObject, useLayoutEffect, useState } from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n const element = ((shouldUseChildElement ? ref.current?.firstElementChild : ref.current) ??\n null) as HTMLDivElement \| HTMLLabelElement \| null;\n\n ~~useLayoutEffect~~(() => {\n if (element) {\n setSize(element.getBoundingClientRect());\n } else {\n setSize(undefined);\n }\n }, [element]);\n\n useResizeObserver(element, (entry) => setSize((entry as ResizeObserverEntry).contentRect));\n\n return size;\n};\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,6BAA6B;AAC3D,SAA2BC,eAAe,EAAEC,QAAQ,QAAQ,OAAO;~~AAMnE~~,OAAO,~~MAAMC~~,cAAc,GAAG,SAAAA,CAC1BC,GAA+D,EAEjC;EAAA,IAD9B;IAAEC,qBAAqB,GAAG;EAA6B,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAE7D,MAAM,CAACG,IAAI,EAAEC,OAAO,CAAC,~~GAAGR~~,QAAQ,CAAkB,CAAC;EAEnD,~~MAAMS~~,OAAO,GAAI,CAACN,qBAAqB,GAAGD,GAAG,CAACQ,OAAO,EAAEC,iBAAiB,GAAGT,GAAG,CAACQ,OAAO,KAClF,IAAiD;EAErDX,~~eAAe~~,CAAC,MAAM;~~IAClB~~,IAAIU,OAAO,EAAE;MACTD,OAAO,CAACC,OAAO,CAACG,qBAAqB,CAAC,CAAC,CAAC;IAC5C,CAAC,MAAM;MACHJ,OAAO,CAACF,SAAS,CAAC;IACtB;EACJ,CAAC,EAAE,CAACG,OAAO,CAAC,CAAC;~~EAEbX~~,iBAAiB,~~CAACW~~,OAAO,EAAGI,KAAK,IAAKL,OAAO,CAAEK,KAAK,CAAyBC,WAAW,CAAC,CAAC;EAE1F,OAAOP,IAAI;AACf,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"useElementSize.js","names":["useResizeObserver","useEffect","useLayoutEffect","useState","useIsomorphicLayoutEffect","window","useElementSize","ref","shouldUseChildElement","arguments","length","undefined","size","setSize","element","current","firstElementChild","getBoundingClientRect","entry","contentRect"],"sources":["../../../src/hooks/useElementSize.ts"],"sourcesContent":["import useResizeObserver from '@react-hook/resize-observer';\nimport { MutableRefObject, useEffect, useLayoutEffect, useState } from 'react';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n}\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n const element = ((shouldUseChildElement ? ref.current?.firstElementChild : ref.current) ??\n null) as HTMLDivElement \| HTMLLabelElement \| null;\n\n useIsomorphicLayoutEffect(() => {\n if (element) {\n setSize(element.getBoundingClientRect());\n } else {\n setSize(undefined);\n }\n }, [element]);\n\n useResizeObserver(element, (entry) => setSize((entry as ResizeObserverEntry).contentRect));\n\n return size;\n};\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,6BAA6B;AAC3D,SAA2BC,SAAS,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AAE9E,MAAMC,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGH,eAAe,GAAGD,SAAS;AAM7F,OAAO,MAAMK,cAAc,GAAG,SAAAA,CAC1BC,GAA+D,EAEjC;EAAA,IAD9B;IAAEC,qBAAqB,GAAG;EAA6B,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAE7D,MAAM,CAACG,IAAI,EAAEC,OAAO,CAAC,GAAGV,QAAQ,CAAkB,CAAC;EAEnD,MAAMW,OAAO,GAAI,CAACN,qBAAqB,GAAGD,GAAG,CAACQ,OAAO,EAAEC,iBAAiB,GAAGT,GAAG,CAACQ,OAAO,KAClF,IAAiD;EAErDX,yBAAyB,CAAC,MAAM;IAC5B,IAAIU,OAAO,EAAE;MACTD,OAAO,CAACC,OAAO,CAACG,qBAAqB,CAAC,CAAC,CAAC;IAC5C,CAAC,MAAM;MACHJ,OAAO,CAACF,SAAS,CAAC;IACtB;EACJ,CAAC,EAAE,CAACG,OAAO,CAAC,CAAC;EAEbd,iBAAiB,CAACc,OAAO,EAAGI,KAAK,IAAKL,OAAO,CAAEK,KAAK,CAAyBC,WAAW,CAAC,CAAC;EAE1F,OAAOP,IAAI;AACf,CAAC","ignoreList":[]}

package/lib/types/components/input/Input.d.ts CHANGED Viewed

@@ -44,10 +44,6 @@ export type InputProps = {
      * Placeholder for the input field
      */
     placeholder?: string;
-    /**
-     * Element to be displayed next to or instead of the "placeholder"
-     */
-    placeholderElement?: ReactNode;
     /**
      * An element that should be displayed on the right side of the Input.
      */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.662",
+    "version": "5.0.0-beta.665",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "be18196ec644b71be6b402f69d4e58bd3a686eab"
+    "gitHead": "b569f93e6647f42356ae1a71beb681c67b647945"
 }