@xanui/ui 1.2.3 → 1.2.4
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/Autocomplete/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n if (!inputValue) {\n setInputValue(value ? getLabel(value) : \"\")\n }\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n if (!inputValue) {\n setInputValue(value ? getLabel(value) : \"\")\n }\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n setOpen(false)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setFocused(false)\n }}\n slotProps={{\n content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n }}\n >\n <List\n maxHeight={400}\n overflow={\"auto\"}\n >\n {_options?.map((option, index) => (\n renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n onClick: () => {\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\n onClick={() => {\n\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }}\n >\n {getLabel!(option)}\n </ListItem>\n ))}\n </List>\n </Menu>\n </>\n )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
|
package/Autocomplete/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n if (!inputValue) {\n setInputValue(value ? getLabel(value) : \"\")\n }\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n options: any[] | ((text: string) => Promise<any[]>)\n getLabel: (option: any) => string;\n onChange?: (value: any) => void;\n value?: any;\n multiple?: boolean;\n renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n // input props customization\n disabled?: boolean;\n name?: string;\n placeholder?: string;\n readOnly?: boolean;\n autoFocus?: boolean;\n autoComplete?: string;\n label?: useBreakpointPropsType<string>;\n\n onFocus?: (e: React.FocusEvent<any>) => void;\n onBlur?: (e: React.FocusEvent<any>) => void;\n onInput?: (e: React.FormEvent<any>) => void;\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n fullWidth?: boolean;\n\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n const [_options, setOptions] = React.useState<any[]>()\n const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [focused, setFocused] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n useEffect(() => {\n if (!inputValue) {\n setInputValue(value ? getLabel(value) : \"\")\n }\n }, [value])\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = []\n if (inputProps.startIcon) {\n startIcons.push(inputProps.startIcon)\n }\n\n if (!!value && multiple && Array.isArray(value)) {\n value.map((v: any, index: number) => {\n startIcons.push(<Chip\n key={index}\n size=\"small\"\n label={getLabel!(v)}\n variant={\"fill\"}\n color=\"default\"\n endIcon={<IconButton\n size={20}\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n let newValue = Array.isArray(value) ? [...value] : []\n newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n onChange && onChange(newValue)\n }}\n >\n <Close />\n </IconButton>}\n />)\n })\n }\n\n let endIcons = []\n if (inputProps.endIcon) {\n endIcons.push(inputProps.endIcon)\n }\n if (loading) {\n endIcons.push(<CircleProgress\n key=\"auto-complete-loading-icon\"\n size=\"small\"\n />)\n } else if (!!value && !multiple) {\n endIcons.unshift(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(null)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\n\n const loadOptions = async () => {\n setLoading(true)\n setOpen(false)\n let results = []\n if (typeof options === 'function') {\n results = await options(inputValue)\n } else {\n results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n onChange && onChange(find || null)\n }\n setOptions(results)\n setOpen(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (focused) {\n clearTimeout(timer)\n setTimer(setTimeout(() => {\n loadOptions()\n }, 300))\n } else {\n setOpen(false)\n }\n }, [focused, inputValue])\n\n\n return (\n <>\n <Input\n {...inputProps as any}\n ref={menuRef}\n slotProps={{\n rootContainer: {\n flexWrap: 'wrap',\n ...(multiple ? { height: \"auto\", gap: .5 } : {})\n },\n input: {\n width: multiple ? 'initial' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons.length ? startIcons : undefined}\n endIcon={endIcons}\n value={inputValue}\n onFocus={() => setFocused(true)}\n onKeyDown={(e) => {\n if (inputProps?.onKeyDown) {\n inputProps.onKeyDown(e)\n }\n if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n let newValue = [...value]\n newValue.pop()\n onChange && onChange(newValue)\n }\n }}\n onChange={(e) => {\n const value = e.target.value;\n setInputValue(value)\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setFocused(false)\n }}\n slotProps={{\n content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n }}\n >\n <List\n maxHeight={400}\n overflow={\"auto\"}\n >\n {_options?.map((option, index) => (\n renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n onClick: () => {\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\n onClick={() => {\n\n if (multiple) {\n let newValue = Array.isArray(value) ? [...value] : []\n const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n if (!has) {\n newValue.push(option)\n } else {\n newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n }\n onChange && onChange(newValue)\n } else {\n setFocused(false)\n onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }}\n >\n {getLabel!(option)}\n </ListItem>\n ))}\n </List>\n </Menu>\n </>\n )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
|