@economic/taco 2.1.1 → 2.1.3
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/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/esm/packages/taco/src/components/Table3/components/rows/Row.js +2 -1
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
- package/dist/taco.cjs.development.js +5 -2
- 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": [
|