@bitrise/bitkit-v2 0.3.481-beta.3069 → 0.3.481-beta.3073

package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitDatePicker.js","names":[],"sources":["../../../lib/components/BitkitDatePicker/BitkitDatePicker.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useContext, useMemo, useRef } from 'react';\n\nimport { DatePicker, type DatePickerValueChangeDetails, useDatePickerContext } from '../../atoms/DatePicker/DatePicker';\nimport IconCalendar from '../../icons/IconCalendar';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { calendarDateToDate, dateToCalendarDate } from '../BitkitCalendar/Calendar.utils';\nimport CalendarContent from '../BitkitCalendar/components/CalendarContent';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport type BitkitDatePickerControlProps = BoxProps;\n\nexport interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' | 'defaultValue' | 'state' | 'value'> {\n  controlProps?: BitkitDatePickerControlProps;\n  defaultValue?: Date | null;\n  disablePortal?: boolean;\n  max?: Date;\n  min?: Date;\n  onValueChange?: (value: Date | null) => void;\n  placeholder?: string;\n  showOutsideDays?: boolean;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: Date | null;\n}\n\n/**\n * Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own\n * focus event — that covers tabbing in as well as clicking.\n */\nconst DatePickerInput = ({ css }: { css: SystemStyleObject }) => {\n  const { disabled, open, readOnly, setOpen } = useDatePickerContext();\n  // Ark's DatePicker.Input has no notion of Chakra's Field — without this, `errorText`/`helperText`\n  // render visually but are never announced, since nothing points the input's aria-describedby at them.\n  const ariaDescribedby = useFieldContext()?.ariaDescribedby;\n  const reopenBlockedRef = useRef(false);\n  const wasOpenRef = useRef(false);\n\n  // Zag's `focusInputElement` puts focus back on the input a frame after the calendar closes on\n  // selection, which would bounce it straight back open. Ignore focus that lands right after a\n  // close — this has to be a layout effect so the flag is set before Zag's rAF runs. Isomorphic\n  // layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n  useSafeLayoutEffect(() => {\n    const justClosed = wasOpenRef.current && !open;\n    wasOpenRef.current = open;\n\n    // Only a real close can trigger Zag's refocus, so mount (never-opened) must not arm the block\n    // — otherwise an autoFocus or a programmatic focus right after mount gets swallowed.\n    if (!justClosed) {\n      return undefined;\n    }\n\n    reopenBlockedRef.current = true;\n    const timeout = setTimeout(() => {\n      reopenBlockedRef.current = false;\n    }, 100);\n\n    return () => clearTimeout(timeout);\n  }, [open]);\n\n  // Ark gates its own trigger handlers on the machine's interactive state, but `setOpen` is not —\n  // it would happily open the calendar on a read-only or disabled field. A disabled input still\n  // needs the check: Chrome fires focus events for a programmatic `.focus()` on one, even though\n  // focus never actually lands there.\n  const handleFocus = () => {\n    if (!reopenBlockedRef.current && !readOnly && !disabled) {\n      setOpen(true);\n    }\n  };\n\n  return <DatePicker.Input aria-describedby={ariaDescribedby} css={css} index={0} onFocus={handleFocus} unstyled />;\n};\n\nconst BitkitDatePicker = forwardRef<HTMLDivElement, BitkitDatePickerProps>((props, ref) => {\n  const {\n    controlProps,\n    defaultValue,\n    disablePortal,\n    max,\n    min,\n    onValueChange,\n    placeholder,\n    showOutsideDays,\n    size = 'lg',\n    state,\n    value,\n    ...fieldProps\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'textInput' });\n  const styles = recipe({ size });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n  const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n  const iconSize = size === 'md' ? '16' : '24';\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  let statusIcon: ReactNode = null;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  const stateAttrs = {\n    'data-disabled': state === 'disabled' ? '' : undefined,\n    'data-invalid': isInvalid ? '' : undefined,\n    'data-readonly': state === 'readOnly' ? '' : undefined,\n  };\n\n  const isInteractive = state !== 'disabled' && state !== 'readOnly';\n\n  const calendarButton = (\n    <BitkitControlButton\n      icon={IconCalendar}\n      label=\"Open calendar\"\n      // Pulled out by its own padding so the glyph lands where a plain end icon would sit in\n      // BitkitTextInput — 16px (lg) / 12px (md) from the field's outer edge.\n      marginInlineEnd={size === 'md' ? '-8' : '-4'}\n      size={size === 'md' ? 'xs' : 'sm'}\n      state={isInteractive ? undefined : 'disabled'}\n    />\n  );\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <DatePicker.Root\n        defaultValue={defaultValue ? [dateToCalendarDate(defaultValue)] : undefined}\n        device=\"desktop\"\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        layout=\"1-month\"\n        max={maxCalendarDate}\n        min={minCalendarDate}\n        numOfMonths={1}\n        onValueChange={\n          onValueChange\n            ? (details: DatePickerValueChangeDetails) =>\n                onValueChange(details.value?.[0] ? calendarDateToDate(details.value[0]) : null)\n            : undefined\n        }\n        placeholder={state === 'readOnly' ? '(not set)' : placeholder}\n        positioning={{ placement: 'bottom-start' }}\n        readOnly={state === 'readOnly'}\n        selectionMode=\"single\"\n        showOutsideDays={showOutsideDays ?? true}\n        startOfWeek={1}\n        // Stay controlled whenever `value` is provided — even for `null` (\"nothing selected\").\n        // Passing `undefined` would flip Root to uncontrolled. See BitkitCombobox.\n        value={value === undefined ? undefined : value ? [dateToCalendarDate(value)] : []}\n      >\n        <DatePicker.Control asChild>\n          <Box {...controlProps} css={[styles.field, controlProps?.css]} {...stateAttrs}>\n            <DatePickerInput css={styles.input} />\n            {statusIcon != null && (\n              <Box css={styles.element} {...stateAttrs}>\n                {statusIcon}\n              </Box>\n            )}\n            {/* Ark keeps the trigger interactive in read-only mode and forces `disabled={false}`\n                onto whatever it wraps, so the button is left unwrapped there to stay inert. */}\n            {state === 'readOnly' ? calendarButton : <DatePicker.Trigger asChild>{calendarButton}</DatePicker.Trigger>}\n          </Box>\n        </DatePicker.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <DatePicker.Positioner>\n            <CalendarContent layout=\"1-month\" max={maxCalendarDate} min={minCalendarDate} selectionMode=\"day\" />\n          </DatePicker.Positioner>\n        </Portal>\n      </DatePicker.Root>\n    </BitkitField>\n  );\n});\n\nBitkitDatePicker.displayName = 'BitkitDatePicker';\n\nexport default BitkitDatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitDatePicker.js","names":[],"sources":["../../../lib/components/BitkitDatePicker/BitkitDatePicker.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useContext, useMemo, useRef } from 'react';\n\nimport { DatePicker, type DatePickerValueChangeDetails, useDatePickerContext } from '../../atoms/DatePicker/DatePicker';\nimport IconCalendar from '../../icons/IconCalendar';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { calendarDateToDate, dateToCalendarDate } from '../BitkitCalendar/Calendar.utils';\nimport CalendarContent from '../BitkitCalendar/components/CalendarContent';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport type BitkitDatePickerControlProps = BoxProps;\n\nexport interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' | 'defaultValue' | 'state' | 'value'> {\n  controlProps?: BitkitDatePickerControlProps;\n  /** Text for a day's tooltip, e.g. why it can't be picked. Return `undefined` for no tooltip. */\n  dayTooltip?: (date: Date) => string | undefined;\n  defaultValue?: Date | null;\n  disablePortal?: boolean;\n  max?: Date;\n  min?: Date;\n  onValueChange?: (value: Date | null) => void;\n  placeholder?: string;\n  showOutsideDays?: boolean;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: Date | null;\n}\n\n/**\n * Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own\n * focus event — that covers tabbing in as well as clicking.\n */\nconst DatePickerInput = ({ css }: { css: SystemStyleObject }) => {\n  const { disabled, open, readOnly, setOpen } = useDatePickerContext();\n  // Ark's DatePicker.Input has no notion of Chakra's Field — without this, `errorText`/`helperText`\n  // render visually but are never announced, since nothing points the input's aria-describedby at them.\n  const ariaDescribedby = useFieldContext()?.ariaDescribedby;\n  const reopenBlockedRef = useRef(false);\n  const wasOpenRef = useRef(false);\n\n  // Zag's `focusInputElement` puts focus back on the input a frame after the calendar closes on\n  // selection, which would bounce it straight back open. Ignore focus that lands right after a\n  // close — this has to be a layout effect so the flag is set before Zag's rAF runs. Isomorphic\n  // layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n  useSafeLayoutEffect(() => {\n    const justClosed = wasOpenRef.current && !open;\n    wasOpenRef.current = open;\n\n    // Only a real close can trigger Zag's refocus, so mount (never-opened) must not arm the block\n    // — otherwise an autoFocus or a programmatic focus right after mount gets swallowed.\n    if (!justClosed) {\n      return undefined;\n    }\n\n    reopenBlockedRef.current = true;\n    const timeout = setTimeout(() => {\n      reopenBlockedRef.current = false;\n    }, 100);\n\n    return () => clearTimeout(timeout);\n  }, [open]);\n\n  // Ark gates its own trigger handlers on the machine's interactive state, but `setOpen` is not —\n  // it would happily open the calendar on a read-only or disabled field. A disabled input still\n  // needs the check: Chrome fires focus events for a programmatic `.focus()` on one, even though\n  // focus never actually lands there.\n  const handleFocus = () => {\n    if (!reopenBlockedRef.current && !readOnly && !disabled) {\n      setOpen(true);\n    }\n  };\n\n  return <DatePicker.Input aria-describedby={ariaDescribedby} css={css} index={0} onFocus={handleFocus} unstyled />;\n};\n\nconst BitkitDatePicker = forwardRef<HTMLDivElement, BitkitDatePickerProps>((props, ref) => {\n  const {\n    controlProps,\n    dayTooltip,\n    defaultValue,\n    disablePortal,\n    max,\n    min,\n    onValueChange,\n    placeholder,\n    showOutsideDays,\n    size = 'lg',\n    state,\n    value,\n    ...fieldProps\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'textInput' });\n  const styles = recipe({ size });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n  const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n  const iconSize = size === 'md' ? '16' : '24';\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  let statusIcon: ReactNode = null;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  const stateAttrs = {\n    'data-disabled': state === 'disabled' ? '' : undefined,\n    'data-invalid': isInvalid ? '' : undefined,\n    'data-readonly': state === 'readOnly' ? '' : undefined,\n  };\n\n  const isInteractive = state !== 'disabled' && state !== 'readOnly';\n\n  const calendarButton = (\n    <BitkitControlButton\n      icon={IconCalendar}\n      label=\"Open calendar\"\n      // Pulled out by its own padding so the glyph lands where a plain end icon would sit in\n      // BitkitTextInput — 16px (lg) / 12px (md) from the field's outer edge.\n      marginInlineEnd={size === 'md' ? '-8' : '-4'}\n      size={size === 'md' ? 'xs' : 'sm'}\n      state={isInteractive ? undefined : 'disabled'}\n    />\n  );\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <DatePicker.Root\n        defaultValue={defaultValue ? [dateToCalendarDate(defaultValue)] : undefined}\n        device=\"desktop\"\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        layout=\"1-month\"\n        max={maxCalendarDate}\n        min={minCalendarDate}\n        numOfMonths={1}\n        onValueChange={\n          onValueChange\n            ? (details: DatePickerValueChangeDetails) =>\n                onValueChange(details.value?.[0] ? calendarDateToDate(details.value[0]) : null)\n            : undefined\n        }\n        placeholder={state === 'readOnly' ? '(not set)' : placeholder}\n        positioning={{ placement: 'bottom-start' }}\n        readOnly={state === 'readOnly'}\n        selectionMode=\"single\"\n        showOutsideDays={showOutsideDays ?? true}\n        startOfWeek={1}\n        // Stay controlled whenever `value` is provided — even for `null` (\"nothing selected\").\n        // Passing `undefined` would flip Root to uncontrolled. See BitkitCombobox.\n        value={value === undefined ? undefined : value ? [dateToCalendarDate(value)] : []}\n      >\n        <DatePicker.Control asChild>\n          <Box {...controlProps} css={[styles.field, controlProps?.css]} {...stateAttrs}>\n            <DatePickerInput css={styles.input} />\n            {statusIcon != null && (\n              <Box css={styles.element} {...stateAttrs}>\n                {statusIcon}\n              </Box>\n            )}\n            {/* Ark keeps the trigger interactive in read-only mode and forces `disabled={false}`\n                onto whatever it wraps, so the button is left unwrapped there to stay inert. */}\n            {state === 'readOnly' ? calendarButton : <DatePicker.Trigger asChild>{calendarButton}</DatePicker.Trigger>}\n          </Box>\n        </DatePicker.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <DatePicker.Positioner>\n            <CalendarContent\n              dayTooltip={dayTooltip}\n              layout=\"1-month\"\n              max={maxCalendarDate}\n              min={minCalendarDate}\n              selectionMode=\"day\"\n            />\n          </DatePicker.Positioner>\n        </Portal>\n      </DatePicker.Root>\n    </BitkitField>\n  );\n});\n\nBitkitDatePicker.displayName = 'BitkitDatePicker';\n\nexport default BitkitDatePicker;\n"],"mappings":"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"}

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

@@ -0,0 +1,65 @@
+import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+import { FilterValue } from './BitkitFilter.utils';
+export interface FilterStatus {
+    /** Holds a selection — counted on the mobile "Filters" button. */
+    isActive: boolean;
+    /** Differs from its `resetValue` — shows "Clear filters". */
+    isDirty: boolean;
+}
+interface FilterContext {
+    /** The page is loading: the filters can't be opened or cleared. */
+    isDisabled: boolean;
+    /** Below the tablet breakpoint the filters render as fields in a full-screen dialog. */
+    isMobile: boolean;
+    register: (id: string, reset: () => void) => void;
+    setStatus: (id: string, status: FilterStatus) => void;
+    styles: Record<string, SystemStyleObject>;
+    unregister: (id: string) => void;
+}
+export declare const FilterContextProvider: import('react').Provider<FilterContext>, useFilterContext: () => FilterContext;
+/** What a filter inside `BitkitFilter.Add` tells it, to list itself in the "Add filter" menu. */
+export interface FilterAddEntry {
+    disabledReason?: string;
+    /** Has options to pick, or a search to find them. */
+    hasOptions: boolean;
+    /** Holds no value, so it is offered in the menu rather than shown as a chip. */
+    isEmpty: boolean;
+    label: string;
+}
+interface FilterAddContext {
+    /** The filter picked from the menu, whose panel is open. */
+    addingId?: string;
+    /** Moves focus to the "Add filter" button once it is enabled, e.g. after a chip is removed. */
+    focusTrigger: () => void;
+    /** The "Add filter" button: the panels anchor to it and hand focus back to it. */
+    getTrigger: () => HTMLElement | null;
+    register: (id: string, entry: FilterAddEntry) => void;
+    stopAdding: () => void;
+    unregister: (id: string) => void;
+}
+/** Set by `BitkitFilter.Add` around its filters: they render as removable chips, only while they hold a value. */
+export declare const FilterAddContextProvider: import('react').Provider<FilterAddContext | undefined>, useFilterAddContext: () => FilterAddContext | undefined;
+/**
+ * Lists a filter in its `BitkitFilter.Add` menu, wherever it sits in the tree, so a filter wrapped in
+ * a consumer component is listed too. Returns nothing outside `Add`.
+ */
+export declare const useFilterAddItem: ({ disabledReason, hasOptions, isEmpty, label }: FilterAddEntry) => {
+    isAdding: boolean;
+    /** The filter picked from the menu, whose panel is open. */
+    addingId?: string;
+    /** Moves focus to the "Add filter" button once it is enabled, e.g. after a chip is removed. */
+    focusTrigger: () => void;
+    /** The "Add filter" button: the panels anchor to it and hand focus back to it. */
+    getTrigger: () => HTMLElement | null;
+    register: (id: string, entry: FilterAddEntry) => void;
+    stopAdding: () => void;
+    unregister: (id: string) => void;
+} | undefined;
+/**
+ * Registers a filter with the root, which shows "Clear filters" while any filter differs from its
+ * `resetValue` and hands each one its `resetValue` back when clicked, and counts the active ones.
+ */
+export declare const useFilterRegistration: <T extends FilterValue>(value: T, resetValue: T, onValueChange: (value: T) => void, 
+/** Off for the search, which sits outside the mobile dialog the count describes. */
+isCounted?: boolean) => void;
+export {};

package/dist/components/BitkitFilter/BitkitFilter.context.js

@@ -0,0 +1,82 @@
+import { isEmptyFilterValue, isEqualFilterValue } from "./BitkitFilter.utils.js";
+import { useEffect, useId, useRef } from "react";
+import { createContext as createContext$1 } from "@chakra-ui/react";
+//#region lib/components/BitkitFilter/BitkitFilter.context.ts
+var [FilterContextProvider, useFilterContext] = createContext$1({
+	hookName: "useFilterContext",
+	name: "FilterContext",
+	providerName: "<BitkitFilter />"
+});
+/** Set by `BitkitFilter.Add` around its filters: they render as removable chips, only while they hold a value. */
+var [FilterAddContextProvider, useFilterAddContext] = createContext$1({
+	name: "FilterAddContext",
+	strict: false
+});
+/**
+* Lists a filter in its `BitkitFilter.Add` menu, wherever it sits in the tree, so a filter wrapped in
+* a consumer component is listed too. Returns nothing outside `Add`.
+*/
+var useFilterAddItem = ({ disabledReason, hasOptions, isEmpty, label }) => {
+	const add = useFilterAddContext();
+	const id = useId();
+	const register = add?.register;
+	const unregister = add?.unregister;
+	useEffect(() => {
+		register?.(id, {
+			disabledReason,
+			hasOptions,
+			isEmpty,
+			label
+		});
+	}, [
+		disabledReason,
+		hasOptions,
+		id,
+		isEmpty,
+		label,
+		register
+	]);
+	useEffect(() => () => unregister?.(id), [id, unregister]);
+	if (!add) return void 0;
+	return {
+		...add,
+		isAdding: add.addingId === id
+	};
+};
+/**
+* Registers a filter with the root, which shows "Clear filters" while any filter differs from its
+* `resetValue` and hands each one its `resetValue` back when clicked, and counts the active ones.
+*/
+var useFilterRegistration = (value, resetValue, onValueChange, isCounted = true) => {
+	const { register, setStatus, unregister } = useFilterContext();
+	const id = useId();
+	const resetRef = useRef(() => onValueChange(resetValue));
+	useEffect(() => {
+		resetRef.current = () => onValueChange(resetValue);
+	});
+	useEffect(() => {
+		register(id, () => resetRef.current());
+		return () => unregister(id);
+	}, [
+		id,
+		register,
+		unregister
+	]);
+	const isDirty = !isEqualFilterValue(value, resetValue);
+	const isActive = isCounted && !isEmptyFilterValue(value);
+	useEffect(() => {
+		setStatus(id, {
+			isActive,
+			isDirty
+		});
+	}, [
+		id,
+		isActive,
+		isDirty,
+		setStatus
+	]);
+};
+//#endregion
+export { FilterAddContextProvider, FilterContextProvider, useFilterAddContext, useFilterAddItem, useFilterContext, useFilterRegistration };
+
+//# sourceMappingURL=BitkitFilter.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitFilter.context.js","names":["createContext"],"sources":["../../../lib/components/BitkitFilter/BitkitFilter.context.ts"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { useEffect, useId, useRef } from 'react';\n\nimport { type FilterValue, isEmptyFilterValue, isEqualFilterValue } from './BitkitFilter.utils';\n\nexport interface FilterStatus {\n  /** Holds a selection — counted on the mobile \"Filters\" button. */\n  isActive: boolean;\n  /** Differs from its `resetValue` — shows \"Clear filters\". */\n  isDirty: boolean;\n}\n\ninterface FilterContext {\n  /** The page is loading: the filters can't be opened or cleared. */\n  isDisabled: boolean;\n  /** Below the tablet breakpoint the filters render as fields in a full-screen dialog. */\n  isMobile: boolean;\n  register: (id: string, reset: () => void) => void;\n  setStatus: (id: string, status: FilterStatus) => void;\n  styles: Record<string, SystemStyleObject>;\n  unregister: (id: string) => void;\n}\n\nexport const [FilterContextProvider, useFilterContext] = createContext<FilterContext>({\n  hookName: 'useFilterContext',\n  name: 'FilterContext',\n  providerName: '<BitkitFilter />',\n});\n\n/** What a filter inside `BitkitFilter.Add` tells it, to list itself in the \"Add filter\" menu. */\nexport interface FilterAddEntry {\n  disabledReason?: string;\n  /** Has options to pick, or a search to find them. */\n  hasOptions: boolean;\n  /** Holds no value, so it is offered in the menu rather than shown as a chip. */\n  isEmpty: boolean;\n  label: string;\n}\n\ninterface FilterAddContext {\n  /** The filter picked from the menu, whose panel is open. */\n  addingId?: string;\n  /** Moves focus to the \"Add filter\" button once it is enabled, e.g. after a chip is removed. */\n  focusTrigger: () => void;\n  /** The \"Add filter\" button: the panels anchor to it and hand focus back to it. */\n  getTrigger: () => HTMLElement | null;\n  register: (id: string, entry: FilterAddEntry) => void;\n  stopAdding: () => void;\n  unregister: (id: string) => void;\n}\n\n/** Set by `BitkitFilter.Add` around its filters: they render as removable chips, only while they hold a value. */\nexport const [FilterAddContextProvider, useFilterAddContext] = createContext<FilterAddContext | undefined>({\n  name: 'FilterAddContext',\n  strict: false,\n});\n\n/**\n * Lists a filter in its `BitkitFilter.Add` menu, wherever it sits in the tree, so a filter wrapped in\n * a consumer component is listed too. Returns nothing outside `Add`.\n */\nexport const useFilterAddItem = ({ disabledReason, hasOptions, isEmpty, label }: FilterAddEntry) => {\n  const add = useFilterAddContext();\n  const id = useId();\n  const register = add?.register;\n  const unregister = add?.unregister;\n\n  useEffect(() => {\n    register?.(id, { disabledReason, hasOptions, isEmpty, label });\n  }, [disabledReason, hasOptions, id, isEmpty, label, register]);\n\n  useEffect(() => () => unregister?.(id), [id, unregister]);\n\n  if (!add) return undefined;\n  return { ...add, isAdding: add.addingId === id };\n};\n\n/**\n * Registers a filter with the root, which shows \"Clear filters\" while any filter differs from its\n * `resetValue` and hands each one its `resetValue` back when clicked, and counts the active ones.\n */\nexport const useFilterRegistration = <T extends FilterValue>(\n  value: T,\n  resetValue: T,\n  onValueChange: (value: T) => void,\n  /** Off for the search, which sits outside the mobile dialog the count describes. */\n  isCounted = true,\n) => {\n  const { register, setStatus, unregister } = useFilterContext();\n  const id = useId();\n  const resetRef = useRef(() => onValueChange(resetValue));\n  useEffect(() => {\n    resetRef.current = () => onValueChange(resetValue);\n  });\n\n  useEffect(() => {\n    register(id, () => resetRef.current());\n    return () => unregister(id);\n  }, [id, register, unregister]);\n\n  const isDirty = !isEqualFilterValue(value, resetValue);\n  const isActive = isCounted && !isEmptyFilterValue(value);\n  useEffect(() => {\n    setStatus(id, { isActive, isDirty });\n  }, [id, isActive, isDirty, setStatus]);\n};\n"],"mappings":";;;;AAyBA,IAAa,CAAC,uBAAuB,oBAAoBA,gBAA6B;CACpF,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC;;AAyBD,IAAa,CAAC,0BAA0B,uBAAuBA,gBAA4C;CACzG,MAAM;CACN,QAAQ;AACV,CAAC;;;;;AAMD,IAAa,oBAAoB,EAAE,gBAAgB,YAAY,SAAS,YAA4B;CAClG,MAAM,MAAM,oBAAoB;CAChC,MAAM,KAAK,MAAM;CACjB,MAAM,WAAW,KAAK;CACtB,MAAM,aAAa,KAAK;CAExB,gBAAgB;EACd,WAAW,IAAI;GAAE;GAAgB;GAAY;GAAS;EAAM,CAAC;CAC/D,GAAG;EAAC;EAAgB;EAAY;EAAI;EAAS;EAAO;CAAQ,CAAC;CAE7D,sBAAsB,aAAa,EAAE,GAAG,CAAC,IAAI,UAAU,CAAC;CAExD,IAAI,CAAC,KAAK,OAAO,KAAA;CACjB,OAAO;EAAE,GAAG;EAAK,UAAU,IAAI,aAAa;CAAG;AACjD;;;;;AAMA,IAAa,yBACX,OACA,YACA,eAEA,YAAY,SACT;CACH,MAAM,EAAE,UAAU,WAAW,eAAe,iBAAiB;CAC7D,MAAM,KAAK,MAAM;CACjB,MAAM,WAAW,aAAa,cAAc,UAAU,CAAC;CACvD,gBAAgB;EACd,SAAS,gBAAgB,cAAc,UAAU;CACnD,CAAC;CAED,gBAAgB;EACd,SAAS,UAAU,SAAS,QAAQ,CAAC;EACrC,aAAa,WAAW,EAAE;CAC5B,GAAG;EAAC;EAAI;EAAU;CAAU,CAAC;CAE7B,MAAM,UAAU,CAAC,mBAAmB,OAAO,UAAU;CACrD,MAAM,WAAW,aAAa,CAAC,mBAAmB,KAAK;CACvD,gBAAgB;EACd,UAAU,IAAI;GAAE;GAAU;EAAQ,CAAC;CACrC,GAAG;EAAC;EAAI;EAAU;EAAS;CAAS,CAAC;AACvC"}

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

@@ -0,0 +1,55 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+export interface BitkitFilterProps extends Omit<BoxProps, 'children'> {
+    /**
+     * The filters: `BitkitFilter.Switch`, `.Select`, `.DateRange`, `.Add` and `.Search`, in the
+     * order they appear. `.Search` always sits at the end of the bar.
+     */
+    children: ReactNode;
+    /**
+     * Where a capped content block sits: `center` over a centred page column, `start` over one that
+     * starts against a sidebar. Pass the same alignment as the page header and content below it.
+     * Only applies with a `contentWidth` in rems. Desktop only.
+     */
+    contentAlign?: 'center' | 'start';
+    /**
+     * Lines the bar up with the page content below it, for a bar under a page header: it gains a
+     * bottom border and the page's inline padding. Pass the content column's `max-width` in rems to
+     * cap the bar's content with it (padded 32 on both sides), or `'full'` for a full-width column
+     * (24 at the start, like the default `BitkitPageHeader`, and 32 at the end).
+     *
+     * Without it the bar has the tighter inset of a filter above a table. Desktop only.
+     */
+    contentWidth?: `${number}rem` | 'full';
+    /**
+     * Forces the desktop bar or the mobile "Filters" dialog. Defaults to the viewport: mobile below the
+     * tablet breakpoint. The mobile dialog is made for narrow screens; from tablet up it is a 320px drawer.
+     */
+    device?: 'desktop' | 'mobile';
+    /**
+     * Called once on "Clear filters" in place of handing each changed filter its `resetValue` — for a
+     * page that resets them all in one write, e.g. one URL update. The `resetValue`s still decide when
+     * the button shows.
+     */
+    onClear?: () => void;
+    /**
+     * Shows "Clear filters" while any filter differs from its `resetValue`. It hands each of those
+     * filters its `resetValue` back through its own `onValueChange`, or calls `onClear`.
+     */
+    showClear?: boolean;
+    /** Shows the filter icon at the start of the bar. Desktop only. */
+    showIcon?: boolean;
+    /** `loading`: while the page's data loads, the filters can't be opened, removed or cleared. The search stays usable. */
+    state?: 'loading';
+}
+declare const _default: import('react').ForwardRefExoticComponent<BitkitFilterProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Add: {
+        ({ children }: import('./BitkitFilterAdd').BitkitFilterAddProps): import('react').JSX.Element;
+        displayName: string;
+    };
+    DateRange: import('react').ForwardRefExoticComponent<import('./BitkitFilterDateRange').BitkitFilterDateRangeProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Search: import('react').ForwardRefExoticComponent<import('./BitkitFilterSearch').BitkitFilterSearchProps & import('react').RefAttributes<HTMLInputElement>>;
+    Select: import('react').ForwardRefExoticComponent<import('./BitkitFilterSelect').BitkitFilterSelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Switch: import('react').ForwardRefExoticComponent<import('./BitkitFilterSwitch').BitkitFilterSwitchProps & import('react').RefAttributes<HTMLElement>>;
+};
+export default _default;

package/dist/components/BitkitFilter/BitkitFilter.js

@@ -0,0 +1,247 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import IconCross from "../../icons/IconCross.js";
+import IconFilter from "../../icons/IconFilter.js";
+import { usePortalContext } from "../../utilities/BitkitPortalContext.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import BitkitBadge from "../BitkitBadge/BitkitBadge.js";
+import { flattenChildren } from "../../utilities/flattenChildren.js";
+import BitkitButton from "../BitkitButton/BitkitButton.js";
+import useResponsive from "../../hooks/useResponsive.js";
+import { FilterContextProvider } from "./BitkitFilter.context.js";
+import BitkitFilterAdd from "./BitkitFilterAdd.js";
+import BitkitFilterDateRange from "./BitkitFilterDateRange.js";
+import BitkitFilterSearch from "./BitkitFilterSearch.js";
+import BitkitFilterSelect from "./BitkitFilterSelect.js";
+import BitkitFilterSwitch from "./BitkitFilterSwitch.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { Drawer } from "@chakra-ui/react/drawer";
+//#region lib/components/BitkitFilter/BitkitFilter.tsx
+var toggle = (set, id, isIn) => {
+	if (set.has(id) === isIn) return set;
+	const next = new Set(set);
+	if (isIn) next.add(id);
+	else next.delete(id);
+	return next;
+};
+/**
+* A bar of filters above a list. Each filter is a controlled sub-component with its own `value` and
+* `onValueChange`; the bar lays them out and offers "Clear filters" across all of them.
+*
+* Below the tablet breakpoint the bar collapses into a "Filters" button opening a full-screen dialog,
+* where every filter is a field opening its own view. A filter still applies on its view's "Apply".
+*/
+var BitkitFilter = forwardRef((props, ref) => {
+	const { children, contentAlign, contentWidth, css, device, onClear, showClear = true, showIcon = true, state, ...rest } = props;
+	const { isMobile: isMobileViewport } = useResponsive();
+	const isMobile = device ? device === "mobile" : isMobileViewport;
+	const isDisabled = state === "loading";
+	const { disablePortal } = usePortalContext();
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const recipe = useSlotRecipe({ key: "filter" });
+	let pageLayout;
+	if (contentWidth) pageLayout = contentWidth === "full" ? "full" : "capped";
+	const styles = recipe({
+		contentAlign: pageLayout === "capped" ? contentAlign : void 0,
+		pageLayout
+	});
+	const resets = useRef(/* @__PURE__ */ new Map());
+	const [dirtyIds, setDirtyIds] = useState(/* @__PURE__ */ new Set());
+	const [activeIds, setActiveIds] = useState(/* @__PURE__ */ new Set());
+	const register = useCallback((id, reset) => {
+		resets.current.set(id, reset);
+	}, []);
+	const setStatus = useCallback((id, { isActive, isDirty }) => {
+		setDirtyIds((prev) => toggle(prev, id, isDirty));
+		setActiveIds((prev) => toggle(prev, id, isActive));
+	}, []);
+	const unregister = useCallback((id) => {
+		resets.current.delete(id);
+		setStatus(id, {
+			isActive: false,
+			isDirty: false
+		});
+	}, [setStatus]);
+	const context = useMemo(() => ({
+		isDisabled,
+		isMobile,
+		register,
+		setStatus,
+		styles,
+		unregister
+	}), [
+		isDisabled,
+		isMobile,
+		register,
+		setStatus,
+		styles,
+		unregister
+	]);
+	const filters = [];
+	const searches = [];
+	flattenChildren(children).forEach((child) => {
+		if (child.type === BitkitFilterSearch) searches.push(child);
+		else filters.push(child);
+	});
+	const isDirty = dirtyIds.size > 0;
+	const activeCount = activeIds.size;
+	const focusTarget = useRef(null);
+	const isFocusPending = useRef(false);
+	const clearAll = () => {
+		if (isDisabled) return;
+		isFocusPending.current = true;
+		document.addEventListener("focusin", () => {
+			isFocusPending.current = false;
+		}, { once: true });
+		if (onClear) onClear();
+		else dirtyIds.forEach((id) => resets.current.get(id)?.());
+	};
+	useEffect(() => {
+		if (!isFocusPending.current || isDirty) return;
+		isFocusPending.current = false;
+		const active = document.activeElement;
+		if (active && active !== document.body && !active.matches("[data-filter-clear]")) return;
+		focusTarget.current?.querySelector("button:not(:disabled), input:not(:disabled)")?.focus();
+	}, [isDirty]);
+	const disabledProps = {
+		"aria-disabled": isDisabled || void 0,
+		"data-disabled": isDisabled ? "" : void 0
+	};
+	const clearProps = {
+		...disabledProps,
+		"data-filter-clear": "",
+		onClick: clearAll
+	};
+	if (isMobile) return /* @__PURE__ */ jsx(FilterContextProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Box, {
+			css,
+			ref,
+			...rest,
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					css: styles.mobileBar,
+					ref: isDialogOpen ? void 0 : focusTarget,
+					children: [/* @__PURE__ */ jsxs(chakra.button, {
+						"aria-expanded": isDialogOpen,
+						"aria-haspopup": "dialog",
+						"aria-label": `Filters, ${activeCount} applied`,
+						...disabledProps,
+						css: styles.mobileTrigger,
+						onClick: () => !isDisabled && setIsDialogOpen(true),
+						type: "button",
+						children: [
+							/* @__PURE__ */ jsx(IconFilter, { size: "16" }),
+							"Filters",
+							/* @__PURE__ */ jsx(BitkitBadge, {
+								colorVariant: activeCount ? "purple" : "neutral",
+								children: activeCount
+							})
+						]
+					}), showClear && isDirty && /* @__PURE__ */ jsx(BitkitButton, {
+						...clearProps,
+						icon: IconCross,
+						size: "sm",
+						variant: "tertiary",
+						children: "Clear filters"
+					})]
+				}),
+				searches,
+				/* @__PURE__ */ jsx(Drawer.Root, {
+					lazyMount: false,
+					onOpenChange: ({ open }) => setIsDialogOpen(open),
+					open: isDialogOpen,
+					unmountOnExit: false,
+					children: /* @__PURE__ */ jsx(Portal, {
+						disabled: disablePortal,
+						children: /* @__PURE__ */ jsx(Drawer.Positioner, { children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+							/* @__PURE__ */ jsxs(Box, {
+								css: styles.mobileHeader,
+								children: [/* @__PURE__ */ jsx(Drawer.Title, {
+									css: styles.mobileTitle,
+									unstyled: true,
+									children: "Filters"
+								}), /* @__PURE__ */ jsx(Drawer.CloseTrigger, {
+									asChild: true,
+									unstyled: true,
+									children: /* @__PURE__ */ jsx(BitkitCloseButton, { size: "sm" })
+								})]
+							}),
+							/* @__PURE__ */ jsx(Drawer.Body, {
+								css: styles.mobileBody,
+								ref: isDialogOpen ? focusTarget : void 0,
+								children: filters
+							}),
+							/* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsxs(Box, {
+								css: styles.mobileFooter,
+								children: [showClear && /* @__PURE__ */ jsx(BitkitButton, {
+									...clearProps,
+									size: "md",
+									state: isDirty ? void 0 : "disabled",
+									variant: "secondary",
+									children: "Clear filters"
+								}), /* @__PURE__ */ jsx(BitkitButton, {
+									onClick: () => setIsDialogOpen(false),
+									size: "md",
+									children: "Show results"
+								})]
+							}) })
+						] }) })
+					})
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(FilterContextProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Box, {
+			css: [styles.root, css],
+			ref,
+			...rest,
+			children: /* @__PURE__ */ jsxs(Box, {
+				css: styles.content,
+				maxWidth: contentWidth === "full" ? void 0 : contentWidth,
+				ref: focusTarget,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					css: styles.filters,
+					children: [
+						showIcon && /* @__PURE__ */ jsx(Box, {
+							css: styles.icon,
+							children: /* @__PURE__ */ jsx(IconFilter, {})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							css: styles.items,
+							children: filters
+						}),
+						showClear && isDirty && /* @__PURE__ */ jsx(BitkitButton, {
+							...clearProps,
+							flexShrink: "0",
+							icon: IconCross,
+							size: "sm",
+							variant: "tertiary",
+							children: "Clear filters"
+						})
+					]
+				}), searches.length > 0 && /* @__PURE__ */ jsx(Box, {
+					css: styles.searchBlock,
+					children: searches
+				})]
+			})
+		})
+	});
+});
+BitkitFilter.displayName = "BitkitFilter";
+var BitkitFilter_default = withSubComponents(BitkitFilter, {
+	Add: BitkitFilterAdd,
+	DateRange: BitkitFilterDateRange,
+	Search: BitkitFilterSearch,
+	Select: BitkitFilterSelect,
+	Switch: BitkitFilterSwitch
+});
+//#endregion
+export { BitkitFilter_default as default };
+
+//# sourceMappingURL=BitkitFilter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitFilter.js","names":[],"sources":["../../../lib/components/BitkitFilter/BitkitFilter.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Portal } from '@chakra-ui/react/portal';\n// `chakra.button`: the mobile \"Filters\" button carries a count badge, which BitkitButton's string-only label can't.\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport useResponsive from '../../hooks/useResponsive';\nimport { IconCross, IconFilter } from '../../icons';\nimport { usePortalContext } from '../../utilities/BitkitPortalContext';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport { FilterContextProvider, type FilterStatus } from './BitkitFilter.context';\nimport BitkitFilterAdd from './BitkitFilterAdd';\nimport BitkitFilterDateRange from './BitkitFilterDateRange';\nimport BitkitFilterSearch from './BitkitFilterSearch';\nimport BitkitFilterSelect from './BitkitFilterSelect';\nimport BitkitFilterSwitch from './BitkitFilterSwitch';\n\nexport interface BitkitFilterProps extends Omit<BoxProps, 'children'> {\n  /**\n   * The filters: `BitkitFilter.Switch`, `.Select`, `.DateRange`, `.Add` and `.Search`, in the\n   * order they appear. `.Search` always sits at the end of the bar.\n   */\n  children: ReactNode;\n  /**\n   * Where a capped content block sits: `center` over a centred page column, `start` over one that\n   * starts against a sidebar. Pass the same alignment as the page header and content below it.\n   * Only applies with a `contentWidth` in rems. Desktop only.\n   */\n  contentAlign?: 'center' | 'start';\n  /**\n   * Lines the bar up with the page content below it, for a bar under a page header: it gains a\n   * bottom border and the page's inline padding. Pass the content column's `max-width` in rems to\n   * cap the bar's content with it (padded 32 on both sides), or `'full'` for a full-width column\n   * (24 at the start, like the default `BitkitPageHeader`, and 32 at the end).\n   *\n   * Without it the bar has the tighter inset of a filter above a table. Desktop only.\n   */\n  contentWidth?: `${number}rem` | 'full';\n  /**\n   * Forces the desktop bar or the mobile \"Filters\" dialog. Defaults to the viewport: mobile below the\n   * tablet breakpoint. The mobile dialog is made for narrow screens; from tablet up it is a 320px drawer.\n   */\n  device?: 'desktop' | 'mobile';\n  /**\n   * Called once on \"Clear filters\" in place of handing each changed filter its `resetValue` — for a\n   * page that resets them all in one write, e.g. one URL update. The `resetValue`s still decide when\n   * the button shows.\n   */\n  onClear?: () => void;\n  /**\n   * Shows \"Clear filters\" while any filter differs from its `resetValue`. It hands each of those\n   * filters its `resetValue` back through its own `onValueChange`, or calls `onClear`.\n   */\n  showClear?: boolean;\n  /** Shows the filter icon at the start of the bar. Desktop only. */\n  showIcon?: boolean;\n  /** `loading`: while the page's data loads, the filters can't be opened, removed or cleared. The search stays usable. */\n  state?: 'loading';\n}\n\nconst toggle = (set: ReadonlySet<string>, id: string, isIn: boolean) => {\n  if (set.has(id) === isIn) return set;\n  const next = new Set(set);\n  if (isIn) next.add(id);\n  else next.delete(id);\n  return next;\n};\n\n/**\n * A bar of filters above a list. Each filter is a controlled sub-component with its own `value` and\n * `onValueChange`; the bar lays them out and offers \"Clear filters\" across all of them.\n *\n * Below the tablet breakpoint the bar collapses into a \"Filters\" button opening a full-screen dialog,\n * where every filter is a field opening its own view. A filter still applies on its view's \"Apply\".\n */\nconst BitkitFilter = forwardRef<HTMLDivElement, BitkitFilterProps>((props, ref) => {\n  const {\n    children,\n    contentAlign,\n    contentWidth,\n    css,\n    device,\n    onClear,\n    showClear = true,\n    showIcon = true,\n    state,\n    ...rest\n  } = props;\n  const { isMobile: isMobileViewport } = useResponsive();\n  const isMobile = device ? device === 'mobile' : isMobileViewport;\n  const isDisabled = state === 'loading';\n  const { disablePortal } = usePortalContext();\n  const [isDialogOpen, setIsDialogOpen] = useState(false);\n\n  const recipe = useSlotRecipe({ key: 'filter' });\n  let pageLayout: 'capped' | 'full' | undefined;\n  if (contentWidth) pageLayout = contentWidth === 'full' ? 'full' : 'capped';\n  const styles = recipe({ contentAlign: pageLayout === 'capped' ? contentAlign : undefined, pageLayout });\n\n  const resets = useRef(new Map<string, () => void>());\n  const [dirtyIds, setDirtyIds] = useState<ReadonlySet<string>>(new Set());\n  const [activeIds, setActiveIds] = useState<ReadonlySet<string>>(new Set());\n\n  const register = useCallback((id: string, reset: () => void) => {\n    resets.current.set(id, reset);\n  }, []);\n\n  const setStatus = useCallback((id: string, { isActive, isDirty }: FilterStatus) => {\n    setDirtyIds((prev) => toggle(prev, id, isDirty));\n    setActiveIds((prev) => toggle(prev, id, isActive));\n  }, []);\n\n  const unregister = useCallback(\n    (id: string) => {\n      resets.current.delete(id);\n      setStatus(id, { isActive: false, isDirty: false });\n    },\n    [setStatus],\n  );\n\n  const context = useMemo(\n    () => ({ isDisabled, isMobile, register, setStatus, styles, unregister }),\n    [isDisabled, isMobile, register, setStatus, styles, unregister],\n  );\n\n  const filters: ReactNode[] = [];\n  const searches: ReactNode[] = [];\n  // Flattened, so a filter grouped in a fragment is still sorted to the right place.\n  flattenChildren(children).forEach((child) => {\n    if (child.type === BitkitFilterSearch) searches.push(child);\n    else filters.push(child);\n  });\n\n  const isDirty = dirtyIds.size > 0;\n  const activeCount = activeIds.size;\n  // The \"Clear filters\" button goes away (or is disabled) once nothing differs, so focus then moves\n  // to the first control of the cleared filters rather than dropping to the page. Only if it hasn't\n  // gone anywhere else meanwhile, e.g. while a slow reset was under way.\n  const focusTarget = useRef<HTMLDivElement>(null);\n  const isFocusPending = useRef(false);\n  const clearAll = () => {\n    if (isDisabled) return;\n    isFocusPending.current = true;\n    // Called off once focus lands anywhere, so a clear that never fully lands can't pull it in later.\n    document.addEventListener(\n      'focusin',\n      () => {\n        isFocusPending.current = false;\n      },\n      { once: true },\n    );\n    if (onClear) onClear();\n    else dirtyIds.forEach((id) => resets.current.get(id)?.());\n  };\n  useEffect(() => {\n    if (!isFocusPending.current || isDirty) return;\n    isFocusPending.current = false;\n    const active = document.activeElement;\n    if (active && active !== document.body && !active.matches('[data-filter-clear]')) return;\n    focusTarget.current?.querySelector<HTMLElement>('button:not(:disabled), input:not(:disabled)')?.focus();\n  }, [isDirty]);\n\n  // While the page loads, the controls are only `aria-disabled`, so they keep a focus handed to them.\n  // `data-disabled` takes them out of the hover and active styles too.\n  const disabledProps = { 'aria-disabled': isDisabled || undefined, 'data-disabled': isDisabled ? '' : undefined };\n  const clearProps = { ...disabledProps, 'data-filter-clear': '', onClick: clearAll };\n\n  if (isMobile) {\n    return (\n      <FilterContextProvider value={context}>\n        <Box css={css} ref={ref} {...rest}>\n          <Box css={styles.mobileBar} ref={isDialogOpen ? undefined : focusTarget}>\n            <chakra.button\n              aria-expanded={isDialogOpen}\n              aria-haspopup=\"dialog\"\n              aria-label={`Filters, ${activeCount} applied`}\n              {...disabledProps}\n              css={styles.mobileTrigger}\n              onClick={() => !isDisabled && setIsDialogOpen(true)}\n              type=\"button\"\n            >\n              <IconFilter size=\"16\" />\n              Filters\n              <BitkitBadge colorVariant={activeCount ? 'purple' : 'neutral'}>{activeCount}</BitkitBadge>\n            </chakra.button>\n            {showClear && isDirty && (\n              <BitkitButton {...clearProps} icon={IconCross} size=\"sm\" variant=\"tertiary\">\n                Clear filters\n              </BitkitButton>\n            )}\n          </Box>\n          {searches}\n          {/* Kept mounted while closed: the filters inside register their values with the bar. */}\n          <Drawer.Root\n            lazyMount={false}\n            onOpenChange={({ open }) => setIsDialogOpen(open)}\n            open={isDialogOpen}\n            unmountOnExit={false}\n          >\n            <Portal disabled={disablePortal}>\n              <Drawer.Positioner>\n                <Drawer.Content>\n                  <Box css={styles.mobileHeader}>\n                    <Drawer.Title css={styles.mobileTitle} unstyled>\n                      Filters\n                    </Drawer.Title>\n                    <Drawer.CloseTrigger asChild unstyled>\n                      <BitkitCloseButton size=\"sm\" />\n                    </Drawer.CloseTrigger>\n                  </Box>\n                  <Drawer.Body css={styles.mobileBody} ref={isDialogOpen ? focusTarget : undefined}>\n                    {filters}\n                  </Drawer.Body>\n                  <Drawer.Footer>\n                    <Box css={styles.mobileFooter}>\n                      {showClear && (\n                        <BitkitButton\n                          {...clearProps}\n                          size=\"md\"\n                          state={isDirty ? undefined : 'disabled'}\n                          variant=\"secondary\"\n                        >\n                          Clear filters\n                        </BitkitButton>\n                      )}\n                      <BitkitButton onClick={() => setIsDialogOpen(false)} size=\"md\">\n                        Show results\n                      </BitkitButton>\n                    </Box>\n                  </Drawer.Footer>\n                </Drawer.Content>\n              </Drawer.Positioner>\n            </Portal>\n          </Drawer.Root>\n        </Box>\n      </FilterContextProvider>\n    );\n  }\n\n  return (\n    <FilterContextProvider value={context}>\n      <Box css={[styles.root, css]} ref={ref} {...rest}>\n        <Box css={styles.content} maxWidth={contentWidth === 'full' ? undefined : contentWidth} ref={focusTarget}>\n          <Box css={styles.filters}>\n            {showIcon && (\n              <Box css={styles.icon}>\n                <IconFilter />\n              </Box>\n            )}\n            <Box css={styles.items}>{filters}</Box>\n            {showClear && isDirty && (\n              <BitkitButton {...clearProps} flexShrink=\"0\" icon={IconCross} size=\"sm\" variant=\"tertiary\">\n                Clear filters\n              </BitkitButton>\n            )}\n          </Box>\n          {searches.length > 0 && <Box css={styles.searchBlock}>{searches}</Box>}\n        </Box>\n      </Box>\n    </FilterContextProvider>\n  );\n});\n\nBitkitFilter.displayName = 'BitkitFilter';\n\nexport default withSubComponents(BitkitFilter, {\n  Add: BitkitFilterAdd,\n  DateRange: BitkitFilterDateRange,\n  Search: BitkitFilterSearch,\n  Select: BitkitFilterSelect,\n  Switch: BitkitFilterSwitch,\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+export type FilterValue = string | string[] | Date[] | null;
+/** Typing in a search settles for this long before its callback fires. */
+export declare const SEARCH_DEBOUNCE_MS = 300;
+/** Compares option lists as sets, since checking options in another order picks the same ones; dates by position. */
+export declare const isEqualFilterValue: (a: FilterValue, b: FilterValue) => boolean;
+/** A filter value that holds no selection. */
+export declare const isEmptyFilterValue: (value: FilterValue) => boolean;
+export declare const isPattern: (value: string) => boolean;
+/** Compiles a wildcard `pattern`, where `*` stands for any run of characters, to match whole texts. */
+export declare const compilePattern: (pattern: string) => RegExp;
+/**
+ * Lowercases a noun for running text, keeping any word with a capital after its first letter as an
+ * acronym or name: "CI Providers" reads "CI providers", "PRs" and "iOS apps" stay as they are.
+ */
+export declare const toRunningText: (noun: string) => string;
+export declare const formatDateRange: (range: Date[]) => string;
+/** The last moment of the day `date` falls on, so a range ending that day includes all of it. */
+export declare const endOfDay: (date: Date) => Date;

package/dist/components/BitkitFilter/BitkitFilter.utils.js

@@ -0,0 +1,42 @@
+//#region lib/components/BitkitFilter/BitkitFilter.utils.ts
+/** Compares option lists as sets, since checking options in another order picks the same ones; dates by position. */
+var isEqualFilterValue = (a, b) => {
+	if (Array.isArray(a) && Array.isArray(b)) {
+		if (a.length !== b.length) return false;
+		if (a.every((item) => typeof item === "string")) {
+			const others = new Set(b);
+			return a.every((item) => others.has(item));
+		}
+		return a.every((item, index) => {
+			const other = b[index];
+			return item instanceof Date && other instanceof Date ? item.getTime() === other.getTime() : item === other;
+		});
+	}
+	return a === b;
+};
+/** A filter value that holds no selection. */
+var isEmptyFilterValue = (value) => value === null || value === "" || Array.isArray(value) && value.length === 0;
+var regExpEscape = (text) => text.replace(/[|\\{}()[\]^$+?.]/g, "\\$&");
+var isPattern = (value) => value.includes("*");
+/** Compiles a wildcard `pattern`, where `*` stands for any run of characters, to match whole texts. */
+var compilePattern = (pattern) => new RegExp(`^${pattern.split(/\*+/).map(regExpEscape).join(".*")}$`);
+/**
+* Lowercases a noun for running text, keeping any word with a capital after its first letter as an
+* acronym or name: "CI Providers" reads "CI providers", "PRs" and "iOS apps" stay as they are.
+*/
+var toRunningText = (noun) => noun.split(" ").map((word) => /[A-Z]/.test(word.slice(1)) ? word : word.toLowerCase()).join(" ");
+var dateFormat = new Intl.DateTimeFormat("en-US", {
+	day: "numeric",
+	month: "short"
+});
+var formatDateRange = (range) => range.map((date) => dateFormat.format(date)).join(" – ");
+/** The last moment of the day `date` falls on, so a range ending that day includes all of it. */
+var endOfDay = (date) => {
+	const end = new Date(date);
+	end.setHours(23, 59, 59, 999);
+	return end;
+};
+//#endregion
+export { compilePattern, endOfDay, formatDateRange, isEmptyFilterValue, isEqualFilterValue, isPattern, toRunningText };
+
+//# sourceMappingURL=BitkitFilter.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitFilter.utils.js","names":[],"sources":["../../../lib/components/BitkitFilter/BitkitFilter.utils.ts"],"sourcesContent":["export type FilterValue = string | string[] | Date[] | null;\n\n/** Typing in a search settles for this long before its callback fires. */\nexport const SEARCH_DEBOUNCE_MS = 300;\n\n/** Compares option lists as sets, since checking options in another order picks the same ones; dates by position. */\nexport const isEqualFilterValue = (a: FilterValue, b: FilterValue): boolean => {\n  if (Array.isArray(a) && Array.isArray(b)) {\n    if (a.length !== b.length) return false;\n    if (a.every((item) => typeof item === 'string')) {\n      const others = new Set<unknown>(b);\n      return a.every((item) => others.has(item));\n    }\n    return a.every((item, index) => {\n      const other = b[index];\n      return item instanceof Date && other instanceof Date ? item.getTime() === other.getTime() : item === other;\n    });\n  }\n  return a === b;\n};\n\n/** A filter value that holds no selection. */\nexport const isEmptyFilterValue = (value: FilterValue): boolean =>\n  value === null || value === '' || (Array.isArray(value) && value.length === 0);\n\nconst regExpEscape = (text: string) => text.replace(/[|\\\\{}()[\\]^$+?.]/g, '\\\\$&');\n\nexport const isPattern = (value: string) => value.includes('*');\n\n/** Compiles a wildcard `pattern`, where `*` stands for any run of characters, to match whole texts. */\nexport const compilePattern = (pattern: string) => new RegExp(`^${pattern.split(/\\*+/).map(regExpEscape).join('.*')}$`);\n\n/**\n * Lowercases a noun for running text, keeping any word with a capital after its first letter as an\n * acronym or name: \"CI Providers\" reads \"CI providers\", \"PRs\" and \"iOS apps\" stay as they are.\n */\nexport const toRunningText = (noun: string) =>\n  noun\n    .split(' ')\n    .map((word) => (/[A-Z]/.test(word.slice(1)) ? word : word.toLowerCase()))\n    .join(' ');\n\nconst dateFormat = new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'short' });\n\nexport const formatDateRange = (range: Date[]) => range.map((date) => dateFormat.format(date)).join(' – ');\n\n/** The last moment of the day `date` falls on, so a range ending that day includes all of it. */\nexport const endOfDay = (date: Date) => {\n  const end = new Date(date);\n  end.setHours(23, 59, 59, 999);\n  return end;\n};\n"],"mappings":";;AAMA,IAAa,sBAAsB,GAAgB,MAA4B;CAC7E,IAAI,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,CAAC,GAAG;EACxC,IAAI,EAAE,WAAW,EAAE,QAAQ,OAAO;EAClC,IAAI,EAAE,OAAO,SAAS,OAAO,SAAS,QAAQ,GAAG;GAC/C,MAAM,SAAS,IAAI,IAAa,CAAC;GACjC,OAAO,EAAE,OAAO,SAAS,OAAO,IAAI,IAAI,CAAC;EAC3C;EACA,OAAO,EAAE,OAAO,MAAM,UAAU;GAC9B,MAAM,QAAQ,EAAE;GAChB,OAAO,gBAAgB,QAAQ,iBAAiB,OAAO,KAAK,QAAQ,MAAM,MAAM,QAAQ,IAAI,SAAS;EACvG,CAAC;CACH;CACA,OAAO,MAAM;AACf;;AAGA,IAAa,sBAAsB,UACjC,UAAU,QAAQ,UAAU,MAAO,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAE9E,IAAM,gBAAgB,SAAiB,KAAK,QAAQ,sBAAsB,MAAM;AAEhF,IAAa,aAAa,UAAkB,MAAM,SAAS,GAAG;;AAG9D,IAAa,kBAAkB,YAAoB,IAAI,OAAO,IAAI,QAAQ,MAAM,KAAK,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,KAAK,IAAI,EAAE,EAAE;;;;;AAMtH,IAAa,iBAAiB,SAC5B,KACG,MAAM,GAAG,CAAC,CACV,KAAK,SAAU,QAAQ,KAAK,KAAK,MAAM,CAAC,CAAC,IAAI,OAAO,KAAK,YAAY,CAAE,CAAC,CACxE,KAAK,GAAG;AAEb,IAAM,aAAa,IAAI,KAAK,eAAe,SAAS;CAAE,KAAK;CAAW,OAAO;AAAQ,CAAC;AAEtF,IAAa,mBAAmB,UAAkB,MAAM,KAAK,SAAS,WAAW,OAAO,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK;;AAGzG,IAAa,YAAY,SAAe;CACtC,MAAM,MAAM,IAAI,KAAK,IAAI;CACzB,IAAI,SAAS,IAAI,IAAI,IAAI,GAAG;CAC5B,OAAO;AACT"}