@economic/taco 2.1.2 → 2.1.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +3 -1
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
- package/dist/taco.cjs.development.js +3 -1
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
- package/types.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@economic/taco",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "> TODO: description",
|
|
5
5
|
"author": "Matt Daly <matthew.daly@visma.com>",
|
|
6
6
|
"homepage": "https://github.com/e-conomic/taco#readme",
|
|
@@ -130,5 +130,5 @@
|
|
|
130
130
|
"not ie < 11"
|
|
131
131
|
]
|
|
132
132
|
},
|
|
133
|
-
"gitHead": "
|
|
133
|
+
"gitHead": "1617d9e270a6c9bc578ace7e2b140ffa1be97952"
|
|
134
134
|
}
|
package/types.json
CHANGED
|
@@ -487658,7 +487658,7 @@
|
|
|
487658
487658
|
],
|
|
487659
487659
|
"name": "ForwardRefExoticComponent"
|
|
487660
487660
|
},
|
|
487661
|
-
"defaultValue": "React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n onSearch: handleSearch,\n settingsContent,\n shortcut,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const settingsRef = React.useRef<HTMLDivElement>(null);\n const [internalValue, setInternalValue] = React.useState(value ?? '');\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const isSynced = internalValue === value;\n const hasFind = handleClickFindNext && handleClickFindPrevious && findCurrent !== undefined && findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleSubmit = () => {\n handleSearch(internalValue);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n // trigger searches when leaving the field\n handleSubmit();\n\n if (\n settingsRef.current &&\n (settingsRef.current === event.relatedTarget || settingsRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleChange = event => {\n setInternalValue(event.target.value);\n\n if (!event.target.value) {\n handleClear();\n }\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.focus());\n setInternalValue('');\n handleSearch('');\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n attributes.onFocus?.(event);\n setFocused(true);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive && isSynced) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n } else {\n handleSearch(internalValue);\n }\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (internalValue || focused)) {\n if (internalValue) {\n postfix = (\n <IconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2\">\n {findCurrent ?? 0}/{findTotal ?? 0}\n </span>\n {findCurrent ? (\n <>\n <IconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <IconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !internalValue) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n 'peer !pl-7',\n hasFind\n ? {\n '!w-48': !internalValue && !focused,\n '!w-72': internalValue || focused,\n }\n : '!w-48',\n {\n '!wcag-blue-100': isActive,\n },\n props.className\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={\n <IconButton\n aria-label={texts.searchInput.button}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n disabled={attributes.disabled || attributes.readOnly}\n icon=\"search\"\n onMouseDown={handleSubmit}\n tabIndex={-1}\n tooltip={\n focused && !isSynced ? (\n <>\n {texts.searchInput.button} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.button\n )\n }\n />\n }\n postfix={postfix}\n ref={internalRef}\n value={internalValue}\n />\n );\n\n if (settingsContent) {\n const handleSettingsBlur = event => {\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n setFocused(false);\n };\n\n return (\n <div
|
|
487661
|
+
"defaultValue": "React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n const {\n findCurrent,\n findTotal,\n onClickFindNext: handleClickFindNext,\n onClickFindPrevious: handleClickFindPrevious,\n onSearch: handleSearch,\n settingsContent,\n shortcut,\n value,\n ...attributes\n } = props;\n const internalRef = useMergedRef<HTMLInputElement>(ref);\n const settingsRef = React.useRef<HTMLDivElement>(null);\n const [internalValue, setInternalValue] = React.useState(value ?? '');\n const [focused, setFocused] = React.useState(false);\n const { texts } = useLocalization();\n const isActive = value?.length;\n const isSynced = internalValue === value;\n const hasFind = handleClickFindNext && handleClickFindPrevious && findCurrent !== undefined && findTotal !== undefined;\n\n useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n if (document.activeElement !== internalRef.current) {\n event.preventDefault();\n internalRef.current?.focus();\n }\n });\n\n const handleSubmit = () => {\n handleSearch(internalValue);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n // trigger searches when leaving the field\n handleSubmit();\n\n if (\n settingsRef.current &&\n (settingsRef.current === event.relatedTarget || settingsRef.current?.contains(event.relatedTarget))\n ) {\n return;\n }\n\n setFocused(false);\n attributes.onBlur?.(event);\n };\n\n const handleChange = event => {\n setInternalValue(event.target.value);\n\n if (!event.target.value) {\n handleClear();\n }\n };\n\n const handleClear = () => {\n requestAnimationFrame(() => internalRef.current?.focus());\n setInternalValue('');\n handleSearch('');\n };\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n attributes.onFocus?.(event);\n setFocused(true);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n props.onKeyDown?.(event);\n\n if (event.isDefaultPrevented()) {\n return;\n }\n\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (hasFind && isActive && isSynced) {\n if (event.shiftKey) {\n handleClickFindPrevious?.();\n } else {\n handleClickFindNext?.();\n }\n } else {\n handleSearch(internalValue);\n }\n return;\n }\n\n if (event.key === 'Escape') {\n handleClear();\n return;\n }\n };\n\n let postfix;\n\n if (!attributes.disabled && !attributes.readOnly && (internalValue || focused)) {\n if (internalValue) {\n postfix = (\n <IconButton\n aria-label={texts.searchInput.clear}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"close\"\n onMouseDown={handleClear}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n </>\n ) : (\n texts.searchInput.clear\n )\n }\n />\n );\n }\n\n if (hasFind && isActive) {\n postfix = (\n <>\n <span className=\"text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2\">\n {findCurrent ?? 0}/{findTotal ?? 0}\n </span>\n {findCurrent ? (\n <>\n <IconButton\n aria-label={texts.searchInput.findPrevious}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-up\"\n onMouseDown={handleClickFindPrevious}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n </>\n ) : (\n texts.searchInput.findPrevious\n )\n }\n />\n <IconButton\n aria-label={texts.searchInput.findNext}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n icon=\"chevron-down\"\n onMouseDown={handleClickFindNext}\n tabIndex={-1}\n tooltip={\n focused ? (\n <>\n {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.findNext\n )\n }\n />\n </>\n ) : null}\n {postfix}\n </>\n );\n }\n } else if (shortcut && !focused && !internalValue) {\n postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n }\n\n const className = cn(\n 'peer !pl-7',\n hasFind\n ? {\n '!w-48': !internalValue && !focused,\n '!w-72': internalValue || focused,\n }\n : '!w-48',\n {\n '!wcag-blue-100': isActive,\n },\n props.className\n );\n\n const input = (\n <Input\n {...attributes}\n aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n className={className}\n data-taco=\"search-input2\"\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n prefix={\n <IconButton\n aria-label={texts.searchInput.button}\n className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n disabled={attributes.disabled || attributes.readOnly}\n icon=\"search\"\n onMouseDown={handleSubmit}\n tabIndex={-1}\n tooltip={\n focused && !isSynced ? (\n <>\n {texts.searchInput.button} <Shortcut keys=\"Enter\" />\n </>\n ) : (\n texts.searchInput.button\n )\n }\n />\n }\n postfix={postfix}\n ref={internalRef}\n value={internalValue}\n />\n );\n\n if (settingsContent) {\n const handleSettingsBlur = event => {\n if (event.currentTarget.contains(event.relatedTarget)) {\n return;\n }\n setFocused(false);\n };\n\n return (\n <div\n className={cn('relative', { \"[&_[data-taco='input-container']]:z-20\": focused })}\n onBlur={handleSettingsBlur}\n ref={settingsRef}>\n {input}\n {focused ? (\n <div\n className=\"border-grey-300 absolute left-0 right-0 top-full z-10 flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow\"\n onClickCapture={() => internalRef.current?.focus()}\n tabIndex={-1}>\n {settingsContent}\n </div>\n ) : null}\n </div>\n );\n }\n\n return input;\n})"
|
|
487662
487662
|
}
|
|
487663
487663
|
],
|
|
487664
487664
|
"groups": [
|