@atom-learning/components 6.8.1 → 6.8.2
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.
|
@@ -77,7 +77,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", cl
|
|
|
77
77
|
...remainingProps,
|
|
78
78
|
value: innerValue,
|
|
79
79
|
onChange: handleOnChange,
|
|
80
|
-
className: clsx(size === "sm" ? "pr-8" : "pr-10", "[
|
|
80
|
+
className: clsx(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
|
|
81
81
|
}), getIcon());
|
|
82
82
|
});
|
|
83
83
|
SearchInput.displayName = "SearchInput";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' | 'md' | 'lg'\n className?: string\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n variants: {\n size: {\n sm: ['right-2', 'size-4'],\n md: ['right-2.5', 'size-5'],\n lg: ['right-2.5', 'size-5']\n }\n }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n (\n {\n size = 'md',\n appearance = 'standard',\n className,\n value,\n defaultValue = '',\n onValueChange,\n clearText = 'Clear',\n onChange,\n ...remainingProps\n },\n ref\n ) => {\n const [inputElRef, setInputElRef] = useCallbackRef()\n const [innerValue, setInnerValue] = React.useState(defaultValue)\n const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n )\n React.useEffect(() => {\n if (typeof value === 'undefined') return\n setInnerValue(value)\n setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }, [value])\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n const handleClear = () => {\n const inputEl = inputElRef.current\n if (!inputEl) return\n\n // https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call?.(inputEl, '')\n const ev2 = new Event('input', {\n bubbles: true\n })\n inputEl.dispatchEvent(ev2)\n inputEl.focus()\n onValueChange?.('')\n }\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event)\n\n const newValue = event.target.value\n setInnerValue(newValue)\n onValueChange?.(newValue)\n setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }\n\n const getIcon = () => {\n if (activeIcon === INPUT_ICON.SEARCH)\n return (\n <StyledIcon\n is={Search}\n size={size}\n className={clsx(\n size == 'sm' ? 'size-4' : 'size-5',\n 'top-1/2',\n '-translate-y-1/2'\n )}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n onClick={handleClear}\n className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n className={clsx('relative', 'w-auto', className)}\n >\n <InputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n className={clsx(\n size === 'sm' ? 'pr-8' : 'pr-10',\n '[
|
|
1
|
+
{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' | 'md' | 'lg'\n className?: string\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n variants: {\n size: {\n sm: ['right-2', 'size-4'],\n md: ['right-2.5', 'size-5'],\n lg: ['right-2.5', 'size-5']\n }\n }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n (\n {\n size = 'md',\n appearance = 'standard',\n className,\n value,\n defaultValue = '',\n onValueChange,\n clearText = 'Clear',\n onChange,\n ...remainingProps\n },\n ref\n ) => {\n const [inputElRef, setInputElRef] = useCallbackRef()\n const [innerValue, setInnerValue] = React.useState(defaultValue)\n const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n )\n React.useEffect(() => {\n if (typeof value === 'undefined') return\n setInnerValue(value)\n setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }, [value])\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n const handleClear = () => {\n const inputEl = inputElRef.current\n if (!inputEl) return\n\n // https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call?.(inputEl, '')\n const ev2 = new Event('input', {\n bubbles: true\n })\n inputEl.dispatchEvent(ev2)\n inputEl.focus()\n onValueChange?.('')\n }\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event)\n\n const newValue = event.target.value\n setInnerValue(newValue)\n onValueChange?.(newValue)\n setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }\n\n const getIcon = () => {\n if (activeIcon === INPUT_ICON.SEARCH)\n return (\n <StyledIcon\n is={Search}\n size={size}\n className={clsx(\n size == 'sm' ? 'size-4' : 'size-5',\n 'top-1/2',\n '-translate-y-1/2'\n )}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n onClick={handleClear}\n className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n className={clsx('relative', 'w-auto', className)}\n >\n <InputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n className={clsx(\n size === 'sm' ? 'pr-8' : 'pr-10',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none'\n )}\n />\n {getIcon()}\n </InputBackground>\n )\n }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACZ,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -4391,7 +4391,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", clas
|
|
|
4391
4391
|
...remainingProps,
|
|
4392
4392
|
value: innerValue,
|
|
4393
4393
|
onChange: handleOnChange,
|
|
4394
|
-
className: (0, clsx.default)(size === "sm" ? "pr-8" : "pr-10", "[
|
|
4394
|
+
className: (0, clsx.default)(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
|
|
4395
4395
|
}), getIcon());
|
|
4396
4396
|
});
|
|
4397
4397
|
SearchInput.displayName = "SearchInput";
|