@chayns-components/core 5.0.0-beta.1152 → 5.0.0-beta.1154
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.
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +2 -2
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/badge/Badge.js +2 -2
- package/lib/cjs/components/badge/Badge.js.map +1 -1
- package/lib/cjs/components/input/Input.js +2 -2
- package/lib/cjs/components/input/Input.js.map +1 -1
- package/lib/cjs/components/popup/Popup.js +27 -45
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.js +2 -2
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.js +2 -2
- package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
- package/lib/cjs/components/slider/Slider.js +2 -2
- package/lib/cjs/components/slider/Slider.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.js +2 -2
- package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
- package/lib/cjs/hooks/element.js +117 -0
- package/lib/cjs/hooks/element.js.map +1 -0
- package/lib/cjs/hooks/ref.js +19 -0
- package/lib/cjs/hooks/ref.js.map +1 -0
- package/lib/cjs/index.js +15 -2
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/badge/Badge.js +1 -1
- package/lib/esm/components/badge/Badge.js.map +1 -1
- package/lib/esm/components/input/Input.js +1 -1
- package/lib/esm/components/input/Input.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +28 -46
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.js +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.js +1 -1
- package/lib/esm/components/search-input/SearchInput.js.map +1 -1
- package/lib/esm/components/slider/Slider.js +1 -1
- package/lib/esm/components/slider/Slider.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.js +1 -1
- package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
- package/lib/esm/hooks/element.js +107 -0
- package/lib/esm/hooks/element.js.map +1 -0
- package/lib/esm/hooks/ref.js +17 -0
- package/lib/esm/hooks/ref.js.map +1 -0
- package/lib/esm/index.js +3 -1
- package/lib/esm/index.js.map +1 -1
- package/lib/types/components/accordion/Accordion.styles.d.ts +1 -1
- package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +1 -1
- package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +9 -9
- package/lib/types/components/button/Button.styles.d.ts +2 -2
- package/lib/types/components/combobox/ComboBox.styles.d.ts +1 -1
- package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +1 -1
- package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +1 -1
- package/lib/types/components/file-input/FileInput.styles.d.ts +1 -1
- package/lib/types/components/file-select/FileSelect.styles.d.ts +1 -1
- package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +1 -1
- package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.d.ts +2 -2
- package/lib/types/components/input/Input.styles.d.ts +2 -2
- package/lib/types/components/list/list-item/ListItem.styles.d.ts +1 -1
- package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +1 -1
- package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +3 -3
- package/lib/types/components/mention-finder/MentionFinder.styles.d.ts +1 -1
- package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts +1 -1
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +1 -1
- package/lib/types/components/radio-button/RadioButton.styles.d.ts +1 -1
- package/lib/types/components/search-box/SearchBox.styles.d.ts +1 -1
- package/lib/types/components/search-box/search-box-body/SearchBoxBody.styles.d.ts +1 -1
- package/lib/types/components/search-input/SearchInput.styles.d.ts +2 -2
- package/lib/types/components/slider/Slider.styles.d.ts +1 -1
- package/lib/types/components/slider-button/SliderButton.styles.d.ts +1 -1
- package/lib/types/components/truncation/Truncation.styles.d.ts +1 -1
- package/lib/types/hooks/element.d.ts +15 -0
- package/lib/types/hooks/ref.d.ts +2 -0
- package/lib/types/index.d.ts +3 -1
- package/package.json +2 -2
- package/lib/cjs/hooks/useElementSize.js +0 -40
- package/lib/cjs/hooks/useElementSize.js.map +0 -1
- package/lib/esm/hooks/useElementSize.js +0 -32
- package/lib/esm/hooks/useElementSize.js.map +0 -1
- package/lib/types/hooks/useElementSize.d.ts +0 -6
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = require("motion/react");
|
|
8
8
|
var _react2 = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _styledComponents = require("styled-components");
|
|
10
|
-
var
|
|
10
|
+
var _element = require("../../../hooks/element");
|
|
11
11
|
var _accordion = require("../../../utils/accordion");
|
|
12
12
|
var _AreaContextProvider = require("../../area-provider/AreaContextProvider");
|
|
13
13
|
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
@@ -54,7 +54,7 @@ const AccordionHead = ({
|
|
|
54
54
|
onSearchChange(event);
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
|
-
const titleElementChildrenSize = (0,
|
|
57
|
+
const titleElementChildrenSize = (0, _element.useElementSize)(titleElementWrapperRef, {
|
|
58
58
|
shouldUseChildElement: true
|
|
59
59
|
});
|
|
60
60
|
const shouldPreventRightElementClick = (0, _react2.useMemo)(() => (0, _accordion.getElementClickEvent)(rightElement), [rightElement]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","isSearchActive","setIsSearchActive","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","window","setTimeout","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$color","$hasSearch","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","onActiveChange","isActive","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 32,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n <AnimatePresence\n initial={false}\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n exit={{ opacity: 0 }}\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n transition={{\n opacity: {\n duration: 0,\n },\n }}\n key={\n isOpen && !isWrapped\n ? `accordionHeadTitleBig--${uuid}`\n : `accordionHeadTitle--${uuid}`\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper\n layout\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_element","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","isSearchActive","setIsSearchActive","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","window","setTimeout","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$color","$hasSearch","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","onActiveChange","isActive","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 32,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n <AnimatePresence\n initial={false}\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n exit={{ opacity: 0 }}\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n transition={{\n opacity: {\n duration: 0,\n },\n }}\n key={\n isOpen && !isWrapped\n ? `accordionHeadTitleBig--${uuid}`\n : `accordionHeadTitle--${uuid}`\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper\n layout\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var
|
|
9
|
+
var _element = require("../../hooks/element");
|
|
10
10
|
var _Badge = require("./Badge.styles");
|
|
11
11
|
var _badge = require("../../types/badge");
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
@@ -32,7 +32,7 @@ const Badge = ({
|
|
|
32
32
|
}) => {
|
|
33
33
|
const badgeClasses = (0, _clsx.default)('beta-chayns-badge ellipsis', className);
|
|
34
34
|
const badgeRef = (0, _react.useRef)(null);
|
|
35
|
-
const size = (0,
|
|
35
|
+
const size = (0, _element.useElementSize)(badgeRef);
|
|
36
36
|
|
|
37
37
|
// Add 4px to the height to account for the padding
|
|
38
38
|
const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_element","_Badge","_badge","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BADGE_SIZES","font","padding","Badge","backgroundColor","children","className","fontColor","onClick","design","BadgeDesign","DEFAULT","size","badgeSize","BadgeSize","badgeClasses","clsx","badgeRef","useRef","useElementSize","borderRadius","height","minWidth","createElement","StyledBadge","ref","$backgroundColor","$borderRadius","$cursor","$fontColor","$design","$size","$minWidth","displayName","_default","exports"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, ReactNode, useRef, type CSSProperties, type MouseEventHandler } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { StyledBadge } from './Badge.styles';\nimport { BadgeDesign, BadgeSize } from '../../types/badge';\n\nconst BADGE_SIZES = {\n 0: { font: '70%', padding: '0 6px' },\n 1: { font: '80%', padding: '2px 8px 0 8px' },\n};\n\nexport type BadgeProps = {\n /**\n * The background color of the badge\n */\n backgroundColor?: CSSProperties['backgroundColor'];\n /**\n * The content of the badge\n */\n children?: ReactNode;\n /**\n * Additional class names for the badge element\n */\n className?: string;\n /**\n * The design of the Badge\n */\n design?: BadgeDesign;\n /**\n * The font color of the badge\n */\n fontColor?: CSSProperties['color'];\n /**\n * Function to be executed when the badge is clicked\n */\n onClick?: MouseEventHandler;\n /**\n * The size of the badge\n */\n size?: BadgeSize;\n};\n\nconst Badge: FC<BadgeProps> = ({\n backgroundColor,\n children,\n className,\n fontColor,\n onClick,\n design = BadgeDesign.DEFAULT,\n size: badgeSize = BadgeSize.DEFAULT,\n}) => {\n const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n const badgeRef = useRef<HTMLDivElement>(null);\n\n const size = useElementSize(badgeRef);\n\n // Add 4px to the height to account for the padding\n const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';\n const minWidth = size ? `${size.height + 4}px` : '1.65rem';\n\n return (\n <StyledBadge\n className={badgeClasses}\n onClick={onClick}\n ref={badgeRef}\n $backgroundColor={backgroundColor}\n $borderRadius={borderRadius}\n $cursor={typeof onClick === 'function' ? 'pointer' : 'default'}\n $fontColor={fontColor}\n $design={design}\n $size={BADGE_SIZES[badgeSize]}\n $minWidth={minWidth}\n >\n {children || ''}\n </StyledBadge>\n );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.InputSize = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _styledComponents = require("styled-components");
|
|
9
|
-
var
|
|
9
|
+
var _element = require("../../hooks/element");
|
|
10
10
|
var _AreaContextProvider = require("../area-provider/AreaContextProvider");
|
|
11
11
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
12
12
|
var _Input = require("./Input.styles");
|
|
@@ -47,7 +47,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
47
47
|
const theme = (0, _styledComponents.useTheme)();
|
|
48
48
|
const inputRef = (0, _react.useRef)(null);
|
|
49
49
|
const placeholderRef = (0, _react.useRef)(null);
|
|
50
|
-
const placeholderSize = (0,
|
|
50
|
+
const placeholderSize = (0, _element.useElementSize)(placeholderRef);
|
|
51
51
|
(0, _react.useEffect)(() => {
|
|
52
52
|
if (placeholderSize && shouldShowOnlyBottomBorder) {
|
|
53
53
|
setPlaceholderWidth(placeholderSize.width + 5);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","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","blur","_inputRef$current2","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","color","wrong","StyledInputRightElement","displayName","_default"],"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 blur: 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 enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\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 content is pasted into the input field\n */\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\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?: 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 animation should be prevented.\n */\n shouldPreventPlaceholderAnimation?: boolean;\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 * The size of the input field\n */\n size?: InputSize;\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 onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = 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 blur: () => inputRef.current?.blur(),\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 && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\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 $size={size}\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 onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\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 shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\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","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","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","blur","_inputRef$current2","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","color","wrong","StyledInputRightElement","displayName","_default"],"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/element';\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 blur: 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 enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\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 content is pasted into the input field\n */\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\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?: 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 animation should be prevented.\n */\n shouldPreventPlaceholderAnimation?: boolean;\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 * The size of the input field\n */\n size?: InputSize;\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 onPaste,\n placeholder,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = 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 blur: () => inputRef.current?.blur(),\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 && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\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 $size={size}\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 onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\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 shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\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":[]}
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _chaynsApi = require("chayns-api");
|
|
8
7
|
var _react = require("motion/react");
|
|
9
8
|
var _react2 = _interopRequireWildcard(require("react"));
|
|
10
9
|
var _reactDom = require("react-dom");
|
|
@@ -13,6 +12,7 @@ var _popup = require("../../types/popup");
|
|
|
13
12
|
var _AreaContextProvider = _interopRequireDefault(require("../area-provider/AreaContextProvider"));
|
|
14
13
|
var _PopupContentWrapper = _interopRequireDefault(require("./popup-content-wrapper/PopupContentWrapper"));
|
|
15
14
|
var _Popup = require("./Popup.styles");
|
|
15
|
+
var _element = require("../../hooks/element");
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
17
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
18
18
|
const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
@@ -37,17 +37,21 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
37
37
|
const [offset, setOffset] = (0, _react2.useState)(0);
|
|
38
38
|
const [isOpen, setIsOpen] = (0, _react2.useState)(false);
|
|
39
39
|
const [portal, setPortal] = (0, _react2.useState)();
|
|
40
|
-
const [menuHeight, setMenuHeight] = (0, _react2.useState)(0);
|
|
41
|
-
const [isMeasuring, setIsMeasuring] = (0, _react2.useState)(true);
|
|
42
40
|
const [pseudoSize, setPseudoSize] = (0, _react2.useState)();
|
|
43
41
|
const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
|
|
44
42
|
const timeout = (0, _react2.useRef)();
|
|
45
43
|
const uuid = (0, _uuid.useUuid)();
|
|
44
|
+
const {
|
|
45
|
+
height,
|
|
46
|
+
width,
|
|
47
|
+
measuredElement
|
|
48
|
+
} = (0, _element.useMeasuredClone)({
|
|
49
|
+
content
|
|
50
|
+
});
|
|
46
51
|
|
|
47
52
|
// ToDo: Replace with hook if new chayns api is ready
|
|
48
53
|
|
|
49
54
|
const popupContentRef = (0, _react2.useRef)(null);
|
|
50
|
-
const popupPseudoContentRef = (0, _react2.useRef)(null);
|
|
51
55
|
const popupRef = (0, _react2.useRef)(null);
|
|
52
56
|
(0, _react2.useEffect)(() => {
|
|
53
57
|
if (popupRef.current && !container) {
|
|
@@ -61,33 +65,12 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
61
65
|
setNewContainer(container);
|
|
62
66
|
}
|
|
63
67
|
}, [container]);
|
|
64
|
-
const measureHeight = () => {
|
|
65
|
-
if (popupPseudoContentRef.current) {
|
|
66
|
-
const height = popupPseudoContentRef.current.offsetHeight;
|
|
67
|
-
const width = popupPseudoContentRef.current.offsetWidth + 1;
|
|
68
|
-
setPseudoSize({
|
|
69
|
-
height,
|
|
70
|
-
width
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
(0, _react2.useEffect)(() => {
|
|
75
|
-
measureHeight();
|
|
76
|
-
setIsMeasuring(false);
|
|
77
|
-
}, []);
|
|
78
68
|
(0, _react2.useEffect)(() => {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}, 0);
|
|
85
|
-
};
|
|
86
|
-
window.addEventListener('resize', handleResize);
|
|
87
|
-
return () => {
|
|
88
|
-
window.removeEventListener('resize', handleResize);
|
|
89
|
-
};
|
|
90
|
-
}, []);
|
|
69
|
+
setPseudoSize({
|
|
70
|
+
height,
|
|
71
|
+
width
|
|
72
|
+
});
|
|
73
|
+
}, [height, width]);
|
|
91
74
|
const handleShow = (0, _react2.useCallback)(() => {
|
|
92
75
|
if (popupRef.current && pseudoSize) {
|
|
93
76
|
if (!newContainer) {
|
|
@@ -104,13 +87,13 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
104
87
|
width: childrenWidth
|
|
105
88
|
} = popupRef.current.getBoundingClientRect();
|
|
106
89
|
const {
|
|
107
|
-
height,
|
|
108
|
-
width,
|
|
90
|
+
height: containerHeight,
|
|
91
|
+
width: containerWidth,
|
|
109
92
|
top,
|
|
110
93
|
left
|
|
111
94
|
} = newContainer.getBoundingClientRect();
|
|
112
|
-
const zoomX =
|
|
113
|
-
const zoomY =
|
|
95
|
+
const zoomX = containerWidth / newContainer.offsetWidth;
|
|
96
|
+
const zoomY = containerHeight / newContainer.offsetHeight;
|
|
114
97
|
if (pseudoHeight > childrenTop - 25 || alignment === _popup.PopupAlignment.BottomLeft || alignment === _popup.PopupAlignment.BottomRight) {
|
|
115
98
|
let isRight = false;
|
|
116
99
|
if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25 || alignment === _popup.PopupAlignment.BottomRight) {
|
|
@@ -197,13 +180,15 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
197
180
|
hide: handleHide,
|
|
198
181
|
show: handleShow
|
|
199
182
|
}), [handleHide, handleShow]);
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
}
|
|
183
|
+
|
|
184
|
+
// useEffect(() => {
|
|
185
|
+
// void getWindowMetrics().then((result) => {
|
|
186
|
+
// if (result.topBarHeight) {
|
|
187
|
+
// setMenuHeight(result.topBarHeight);
|
|
188
|
+
// }
|
|
189
|
+
// });
|
|
190
|
+
// }, []);
|
|
191
|
+
|
|
207
192
|
(0, _react2.useEffect)(() => {
|
|
208
193
|
if (isOpen) {
|
|
209
194
|
document.addEventListener('click', handleDocumentClick, true);
|
|
@@ -239,10 +224,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
|
239
224
|
shouldChangeColor: false
|
|
240
225
|
}, content))), newContainer));
|
|
241
226
|
}, [internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid, shouldScrollWithContent]);
|
|
242
|
-
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null,
|
|
243
|
-
ref: popupPseudoContentRef,
|
|
244
|
-
$menuHeight: menuHeight
|
|
245
|
-
}, content), /*#__PURE__*/_react2.default.createElement(_Popup.StyledPopup, {
|
|
227
|
+
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, measuredElement, /*#__PURE__*/_react2.default.createElement(_Popup.StyledPopup, {
|
|
246
228
|
className: "beta-chayns-popup",
|
|
247
229
|
ref: popupRef,
|
|
248
230
|
onClick: handleChildrenClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","el","element","closest","Element","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","zoomX","zoomY","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","document","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should scroll with the content.\n */\n shouldScrollWithContent?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = false,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const measureHeight = () => {\n if (popupPseudoContentRef.current) {\n const height = popupPseudoContentRef.current.offsetHeight;\n const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n setPseudoSize({ height, width });\n }\n };\n\n useEffect(() => {\n measureHeight();\n\n setIsMeasuring(false);\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMeasuring(true);\n\n setTimeout(() => {\n measureHeight();\n setIsMeasuring(false);\n }, 0);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {isMeasuring && (\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n )}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Popup","forwardRef","alignment","content","onShow","container","onHide","children","shouldHideOnChildrenLeave","shouldShowOnHover","shouldUseChildrenWidth","shouldScrollWithContent","shouldUseFullWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","internalAlignment","setInternalAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","useRef","uuid","useUuid","height","width","measuredElement","useMeasuredClone","popupContentRef","popupRef","useEffect","current","el","element","closest","Element","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","containerHeight","containerWidth","zoomX","offsetWidth","zoomY","offsetHeight","BottomLeft","BottomRight","isRight","scrollLeft","scrollTop","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","document","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopup","className","onClick","$shouldUseChildrenWidth","$shouldUseFullWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup } from './Popup.styles';\nimport { useMeasuredClone } from '../../hooks/element';\n\nexport type PopupProps = {\n /**\n * The alignment of the popup. By default, the popup will calculate the best alignment.\n */\n alignment?: PopupAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `Popup` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the tooltip should be hidden after the children is not hovered.\n */\n shouldHideOnChildrenLeave?: boolean;\n /**\n * Whether the popup should scroll with the content.\n */\n shouldScrollWithContent?: boolean;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * Whether the width of the children should be used.\n */\n shouldUseChildrenWidth?: boolean;\n /**\n * Whether the popup children should use the full width.\n */\n shouldUseFullWidth?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n (\n {\n alignment,\n content,\n onShow,\n container,\n onHide,\n children,\n shouldHideOnChildrenLeave,\n shouldShowOnHover = false,\n shouldUseChildrenWidth = true,\n shouldScrollWithContent = false,\n shouldUseFullWidth = false,\n yOffset = 0,\n },\n ref,\n ) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n PopupAlignment.TopLeft,\n );\n const [offset, setOffset] = useState<number>(0);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const timeout = useRef<number>();\n\n const uuid = useUuid();\n\n const { height, width, measuredElement } = useMeasuredClone({ content });\n\n // ToDo: Replace with hook if new chayns api is ready\n\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (popupRef.current && !container) {\n const el = popupRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n useEffect(() => {\n setPseudoSize({ height, width });\n }, [height, width]);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && pseudoSize) {\n if (!newContainer) {\n return;\n }\n\n const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n const {\n height: containerHeight,\n width: containerWidth,\n top,\n left,\n } = newContainer.getBoundingClientRect();\n\n const zoomX = containerWidth / (newContainer as HTMLElement).offsetWidth;\n const zoomY = containerHeight / (newContainer as HTMLElement).offsetHeight;\n\n if (\n pseudoHeight > childrenTop - 25 ||\n alignment === PopupAlignment.BottomLeft ||\n alignment === PopupAlignment.BottomRight\n ) {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.BottomRight\n ) {\n setInternalAlignment(PopupAlignment.BottomRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.BottomLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n } else {\n let isRight = false;\n\n if (\n pseudoWidth > childrenLeft + childrenWidth / 2 - 25 ||\n alignment === PopupAlignment.TopRight\n ) {\n setInternalAlignment(PopupAlignment.TopRight);\n\n isRight = true;\n } else {\n setInternalAlignment(PopupAlignment.TopLeft);\n }\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n yOffset;\n\n let newOffset;\n\n if (isRight) {\n newOffset =\n x + pseudoWidth >= window.innerWidth\n ? x + pseudoWidth - window.innerWidth\n : 0;\n } else {\n newOffset = 0;\n\n const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n newOffset =\n right + pseudoWidth >= window.innerWidth\n ? right + pseudoWidth - window.innerWidth\n : 0;\n }\n\n setOffset(newOffset);\n\n const newX = x - newOffset;\n\n setCoordinates({\n x: newX < 23 ? 23 : newX,\n y,\n });\n }\n\n setIsOpen(true);\n }\n }, [alignment, newContainer, pseudoSize, yOffset]);\n\n const handleChildrenClick = () => {\n handleShow();\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = useCallback(() => {\n if (shouldShowOnHover) {\n window.clearTimeout(timeout.current);\n handleShow();\n }\n }, [handleShow, shouldShowOnHover]);\n\n const handleMouseLeave = useCallback(() => {\n if (!shouldShowOnHover) {\n return;\n }\n\n if (shouldHideOnChildrenLeave) {\n handleHide();\n\n return;\n }\n\n timeout.current = window.setTimeout(() => {\n handleHide();\n }, 500);\n }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n handleHide();\n }\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n // useEffect(() => {\n // void getWindowMetrics().then((result) => {\n // if (result.topBarHeight) {\n // setMenuHeight(result.topBarHeight);\n // }\n // });\n // }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContentWrapper\n width={pseudoSize?.width ?? 0}\n offset={offset}\n shouldScrollWithContent={shouldScrollWithContent}\n coordinates={coordinates}\n key={`tooltip_${uuid}`}\n alignment={internalAlignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n <AreaContextProvider shouldChangeColor={false}>\n {content}\n </AreaContextProvider>\n </PopupContentWrapper>\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n internalAlignment,\n newContainer,\n content,\n coordinates,\n handleMouseEnter,\n handleMouseLeave,\n isOpen,\n offset,\n pseudoSize?.width,\n uuid,\n shouldScrollWithContent,\n ]);\n\n return (\n <>\n {measuredElement}\n <StyledPopup\n className=\"beta-chayns-popup\"\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var
|
|
8
|
+
var _element = require("../../../hooks/element");
|
|
9
9
|
var _uuid = require("../../../hooks/uuid");
|
|
10
10
|
var _searchBox = require("../../../utils/searchBox");
|
|
11
11
|
var _FilterButtons = _interopRequireDefault(require("../../filter-buttons/FilterButtons"));
|
|
@@ -26,7 +26,7 @@ const SearchBoxBody = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
26
26
|
const [hasScrolled, setHasScrolled] = (0, _react.useState)(false);
|
|
27
27
|
const [currentGroupName, setCurrentGroupName] = (0, _react.useState)('');
|
|
28
28
|
const headRef = (0, _react.useRef)(null);
|
|
29
|
-
const headSize = (0,
|
|
29
|
+
const headSize = (0, _element.useElementSize)(headRef);
|
|
30
30
|
const uuid = (0, _uuid.useUuid)();
|
|
31
31
|
const headHeight = (0, _react.useMemo)(() => headSize !== null && headSize !== void 0 && headSize.height ? headSize.height + 15 : 0, [headSize === null || headSize === void 0 ? void 0 : headSize.height]);
|
|
32
32
|
(0, _react.useEffect)(() => {
|