npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.475-beta.3012 → 0.3.475-beta.3014 - Mend

@bitrise/bitkit-v2 0.3.475-beta.3012 → 0.3.475-beta.3014

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.

Files changed (8) hide show

package/dist/components/BitkitFilter/components/FilterSelectForm.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { BitkitIconComponent } from '../../../icons';
 import { BitkitColorToken } from '../../../theme/themeUtils';
 export interface BitkitFilterSelectItem {
+    /** Lists the option under this heading, with the others of the same group. */
+    group?: string;
     icon?: BitkitIconComponent;
     /** Colors the icon, e.g. a status: `icon/positive` for "Passed". */
     iconColor?: BitkitColorToken<'icon'>;

package/dist/components/BitkitFilter/components/FilterSelectForm.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import IconCheck from "../../../icons/IconCheck.js";
+import BitkitGroupHeading from "../../BitkitGroupHeading/BitkitGroupHeading.js";
 import BitkitCheckbox from "../../BitkitCheckbox/BitkitCheckbox.js";
 import BitkitCheckboxGroup from "../../BitkitCheckboxGroup/BitkitCheckboxGroup.js";
 import { compilePattern, isEqualFilterValue, isPattern, toRunningText } from "../BitkitFilter.utils.js";
@@ -11,12 +12,25 @@ import BitkitTextInput from "../../BitkitTextInput/BitkitTextInput.js";
 import BitkitSearchInput from "../../BitkitSearchInput/BitkitSearchInput.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 import { createListCollection } from "@chakra-ui/react/collection";
 import { HStack } from "@chakra-ui/react/stack";
 import { Listbox } from "@chakra-ui/react/listbox";
+//#region lib/components/BitkitFilter/components/FilterSelectForm.tsx
+/**
+* Gathers the options by `group`, in the order each group first appears, so the list (and its
+* keyboard order) runs group by group. Ungrouped options come under an empty-named group.
+*/
+var groupItems = (items) => {
+	const groups = /* @__PURE__ */ new Map();
+	items.forEach((item) => {
+		const key = item.group ?? "";
+		groups.set(key, [...groups.get(key) ?? [], item]);
+	});
+	return [...groups];
+};
 /** Below this many options the list is short enough to scan, so there is no search input. */
 var SEARCH_THRESHOLD = 5;
 /** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */
@@ -50,7 +64,8 @@ var FilterSelectForm = (props) => {
 		selectedItems,
 		value
 	]);
-	const visibleItems = matchingItems.slice(0, 100);
+	const visibleGroups = useMemo(() => groupItems(matchingItems.slice(0, 100)), [matchingItems]);
+	const visibleItems = visibleGroups.flatMap(([, groupItems]) => groupItems);
 	const isInitialLoading = !!loading && !hasLoaded;
 	const showSearch = !isInitialLoading && (!!onSearchChange || items.length > SEARCH_THRESHOLD);
 	const searchLabel = `Search ${toRunningText(pluralLabel)}`;
@@ -95,7 +110,11 @@ var FilterSelectForm = (props) => {
 			onValueChange: setDraft,
 			size: "md",
 			value: draft,
-			children: visibleItems.map((item) => /* @__PURE__ */ jsx(BitkitCheckbox, {
+			children: visibleGroups.map(([group, groupItems]) => /* @__PURE__ */ jsxs(Fragment, { children: [!!group && /* @__PURE__ */ jsx(BitkitGroupHeading, {
+				label: group,
+				paddingBlockStart: "12",
+				paddingInline: "4"
+			}), groupItems.map((item) => /* @__PURE__ */ jsx(BitkitCheckbox, {
 				labelText: item.icon ? /* @__PURE__ */ jsxs(HStack, {
 					gap: "4",
 					children: [/* @__PURE__ */ jsx(item.icon, {
@@ -104,10 +123,11 @@ var FilterSelectForm = (props) => {
 					}), item.label]
 				}) : item.label,
 				value: item.value
-			}, item.value))
+			}, item.value))] }, group))
 		}), showLimitHelper && /* @__PURE__ */ jsx(LimitHelper, { marginBlockStart: "16" })]
 	});
 	else list = /* @__PURE__ */ jsx(FilterListbox, {
+		groups: visibleGroups,
 		items: visibleItems,
 		label,
 		multiple,
@@ -177,11 +197,38 @@ var LimitHelper = ({ marginBlockStart }) => {
 * The option list for a single select, and on mobile for a multiple one too — there the rows are
 * full-width and highlighted when selected, with a checkbox drawn in front.
 */
-var FilterListbox = ({ items, label, multiple, onValueChange, showLimitHelper, value }) => {
+var FilterListbox = (props) => {
+	const { groups, items, label, multiple, onValueChange, showLimitHelper, value } = props;
 	const { isMobile, styles } = useFilterContext();
 	const collection = useMemo(() => createListCollection({ items }), [items]);
 	const checkboxStyles = useSlotRecipe({ key: "checkbox" })({ size: "lg" });
 	const checkIndicator = /* @__PURE__ */ jsx(Listbox.ItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, { size: "16" }) });
+	const renderItem = (item) => {
+		const state = value.includes(item.value) ? "checked" : "unchecked";
+		const check = multiple ? /* @__PURE__ */ jsx(Box, {
+			"aria-hidden": true,
+			css: [checkboxStyles.control, styles.mobileListCheckbox],
+			"data-state": state,
+			children: /* @__PURE__ */ jsx(IconCheck, {})
+		}) : /* @__PURE__ */ jsx(Box, {
+			"aria-hidden": true,
+			css: styles.mobileListCheck,
+			"data-state": state,
+			children: /* @__PURE__ */ jsx(IconCheck, { size: "16" })
+		});
+		return /* @__PURE__ */ jsxs(Listbox.Item, {
+			item,
+			children: [
+				isMobile && check,
+				!!item.icon && /* @__PURE__ */ jsx(item.icon, {
+					color: item.iconColor,
+					size: isMobile ? "24" : "16"
+				}),
+				/* @__PURE__ */ jsx(Listbox.ItemText, { children: item.label }),
+				!isMobile && checkIndicator
+			]
+		}, item.value);
+	};
 	return /* @__PURE__ */ jsxs(Listbox.Root, {
 		collection,
 		onValueChange: (details) => onValueChange(details.value),
@@ -191,32 +238,14 @@ var FilterListbox = ({ items, label, multiple, onValueChange, showLimitHelper, v
 		children: [/* @__PURE__ */ jsx(Listbox.Label, {
 			srOnly: true,
 			children: label
-		}), /* @__PURE__ */ jsxs(Listbox.Content, { children: [items.map((item) => {
-			const state = value.includes(item.value) ? "checked" : "unchecked";
-			const check = multiple ? /* @__PURE__ */ jsx(Box, {
-				"aria-hidden": true,
-				css: [checkboxStyles.control, styles.mobileListCheckbox],
-				"data-state": state,
-				children: /* @__PURE__ */ jsx(IconCheck, {})
-			}) : /* @__PURE__ */ jsx(Box, {
-				"aria-hidden": true,
-				css: styles.mobileListCheck,
-				"data-state": state,
-				children: /* @__PURE__ */ jsx(IconCheck, { size: "16" })
-			});
-			return /* @__PURE__ */ jsxs(Listbox.Item, {
-				item,
-				children: [
-					isMobile && check,
-					!!item.icon && /* @__PURE__ */ jsx(item.icon, {
-						color: item.iconColor,
-						size: isMobile ? "24" : "16"
-					}),
-					/* @__PURE__ */ jsx(Listbox.ItemText, { children: item.label }),
-					!isMobile && checkIndicator
-				]
-			}, item.value);
-		}), showLimitHelper && /* @__PURE__ */ jsx(Box, {
+		}), /* @__PURE__ */ jsxs(Listbox.Content, { children: [groups.map(([group, groupItems]) => /* @__PURE__ */ jsxs(Listbox.ItemGroup, { children: [!!group && /* @__PURE__ */ jsx(Listbox.ItemGroupLabel, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
+				label: group,
+				paddingBlockStart: "12",
+				paddingInline: "24"
+			})
+		}), groupItems.map(renderItem)] }, group)), showLimitHelper && /* @__PURE__ */ jsx(Box, {
 			paddingBlockStart: "8",
 			paddingInline: "24",
 			children: /* @__PURE__ */ jsx(LimitHelper, {})

package/dist/components/BitkitFilter/components/FilterSelectForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterSelectForm.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSelectForm.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Listbox } from '@chakra-ui/react/listbox';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../../icons';\nimport { type BitkitColorToken } from '../../../theme/themeUtils';\nimport BitkitCheckbox from '../../BitkitCheckbox/BitkitCheckbox';\nimport BitkitCheckboxGroup from '../../BitkitCheckboxGroup/BitkitCheckboxGroup';\nimport BitkitInlineLoading from '../../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitList from '../../BitkitList/BitkitList';\nimport BitkitSearchInput from '../../BitkitSearchInput/BitkitSearchInput';\nimport BitkitTextInput from '../../BitkitTextInput/BitkitTextInput';\nimport { useFilterContext } from '../BitkitFilter.context';\nimport { compilePattern, isEqualFilterValue, isPattern, toRunningText } from '../BitkitFilter.utils';\nimport { FilterPanelFooter, FilterPanelHeader } from './FilterPanel';\nimport FilterSearchInput from './FilterSearchInput';\n\nexport interface BitkitFilterSelectItem {\n icon?: BitkitIconComponent;\n /** Colors the icon, e.g. a status: `icon/positive` for \"Passed\". /\n iconColor?: BitkitColorToken<'icon'>;\n label: string;\n value: string;\n}\n\n/* The list renders at most this many options; search narrows down the rest. /\nexport const MAX_VISIBLE_ITEMS = 100;\n\n/* Below this many options the list is short enough to scan, so there is no search input. /\nconst SEARCH_THRESHOLD = 5;\n\nexport interface FilterSelectFormProps {\n /* The filter holds a value: the footer offers \"Clear\" instead of the wildcard-mode switch. /\n isEditing: boolean;\n /* Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. /\n isOrderFixed?: boolean;\n /* A value is always applied: no \"Clear\" in the footer. /\n isRequired?: boolean;\n items: BitkitFilterSelectItem[];\n label: string;\n loading?: boolean;\n loadingLabel?: string;\n multiple?: boolean;\n onApply: (value: string[]) => void;\n onCancel: () => void;\n onSearchChange?: (searchText: string) => void;\n pattern?: boolean;\n pluralLabel: string;\n searchPlaceholder?: string;\n /\n The applied selection with its labels. Without a search, any of it missing from `items` — e.g.\n * left behind by a server search — is listed first, so it can still be unchecked.\n /\n selectedItems?: BitkitFilterSelectItem[];\n value: string[];\n}\n\n/* The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. /\nconst FilterSelectForm = (props: FilterSelectFormProps) => {\n const {\n isEditing,\n isOrderFixed,\n isRequired,\n items,\n label,\n loading,\n loadingLabel = 'Loading...',\n multiple,\n onApply,\n onCancel,\n onSearchChange,\n pattern,\n pluralLabel,\n searchPlaceholder = 'Search for options',\n selectedItems = [],\n value,\n } = props;\n const { isMobile, styles } = useFilterContext();\n\n const [draft, setDraft] = useState(value);\n const [mode, setMode] = useState<'list' \| 'pattern'>(pattern && value[0] && isPattern(value[0]) ? 'pattern' : 'list');\n const [searchText, setSearchText] = useState('');\n // Set once the options have loaded, so a later reload (a search, or clearing it) keeps the search and footer.\n const [hasLoaded, setHasLoaded] = useState(!loading);\n if (!loading && !hasLoaded) setHasLoaded(true);\n\n const onSearchTextChange = (text: string) => {\n setSearchText(text);\n onSearchChange?.(text);\n };\n\n // With `onSearchChange` the consumer filters `items` itself, e.g. on the server. Without a search,\n // the applied options come first. `value` doesn't change while the panel is open, so the order is\n // set when it opens and rows don't jump as options are (un)checked.\n const matchingItems = useMemo(() => {\n if (!searchText) {\n if (isOrderFixed) return items;\n const applied = value.flatMap((selected) => {\n const item = items.find((option) => option.value === selected);\n return item ?? selectedItems.find((option) => option.value === selected) ?? [];\n });\n return [...applied, ...items.filter((item) => !value.includes(item.value))];\n }\n if (onSearchChange) return items;\n const query = searchText.toLowerCase();\n return items.filter((item) => item.label.toLowerCase().includes(query));\n }, [isOrderFixed, items, onSearchChange, searchText, selectedItems, value]);\n\n const visibleItems = matchingItems.slice(0, MAX_VISIBLE_ITEMS);\n // The first load shows only the title and a loading row; later loads keep the input and footer in place.\n const isInitialLoading = !!loading && !hasLoaded;\n const showSearch = !isInitialLoading && (!!onSearchChange \|\| items.length > SEARCH_THRESHOLD);\n const searchLabel = `Search ${toRunningText(pluralLabel)}`;\n const showLimitHelper = matchingItems.length > MAX_VISIBLE_ITEMS;\n\n const patternValue = draft[0] ?? '';\n const isApplyDisabled =\n isEqualFilterValue(draft, value) \|\|\n (mode === 'pattern' && !(patternValue && isPattern(patternValue))) \|\|\n (!!isRequired && !draft.length);\n\n // Switching between the list and the pattern moves focus into the new view, so typing goes there.\n const bodyRef = useRef<HTMLDivElement>(null);\n const hasSwitchedMode = useRef(false);\n useEffect(() => {\n if (!hasSwitchedMode.current) return;\n bodyRef.current\n ?.querySelector<HTMLElement>('input:not([type=hidden]), [role=listbox], input[type=checkbox]')\n ?.focus();\n }, [mode]);\n\n let start;\n if (isEditing && !isRequired) {\n start = { label: multiple && isMobile ? 'Clear all' : 'Clear', onClick: () => onApply([]) };\n } else if (pattern && !isEditing) {\n start = {\n label: mode === 'list' ? 'Use wildcard pattern' : 'Select from list',\n onClick: () => {\n hasSwitchedMode.current = true;\n setMode(mode === 'list' ? 'pattern' : 'list');\n setDraft([]);\n },\n };\n }\n\n let list;\n if (loading) {\n list = <BitkitInlineLoading css={styles.loading} label={loadingLabel} size={isMobile ? 'lg' : 'md'} />;\n } else if (!visibleItems.length) {\n list = (\n <Text css={styles.loading} color=\"text/secondary\" textStyle={isMobile ? 'body/lg/regular' : 'body/md/regular'}>\n {searchText ? 'No result. Refine your search term.' : 'No options available.'}\n </Text>\n );\n } else if (multiple && !isMobile) {\n list = (\n <Box css={styles.checkboxList}>\n <BitkitCheckboxGroup aria-label={label} onValueChange={setDraft} size=\"md\" value={draft}>\n {visibleItems.map((item) => (\n <BitkitCheckbox\n key={item.value}\n labelText={\n item.icon ? (\n <HStack gap=\"4\">\n <item.icon color={item.iconColor} size=\"16\" />\n {item.label}\n </HStack>\n ) : (\n item.label\n )\n }\n value={item.value}\n />\n ))}\n </BitkitCheckboxGroup>\n {showLimitHelper && <LimitHelper marginBlockStart=\"16\" />}\n </Box>\n );\n } else {\n list = (\n <FilterListbox\n items={visibleItems}\n label={label}\n multiple={multiple}\n onValueChange={setDraft}\n showLimitHelper={showLimitHelper}\n value={draft}\n />\n );\n }\n\n let search = null;\n if (showSearch && isMobile) {\n search = (\n <FilterSearchInput\n label={searchLabel}\n onValueChange={onSearchTextChange}\n placeholder={searchPlaceholder}\n value={searchText}\n />\n );\n } else if (showSearch) {\n search = (\n <Box css={styles.popoverSearch}>\n <BitkitSearchInput\n label={searchLabel}\n onChange={onSearchTextChange}\n placeholder={searchPlaceholder}\n size=\"md\"\n value={searchText}\n />\n </Box>\n );\n }\n\n const body = (\n <Box css={styles.popoverBody} ref={bodyRef}>\n {mode === 'pattern' ? (\n <FilterPatternBody items={items} onValueChange={setDraft} pluralLabel={pluralLabel} value={patternValue} />\n ) : (\n <>\n {search}\n {list}\n </>\n )}\n </Box>\n );\n\n return (\n <>\n <FilterPanelHeader\n count={multiple && mode === 'list' ? draft.length : undefined}\n title={multiple ? pluralLabel : label}\n />\n {isMobile ? (\n <Box flex=\"1\" overflowY=\"auto\">\n {body}\n </Box>\n ) : (\n body\n )}\n {!isInitialLoading && (\n <FilterPanelFooter\n applyLabel={multiple && mode === 'list' && draft.length ? `Apply (${draft.length})` : undefined}\n isApplyDisabled={isApplyDisabled}\n onApply={() => onApply(mode === 'pattern' ? [patternValue] : draft)}\n onCancel={onCancel}\n start={start}\n />\n )}\n </>\n );\n};\n\nconst LimitHelper = ({ marginBlockStart }: { marginBlockStart?: '16' }) => {\n const { styles } = useFilterContext();\n\n return (\n <Text css={styles.listHelperText} marginBlockStart={marginBlockStart}>\n Showing the first {MAX_VISIBLE_ITEMS} options. Search to find more.\n </Text>\n );\n};\n\ninterface FilterListboxProps {\n items: BitkitFilterSelectItem[];\n label: string;\n multiple?: boolean;\n onValueChange: (value: string[]) => void;\n showLimitHelper: boolean;\n value: string[];\n}\n\n/\n The option list for a single select, and on mobile for a multiple one too — there the rows are\n * full-width and highlighted when selected, with a checkbox drawn in front.\n /\nconst FilterListbox = ({ items, label, multiple, onValueChange, showLimitHelper, value }: FilterListboxProps) => {\n const { isMobile, styles } = useFilterContext();\n const collection = useMemo(() => createListCollection({ items }), [items]);\n const checkboxStyles = useSlotRecipe({ key: 'checkbox' })({ size: 'lg' });\n\n const checkIndicator = (\n <Listbox.ItemIndicator>\n <IconCheck size=\"16\" />\n </Listbox.ItemIndicator>\n );\n\n return (\n <Listbox.Root\n collection={collection}\n onValueChange={(details) => onValueChange(details.value)}\n selectionMode={multiple ? 'multiple' : 'single'}\n size={isMobile ? 'lg' : 'md'}\n value={value}\n >\n {/ Zag points the content's aria-labelledby at the label, so it has to exist. /}\n <Listbox.Label srOnly>{label}</Listbox.Label>\n <Listbox.Content>\n {items.map((item) => {\n const state = value.includes(item.value) ? 'checked' : 'unchecked';\n const check = multiple ? (\n // Drawn, not a real checkbox: the option row is the control, and a nested input would be a second one.\n <Box aria-hidden css={[checkboxStyles.control, styles.mobileListCheckbox]} data-state={state}>\n <IconCheck />\n </Box>\n ) : (\n <Box aria-hidden css={styles.mobileListCheck} data-state={state}>\n <IconCheck size=\"16\" />\n </Box>\n );\n return (\n <Listbox.Item item={item} key={item.value}>\n {isMobile && check}\n {!!item.icon && <item.icon color={item.iconColor} size={isMobile ? '24' : '16'} />}\n <Listbox.ItemText>{item.label}</Listbox.ItemText>\n {!isMobile && checkIndicator}\n </Listbox.Item>\n );\n })}\n {showLimitHelper && (\n <Box paddingBlockStart=\"8\" paddingInline=\"24\">\n <LimitHelper />\n </Box>\n )}\n </Listbox.Content>\n </Listbox.Root>\n );\n};\n\ninterface FilterPatternBodyProps {\n items: BitkitFilterSelectItem[];\n onValueChange: (value: string[]) => void;\n pluralLabel: string;\n value: string;\n}\n\nconst FilterPatternBody = ({ items, onValueChange, pluralLabel, value }: FilterPatternBodyProps) => {\n const { isMobile, styles } = useFilterContext();\n const noun = toRunningText(pluralLabel);\n const matches = useMemo(() => {\n if (!isPattern(value)) return null;\n const regExp = compilePattern(value);\n return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));\n }, [items, value]);\n\n let results;\n if (!matches) {\n results = (\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n Enter a pattern with the wildcard ‘’ to view {noun} with matching names.\n </Text>\n );\n } else if (!matches.length) {\n results = (\n <Text color=\"text/tertiary\" textStyle=\"body/md/regular\">\n (no matching {noun})\n </Text>\n );\n } else {\n results = (\n <BitkitList size=\"md\">\n {matches.map((item) => (\n <BitkitList.Item key={item.value}>{item.label}</BitkitList.Item>\n ))}\n </BitkitList>\n );\n }\n\n return (\n <Box css={styles.pattern}>\n <BitkitTextInput\n helperText=\"Allowed wildcard character: \"\n label=\"Wildcard pattern\"\n onValueChange={(text) => onValueChange(text ? [text] : [])}\n placeholder=\"(e.g. main, release-)\"\n size={isMobile ? 'lg' : 'md'}\n value={value}\n />\n <Box css={styles.patternResults}>\n <Text css={styles.patternResultsLabel}>Matching results{matches?.length ? ` (${matches.length})` : ''}</Text>\n {results}\n </Box>\n </Box>\n );\n};\n\nexport default FilterSelectForm;\n"],"mappings":"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"}
1	+ {"version":3,"file":"FilterSelectForm.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSelectForm.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Listbox } from '@chakra-ui/react/listbox';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../../icons';\nimport { type BitkitColorToken } from '../../../theme/themeUtils';\nimport BitkitCheckbox from '../../BitkitCheckbox/BitkitCheckbox';\nimport BitkitCheckboxGroup from '../../BitkitCheckboxGroup/BitkitCheckboxGroup';\nimport BitkitGroupHeading from '../../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitInlineLoading from '../../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitList from '../../BitkitList/BitkitList';\nimport BitkitSearchInput from '../../BitkitSearchInput/BitkitSearchInput';\nimport BitkitTextInput from '../../BitkitTextInput/BitkitTextInput';\nimport { useFilterContext } from '../BitkitFilter.context';\nimport { compilePattern, isEqualFilterValue, isPattern, toRunningText } from '../BitkitFilter.utils';\nimport { FilterPanelFooter, FilterPanelHeader } from './FilterPanel';\nimport FilterSearchInput from './FilterSearchInput';\n\nexport interface BitkitFilterSelectItem {\n /** Lists the option under this heading, with the others of the same group. /\n group?: string;\n icon?: BitkitIconComponent;\n /* Colors the icon, e.g. a status: `icon/positive` for \"Passed\". /\n iconColor?: BitkitColorToken<'icon'>;\n label: string;\n value: string;\n}\n\n/\n Gathers the options by `group`, in the order each group first appears, so the list (and its\n * keyboard order) runs group by group. Ungrouped options come under an empty-named group.\n /\nconst groupItems = (items: BitkitFilterSelectItem[]) => {\n const groups = new Map<string, BitkitFilterSelectItem[]>();\n items.forEach((item) => {\n const key = item.group ?? '';\n groups.set(key, [...(groups.get(key) ?? []), item]);\n });\n return [...groups];\n};\n\n/* The list renders at most this many options; search narrows down the rest. /\nexport const MAX_VISIBLE_ITEMS = 100;\n\n/* Below this many options the list is short enough to scan, so there is no search input. /\nconst SEARCH_THRESHOLD = 5;\n\nexport interface FilterSelectFormProps {\n /* The filter holds a value: the footer offers \"Clear\" instead of the wildcard-mode switch. /\n isEditing: boolean;\n /* Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. /\n isOrderFixed?: boolean;\n /* A value is always applied: no \"Clear\" in the footer. /\n isRequired?: boolean;\n items: BitkitFilterSelectItem[];\n label: string;\n loading?: boolean;\n loadingLabel?: string;\n multiple?: boolean;\n onApply: (value: string[]) => void;\n onCancel: () => void;\n onSearchChange?: (searchText: string) => void;\n pattern?: boolean;\n pluralLabel: string;\n searchPlaceholder?: string;\n /\n The applied selection with its labels. Without a search, any of it missing from `items` — e.g.\n * left behind by a server search — is listed first, so it can still be unchecked.\n /\n selectedItems?: BitkitFilterSelectItem[];\n value: string[];\n}\n\n/* The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. /\nconst FilterSelectForm = (props: FilterSelectFormProps) => {\n const {\n isEditing,\n isOrderFixed,\n isRequired,\n items,\n label,\n loading,\n loadingLabel = 'Loading...',\n multiple,\n onApply,\n onCancel,\n onSearchChange,\n pattern,\n pluralLabel,\n searchPlaceholder = 'Search for options',\n selectedItems = [],\n value,\n } = props;\n const { isMobile, styles } = useFilterContext();\n\n const [draft, setDraft] = useState(value);\n const [mode, setMode] = useState<'list' \| 'pattern'>(pattern && value[0] && isPattern(value[0]) ? 'pattern' : 'list');\n const [searchText, setSearchText] = useState('');\n // Set once the options have loaded, so a later reload (a search, or clearing it) keeps the search and footer.\n const [hasLoaded, setHasLoaded] = useState(!loading);\n if (!loading && !hasLoaded) setHasLoaded(true);\n\n const onSearchTextChange = (text: string) => {\n setSearchText(text);\n onSearchChange?.(text);\n };\n\n // With `onSearchChange` the consumer filters `items` itself, e.g. on the server. Without a search,\n // the applied options come first. `value` doesn't change while the panel is open, so the order is\n // set when it opens and rows don't jump as options are (un)checked.\n const matchingItems = useMemo(() => {\n if (!searchText) {\n if (isOrderFixed) return items;\n const applied = value.flatMap((selected) => {\n const item = items.find((option) => option.value === selected);\n return item ?? selectedItems.find((option) => option.value === selected) ?? [];\n });\n return [...applied, ...items.filter((item) => !value.includes(item.value))];\n }\n if (onSearchChange) return items;\n const query = searchText.toLowerCase();\n return items.filter((item) => item.label.toLowerCase().includes(query));\n }, [isOrderFixed, items, onSearchChange, searchText, selectedItems, value]);\n\n const visibleGroups = useMemo(() => groupItems(matchingItems.slice(0, MAX_VISIBLE_ITEMS)), [matchingItems]);\n const visibleItems = visibleGroups.flatMap(([, groupItems]) => groupItems);\n // The first load shows only the title and a loading row; later loads keep the input and footer in place.\n const isInitialLoading = !!loading && !hasLoaded;\n const showSearch = !isInitialLoading && (!!onSearchChange \|\| items.length > SEARCH_THRESHOLD);\n const searchLabel = `Search ${toRunningText(pluralLabel)}`;\n const showLimitHelper = matchingItems.length > MAX_VISIBLE_ITEMS;\n\n const patternValue = draft[0] ?? '';\n const isApplyDisabled =\n isEqualFilterValue(draft, value) \|\|\n (mode === 'pattern' && !(patternValue && isPattern(patternValue))) \|\|\n (!!isRequired && !draft.length);\n\n // Switching between the list and the pattern moves focus into the new view, so typing goes there.\n const bodyRef = useRef<HTMLDivElement>(null);\n const hasSwitchedMode = useRef(false);\n useEffect(() => {\n if (!hasSwitchedMode.current) return;\n bodyRef.current\n ?.querySelector<HTMLElement>('input:not([type=hidden]), [role=listbox], input[type=checkbox]')\n ?.focus();\n }, [mode]);\n\n let start;\n if (isEditing && !isRequired) {\n start = { label: multiple && isMobile ? 'Clear all' : 'Clear', onClick: () => onApply([]) };\n } else if (pattern && !isEditing) {\n start = {\n label: mode === 'list' ? 'Use wildcard pattern' : 'Select from list',\n onClick: () => {\n hasSwitchedMode.current = true;\n setMode(mode === 'list' ? 'pattern' : 'list');\n setDraft([]);\n },\n };\n }\n\n let list;\n if (loading) {\n list = <BitkitInlineLoading css={styles.loading} label={loadingLabel} size={isMobile ? 'lg' : 'md'} />;\n } else if (!visibleItems.length) {\n list = (\n <Text css={styles.loading} color=\"text/secondary\" textStyle={isMobile ? 'body/lg/regular' : 'body/md/regular'}>\n {searchText ? 'No result. Refine your search term.' : 'No options available.'}\n </Text>\n );\n } else if (multiple && !isMobile) {\n list = (\n <Box css={styles.checkboxList}>\n <BitkitCheckboxGroup aria-label={label} onValueChange={setDraft} size=\"md\" value={draft}>\n {visibleGroups.map(([group, groupItems]) => (\n <Fragment key={group}>\n {/ The list pads 20; the heading lines up 24 from the popover's edge, like the listbox's. /}\n {!!group && <BitkitGroupHeading label={group} paddingBlockStart=\"12\" paddingInline=\"4\" />}\n {groupItems.map((item) => (\n <BitkitCheckbox\n key={item.value}\n labelText={\n item.icon ? (\n <HStack gap=\"4\">\n <item.icon color={item.iconColor} size=\"16\" />\n {item.label}\n </HStack>\n ) : (\n item.label\n )\n }\n value={item.value}\n />\n ))}\n </Fragment>\n ))}\n </BitkitCheckboxGroup>\n {showLimitHelper && <LimitHelper marginBlockStart=\"16\" />}\n </Box>\n );\n } else {\n list = (\n <FilterListbox\n groups={visibleGroups}\n items={visibleItems}\n label={label}\n multiple={multiple}\n onValueChange={setDraft}\n showLimitHelper={showLimitHelper}\n value={draft}\n />\n );\n }\n\n let search = null;\n if (showSearch && isMobile) {\n search = (\n <FilterSearchInput\n label={searchLabel}\n onValueChange={onSearchTextChange}\n placeholder={searchPlaceholder}\n value={searchText}\n />\n );\n } else if (showSearch) {\n search = (\n <Box css={styles.popoverSearch}>\n <BitkitSearchInput\n label={searchLabel}\n onChange={onSearchTextChange}\n placeholder={searchPlaceholder}\n size=\"md\"\n value={searchText}\n />\n </Box>\n );\n }\n\n const body = (\n <Box css={styles.popoverBody} ref={bodyRef}>\n {mode === 'pattern' ? (\n <FilterPatternBody items={items} onValueChange={setDraft} pluralLabel={pluralLabel} value={patternValue} />\n ) : (\n <>\n {search}\n {list}\n </>\n )}\n </Box>\n );\n\n return (\n <>\n <FilterPanelHeader\n count={multiple && mode === 'list' ? draft.length : undefined}\n title={multiple ? pluralLabel : label}\n />\n {isMobile ? (\n <Box flex=\"1\" overflowY=\"auto\">\n {body}\n </Box>\n ) : (\n body\n )}\n {!isInitialLoading && (\n <FilterPanelFooter\n applyLabel={multiple && mode === 'list' && draft.length ? `Apply (${draft.length})` : undefined}\n isApplyDisabled={isApplyDisabled}\n onApply={() => onApply(mode === 'pattern' ? [patternValue] : draft)}\n onCancel={onCancel}\n start={start}\n />\n )}\n </>\n );\n};\n\nconst LimitHelper = ({ marginBlockStart }: { marginBlockStart?: '16' }) => {\n const { styles } = useFilterContext();\n\n return (\n <Text css={styles.listHelperText} marginBlockStart={marginBlockStart}>\n Showing the first {MAX_VISIBLE_ITEMS} options. Search to find more.\n </Text>\n );\n};\n\ninterface FilterListboxProps {\n groups: [string, BitkitFilterSelectItem[]][];\n /* `groups` flattened, in the same order: the collection's (and so the keyboard's) order. /\n items: BitkitFilterSelectItem[];\n label: string;\n multiple?: boolean;\n onValueChange: (value: string[]) => void;\n showLimitHelper: boolean;\n value: string[];\n}\n\n/\n The option list for a single select, and on mobile for a multiple one too — there the rows are\n * full-width and highlighted when selected, with a checkbox drawn in front.\n /\nconst FilterListbox = (props: FilterListboxProps) => {\n const { groups, items, label, multiple, onValueChange, showLimitHelper, value } = props;\n const { isMobile, styles } = useFilterContext();\n const collection = useMemo(() => createListCollection({ items }), [items]);\n const checkboxStyles = useSlotRecipe({ key: 'checkbox' })({ size: 'lg' });\n\n const checkIndicator = (\n <Listbox.ItemIndicator>\n <IconCheck size=\"16\" />\n </Listbox.ItemIndicator>\n );\n\n const renderItem = (item: BitkitFilterSelectItem) => {\n const state = value.includes(item.value) ? 'checked' : 'unchecked';\n const check = multiple ? (\n // Drawn, not a real checkbox: the option row is the control, and a nested input would be a second one.\n <Box aria-hidden css={[checkboxStyles.control, styles.mobileListCheckbox]} data-state={state}>\n <IconCheck />\n </Box>\n ) : (\n <Box aria-hidden css={styles.mobileListCheck} data-state={state}>\n <IconCheck size=\"16\" />\n </Box>\n );\n return (\n <Listbox.Item item={item} key={item.value}>\n {isMobile && check}\n {!!item.icon && <item.icon color={item.iconColor} size={isMobile ? '24' : '16'} />}\n <Listbox.ItemText>{item.label}</Listbox.ItemText>\n {!isMobile && checkIndicator}\n </Listbox.Item>\n );\n };\n\n return (\n <Listbox.Root\n collection={collection}\n onValueChange={(details) => onValueChange(details.value)}\n selectionMode={multiple ? 'multiple' : 'single'}\n size={isMobile ? 'lg' : 'md'}\n value={value}\n >\n {/ Zag points the content's aria-labelledby at the label, so it has to exist. /}\n <Listbox.Label srOnly>{label}</Listbox.Label>\n <Listbox.Content>\n {groups.map(([group, groupItems]) => (\n <Listbox.ItemGroup key={group}>\n {!!group && (\n <Listbox.ItemGroupLabel asChild>\n <BitkitGroupHeading label={group} paddingBlockStart=\"12\" paddingInline=\"24\" />\n </Listbox.ItemGroupLabel>\n )}\n {groupItems.map(renderItem)}\n </Listbox.ItemGroup>\n ))}\n {showLimitHelper && (\n <Box paddingBlockStart=\"8\" paddingInline=\"24\">\n <LimitHelper />\n </Box>\n )}\n </Listbox.Content>\n </Listbox.Root>\n );\n};\n\ninterface FilterPatternBodyProps {\n items: BitkitFilterSelectItem[];\n onValueChange: (value: string[]) => void;\n pluralLabel: string;\n value: string;\n}\n\nconst FilterPatternBody = ({ items, onValueChange, pluralLabel, value }: FilterPatternBodyProps) => {\n const { isMobile, styles } = useFilterContext();\n const noun = toRunningText(pluralLabel);\n const matches = useMemo(() => {\n if (!isPattern(value)) return null;\n const regExp = compilePattern(value);\n return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));\n }, [items, value]);\n\n let results;\n if (!matches) {\n results = (\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n Enter a pattern with the wildcard ‘’ to view {noun} with matching names.\n </Text>\n );\n } else if (!matches.length) {\n results = (\n <Text color=\"text/tertiary\" textStyle=\"body/md/regular\">\n (no matching {noun})\n </Text>\n );\n } else {\n results = (\n <BitkitList size=\"md\">\n {matches.map((item) => (\n <BitkitList.Item key={item.value}>{item.label}</BitkitList.Item>\n ))}\n </BitkitList>\n );\n }\n\n return (\n <Box css={styles.pattern}>\n <BitkitTextInput\n helperText=\"Allowed wildcard character: \"\n label=\"Wildcard pattern\"\n onValueChange={(text) => onValueChange(text ? [text] : [])}\n placeholder=\"(e.g. main, release-)\"\n size={isMobile ? 'lg' : 'md'}\n value={value}\n />\n <Box css={styles.patternResults}>\n <Text css={styles.patternResultsLabel}>Matching results{matches?.length ? ` (${matches.length})` : ''}</Text>\n {results}\n </Box>\n </Box>\n );\n};\n\nexport default FilterSelectForm;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/Filter.recipe.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-declare const filterSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "content" | "pattern" | "switch" | "icon" | "field" | "root" | "loading" | "items" | "searchInput" | "addSheetBackdrop" | "addSheetPositioner" | "addSheet" | "addMenu" | "addMenuLabel" | "addSheetItem" | "addMenuItem" | "addMenuIcon" | "addSheetItemReason" | "chip" | "chipLabel" | "chipTrigger" | "chipRemove" | "chipIcon" | "chipValue" | "chipChevron" | "fieldLabel" | "fieldControl" | "fieldTrigger" | "fieldRemove" | "fieldIcon" | "fieldValue" | "fieldChevron" | "mobilePanelHeader" | "popoverFooter" | "mobileFooter" | "popoverFooterStart" | "mobilePanelOverline" | "mobilePanelTitle" | "popoverContent" | "calendarFooter" | "mobileSearch" | "mobileSearchInput" | "popoverBody" | "checkboxList" | "popoverSearch" | "listHelperText" | "patternResults" | "patternResultsLabel" | "mobileListCheckbox" | "mobileListCheck" | "switchItem" | "switchItemText" | "filters" | "searchBlock" | "mobileBar" | "mobileTrigger" | "mobileHeader" | "mobileTitle" | "mobileBody", {
+declare const filterSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "content" | "pattern" | "switch" | "icon" | "field" | "root" | "loading" | "items" | "searchInput" | "addSheetBackdrop" | "addSheetPositioner" | "addSheet" | "addMenu" | "addMenuLabel" | "addSheetItem" | "addMenuItem" | "addMenuIcon" | "addSheetItemReason" | "chip" | "chipLabel" | "chipTrigger" | "chipRemove" | "chipIcon" | "chipValue" | "chipChevron" | "fieldLabel" | "fieldControl" | "fieldTrigger" | "fieldRemove" | "fieldIcon" | "fieldValue" | "fieldChevron" | "mobilePanelHeader" | "popoverFooter" | "mobileFooter" | "popoverFooterStart" | "mobilePanelOverline" | "mobilePanelTitle" | "popoverContent" | "calendarFooter" | "mobileSearch" | "mobileSearchInput" | "popoverBody" | "checkboxList" | "popoverSearch" | "listHelperText" | "mobileListCheckbox" | "mobileListCheck" | "patternResults" | "patternResultsLabel" | "switchItem" | "switchItemText" | "filters" | "searchBlock" | "mobileBar" | "mobileTrigger" | "mobileHeader" | "mobileTitle" | "mobileBody", {
     pageLayout: {
         capped: {
             root: {

package/dist/theme/slot-recipes/Listbox.recipe.js CHANGED Viewed

@@ -55,12 +55,7 @@ var listboxSlotRecipe = defineSlotRecipe({
 			flexShrink: 0
 		},
 		itemGroup: {},
-		itemGroupLabel: {
-			color: "text/secondary",
-			paddingBlock: "8",
-			paddingInline: "24",
-			textStyle: "body/sm/regular"
-		},
+		itemGroupLabel: {},
 		empty: {
 			color: "text/secondary",
 			paddingBlock: "8",

package/dist/theme/slot-recipes/Listbox.recipe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Listbox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Listbox.recipe.ts"],"sourcesContent":["import { listboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst listboxSlotRecipe = defineSlotRecipe({\n className: 'listbox',\n slots: listboxAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: rem(200),\n outline: 'none',\n overflowY: 'auto',\n paddingBlockEnd: '16',\n },\n item: {\n alignItems: 'center',\n color: 'text/body',\n cursor: 'pointer',\n display: 'flex',\n gap: '12',\n minHeight: '40',\n paddingBlock: '8',\n paddingInline: '24',\n textAlign: 'start',\n textStyle: 'body/md/regular',\n userSelect: 'none',\n _highlighted: {\n background: 'background/hover',\n },\n _selected: {\n background: 'background/selected',\n color: 'text/primary',\n textStyle: 'body/md/semibold',\n _highlighted: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _highlighted: {\n background: 'transparent',\n },\n },\n },\n itemText: {\n flex: '1',\n minWidth: 0,\n truncate: true,\n },\n itemIndicator: {\n color: 'icon/interactive',\n display: 'flex',\n flexShrink: 0,\n },\n itemGroup: {},\n ~~itemGroupLabel:~~ ~~{\n color:~~ '~~text/secondary',\n paddingBlock:~~ ~~'8',\n paddingInline:~~ ~~'24',\~~n ~~textStyle~~: ~~'body/sm/regular',\n~~ },\n empty: {\n color: 'text/secondary',\n paddingBlock: '8',\n paddingInline: '24',\n textStyle: 'body/md/regular',\n },\n label: {\n color: 'text/primary',\n textStyle: 'comp/input/label',\n },\n valueText: {\n truncate: true,\n },\n input: {},\n },\n variants: {\n size: {\n md: {},\n // The full-screen mobile filter list: taller rows, larger text, unbounded height.\n lg: {\n content: {\n maxHeight: 'none',\n paddingBlock: '8',\n },\n item: {\n minHeight: '48',\n textStyle: 'body/lg/regular',\n _selected: {\n textStyle: 'body/lg/regular',\n },\n },\n empty: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport default listboxSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,iBAAiB;CACzC,WAAW;CACX,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,WAAW,IAAI,GAAG;GAClB,SAAS;GACT,WAAW;GACX,iBAAiB;EACnB;EACA,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,KAAK;GACL,WAAW;GACX,cAAc;GACd,eAAe;GACf,WAAW;GACX,WAAW;GACX,YAAY;GACZ,cAAc,EACZ,YAAY,mBACd;GACA,WAAW;IACT,YAAY;IACZ,OAAO;IACP,WAAW;IACX,cAAc,EACZ,YAAY,4BACd;GACF;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,cAAc,EACZ,YAAY,cACd;GACF;EACF;EACA,UAAU;GACR,MAAM;GACN,UAAU;GACV,UAAU;EACZ;EACA,eAAe;GACb,OAAO;GACP,SAAS;GACT,YAAY;EACd;EACA,WAAW,CAAC;~~EACZ~~,gBAAgB~~;GACd~~,~~OAAO~~;~~GACP~~,~~cAAc;GACd,eAAe;GACf,WAAW;EACb;EACA,~~OAAO;GACL,OAAO;GACP,cAAc;GACd,eAAe;GACf,WAAW;EACb;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,WAAW,EACT,UAAU,KACZ;EACA,OAAO,CAAC;CACV;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC;EAEL,IAAI;GACF,SAAS;IACP,WAAW;IACX,cAAc;GAChB;GACA,MAAM;IACJ,WAAW;IACX,WAAW;IACX,WAAW,EACT,WAAW,kBACb;GACF;GACA,OAAO,EACL,WAAW,kBACb;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
1	+ {"version":3,"file":"Listbox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Listbox.recipe.ts"],"sourcesContent":["import { listboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst listboxSlotRecipe = defineSlotRecipe({\n className: 'listbox',\n slots: listboxAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: rem(200),\n outline: 'none',\n overflowY: 'auto',\n paddingBlockEnd: '16',\n },\n item: {\n alignItems: 'center',\n color: 'text/body',\n cursor: 'pointer',\n display: 'flex',\n gap: '12',\n minHeight: '40',\n paddingBlock: '8',\n paddingInline: '24',\n textAlign: 'start',\n textStyle: 'body/md/regular',\n userSelect: 'none',\n _highlighted: {\n background: 'background/hover',\n },\n _selected: {\n background: 'background/selected',\n color: 'text/primary',\n textStyle: 'body/md/semibold',\n _highlighted: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _highlighted: {\n background: 'transparent',\n },\n },\n },\n itemText: {\n flex: '1',\n minWidth: 0,\n truncate: true,\n },\n itemIndicator: {\n color: 'icon/interactive',\n display: 'flex',\n flexShrink: 0,\n },\n itemGroup: {},\n // A group's label is a `BitkitGroupHeading`, which brings its own styles.\n itemGroupLabel: {},\n empty: {\n color: 'text/secondary',\n paddingBlock: '8',\n paddingInline: '24',\n textStyle: 'body/md/regular',\n },\n label: {\n color: 'text/primary',\n textStyle: 'comp/input/label',\n },\n valueText: {\n truncate: true,\n },\n input: {},\n },\n variants: {\n size: {\n md: {},\n // The full-screen mobile filter list: taller rows, larger text, unbounded height.\n lg: {\n content: {\n maxHeight: 'none',\n paddingBlock: '8',\n },\n item: {\n minHeight: '48',\n textStyle: 'body/lg/regular',\n _selected: {\n textStyle: 'body/lg/regular',\n },\n },\n empty: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport default listboxSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,oBAAoB,iBAAiB;CACzC,WAAW;CACX,OAAO,eAAe,KAAK;CAC3B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,OAAO;EACT;EACA,SAAS;GACP,SAAS;GACT,eAAe;GACf,WAAW,IAAI,GAAG;GAClB,SAAS;GACT,WAAW;GACX,iBAAiB;EACnB;EACA,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAS;GACT,KAAK;GACL,WAAW;GACX,cAAc;GACd,eAAe;GACf,WAAW;GACX,WAAW;GACX,YAAY;GACZ,cAAc,EACZ,YAAY,mBACd;GACA,WAAW;IACT,YAAY;IACZ,OAAO;IACP,WAAW;IACX,cAAc,EACZ,YAAY,4BACd;GACF;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,cAAc,EACZ,YAAY,cACd;GACF;EACF;EACA,UAAU;GACR,MAAM;GACN,UAAU;GACV,UAAU;EACZ;EACA,eAAe;GACb,OAAO;GACP,SAAS;GACT,YAAY;EACd;EACA,WAAW,CAAC;EAEZ,gBAAgB,CAAC;EACjB,OAAO;GACL,OAAO;GACP,cAAc;GACd,eAAe;GACf,WAAW;EACb;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,WAAW,EACT,UAAU,KACZ;EACA,OAAO,CAAC;CACV;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC;EAEL,IAAI;GACF,SAAS;IACP,WAAW;IACX,cAAc;GAChB;GACA,MAAM;IACJ,WAAW;IACX,WAAW;IACX,WAAW,EACT,WAAW,kBACb;GACF;GACA,OAAO,EACL,WAAW,kBACb;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

package/dist/theme/slot-recipes/index.d.ts CHANGED Viewed

@@ -1181,7 +1181,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    filter: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "content" | "pattern" | "switch" | "icon" | "field" | "root" | "loading" | "items" | "searchInput" | "addSheetBackdrop" | "addSheetPositioner" | "addSheet" | "addMenu" | "addMenuLabel" | "addSheetItem" | "addMenuItem" | "addMenuIcon" | "addSheetItemReason" | "chip" | "chipLabel" | "chipTrigger" | "chipRemove" | "chipIcon" | "chipValue" | "chipChevron" | "fieldLabel" | "fieldControl" | "fieldTrigger" | "fieldRemove" | "fieldIcon" | "fieldValue" | "fieldChevron" | "mobilePanelHeader" | "popoverFooter" | "mobileFooter" | "popoverFooterStart" | "mobilePanelOverline" | "mobilePanelTitle" | "popoverContent" | "calendarFooter" | "mobileSearch" | "mobileSearchInput" | "popoverBody" | "checkboxList" | "popoverSearch" | "listHelperText" | "patternResults" | "patternResultsLabel" | "mobileListCheckbox" | "mobileListCheck" | "switchItem" | "switchItemText" | "filters" | "searchBlock" | "mobileBar" | "mobileTrigger" | "mobileHeader" | "mobileTitle" | "mobileBody", {
+    filter: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "content" | "pattern" | "switch" | "icon" | "field" | "root" | "loading" | "items" | "searchInput" | "addSheetBackdrop" | "addSheetPositioner" | "addSheet" | "addMenu" | "addMenuLabel" | "addSheetItem" | "addMenuItem" | "addMenuIcon" | "addSheetItemReason" | "chip" | "chipLabel" | "chipTrigger" | "chipRemove" | "chipIcon" | "chipValue" | "chipChevron" | "fieldLabel" | "fieldControl" | "fieldTrigger" | "fieldRemove" | "fieldIcon" | "fieldValue" | "fieldChevron" | "mobilePanelHeader" | "popoverFooter" | "mobileFooter" | "popoverFooterStart" | "mobilePanelOverline" | "mobilePanelTitle" | "popoverContent" | "calendarFooter" | "mobileSearch" | "mobileSearchInput" | "popoverBody" | "checkboxList" | "popoverSearch" | "listHelperText" | "mobileListCheckbox" | "mobileListCheck" | "patternResults" | "patternResultsLabel" | "switchItem" | "switchItemText" | "filters" | "searchBlock" | "mobileBar" | "mobileTrigger" | "mobileHeader" | "mobileTitle" | "mobileBody", {
         pageLayout: {
             capped: {
                 root: {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.475-beta.3012",
+  "version": "0.3.475-beta.3014",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",