@bitrise/bitkit-v2 0.3.481-beta.3095 → 0.3.481-beta.3097
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.
|
@@ -3,17 +3,23 @@ import BitkitCloseButton from "../../BitkitCloseButton/BitkitCloseButton.js";
|
|
|
3
3
|
import { useFilterContext } from "../BitkitFilter.context.js";
|
|
4
4
|
import { Box } from "@chakra-ui/react/box";
|
|
5
5
|
import { chakra } from "@chakra-ui/react/styled-system";
|
|
6
|
-
import { forwardRef } from "react";
|
|
6
|
+
import { forwardRef, useMemo, useRef } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { mergeRefs } from "@chakra-ui/react";
|
|
8
9
|
//#region lib/components/BitkitFilter/components/FilterSearchInput.tsx
|
|
9
10
|
/** The borderless search field of the bar — and, on mobile, of each filter's view too. */
|
|
10
11
|
var FilterSearchInput = forwardRef((props, ref) => {
|
|
11
12
|
const { css, description, label, onValueChange, placeholder, renderInput = (input) => input, value, ...rest } = props;
|
|
12
13
|
const { isMobile, styles } = useFilterContext();
|
|
14
|
+
const inputRef = useRef(null);
|
|
15
|
+
const setRef = useMemo(() => mergeRefs(ref, inputRef), [ref]);
|
|
13
16
|
return /* @__PURE__ */ jsxs(Box, {
|
|
14
|
-
as: "label",
|
|
15
17
|
css: [isMobile ? styles.mobileSearch : styles.search, css],
|
|
16
18
|
...rest,
|
|
19
|
+
onClick: (event) => {
|
|
20
|
+
if (!event.target.closest("button")) inputRef.current?.focus();
|
|
21
|
+
rest.onClick?.(event);
|
|
22
|
+
},
|
|
17
23
|
children: [
|
|
18
24
|
/* @__PURE__ */ jsx(IconMagnifier, { size: isMobile ? "24" : "16" }),
|
|
19
25
|
renderInput(/* @__PURE__ */ jsx(chakra.input, {
|
|
@@ -22,7 +28,7 @@ var FilterSearchInput = forwardRef((props, ref) => {
|
|
|
22
28
|
css: isMobile ? styles.mobileSearchInput : styles.searchInput,
|
|
23
29
|
onChange: (event) => onValueChange(event.target.value),
|
|
24
30
|
placeholder,
|
|
25
|
-
ref,
|
|
31
|
+
ref: setRef,
|
|
26
32
|
type: "search",
|
|
27
33
|
value
|
|
28
34
|
})),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterSearchInput.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSearchInput.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"FilterSearchInput.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSearchInput.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { mergeRefs } from '@chakra-ui/react';\nimport { Box, type BoxProps } from '@chakra-ui/react/box';\n// `chakra.input`: the filter's search fields are borderless rows from the filter recipe, unlike the\n// bordered BitkitSearchInput.\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactElement, useMemo, useRef } from 'react';\n\nimport { IconMagnifier } from '../../../icons';\nimport BitkitCloseButton from '../../BitkitCloseButton/BitkitCloseButton';\nimport { useFilterContext } from '../BitkitFilter.context';\n\nexport interface FilterSearchInputProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {\n /** Extra hint read out with the field, e.g. what the search matches. */\n description?: string;\n label: string;\n onValueChange: (value: string) => void;\n placeholder: string;\n /** Wraps the input, e.g. in a tooltip. */\n renderInput?: (input: ReactElement) => ReactElement;\n value: string;\n}\n\n/** The borderless search field of the bar — and, on mobile, of each filter's view too. */\nconst FilterSearchInput = forwardRef<HTMLInputElement, FilterSearchInputProps>((props, ref) => {\n const { css, description, label, onValueChange, placeholder, renderInput = (input) => input, value, ...rest } = props;\n const { isMobile, styles } = useFilterContext();\n const inputRef = useRef<HTMLInputElement>(null);\n const setRef = useMemo(() => mergeRefs<HTMLInputElement>(ref, inputRef), [ref]);\n\n return (\n <Box\n css={[isMobile ? styles.mobileSearch : styles.search, css]}\n {...rest}\n // A click anywhere on the field, e.g. on the icon, focuses the input; the clear button keeps its own.\n onClick={(event) => {\n if (!(event.target as Element).closest('button')) inputRef.current?.focus();\n rest.onClick?.(event);\n }}\n >\n <IconMagnifier size={isMobile ? '24' : '16'} />\n {renderInput(\n <chakra.input\n aria-description={description}\n aria-label={label}\n css={isMobile ? styles.mobileSearchInput : styles.searchInput}\n onChange={(event) => onValueChange(event.target.value)}\n placeholder={placeholder}\n ref={setRef}\n type=\"search\"\n value={value}\n />,\n )}\n {!!value && (\n <BitkitCloseButton\n aria-label=\"Clear search\"\n colorVariant=\"neutral\"\n onClick={() => onValueChange('')}\n size=\"sm\"\n />\n )}\n </Box>\n );\n});\n\nFilterSearchInput.displayName = 'FilterSearchInput';\n\nexport default FilterSearchInput;\n"],"mappings":";;;;;;;;;;AAwBA,IAAM,oBAAoB,YAAsD,OAAO,QAAQ;CAC7F,MAAM,EAAE,KAAK,aAAa,OAAO,eAAe,aAAa,eAAe,UAAU,OAAO,OAAO,GAAG,SAAS;CAChH,MAAM,EAAE,UAAU,WAAW,iBAAiB;CAC9C,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,SAAS,cAAc,UAA4B,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;CAE9E,OACE,qBAAC,KAAD;EACE,KAAK,CAAC,WAAW,OAAO,eAAe,OAAO,QAAQ,GAAG;EACzD,GAAI;EAEJ,UAAU,UAAU;GAClB,IAAI,CAAE,MAAM,OAAmB,QAAQ,QAAQ,GAAG,SAAS,SAAS,MAAM;GAC1E,KAAK,UAAU,KAAK;EACtB;EAPF,UAAA;GASE,oBAAC,eAAD,EAAe,MAAM,WAAW,OAAO,KAAO,CAAA;GAC7C,YACC,oBAAC,OAAO,OAAR;IACE,oBAAkB;IAClB,cAAY;IACZ,KAAK,WAAW,OAAO,oBAAoB,OAAO;IAClD,WAAW,UAAU,cAAc,MAAM,OAAO,KAAK;IACxC;IACb,KAAK;IACL,MAAK;IACE;GACR,CAAA,CACH;GACC,CAAC,CAAC,SACD,oBAAC,mBAAD;IACE,cAAW;IACX,cAAa;IACb,eAAe,cAAc,EAAE;IAC/B,MAAK;GACN,CAAA;EAEA;;AAET,CAAC;AAED,kBAAkB,cAAc"}
|