@bitrise/bitkit-v2 0.3.481-beta.3105 → 0.3.481-beta.3107

package/dist/components/BitkitFilter/components/FilterPanel.js

@@ -0,0 +1,126 @@
+import IconArrowLeft from "../../../icons/IconArrowLeft.js";
+import { usePortalContext } from "../../../utilities/BitkitPortalContext.js";
+import BitkitBadge from "../../BitkitBadge/BitkitBadge.js";
+import BitkitControlButton from "../../BitkitControlButton/BitkitControlButton.js";
+import BitkitButton from "../../BitkitButton/BitkitButton.js";
+import { useFilterContext } from "../BitkitFilter.context.js";
+import { Box } from "@chakra-ui/react/box";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { Text } from "@chakra-ui/react/text";
+import { Drawer } from "@chakra-ui/react/drawer";
+import { Popover } from "@chakra-ui/react/popover";
+//#region lib/components/BitkitFilter/components/FilterPanel.tsx
+/**
+* Where a filter edits its value: an anchored popover on desktop, a full-screen view stacked over the
+* filters dialog on mobile. The content unmounts on close, so the draft state of the form inside
+* starts over from the applied value each time it opens.
+*/
+var FilterPanel = (props) => {
+	const { children, finalFocusEl, getAnchorElement, onOpenChange: onOpenChangeProp, open, trigger } = props;
+	const { isDisabled, isMobile, styles } = useFilterContext();
+	const onOpenChange = (isOpen) => {
+		if (!isOpen || !isDisabled) onOpenChangeProp(isOpen);
+	};
+	const { disablePortal } = usePortalContext();
+	if (isMobile) return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, /* @__PURE__ */ jsx(Drawer.Root, {
+		finalFocusEl,
+		lazyMount: true,
+		onOpenChange: ({ open: isOpen }) => onOpenChange(isOpen),
+		open,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsx(Portal, {
+			disabled: disablePortal,
+			children: /* @__PURE__ */ jsx(Drawer.Positioner, { children: /* @__PURE__ */ jsx(Drawer.Content, { children }) })
+		})
+	})] });
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		finalFocusEl,
+		lazyMount: true,
+		onOpenChange: ({ open: isOpen }) => onOpenChange(isOpen),
+		open,
+		positioning: {
+			getAnchorElement,
+			gutter: 8,
+			placement: "bottom-start"
+		},
+		unmountOnExit: true,
+		children: [trigger, /* @__PURE__ */ jsx(Portal, {
+			disabled: disablePortal,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+				css: styles.popoverContent,
+				children
+			}) })
+		})]
+	});
+};
+var FilterPanelHeader = ({ count, title }) => {
+	const { isMobile, styles } = useFilterContext();
+	if (isMobile) return /* @__PURE__ */ jsxs(Box, {
+		css: styles.mobilePanelHeader,
+		children: [/* @__PURE__ */ jsx(Drawer.CloseTrigger, {
+			asChild: true,
+			unstyled: true,
+			children: /* @__PURE__ */ jsx(BitkitControlButton, {
+				icon: IconArrowLeft,
+				label: "Back"
+			})
+		}), /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+			css: styles.mobilePanelOverline,
+			children: "Filter"
+		}), /* @__PURE__ */ jsx(Drawer.Title, {
+			css: styles.mobilePanelTitle,
+			unstyled: true,
+			children: title
+		})] })]
+	});
+	return /* @__PURE__ */ jsxs(Popover.Header, { children: [/* @__PURE__ */ jsx(Popover.Title, { children: title }), count !== void 0 && /* @__PURE__ */ jsx(BitkitBadge, { children: count })] });
+};
+var FilterPanelFooter = ({ applyLabel, isApplyDisabled, onApply, onCancel, start }) => {
+	const { isMobile, styles } = useFilterContext();
+	const applyState = isApplyDisabled ? "disabled" : void 0;
+	if (isMobile) return /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsxs(Box, {
+		css: styles.mobileFooter,
+		children: [!!start && /* @__PURE__ */ jsx(BitkitButton, {
+			onClick: start.onClick,
+			size: "md",
+			variant: "secondary",
+			children: start.label
+		}), /* @__PURE__ */ jsx(BitkitButton, {
+			onClick: onApply,
+			size: "md",
+			state: applyState,
+			children: applyLabel ?? "Apply"
+		})]
+	}) });
+	return /* @__PURE__ */ jsxs(Box, {
+		css: styles.popoverFooter,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				css: styles.popoverFooterStart,
+				children: !!start && /* @__PURE__ */ jsx(BitkitButton, {
+					onClick: start.onClick,
+					size: "sm",
+					variant: "tertiary",
+					children: start.label
+				})
+			}),
+			!!onCancel && /* @__PURE__ */ jsx(BitkitButton, {
+				onClick: onCancel,
+				size: "sm",
+				variant: "secondary",
+				children: "Cancel"
+			}),
+			/* @__PURE__ */ jsx(BitkitButton, {
+				onClick: onApply,
+				size: "sm",
+				state: applyState,
+				children: "Apply"
+			})
+		]
+	});
+};
+//#endregion
+export { FilterPanelFooter, FilterPanelHeader, FilterPanel as default };
+
+//# sourceMappingURL=FilterPanel.js.map

package/dist/components/BitkitFilter/components/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","names":["_Fragment"],"sources":["../../../../lib/components/BitkitFilter/components/FilterPanel.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Popover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ReactNode } from 'react';\n\nimport { IconArrowLeft } from '../../../icons';\nimport { usePortalContext } from '../../../utilities/BitkitPortalContext';\nimport BitkitBadge from '../../BitkitBadge/BitkitBadge';\nimport BitkitButton from '../../BitkitButton/BitkitButton';\nimport BitkitControlButton from '../../BitkitControlButton/BitkitControlButton';\nimport { useFilterContext } from '../BitkitFilter.context';\n\nexport interface FilterPanelProps {\n  children: ReactNode;\n  /** Where focus goes on close, for a panel without a trigger to return it to. */\n  finalFocusEl?: () => HTMLElement | null;\n  /** Anchors the desktop popover to an element it has no trigger for — the \"Add filter\" button. */\n  getAnchorElement?: () => HTMLElement | null;\n  onOpenChange: (open: boolean) => void;\n  open: boolean;\n  /**\n   * What opens the panel: on desktop a `FilterChip`, which renders the popover's trigger; on mobile a\n   * `FilterField`, which opens it through its own `onClick`.\n   */\n  trigger?: ReactNode;\n}\n\n/**\n * Where a filter edits its value: an anchored popover on desktop, a full-screen view stacked over the\n * filters dialog on mobile. The content unmounts on close, so the draft state of the form inside\n * starts over from the applied value each time it opens.\n */\nconst FilterPanel = (props: FilterPanelProps) => {\n  const { children, finalFocusEl, getAnchorElement, onOpenChange: onOpenChangeProp, open, trigger } = props;\n  const { isDisabled, isMobile, styles } = useFilterContext();\n  // While the page loads the triggers are only `aria-disabled`, so opening is refused here.\n  const onOpenChange = (isOpen: boolean) => {\n    if (!isOpen || !isDisabled) onOpenChangeProp(isOpen);\n  };\n  const { disablePortal } = usePortalContext();\n\n  if (isMobile) {\n    return (\n      <>\n        {trigger}\n        <Drawer.Root\n          finalFocusEl={finalFocusEl}\n          lazyMount\n          onOpenChange={({ open: isOpen }) => onOpenChange(isOpen)}\n          open={open}\n          unmountOnExit\n        >\n          <Portal disabled={disablePortal}>\n            <Drawer.Positioner>\n              <Drawer.Content>{children}</Drawer.Content>\n            </Drawer.Positioner>\n          </Portal>\n        </Drawer.Root>\n      </>\n    );\n  }\n\n  return (\n    <Popover.Root\n      finalFocusEl={finalFocusEl}\n      lazyMount\n      onOpenChange={({ open: isOpen }) => onOpenChange(isOpen)}\n      open={open}\n      positioning={{\n        getAnchorElement,\n        gutter: 8,\n        placement: 'bottom-start',\n      }}\n      unmountOnExit\n    >\n      {trigger}\n      <Portal disabled={disablePortal}>\n        <Popover.Positioner>\n          <Popover.Content css={styles.popoverContent}>{children}</Popover.Content>\n        </Popover.Positioner>\n      </Portal>\n    </Popover.Root>\n  );\n};\n\nexport interface FilterPanelHeaderProps {\n  /** Desktop only: a multi-select's selection count, shown as a badge next to the title. */\n  count?: number;\n  title: string;\n}\n\nexport const FilterPanelHeader = ({ count, title }: FilterPanelHeaderProps) => {\n  const { isMobile, styles } = useFilterContext();\n\n  if (isMobile) {\n    return (\n      <Box css={styles.mobilePanelHeader}>\n        <Drawer.CloseTrigger asChild unstyled>\n          <BitkitControlButton icon={IconArrowLeft} label=\"Back\" />\n        </Drawer.CloseTrigger>\n        <Box>\n          <Text css={styles.mobilePanelOverline}>Filter</Text>\n          <Drawer.Title css={styles.mobilePanelTitle} unstyled>\n            {title}\n          </Drawer.Title>\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Popover.Header>\n      <Popover.Title>{title}</Popover.Title>\n      {count !== undefined && <BitkitBadge>{count}</BitkitBadge>}\n    </Popover.Header>\n  );\n};\n\nexport interface FilterPanelFooterProps {\n  /** Mobile only: the Apply button's label, e.g. \"Apply (2)\". */\n  applyLabel?: string;\n  isApplyDisabled: boolean;\n  onApply: () => void;\n  /** Desktop only: adds a \"Cancel\" button. On mobile the header's back button cancels. */\n  onCancel?: () => void;\n  /** The action before Apply: \"Clear\", or the wildcard-mode switch. */\n  start?: { label: string; onClick: () => void };\n}\n\nexport const FilterPanelFooter = ({\n  applyLabel,\n  isApplyDisabled,\n  onApply,\n  onCancel,\n  start,\n}: FilterPanelFooterProps) => {\n  const { isMobile, styles } = useFilterContext();\n  const applyState = isApplyDisabled ? 'disabled' : undefined;\n\n  if (isMobile) {\n    return (\n      <Drawer.Footer>\n        <Box css={styles.mobileFooter}>\n          {!!start && (\n            <BitkitButton onClick={start.onClick} size=\"md\" variant=\"secondary\">\n              {start.label}\n            </BitkitButton>\n          )}\n          <BitkitButton onClick={onApply} size=\"md\" state={applyState}>\n            {applyLabel ?? 'Apply'}\n          </BitkitButton>\n        </Box>\n      </Drawer.Footer>\n    );\n  }\n\n  return (\n    <Box css={styles.popoverFooter}>\n      <Box css={styles.popoverFooterStart}>\n        {!!start && (\n          <BitkitButton onClick={start.onClick} size=\"sm\" variant=\"tertiary\">\n            {start.label}\n          </BitkitButton>\n        )}\n      </Box>\n      {!!onCancel && (\n        <BitkitButton onClick={onCancel} size=\"sm\" variant=\"secondary\">\n          Cancel\n        </BitkitButton>\n      )}\n      <BitkitButton onClick={onApply} size=\"sm\" state={applyState}>\n        Apply\n      </BitkitButton>\n    </Box>\n  );\n};\n\nexport default FilterPanel;\n"],"mappings":"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"}

package/dist/components/BitkitFilter/components/FilterSearchInput.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactElement } from 'react';
+export interface FilterSearchInputProps extends Omit<BoxProps, 'children' | 'defaultValue' | 'onChange'> {
+    /** Extra hint read out with the field, e.g. what the search matches. */
+    description?: string;
+    label: string;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+    /** Wraps the input, e.g. in a tooltip. */
+    renderInput?: (input: ReactElement) => ReactElement;
+    value: string;
+}
+/** The borderless search field of the bar — and, on mobile, of each filter's view too. */
+declare const FilterSearchInput: import('react').ForwardRefExoticComponent<FilterSearchInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default FilterSearchInput;

package/dist/components/BitkitFilter/components/FilterSearchInput.js

@@ -0,0 +1,41 @@
+import IconMagnifier from "../../../icons/IconMagnifier.js";
+import BitkitCloseButton from "../../BitkitCloseButton/BitkitCloseButton.js";
+import { useFilterContext } from "../BitkitFilter.context.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitFilter/components/FilterSearchInput.tsx
+/** The borderless search field of the bar — and, on mobile, of each filter's view too. */
+var FilterSearchInput = forwardRef((props, ref) => {
+	const { css, description, label, onValueChange, placeholder, renderInput = (input) => input, value, ...rest } = props;
+	const { isMobile, styles } = useFilterContext();
+	return /* @__PURE__ */ jsxs(Box, {
+		css: [isMobile ? styles.mobileSearch : styles.search, css],
+		...rest,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			as: "label",
+			display: "contents",
+			children: [/* @__PURE__ */ jsx(IconMagnifier, { size: isMobile ? "24" : "16" }), renderInput(/* @__PURE__ */ jsx(chakra.input, {
+				"aria-description": description,
+				"aria-label": label,
+				css: isMobile ? styles.mobileSearchInput : styles.searchInput,
+				onChange: (event) => onValueChange(event.target.value),
+				placeholder,
+				ref,
+				type: "search",
+				value
+			}))]
+		}), !!value && /* @__PURE__ */ jsx(BitkitCloseButton, {
+			"aria-label": "Clear search",
+			colorVariant: "neutral",
+			onClick: () => onValueChange(""),
+			size: "sm"
+		})]
+	});
+});
+FilterSearchInput.displayName = "FilterSearchInput";
+//#endregion
+export { FilterSearchInput as default };
+
+//# sourceMappingURL=FilterSearchInput.js.map

package/dist/components/BitkitFilter/components/FilterSearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterSearchInput.js","names":[],"sources":["../../../../lib/components/BitkitFilter/components/FilterSearchInput.tsx"],"sourcesContent":["import { 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 } 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\n  return (\n    <Box css={[isMobile ? styles.mobileSearch : styles.search, css]} {...rest}>\n      {/* A label around the icon and the input only, so a click on the icon focuses the input too. The clear\n          button stays outside: a label can't hold a second control. `contents` keeps the field's layout. */}\n      <Box as=\"label\" display=\"contents\">\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={ref}\n            type=\"search\"\n            value={value}\n          />,\n        )}\n      </Box>\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":";;;;;;;;;AAsBA,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;CAE9C,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,WAAW,OAAO,eAAe,OAAO,QAAQ,GAAG;EAAG,GAAI;EAArE,UAAA,CAGE,qBAAC,KAAD;GAAK,IAAG;GAAQ,SAAQ;GAAxB,UAAA,CACE,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;IACR;IACL,MAAK;IACE;GACR,CAAA,CACH,CACG;EACJ,CAAA,GAAA,CAAC,CAAC,SACD,oBAAC,mBAAD;GACE,cAAW;GACX,cAAa;GACb,eAAe,cAAc,EAAE;GAC/B,MAAK;EACN,CAAA,CAEA;;AAET,CAAC;AAED,kBAAkB,cAAc"}

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

@@ -0,0 +1,45 @@
+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. Only the open list shows
+     * it: the chip shows the label alone, so the label has to make sense without its group.
+     */
+    group?: string;
+    icon?: BitkitIconComponent;
+    /** Colors the icon, e.g. a status: `icon/positive` for "Passed". */
+    iconColor?: BitkitColorToken<'icon'>;
+    label: string;
+    /** Unique across all groups. */
+    value: string;
+}
+/** The list renders at most this many options; search narrows down the rest. */
+export declare const MAX_VISIBLE_ITEMS = 100;
+export interface FilterSelectFormProps {
+    /** The filter holds a value: the footer offers "Clear" instead of the wildcard-mode switch. */
+    isEditing: boolean;
+    /** Keeps `items` in their own order instead of listing the applied ones first — for a switch's fixed options. */
+    isOrderFixed?: boolean;
+    /** A value is always applied: no "Clear" in the footer. */
+    isRequired?: boolean;
+    items: BitkitFilterSelectItem[];
+    label: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    multiple?: boolean;
+    onApply: (value: string[]) => void;
+    onCancel: () => void;
+    onSearchChange?: (searchText: string) => void;
+    pattern?: boolean;
+    pluralLabel: string;
+    searchPlaceholder?: string;
+    /**
+     * The applied selection with its labels. Without a search, any of it missing from `items` — e.g.
+     * left behind by a server search — is listed first, so it can still be unchecked.
+     */
+    selectedItems?: BitkitFilterSelectItem[];
+    value: string[];
+}
+/** The body of a select filter's panel: search, the option list or wildcard pattern, and the footer. */
+declare const FilterSelectForm: (props: FilterSelectFormProps) => import('react').JSX.Element;
+export default FilterSelectForm;

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

@@ -0,0 +1,342 @@
+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";
+import { useFilterContext } from "../BitkitFilter.context.js";
+import { FilterPanelFooter, FilterPanelHeader } from "./FilterPanel.js";
+import FilterSearchInput from "./FilterSearchInput.js";
+import BitkitInlineLoading from "../../BitkitInlineLoading/BitkitInlineLoading.js";
+import BitkitList_default from "../../BitkitList/BitkitList.js";
+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 { Fragment, useEffect, useId, 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`, so the list (and its keyboard order) runs group by group. The groups
+* keep their order in `items`, with the ungrouped options (an empty-named group) first; within a
+* group the options keep their order in `options`, e.g. the applied ones first.
+*/
+var groupItems = (options, items) => {
+	const groups = /* @__PURE__ */ new Map([["", []]]);
+	[...items, ...options].forEach((item) => {
+		if (!groups.has(item.group ?? "")) groups.set(item.group ?? "", []);
+	});
+	options.forEach((option) => groups.get(option.group ?? "")?.push(option));
+	return [...groups].filter(([, groupOptions]) => groupOptions.length);
+};
+/** 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. */
+var FilterSelectForm = (props) => {
+	const { isEditing, isOrderFixed, isRequired, items, label, loading, loadingLabel = "Loading...", multiple, onApply, onCancel, onSearchChange, pattern, pluralLabel, searchPlaceholder = "Search for options", selectedItems = [], value } = props;
+	const { isMobile, styles } = useFilterContext();
+	const [draft, setDraft] = useState(value);
+	const [mode, setMode] = useState(pattern && value[0] && isPattern(value[0]) ? "pattern" : "list");
+	const [searchText, setSearchText] = useState("");
+	const [hasLoaded, setHasLoaded] = useState(!loading);
+	if (!loading && !hasLoaded) setHasLoaded(true);
+	const onSearchTextChange = (text) => {
+		setSearchText(text);
+		onSearchChange?.(text);
+	};
+	const matchingItems = useMemo(() => {
+		if (!searchText) {
+			if (isOrderFixed) return items;
+			return [...value.flatMap((selected) => {
+				return items.find((option) => option.value === selected) ?? selectedItems.find((option) => option.value === selected) ?? [];
+			}), ...items.filter((item) => !value.includes(item.value))];
+		}
+		if (onSearchChange) return items;
+		const query = searchText.toLowerCase();
+		return items.filter((item) => item.label.toLowerCase().includes(query));
+	}, [
+		isOrderFixed,
+		items,
+		onSearchChange,
+		searchText,
+		selectedItems,
+		value
+	]);
+	const visibleGroups = useMemo(() => groupItems(matchingItems.slice(0, 100), items), [items, matchingItems]);
+	const visibleItems = visibleGroups.flatMap(([, groupItems]) => groupItems);
+	const isInitialLoading = !!loading && !hasLoaded;
+	const showSearch = !isInitialLoading && (!!onSearchChange || items.length > SEARCH_THRESHOLD);
+	const searchLabel = `Search ${toRunningText(pluralLabel)}`;
+	const showLimitHelper = matchingItems.length > 100;
+	const patternValue = draft[0] ?? "";
+	const isApplyDisabled = isEqualFilterValue(draft, value) || mode === "pattern" && !(patternValue && isPattern(patternValue)) || !!isRequired && !draft.length;
+	const bodyRef = useRef(null);
+	const hasSwitchedMode = useRef(false);
+	useEffect(() => {
+		if (!hasSwitchedMode.current) return;
+		bodyRef.current?.querySelector("input:not([type=hidden]), [role=listbox], input[type=checkbox]")?.focus();
+	}, [mode]);
+	let start;
+	if (isEditing && !isRequired) start = {
+		label: multiple && isMobile ? "Clear all" : "Clear",
+		onClick: () => onApply([])
+	};
+	else if (pattern && !isEditing) start = {
+		label: mode === "list" ? "Use wildcard pattern" : "Select from list",
+		onClick: () => {
+			hasSwitchedMode.current = true;
+			setMode(mode === "list" ? "pattern" : "list");
+			setDraft([]);
+		}
+	};
+	let list;
+	if (loading) list = /* @__PURE__ */ jsx(BitkitInlineLoading, {
+		css: styles.loading,
+		label: loadingLabel,
+		size: isMobile ? "lg" : "md"
+	});
+	else if (!visibleItems.length) list = /* @__PURE__ */ jsx(Text, {
+		css: styles.loading,
+		color: "text/secondary",
+		textStyle: isMobile ? "body/lg/regular" : "body/md/regular",
+		children: searchText ? "No result. Refine your search term." : "No options available."
+	});
+	else if (multiple && !isMobile) list = /* @__PURE__ */ jsxs(Box, {
+		css: styles.checkboxList,
+		children: [/* @__PURE__ */ jsx(BitkitCheckboxGroup, {
+			"aria-label": label,
+			onValueChange: setDraft,
+			size: "md",
+			value: draft,
+			children: visibleGroups.map(([group, groupItems]) => {
+				const checkboxes = groupItems.map((item) => /* @__PURE__ */ jsx(BitkitCheckbox, {
+					labelText: item.icon ? /* @__PURE__ */ jsxs(HStack, {
+						gap: "4",
+						children: [/* @__PURE__ */ jsx(item.icon, {
+							color: item.iconColor,
+							"data-option-icon": item.iconColor ? void 0 : "",
+							size: "16"
+						}), item.label]
+					}) : item.label,
+					value: item.value
+				}, item.value));
+				return group ? /* @__PURE__ */ jsx(CheckboxOptionGroup, {
+					label: group,
+					children: checkboxes
+				}, group) : /* @__PURE__ */ jsx(Fragment, { children: checkboxes }, group);
+			})
+		}), showLimitHelper && /* @__PURE__ */ jsx(LimitHelper, { marginBlockStart: "16" })]
+	});
+	else list = /* @__PURE__ */ jsx(FilterListbox, {
+		groups: visibleGroups,
+		items: visibleItems,
+		label,
+		multiple,
+		onValueChange: setDraft,
+		showLimitHelper,
+		value: draft
+	});
+	let search = null;
+	if (showSearch && isMobile) search = /* @__PURE__ */ jsx(FilterSearchInput, {
+		label: searchLabel,
+		onValueChange: onSearchTextChange,
+		placeholder: searchPlaceholder,
+		value: searchText
+	});
+	else if (showSearch) search = /* @__PURE__ */ jsx(Box, {
+		css: styles.popoverSearch,
+		children: /* @__PURE__ */ jsx(BitkitSearchInput, {
+			label: searchLabel,
+			onChange: onSearchTextChange,
+			placeholder: searchPlaceholder,
+			size: "md",
+			value: searchText
+		})
+	});
+	const body = /* @__PURE__ */ jsx(Box, {
+		css: styles.popoverBody,
+		ref: bodyRef,
+		children: mode === "pattern" ? /* @__PURE__ */ jsx(FilterPatternBody, {
+			items,
+			onValueChange: setDraft,
+			pluralLabel,
+			value: patternValue
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [search, list] })
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(FilterPanelHeader, {
+			count: multiple && mode === "list" ? draft.length : void 0,
+			title: multiple ? pluralLabel : label
+		}),
+		isMobile ? /* @__PURE__ */ jsx(Box, {
+			flex: "1",
+			overflowY: "auto",
+			children: body
+		}) : body,
+		!isInitialLoading && /* @__PURE__ */ jsx(FilterPanelFooter, {
+			applyLabel: multiple && mode === "list" && draft.length ? `Apply (${draft.length})` : void 0,
+			isApplyDisabled,
+			onApply: () => onApply(mode === "pattern" ? [patternValue] : draft),
+			onCancel,
+			start
+		})
+	] });
+};
+/** A named group of the desktop checkboxes, so a screen reader tells which group an option is in. */
+var CheckboxOptionGroup = ({ children, label }) => {
+	const headingId = useId();
+	return /* @__PURE__ */ jsxs(Box, {
+		"aria-labelledby": headingId,
+		display: "flex",
+		flexDirection: "column",
+		gap: "12",
+		role: "group",
+		children: [/* @__PURE__ */ jsx(BitkitGroupHeading, {
+			id: headingId,
+			label,
+			paddingBlockStart: "12",
+			paddingInline: "4"
+		}), children]
+	});
+};
+var LimitHelper = ({ marginBlockStart }) => {
+	const { styles } = useFilterContext();
+	return /* @__PURE__ */ jsxs(Text, {
+		css: styles.listHelperText,
+		marginBlockStart,
+		children: [
+			"Showing the first ",
+			100,
+			" options. Search to find more."
+		]
+	});
+};
+/**
+* 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 = (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,
+					"data-option-icon": item.iconColor ? void 0 : "",
+					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),
+		selectionMode: multiple ? "multiple" : "single",
+		size: isMobile ? "lg" : "md",
+		value,
+		children: [
+			/* @__PURE__ */ jsx(Listbox.Label, {
+				srOnly: true,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Listbox.Content, { children: groups.map(([group, groupItems]) => group ? /* @__PURE__ */ jsxs(Listbox.ItemGroup, { children: [/* @__PURE__ */ jsx(Listbox.ItemGroupLabel, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
+					label: group,
+					paddingBlockStart: "12",
+					paddingInline: "24"
+				})
+			}), groupItems.map(renderItem)] }, group) : groupItems.map(renderItem)) }),
+			showLimitHelper && /* @__PURE__ */ jsx(Box, {
+				paddingBlockStart: "8",
+				paddingInline: "24",
+				children: /* @__PURE__ */ jsx(LimitHelper, {})
+			})
+		]
+	});
+};
+var FilterPatternBody = ({ items, onValueChange, pluralLabel, value }) => {
+	const { isMobile, styles } = useFilterContext();
+	const noun = toRunningText(pluralLabel);
+	const matches = useMemo(() => {
+		if (!isPattern(value)) return null;
+		const regExp = compilePattern(value);
+		return items.filter((item) => !isPattern(item.label) && regExp.test(item.label));
+	}, [items, value]);
+	let results;
+	if (!matches) results = /* @__PURE__ */ jsxs(Text, {
+		color: "text/secondary",
+		textStyle: "body/md/regular",
+		children: [
+			"Enter a pattern with the wildcard ‘*’ to view ",
+			noun,
+			" with matching names."
+		]
+	});
+	else if (!matches.length) results = /* @__PURE__ */ jsxs(Text, {
+		color: "text/tertiary",
+		textStyle: "body/md/regular",
+		children: [
+			"(no matching ",
+			noun,
+			")"
+		]
+	});
+	else results = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BitkitList_default, {
+		size: "md",
+		children: matches.slice(0, 100).map((item) => /* @__PURE__ */ jsx(BitkitList_default.Item, { children: item.label }, item.value))
+	}), matches.length > 100 && /* @__PURE__ */ jsxs(Text, {
+		css: styles.listHelperText,
+		marginBlockStart: "16",
+		children: [
+			"Showing the first ",
+			100,
+			" matches."
+		]
+	})] });
+	return /* @__PURE__ */ jsxs(Box, {
+		css: styles.pattern,
+		"data-filter-pattern": "",
+		children: [/* @__PURE__ */ jsx(BitkitTextInput, {
+			helperText: "Allowed wildcard character: *",
+			label: "Wildcard pattern",
+			onValueChange: (text) => onValueChange(text ? [text] : []),
+			placeholder: "(e.g. *main*, release-*)",
+			size: isMobile ? "lg" : "md",
+			value
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.patternResults,
+			children: [/* @__PURE__ */ jsxs(Text, {
+				css: styles.patternResultsLabel,
+				children: ["Matching results", matches?.length ? ` (${matches.length})` : ""]
+			}), results]
+		})]
+	});
+};
+//#endregion
+export { FilterSelectForm as default };
+
+//# sourceMappingURL=FilterSelectForm.js.map