@chayns-components/core 5.0.0-beta.531 → 5.0.0-beta.532
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/components/search-box/SearchBox.js +4 -4
- package/lib/components/search-box/SearchBox.js.map +1 -1
- package/lib/components/search-box/SearchBox.styles.d.ts +0 -1
- package/lib/components/search-box/SearchBox.styles.js +0 -4
- package/lib/components/search-box/SearchBox.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -5,7 +5,7 @@ import { calculateContentHeight } from '../../utils/calculate';
|
|
|
5
5
|
import { searchList } from '../../utils/searchBox';
|
|
6
6
|
import Input from '../input/Input';
|
|
7
7
|
import SearchBoxItem from './search-box-item/SearchBoxItem';
|
|
8
|
-
import { StyledMotionSearchBoxBody, StyledSearchBox
|
|
8
|
+
import { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';
|
|
9
9
|
const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
10
10
|
let {
|
|
11
11
|
placeholder,
|
|
@@ -47,6 +47,7 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
47
47
|
window.addEventListener('blur', () => setIsAnimating(false));
|
|
48
48
|
return () => {
|
|
49
49
|
document.removeEventListener('click', handleOutsideClick);
|
|
50
|
+
window.addEventListener('blur', () => setIsAnimating(false));
|
|
50
51
|
};
|
|
51
52
|
}, [handleOutsideClick, boxRef]);
|
|
52
53
|
|
|
@@ -270,11 +271,10 @@ const SearchBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
270
271
|
transition: {
|
|
271
272
|
duration: 0.2,
|
|
272
273
|
type: 'tween'
|
|
273
|
-
}
|
|
274
|
-
}, /*#__PURE__*/React.createElement(StyledSearchBoxContent, {
|
|
274
|
+
},
|
|
275
275
|
ref: contentRef,
|
|
276
276
|
tabIndex: 0
|
|
277
|
-
}, content)))
|
|
277
|
+
}, content))), [browser?.name, content, handleBlur, handleChange, handleFocus, height, isAnimating, placeholder, value, width]);
|
|
278
278
|
});
|
|
279
279
|
SearchBox.displayName = 'SearchBox';
|
|
280
280
|
export default SearchBox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","StyledSearchBoxContent","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","newMatchingItems","items","searchString","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport {\n StyledMotionSearchBoxBody,\n StyledSearchBox,\n StyledSearchBoxContent,\n} from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * A list of items that can be searched.\n */\n list: ISearchBoxItem[];\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Function to be executed when the input lost focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when an item is selected.\n */\n onSelect?: (item: ISearchBoxItem) => void;\n /**\n * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n */\n selectedId?: string;\n /**\n * Whether the full list of items should be displayed if the input is empty.\n */\n shouldShowContentOnEmptyInput?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n list,\n onChange,\n onBlur,\n onSelect,\n selectedId,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n },\n ref,\n ) => {\n const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLAnchorElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const { browser } = getDevice();\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [boxRef],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n };\n }, [handleOutsideClick, boxRef]);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n }, [list, placeholder]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n if (input) {\n setWidth(input.offsetWidth);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n const selectedItem = list.find(({ id }) => id === selectedId);\n\n if (selectedItem) {\n setValue(selectedItem.text);\n }\n }\n }, [list, selectedId]);\n\n /**\n * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n */\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /**\n * This function sets the items on focus if shouldShowContentOnEmptyInput\n */\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n setMatchingItems(newMatchingItems);\n setIsAnimating(true);\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n useEffect(() => {\n if (list) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n if (shouldShowContentOnEmptyInput || value !== '') {\n setMatchingItems(newMatchingItems);\n setIsAnimating(newMatchingItems.length !== 0);\n }\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n if (\n (!shouldShowContentOnEmptyInput && !event.target.value) ||\n (searchedItems.length === 1 && searchedItems[0]?.text === event.target.value)\n ) {\n setMatchingItems([]);\n } else {\n setMatchingItems(searchedItems);\n setIsAnimating(searchedItems.length !== 0);\n }\n\n setValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [list, onChange, shouldShowContentOnEmptyInput],\n );\n\n /**\n * This function handles the blur event of the input\n */\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /**\n * This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n setValue(item.text);\n setIsAnimating(false);\n setMatchingItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(item);\n }\n },\n [onSelect],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n matchingItems.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={id}\n text={text}\n imageUrl={imageUrl}\n id={id}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n />,\n );\n });\n\n return items;\n }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n });\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSelect]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n value={value}\n />\n </div>\n <AnimatePresence initial={false}>\n <StyledMotionSearchBoxBody\n $browser={browser?.name}\n key=\"content\"\n $height={height}\n $width={width}\n initial={{ height: 0, opacity: 0 }}\n animate={\n isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 }\n }\n transition={{\n duration: 0.2,\n type: 'tween',\n }}\n >\n <StyledSearchBoxContent ref={contentRef} tabIndex={0}>\n {content}\n </StyledSearchBoxContent>\n </StyledMotionSearchBoxBody>\n </AnimatePresence>\n </StyledSearchBox>\n ),\n [\n browser?.name,\n content,\n handleBlur,\n handleChange,\n handleFocus,\n height,\n isAnimating,\n placeholder,\n value,\n width,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchBox.js","names":["getDevice","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateContentHeight","searchList","Input","SearchBoxItem","StyledMotionSearchBoxBody","StyledSearchBox","SearchBox","_ref","ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","contentRef","inputRef","browser","handleOutsideClick","event","current","contains","target","document","addEventListener","window","removeEventListener","textArray","map","_ref2","text","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","newMatchingItems","items","searchString","length","handleChange","searchedItems","handleBlur","handleSelect","item","content","sort","a","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","e","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","clear","onFocus","initial","$browser","name","$height","$width","opacity","animate","transition","duration","type","displayName"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxRef = {\n clear: VoidFunction;\n};\n\nexport type SearchBoxProps = {\n /**\n * A list of items that can be searched.\n */\n list: ISearchBoxItem[];\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * Function to be executed when the input lost focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when the input is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function to be executed when an item is selected.\n */\n onSelect?: (item: ISearchBoxItem) => void;\n /**\n * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n */\n selectedId?: string;\n /**\n * Whether the full list of items should be displayed if the input is empty.\n */\n shouldShowContentOnEmptyInput?: boolean;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = forwardRef<SearchBoxRef, SearchBoxProps>(\n (\n {\n placeholder,\n list,\n onChange,\n onBlur,\n onSelect,\n selectedId,\n shouldShowRoundImage,\n shouldShowContentOnEmptyInput = true,\n },\n ref,\n ) => {\n const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n const [value, setValue] = useState('');\n const [isAnimating, setIsAnimating] = useState(false);\n const [height, setHeight] = useState<number>(0);\n const [width, setWidth] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n const boxRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const { browser } = getDevice();\n\n /**\n * This function closes the list of items\n */\n const handleOutsideClick = useCallback(\n (event: MouseEvent) => {\n if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [boxRef],\n );\n\n /**\n * This hook listens for clicks\n */\n useEffect(() => {\n document.addEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n window.addEventListener('blur', () => setIsAnimating(false));\n };\n }, [handleOutsideClick, boxRef]);\n\n /**\n * This hook calculates the height\n */\n useEffect(() => {\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n }, [list, placeholder]);\n\n /**\n * This hook calculates the width\n */\n useEffect(() => {\n const input = document.getElementById('search_box_input');\n\n if (input) {\n setWidth(input.offsetWidth);\n }\n }, []);\n\n useEffect(() => {\n if (selectedId) {\n const selectedItem = list.find(({ id }) => id === selectedId);\n\n if (selectedItem) {\n setValue(selectedItem.text);\n }\n }\n }, [list, selectedId]);\n\n /**\n * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value\n * should not be reset if the list changes and the selectedId is still undefined.\n */\n useEffect(() => {\n if (!selectedId) {\n setValue('');\n }\n }, [selectedId]);\n\n /**\n * This function sets the items on focus if shouldShowContentOnEmptyInput\n */\n const handleFocus = useCallback(() => {\n if (shouldShowContentOnEmptyInput) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n setMatchingItems(newMatchingItems);\n setIsAnimating(true);\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n useEffect(() => {\n if (list) {\n const newMatchingItems = searchList({ items: list, searchString: value });\n\n if (newMatchingItems.length === 1 && newMatchingItems[0]?.text === value) {\n return;\n }\n\n if (shouldShowContentOnEmptyInput || value !== '') {\n setMatchingItems(newMatchingItems);\n setIsAnimating(newMatchingItems.length !== 0);\n }\n }\n }, [list, shouldShowContentOnEmptyInput, value]);\n\n /**\n * This function handles changes of the input\n */\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n if (\n (!shouldShowContentOnEmptyInput && !event.target.value) ||\n (searchedItems.length === 1 && searchedItems[0]?.text === event.target.value)\n ) {\n setMatchingItems([]);\n } else {\n setMatchingItems(searchedItems);\n setIsAnimating(searchedItems.length !== 0);\n }\n\n setValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [list, onChange, shouldShowContentOnEmptyInput],\n );\n\n /**\n * This function handles the blur event of the input\n */\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (typeof onBlur === 'function') {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n /**\n * This function handles the item selection\n */\n const handleSelect = useCallback(\n (item: ISearchBoxItem) => {\n setValue(item.text);\n setIsAnimating(false);\n setMatchingItems([]);\n\n if (typeof onSelect === 'function') {\n onSelect(item);\n }\n },\n [onSelect],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n matchingItems.forEach(({ id, text, imageUrl }) => {\n items.push(\n <SearchBoxItem\n key={id}\n text={text}\n imageUrl={imageUrl}\n id={id}\n shouldShowRoundImage={shouldShowRoundImage}\n onSelect={handleSelect}\n />,\n );\n });\n\n return items;\n }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const children = contentRef.current?.children;\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (e.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (e.key === 'Enter' && focusedIndex !== null) {\n const element = contentRef.current?.children[focusedIndex];\n\n if (!element) {\n return;\n }\n\n const { id, textContent } = element;\n\n handleSelect({\n id: id.replace('search-box-item__', ''),\n text: textContent ?? '',\n });\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSelect]);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.keyCode === 27) {\n setMatchingItems([]);\n }\n }, []);\n\n useImperativeHandle(\n ref,\n () => ({\n clear: () => setValue(''),\n }),\n [],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.addEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return useMemo(\n () => (\n <StyledSearchBox ref={boxRef}>\n <div id=\"search_box_input\">\n <Input\n ref={inputRef}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={handleFocus}\n placeholder={placeholder}\n value={value}\n />\n </div>\n <AnimatePresence initial={false}>\n <StyledMotionSearchBoxBody\n $browser={browser?.name}\n key=\"content\"\n $height={height}\n $width={width}\n initial={{ height: 0, opacity: 0 }}\n animate={\n isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 }\n }\n transition={{\n duration: 0.2,\n type: 'tween',\n }}\n ref={contentRef}\n tabIndex={0}\n >\n {content}\n </StyledMotionSearchBoxBody>\n </AnimatePresence>\n </StyledSearchBox>\n ),\n [\n browser?.name,\n content,\n handleBlur,\n handleChange,\n handleFocus,\n height,\n isAnimating,\n placeholder,\n value,\n width,\n ],\n );\n },\n);\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
|
|
@@ -271,5 +271,4 @@ export declare const StyledMotionSearchBoxBody: import("styled-components").ISty
|
|
|
271
271
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
272
272
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
273
273
|
} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionSearchBoxBodyProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
274
|
-
export declare const StyledSearchBoxContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
|
|
275
274
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser"
|
|
1
|
+
{"version":3,"file":"SearchBox.styles.js","names":["motion","styled","css","StyledSearchBox","div","StyledMotionSearchBoxBody","_ref","theme","_ref2","$width","_ref3","$height","_ref4","_ref5","$browser"],"sources":["../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n $height: number;\n $width: number;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['001']};\n position: absolute;\n z-index: 4;\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-top: none;\n cursor: pointer;\n width: ${({ $width }) => $width}px;\n max-height: 300px;\n overflow-y: ${({ $height }) => ($height <= 300 ? 'hidden' : 'auto')};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionSearchBoxBodyProps) =>\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: 5px;\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 }\n `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAI,EAAC;AAQ3C,OAAO,MAAMC,yBAAyB,GAAGJ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC5F,kBAAkBE,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA,CAAC;AACpC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACxE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC/E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBZ,GAAI;AAClB,0CAA0CK,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACDL,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.532",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "eaef09d5eb012b0f3513a5e911ed272219168134"
|
|
77
77
|
}
|