@chayns-components/core 5.0.0-beta.269 → 5.0.0-beta.271

package/lib/components/number-input/NumberInput.d.ts

@@ -14,7 +14,7 @@ export type NumberInputProps = {
      */
     maxNumber?: number;
     /**
-     * The number that should be displayed formatted in the input field. NOTE: A zero as number is not allowed
+     * The number that should be displayed formatted in the input field. NOTE: The number has to match the mode (integer, decimal or money)
      */
     number: number | null;
     /**
@@ -24,7 +24,11 @@ export type NumberInputProps = {
     /**
      * Callback function that is called when the input gets out of focus
      */
-    onNumberChange: (newNumber: number | null) => void;
+    onBlur?: (newNumber: number | null) => void;
+    /**
+     * Callback function that is called when the input changes
+     */
+    onChange?: (newNumber: number | null) => void;
     /**
      * Whether the input is disabled
      */

package/lib/components/number-input/NumberInput.js

@@ -18,10 +18,12 @@ const NumberInput = _ref => {
     maxNumber = Infinity,
     number,
     placeholder,
-    onNumberChange,
-    isDisabled
+    onBlur,
+    isDisabled,
+    onChange
   } = _ref;
   const [stringValue, setStringValue] = (0, _react.useState)('');
+  const localPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : isMoneyInput ? '€' : undefined;
   const handleChange = (0, _react.useCallback)(function () {
     let newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     if (typeof newValue !== 'number') {
@@ -36,52 +38,65 @@ const NumberInput = _ref => {
       isMoneyInput
     }));
   }, [isMoneyInput]);
-  const onChange = event => {
+  const onLocalChange = event => {
     const newValue = event.target.value;
     const sanitizedValue = newValue
-    // Removes everything except numbers and commas (decimals should be indicated with a comma)
+    // Removes everything except numbers, commas and points
     .replace(_number.NUMBER_CLEAR_REGEX, '')
     // Calculations need points for decimal indication
     .replace(',', '.');
-    if (sanitizedValue.trim().length > 0) {
-      // Allows numbers, a comma and any number of decimal places
-      if (isDecimalInput && _number.DECIMAL_TEST.test(sanitizedValue)) {
-        const parsedNumber = (0, _number2.parseFloatAndRound)({
-          stringValue: sanitizedValue
-        });
-        if (parsedNumber > maxNumber) {
-          return;
-        }
-        setStringValue(sanitizedValue.replace('.', ','));
+    if (sanitizedValue.length === 0) {
+      setStringValue('');
+      if (typeof onChange === 'function') {
+        onChange === null || onChange === void 0 || onChange(null);
+      }
+      return;
+    }
+
+    // Allows numbers, one (comma/point) and any number of decimal places
+    if (isDecimalInput && _number.DECIMAL_TEST.test(sanitizedValue)) {
+      const parsedNumber = (0, _number2.parseFloatAndRound)({
+        stringValue: sanitizedValue
+      });
+      if (parsedNumber > maxNumber) {
         return;
       }
+      setStringValue(sanitizedValue.replace('.', ','));
+      if (typeof onChange === 'function') {
+        onChange(parsedNumber);
+      }
+      return;
+    }
 
-      // Allows numbers, a comma and 2 numbers of decimal places
-      if (isMoneyInput && _number.MONEY_TEST.test(sanitizedValue)) {
-        const parsedNumber = (0, _number2.parseFloatAndRound)({
-          stringValue: sanitizedValue,
-          decimals: 2
-        });
-        if (parsedNumber > maxNumber) {
-          return;
-        }
-        setStringValue(sanitizedValue.replace('.', ','));
+    // Allows numbers, one (comma/point) and 2 numbers of decimal places
+    if (isMoneyInput && _number.MONEY_TEST.test(sanitizedValue)) {
+      const parsedNumber = (0, _number2.parseFloatAndRound)({
+        stringValue: sanitizedValue,
+        decimals: 2
+      });
+      if (parsedNumber > maxNumber) {
         return;
       }
+      setStringValue(sanitizedValue.replace('.', ','));
+      if (typeof onChange === 'function') {
+        onChange(parsedNumber);
+      }
+      return;
+    }
 
-      // Allows numbers but excludes numbers with leading 0
-      if (_number.INTEGER_TEST.test(sanitizedValue)) {
-        const parsedNumber = Number(sanitizedValue);
-        if (parsedNumber > maxNumber) {
-          return;
-        }
-        setStringValue(sanitizedValue);
+    // Allows numbers but excludes numbers with leading 0
+    if (_number.INTEGER_TEST.test(sanitizedValue)) {
+      const parsedNumber = Number(sanitizedValue);
+      if (parsedNumber > maxNumber) {
+        return;
+      }
+      setStringValue(sanitizedValue);
+      if (typeof onChange === 'function') {
+        onChange(parsedNumber);
       }
-    } else {
-      setStringValue('');
     }
   };
-  const onBlur = () => {
+  const onLocalBlur = () => {
     const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;
     const parsedValue = (0, _number2.parseFloatAndRound)({
       stringValue: sanitizedValue
@@ -90,7 +105,9 @@ const NumberInput = _ref => {
       number: parsedValue,
       isMoneyInput
     }));
-    onNumberChange(parsedValue === 0 ? null : parsedValue);
+    if (typeof onBlur === 'function') {
+      onBlur(parsedValue === 0 ? null : parsedValue);
+    }
   };
   const onFocus = () => {
     setStringValue(stringValue.replaceAll('.', ''));
@@ -100,10 +117,10 @@ const NumberInput = _ref => {
   }, [handleChange, number]);
   return /*#__PURE__*/_react.default.createElement(_Input.default, {
     inputMode: "decimal",
-    onChange: onChange,
+    onChange: onLocalChange,
     value: stringValue,
-    placeholder: placeholder,
-    onBlur: onBlur,
+    placeholder: localPlaceholder,
+    onBlur: onLocalBlur,
     onFocus: onFocus,
     isDisabled: isDisabled
   });

package/lib/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onNumberChange","isDisabled","stringValue","setStringValue","useState","handleChange","useCallback","newValue","arguments","length","undefined","parsedValue","parseFloatAndRound","toString","formateNumber","onChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","trim","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onBlur","onFocus","replaceAll","useEffect","createElement","inputMode","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n    /**\n     * Whether the user can add decimal places. Enables the user to input a zero as first number\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one leading zero\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * The number that should be displayed formatted in the input field. NOTE: A zero as number is not allowed\n     */\n    number: number | null;\n    /**\n     * The placeholder that should be in the input\n     */\n    placeholder?: string;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onNumberChange: (newNumber: number | null) => void;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    maxNumber = Infinity,\n    number,\n    placeholder,\n    onNumberChange,\n    isDisabled,\n}) => {\n    const [stringValue, setStringValue] = useState<string>('');\n\n    const handleChange = useCallback(\n        (newValue: number | null = null) => {\n            if (typeof newValue !== 'number') {\n                setStringValue('');\n\n                return;\n            }\n\n            const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n            setStringValue(formateNumber({ number: parsedValue, isMoneyInput }));\n        },\n        [isMoneyInput]\n    );\n\n    const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        const sanitizedValue = newValue\n            // Removes everything except numbers and commas (decimals should be indicated with a comma)\n            .replace(NUMBER_CLEAR_REGEX, '')\n            // Calculations need points for decimal indication\n            .replace(',', '.');\n\n        if (sanitizedValue.trim().length > 0) {\n            // Allows numbers, a comma and any number of decimal places\n            if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n                const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n                if (parsedNumber > maxNumber) {\n                    return;\n                }\n\n                setStringValue(sanitizedValue.replace('.', ','));\n\n                return;\n            }\n\n            // Allows numbers, a comma and 2 numbers of decimal places\n            if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n                const parsedNumber = parseFloatAndRound({\n                    stringValue: sanitizedValue,\n                    decimals: 2,\n                });\n\n                if (parsedNumber > maxNumber) {\n                    return;\n                }\n\n                setStringValue(sanitizedValue.replace('.', ','));\n\n                return;\n            }\n\n            // Allows numbers but excludes numbers with leading 0\n            if (INTEGER_TEST.test(sanitizedValue)) {\n                const parsedNumber = Number(sanitizedValue);\n\n                if (parsedNumber > maxNumber) {\n                    return;\n                }\n\n                setStringValue(sanitizedValue);\n            }\n        } else {\n            setStringValue('');\n        }\n    };\n\n    const onBlur = () => {\n        const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n        const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n        setStringValue(\n            stringValue.length === 0\n                ? ''\n                : formateNumber({\n                      number: parsedValue,\n                      isMoneyInput,\n                  })\n        );\n\n        onNumberChange(parsedValue === 0 ? null : parsedValue);\n    };\n\n    const onFocus = () => {\n        setStringValue(stringValue.replaceAll('.', ''));\n    };\n\n    useEffect(() => {\n        handleChange(number);\n    }, [handleChange, number]);\n\n    return (\n        <Input\n            inputMode=\"decimal\"\n            onChange={onChange}\n            value={stringValue}\n            placeholder={placeholder}\n            onBlur={onBlur}\n            onFocus={onFocus}\n            isDisabled={isDisabled}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onBlur","isDisabled","onChange","stringValue","setStringValue","useState","localPlaceholder","undefined","handleChange","useCallback","newValue","arguments","length","parsedValue","parseFloatAndRound","toString","formateNumber","onLocalChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onLocalBlur","onFocus","replaceAll","useEffect","createElement","inputMode","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n    /**\n     * Whether the user can add decimal places. Enables the user to input a zero as first number\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one leading zero\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * The number that should be displayed formatted in the input field. NOTE: The number has to match the mode (integer, decimal or money)\n     */\n    number: number | null;\n    /**\n     * The placeholder that should be in the input\n     */\n    placeholder?: string;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | null) => void;\n    /**\n     * Callback function that is called when the input changes\n     */\n    onChange?: (newNumber: number | null) => void;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = (\n    {\n        isDecimalInput,\n        isMoneyInput,\n        maxNumber = Infinity,\n        number,\n        placeholder,\n        onBlur,\n        isDisabled,\n        onChange\n    }) => {\n    const [stringValue, setStringValue] = useState<string>('');\n\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const handleChange = useCallback(\n        (newValue: number | null = null) => {\n            if (typeof newValue !== 'number') {\n                setStringValue('');\n\n                return;\n            }\n\n            const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n            setStringValue(formateNumber({ number: parsedValue, isMoneyInput }));\n        },\n        [isMoneyInput]\n    );\n\n    const onLocalChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        const sanitizedValue = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '')\n            // Calculations need points for decimal indication\n            .replace(',', '.');\n\n        if (sanitizedValue.length === 0) {\n            setStringValue('');\n\n            if (typeof onChange === 'function') {\n                onChange?.(null);\n            }\n\n            return;\n        }\n\n        // Allows numbers, one (comma/point) and any number of decimal places\n        if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n            const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue.replace('.', ','));\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n\n            return;\n        }\n\n        // Allows numbers, one (comma/point) and 2 numbers of decimal places\n        if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n            const parsedNumber = parseFloatAndRound({\n                stringValue: sanitizedValue,\n                decimals: 2,\n            });\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue.replace('.', ','));\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n\n            return;\n        }\n\n        // Allows numbers but excludes numbers with leading 0\n        if (INTEGER_TEST.test(sanitizedValue)) {\n            const parsedNumber = Number(sanitizedValue);\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue);\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n        const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n        setStringValue(\n            stringValue.length === 0\n                ? ''\n                : formateNumber({\n                    number: parsedValue,\n                    isMoneyInput,\n                })\n        );\n\n        if (typeof onBlur === 'function') {\n            onBlur(parsedValue === 0 ? null : parsedValue);\n        }\n    };\n\n    const onFocus = () => {\n        setStringValue(stringValue.replaceAll('.', ''));\n    };\n\n    useEffect(() => {\n        handleChange(number);\n    }, [handleChange, number]);\n\n    return (\n        <Input\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={stringValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onFocus}\n            isDisabled={isDisabled}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}

package/lib/components/search-box/SearchBox.d.ts

@@ -21,6 +21,10 @@ export type SearchBoxProps = {
      * Function to be executed when an item is selected.
      */
     onSelect?: (item: ISearchBoxItem) => void;
+    /**
+     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.
+     */
+    selectedId?: string;
 };
 declare const SearchBox: FC<SearchBoxProps>;
 export default SearchBox;

package/lib/components/search-box/SearchBox.js

@@ -20,7 +20,8 @@ const SearchBox = _ref => {
     list,
     onChange,
     onBlur,
-    onSelect
+    onSelect,
+    selectedId
   } = _ref;
   const [matchingItems, setMatchingItems] = (0, _react.useState)([]);
   const [value, setValue] = (0, _react.useState)('');
@@ -72,6 +73,19 @@ const SearchBox = _ref => {
       setWidth(input.offsetWidth);
     }
   }, []);
+  (0, _react.useEffect)(() => {
+    if (selectedId) {
+      const selectedItem = list.find(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id === selectedId;
+      });
+      if (selectedItem) {
+        setValue(selectedItem.text);
+      }
+    }
+  }, [list, selectedId]);
 
   /**
    * This function handles changes of the input
@@ -111,11 +125,11 @@ const SearchBox = _ref => {
   const content = (0, _react.useMemo)(() => {
     const items = [];
     matchingItems.sort((a, b) => a.text.localeCompare(b.text));
-    matchingItems.forEach(_ref3 => {
+    matchingItems.forEach(_ref4 => {
       let {
         id,
         text
-      } = _ref3;
+      } = _ref4;
       items.push( /*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
         key: id,
         text: text,

package/lib/components/search-box/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","boxRef","useRef","contentRef","inputRef","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","handleChange","searchedItems","searchList","items","searchString","length","handleBlur","handleSelect","item","content","useMemo","sort","a","b","localeCompare","forEach","_ref3","id","push","createElement","StyledSearchBox","ref","AnimatePresence","initial","StyledMotionSearchBoxBody","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\nimport type { ISearchBoxItem } from './types';\nimport { searchList } from './utils';\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\nconst SearchBox: FC<SearchBoxProps> = ({ placeholder, list, onChange, onBlur, onSelect }) => {\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\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\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\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    /**\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            setMatchingItems(searchedItems);\n            setIsAnimating(searchedItems.length !== 0);\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange]\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\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 }) => {\n            items.push(<SearchBoxItem key={id} text={text} id={id} onSelect={handleSelect} />);\n        });\n\n        return items;\n    }, [handleSelect, matchingItems]);\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                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\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                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [content, handleBlur, handleChange, height, isAnimating, placeholder, value, width]\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","boxRef","useRef","contentRef","inputRef","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleChange","searchedItems","searchList","items","searchString","length","handleBlur","handleSelect","item","content","useMemo","sort","a","b","localeCompare","forEach","_ref4","push","createElement","StyledSearchBox","ref","AnimatePresence","initial","StyledMotionSearchBoxBody","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\nimport type { ISearchBoxItem } from './types';\nimport { searchList } from './utils';\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\nconst SearchBox: FC<SearchBoxProps> = (\n    {\n        placeholder,\n        list,\n        onChange,\n        onBlur,\n        onSelect,\n        selectedId\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\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\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\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 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            setMatchingItems(searchedItems);\n            setIsAnimating(searchedItems.length !== 0);\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange]\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\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 }) => {\n            items.push(<SearchBoxItem key={id} text={text} id={id} onSelect={handleSelect}/>);\n        });\n\n        return items;\n    }, [handleSelect, matchingItems]);\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                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\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                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [content, handleBlur, handleChange, height, isAnimating, placeholder, value, width]\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.269",
+    "version": "5.0.0-beta.271",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -65,5 +65,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a24d6bdfbc60213492891843021753905423583d"
+    "gitHead": "8ae780d07dfb9296e5f32014e7aaef972c13b41f"
 }