@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-HEBZ7Q7O.js

@@ -0,0 +1,97 @@
+import {
+  MIN_QUERY_LENGTH
+} from "./chunk-MTGEJRE4.js";
+import {
+  searchMockAddresses
+} from "./chunk-O7QPPJAK.js";
+
+// src/components/form/AddressAutocomplete/useAddressPredictions.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var DEBOUNCE_MS = 300;
+var MOCK_PREDICTION_DELAY_MS = 100;
+var predictionRequest = (input, restrictions) => ({
+  input: input.trim(),
+  componentRestrictions: restrictions?.country ? { country: restrictions.country } : void 0,
+  types: restrictions?.types || []
+});
+var fetchMockPredictions = (input, sink) => {
+  window.setTimeout(() => {
+    sink.setLoading(false);
+    sink.setOptions(searchMockAddresses(input));
+    sink.setApiError(null);
+  }, MOCK_PREDICTION_DELAY_MS);
+};
+var fetchLivePredictions = (service, input, restrictions, sink) => {
+  service.getPlacePredictions(predictionRequest(input, restrictions), (predictions, status) => {
+    sink.setLoading(false);
+    if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {
+      sink.setOptions(predictions);
+      sink.setApiError(null);
+      return;
+    }
+    sink.setOptions([]);
+    sink.setApiError(
+      status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS ? null : "Failed to fetch address suggestions"
+    );
+  });
+};
+var useAddressPredictions = ({
+  isLoaded,
+  services,
+  restrictions,
+  useMockData,
+  setInputValue,
+  setLoading,
+  setApiError
+}) => {
+  const [options, setOptions] = useState([]);
+  const debounceTimeoutRef = useRef(void 0);
+  const sink = useMemo(
+    () => ({ setOptions, setLoading, setApiError }),
+    [setLoading, setApiError]
+  );
+  const debouncedAutocomplete = useCallback(
+    (input) => {
+      window.clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = window.setTimeout(() => {
+        if (!input.trim() || !isLoaded) {
+          setOptions([]);
+          setLoading(false);
+          return;
+        }
+        if (useMockData) {
+          fetchMockPredictions(input, sink);
+          return;
+        }
+        if (!services.autocompleteService) {
+          setOptions([]);
+          setLoading(false);
+          return;
+        }
+        fetchLivePredictions(services.autocompleteService, input, restrictions, sink);
+      }, DEBOUNCE_MS);
+    },
+    [isLoaded, services, restrictions, useMockData, sink, setLoading]
+  );
+  useEffect(() => () => window.clearTimeout(debounceTimeoutRef.current), []);
+  const handleInputChange = useCallback(
+    (_event, value) => {
+      setInputValue(value);
+      setApiError(null);
+      if (value.length > MIN_QUERY_LENGTH) {
+        setLoading(true);
+        debouncedAutocomplete(value);
+        return;
+      }
+      setOptions([]);
+      setLoading(false);
+    },
+    [debouncedAutocomplete, setInputValue, setApiError, setLoading]
+  );
+  return { options, handleInputChange };
+};
+
+export {
+  useAddressPredictions
+};
+//# sourceMappingURL=chunk-HEBZ7Q7O.js.map

package/dist/chunk-HEBZ7Q7O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/useAddressPredictions.ts"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { MIN_QUERY_LENGTH } from './AddressAutocomplete.helpers';\nimport type { AddressAutocompleteProps, AddressOptionValue } from './AddressAutocomplete.types';\nimport { searchMockAddresses } from './mockPlaces';\nimport type { GoogleMapsService } from './useGoogleMapsAPI';\n\nconst DEBOUNCE_MS = 300;\n// Long enough to exercise the loading state, short enough not to slow tests down.\nconst MOCK_PREDICTION_DELAY_MS = 100;\n\ntype Restrictions = AddressAutocompleteProps['restrictions'];\n\ninterface PredictionSink {\n  setOptions: (options: AddressOptionValue[]) => void;\n  setLoading: (loading: boolean) => void;\n  setApiError: (message: string | null) => void;\n}\n\nconst predictionRequest = (\n  input: string,\n  restrictions: Restrictions,\n): google.maps.places.AutocompletionRequest => ({\n  input: input.trim(),\n  componentRestrictions: restrictions?.country ? { country: restrictions.country } : undefined,\n  types: restrictions?.types || [],\n});\n\nconst fetchMockPredictions = (input: string, sink: PredictionSink) => {\n  window.setTimeout(() => {\n    sink.setLoading(false);\n    sink.setOptions(searchMockAddresses(input));\n    sink.setApiError(null);\n  }, MOCK_PREDICTION_DELAY_MS);\n};\n\nconst fetchLivePredictions = (\n  service: google.maps.places.AutocompleteService,\n  input: string,\n  restrictions: Restrictions,\n  sink: PredictionSink,\n) => {\n  service.getPlacePredictions(predictionRequest(input, restrictions), (predictions, status) => {\n    sink.setLoading(false);\n\n    if (status === google.maps.places.PlacesServiceStatus.OK && predictions) {\n      sink.setOptions(predictions);\n      sink.setApiError(null);\n      return;\n    }\n\n    // No matches is a normal outcome, not something to complain about.\n    sink.setOptions([]);\n    sink.setApiError(\n      status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS\n        ? null\n        : 'Failed to fetch address suggestions',\n    );\n  });\n};\n\nexport const useAddressPredictions = ({\n  isLoaded,\n  services,\n  restrictions,\n  useMockData,\n  setInputValue,\n  setLoading,\n  setApiError,\n}: {\n  isLoaded: boolean;\n  services: GoogleMapsService;\n  restrictions: Restrictions;\n  useMockData: boolean;\n  setInputValue: (value: string) => void;\n  setLoading: (loading: boolean) => void;\n  setApiError: (message: string | null) => void;\n}) => {\n  const [options, setOptions] = useState<AddressOptionValue[]>([]);\n  const debounceTimeoutRef = useRef<number | undefined>(undefined);\n\n  const sink = useMemo<PredictionSink>(\n    () => ({ setOptions, setLoading, setApiError }),\n    [setLoading, setApiError],\n  );\n\n  const debouncedAutocomplete = useCallback(\n    (input: string) => {\n      window.clearTimeout(debounceTimeoutRef.current);\n\n      debounceTimeoutRef.current = window.setTimeout(() => {\n        if (!input.trim() || !isLoaded) {\n          setOptions([]);\n          setLoading(false);\n          return;\n        }\n\n        if (useMockData) {\n          fetchMockPredictions(input, sink);\n          return;\n        }\n\n        if (!services.autocompleteService) {\n          setOptions([]);\n          setLoading(false);\n          return;\n        }\n\n        fetchLivePredictions(services.autocompleteService, input, restrictions, sink);\n      }, DEBOUNCE_MS);\n    },\n    [isLoaded, services, restrictions, useMockData, sink, setLoading],\n  );\n\n  useEffect(() => () => window.clearTimeout(debounceTimeoutRef.current), []);\n\n  const handleInputChange = useCallback(\n    (_event: React.SyntheticEvent, value: string) => {\n      setInputValue(value);\n      setApiError(null);\n\n      if (value.length > MIN_QUERY_LENGTH) {\n        setLoading(true);\n        debouncedAutocomplete(value);\n        return;\n      }\n\n      setOptions([]);\n      setLoading(false);\n    },\n    [debouncedAutocomplete, setInputValue, setApiError, setLoading],\n  );\n\n  return { options, handleInputChange };\n};\n"],"mappings":";;;;;;;;AACA,SAAS,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AAOlE,IAAM,cAAc;AAEpB,IAAM,2BAA2B;AAUjC,IAAM,oBAAoB,CACxB,OACA,kBAC8C;AAAA,EAC9C,OAAO,MAAM,KAAK;AAAA,EAClB,uBAAuB,cAAc,UAAU,EAAE,SAAS,aAAa,QAAQ,IAAI;AAAA,EACnF,OAAO,cAAc,SAAS,CAAC;AACjC;AAEA,IAAM,uBAAuB,CAAC,OAAe,SAAyB;AACpE,SAAO,WAAW,MAAM;AACtB,SAAK,WAAW,KAAK;AACrB,SAAK,WAAW,oBAAoB,KAAK,CAAC;AAC1C,SAAK,YAAY,IAAI;AAAA,EACvB,GAAG,wBAAwB;AAC7B;AAEA,IAAM,uBAAuB,CAC3B,SACA,OACA,cACA,SACG;AACH,UAAQ,oBAAoB,kBAAkB,OAAO,YAAY,GAAG,CAAC,aAAa,WAAW;AAC3F,SAAK,WAAW,KAAK;AAErB,QAAI,WAAW,OAAO,KAAK,OAAO,oBAAoB,MAAM,aAAa;AACvE,WAAK,WAAW,WAAW;AAC3B,WAAK,YAAY,IAAI;AACrB;AAAA,IACF;AAGA,SAAK,WAAW,CAAC,CAAC;AAClB,SAAK;AAAA,MACH,WAAW,OAAO,KAAK,OAAO,oBAAoB,eAC9C,OACA;AAAA,IACN;AAAA,EACF,CAAC;AACH;AAEO,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQM;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAA+B,CAAC,CAAC;AAC/D,QAAM,qBAAqB,OAA2B,MAAS;AAE/D,QAAM,OAAO;AAAA,IACX,OAAO,EAAE,YAAY,YAAY,YAAY;AAAA,IAC7C,CAAC,YAAY,WAAW;AAAA,EAC1B;AAEA,QAAM,wBAAwB;AAAA,IAC5B,CAAC,UAAkB;AACjB,aAAO,aAAa,mBAAmB,OAAO;AAE9C,yBAAmB,UAAU,OAAO,WAAW,MAAM;AACnD,YAAI,CAAC,MAAM,KAAK,KAAK,CAAC,UAAU;AAC9B,qBAAW,CAAC,CAAC;AACb,qBAAW,KAAK;AAChB;AAAA,QACF;AAEA,YAAI,aAAa;AACf,+BAAqB,OAAO,IAAI;AAChC;AAAA,QACF;AAEA,YAAI,CAAC,SAAS,qBAAqB;AACjC,qBAAW,CAAC,CAAC;AACb,qBAAW,KAAK;AAChB;AAAA,QACF;AAEA,6BAAqB,SAAS,qBAAqB,OAAO,cAAc,IAAI;AAAA,MAC9E,GAAG,WAAW;AAAA,IAChB;AAAA,IACA,CAAC,UAAU,UAAU,cAAc,aAAa,MAAM,UAAU;AAAA,EAClE;AAEA,YAAU,MAAM,MAAM,OAAO,aAAa,mBAAmB,OAAO,GAAG,CAAC,CAAC;AAEzE,QAAM,oBAAoB;AAAA,IACxB,CAAC,QAA8B,UAAkB;AAC/C,oBAAc,KAAK;AACnB,kBAAY,IAAI;AAEhB,UAAI,MAAM,SAAS,kBAAkB;AACnC,mBAAW,IAAI;AACf,8BAAsB,KAAK;AAC3B;AAAA,MACF;AAEA,iBAAW,CAAC,CAAC;AACb,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,CAAC,uBAAuB,eAAe,aAAa,UAAU;AAAA,EAChE;AAEA,SAAO,EAAE,SAAS,kBAAkB;AACtC;","names":[]}

package/dist/chunk-HGVERQTG.js

@@ -0,0 +1,181 @@
+import {
+  DEFAULT_QUICK_RANGES
+} from "./chunk-QKLSHNOH.js";
+import {
+  useDateRangePicker
+} from "./chunk-UQSGEEAI.js";
+import {
+  DateRangeQuickList
+} from "./chunk-TXCIFJ6M.js";
+import {
+  DateRangeFields
+} from "./chunk-B6FRVP2R.js";
+import {
+  toLocalDay
+} from "./chunk-FRAVVI4A.js";
+import {
+  Calendar
+} from "./chunk-54OVGXLV.js";
+
+// src/components/form/DateRangePicker/DateRangePicker.tsx
+import { Box, Paper, useMediaQuery } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CALENDAR_CLASS = "date-range-picker__calendar";
+var NARROW_QUERY = "(max-width:899.95px)";
+var ROOT_SX = {
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: 2,
+  p: 2,
+  maxWidth: "100%",
+  // `Calendar` renders its own `Paper` with 24px of padding. Nested in this one
+  // that reads as a box inside a box, so the inner frame is flattened here
+  // through the className hook the component exposes for exactly this.
+  [`& .${CALENDAR_CLASS}`]: {
+    p: 0,
+    boxShadow: "none",
+    backgroundColor: "transparent",
+    backgroundImage: "none"
+  }
+};
+var BODY_SX = {
+  display: "flex",
+  // The quick column sits BESIDE the calendar on a wide screen. Narrow, it
+  // moves ABOVE it — `column-reverse`, so the DOM order stays calendar-then-
+  // list (the calendar is the primary control and should be reached first by a
+  // screen reader and by Tab) while the eye meets the quick ranges first, which
+  // is the order the phone mock asks for and the order a thumb wants: nine
+  // one-tap answers before a grid of thirty.
+  //
+  // A side column at 390px would squeeze the day grid to roughly half its width
+  // and make the numbers unreadable. Checked at 390px.
+  flexDirection: { xs: "column-reverse", md: "row" },
+  alignItems: { xs: "stretch", md: "flex-start" },
+  gap: 2,
+  maxWidth: "100%"
+};
+var QUICK_DIVIDER_SX = {
+  borderColor: "divider",
+  borderStyle: "solid",
+  borderWidth: 0,
+  borderLeftWidth: { xs: 0, md: "1px" },
+  borderBottomWidth: { xs: "1px", md: 0 },
+  pl: { xs: 0, md: 2 },
+  pb: { xs: 2, md: 0 },
+  alignSelf: "stretch"
+};
+var FIELDS_DIVIDER_SX = {
+  borderTop: "1px solid",
+  borderColor: "divider",
+  pt: 2
+};
+function useMonthCount(requested) {
+  const narrow = useMediaQuery(NARROW_QUERY);
+  return narrow ? 1 : requested;
+}
+function RangeCalendar({
+  calendarLabel,
+  picker,
+  value,
+  locale,
+  weekStartsOn,
+  months,
+  maxRangeDays
+}) {
+  return /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      ariaLabel: calendarLabel,
+      className: CALENDAR_CLASS,
+      selectionMode: "range",
+      locale,
+      firstDayOfWeek: weekStartsOn,
+      numberOfMonths: months,
+      range: { start: toLocalDay(value.from), end: toLocalDay(value.to) },
+      onIntermediateRangeChange: picker.pickOnCalendar,
+      onRangeChange: picker.pickOnCalendar,
+      maxRangeLength: maxRangeDays
+    },
+    picker.viewNonce
+  );
+}
+function QuickColumn({
+  picker,
+  maxRangeDays,
+  dataTestId
+}) {
+  if (picker.options.length === 0) return null;
+  return /* @__PURE__ */ jsx(Box, { sx: QUICK_DIVIDER_SX, children: /* @__PURE__ */ jsx(
+    DateRangeQuickList,
+    {
+      options: picker.options,
+      activeId: picker.activeId,
+      onPick: picker.pickQuick,
+      reasonFor: (option) => picker.copy.overMax({ maxRangeDays: maxRangeDays ?? option.days, days: option.days }),
+      label: picker.copy.quickRanges,
+      dataTestId
+    }
+  ) });
+}
+function DateRangePicker({
+  value,
+  onChange,
+  timeZone,
+  now,
+  maxRangeDays,
+  weekStartsOn = 0,
+  quickRanges = DEFAULT_QUICK_RANGES,
+  locale = "en-US",
+  numberOfMonths,
+  messages,
+  dataTestId = "date-range-picker",
+  className
+}) {
+  const picker = useDateRangePicker({
+    value,
+    onChange,
+    timeZone,
+    now,
+    maxRangeDays,
+    weekStartsOn,
+    quickRanges,
+    messages
+  });
+  const months = useMonthCount(numberOfMonths);
+  return /* @__PURE__ */ jsxs(Paper, { className, "data-testid": dataTestId, sx: ROOT_SX, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: BODY_SX, children: [
+      /* @__PURE__ */ jsx(
+        RangeCalendar,
+        {
+          calendarLabel: picker.copy.calendarLabel,
+          picker,
+          value,
+          locale,
+          weekStartsOn,
+          months,
+          maxRangeDays
+        }
+      ),
+      /* @__PURE__ */ jsx(QuickColumn, { picker, maxRangeDays, dataTestId })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: FIELDS_DIVIDER_SX, children: /* @__PURE__ */ jsx(
+      DateRangeFields,
+      {
+        value,
+        status: picker.status,
+        messages: picker.copy,
+        maxRangeDays,
+        onEdit: picker.editBound,
+        statusId: picker.statusId,
+        dataTestId
+      }
+    ) })
+  ] });
+}
+var DateRangePicker_default = DateRangePicker;
+
+export {
+  DateRangePicker,
+  DateRangePicker_default
+};
+//# sourceMappingURL=chunk-HGVERQTG.js.map

package/dist/chunk-HGVERQTG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\n/**\n * Three views of ONE range: a calendar, a quick-pick column, and two typed\n * dates. Change any and the other two follow.\n *\n * WHY IT EXISTS: a range calendar alone makes \"this quarter\" cost two clicks,\n * a month of paging, and a mental note of which day a quarter starts on; a list\n * of presets alone cannot express \"the 3rd to the 19th\"; and typed fields alone\n * make you spell out a window you can see. Each of the three is the fastest\n * route to a different range, so the control offers all three over one value\n * rather than picking a favourite.\n *\n * WHAT IT DOES NOT KNOW: anything about the data behind the range. No preset\n * list of a product's own, no ceiling of its own, no notion of whose clock\n * \"today\" runs on — `quickRanges`, `maxRangeDays` and `timeZone` are props, and\n * a consumer that needs its own periods passes them rather than teaching this\n * file about its domain. The calendar is `Calendar` in `selectionMode=\"range\"`,\n * not a second implementation of one.\n *\n * The value is a DRAFT (`{ from, to }`, either end possibly null) rather than a\n * finished window, so a half-picked or impossible range has somewhere to live\n * while it is being fixed. Every `onChange` carries the verdict with it.\n */\nimport { Box, Paper, useMediaQuery } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material';\nimport React from 'react';\n\nimport { Calendar } from '../Calendar';\n\nimport { toLocalDay } from './DateRangePicker.dates';\nimport { useDateRangePicker } from './DateRangePicker.hooks';\nimport { DEFAULT_QUICK_RANGES } from './DateRangePicker.quick';\nimport type { DateRangeDraft, DateRangePickerProps, WeekStart } from './DateRangePicker.types';\nimport { DateRangeFields } from './DateRangePickerFields';\nimport { DateRangeQuickList } from './DateRangePickerQuickList';\n\nconst CALENDAR_CLASS = 'date-range-picker__calendar';\n\n/** Below this the picker is a phone layout. MUI's own `md`, written out. */\nconst NARROW_QUERY = '(max-width:899.95px)';\n\nconst ROOT_SX: SxProps<Theme> = {\n  display: 'inline-flex',\n  flexDirection: 'column',\n  gap: 2,\n  p: 2,\n  maxWidth: '100%',\n  // `Calendar` renders its own `Paper` with 24px of padding. Nested in this one\n  // that reads as a box inside a box, so the inner frame is flattened here\n  // through the className hook the component exposes for exactly this.\n  [`& .${CALENDAR_CLASS}`]: {\n    p: 0,\n    boxShadow: 'none',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n  },\n};\n\nconst BODY_SX: SxProps<Theme> = {\n  display: 'flex',\n  // The quick column sits BESIDE the calendar on a wide screen. Narrow, it\n  // moves ABOVE it — `column-reverse`, so the DOM order stays calendar-then-\n  // list (the calendar is the primary control and should be reached first by a\n  // screen reader and by Tab) while the eye meets the quick ranges first, which\n  // is the order the phone mock asks for and the order a thumb wants: nine\n  // one-tap answers before a grid of thirty.\n  //\n  // A side column at 390px would squeeze the day grid to roughly half its width\n  // and make the numbers unreadable. Checked at 390px.\n  flexDirection: { xs: 'column-reverse', md: 'row' },\n  alignItems: { xs: 'stretch', md: 'flex-start' },\n  gap: 2,\n  maxWidth: '100%',\n};\n\n/**\n * The rule between the calendar and the quick ranges.\n *\n * Two lists of dates side by side with only whitespace between them read as one\n * ragged thing; the rule says which numbers belong to which control. It turns\n * with the layout — a vertical rule when the list is a column beside the\n * calendar, a horizontal one when it has moved above it — because a divider\n * that keeps its axis while the flex direction flips ends up separating nothing.\n */\nconst QUICK_DIVIDER_SX: SxProps<Theme> = {\n  borderColor: 'divider',\n  borderStyle: 'solid',\n  borderWidth: 0,\n  borderLeftWidth: { xs: 0, md: '1px' },\n  borderBottomWidth: { xs: '1px', md: 0 },\n  pl: { xs: 0, md: 2 },\n  pb: { xs: 2, md: 0 },\n  alignSelf: 'stretch',\n};\n\n/** And the rule above the typed pair, which is a third way in, not a caption. */\nconst FIELDS_DIVIDER_SX: SxProps<Theme> = {\n  borderTop: '1px solid',\n  borderColor: 'divider',\n  pt: 2,\n};\n\ntype Picker = ReturnType<typeof useDateRangePicker>;\n\n/**\n * How many months to draw.\n *\n * A month grid has a floor: seven columns that must stay legible, which is\n * about 280px. Two of them need 580, so on a phone the consumer's\n * `numberOfMonths` is not a preference that can be honoured — it is a request\n * for a layout that does not fit. Capped here rather than left to the consumer,\n * because the consumer chooses for its own reason (the reports dialog wants two\n * because a period often crosses a month boundary) and has no way to know the\n * picker is currently 390px wide.\n *\n * A media query rather than an `sx` breakpoint: this decides what to RENDER,\n * and CSS cannot un-render a second month.\n *\n * The query is a LITERAL, not `theme.breakpoints.down('md')`. The callback form\n * reads the theme from context and throws on a null one, so a consumer that\n * mounts this outside a `ThemeProvider` would crash — which the unit tests here\n * do, and which is a fair thing for a consumer to do.\n */\nfunction useMonthCount(requested: number | undefined): number | undefined {\n  const narrow = useMediaQuery(NARROW_QUERY);\n  return narrow ? 1 : requested;\n}\n\n/** The grid, in range mode — `Calendar`, never a second implementation of one. */\nfunction RangeCalendar({\n  calendarLabel,\n  picker,\n  value,\n  locale,\n  weekStartsOn,\n  months,\n  maxRangeDays,\n}: {\n  picker: Picker;\n  value: DateRangeDraft;\n  locale: string;\n  weekStartsOn: WeekStart;\n  months: number | undefined;\n  maxRangeDays: number | undefined;\n  calendarLabel: string;\n}): React.JSX.Element {\n  return (\n    <Calendar\n      key={picker.viewNonce}\n      ariaLabel={calendarLabel}\n      className={CALENDAR_CLASS}\n      selectionMode=\"range\"\n      locale={locale}\n      // One prop drives the grid's first column AND the day \"this week\" starts\n      // on, so a highlighted week can never begin mid-row.\n      firstDayOfWeek={weekStartsOn}\n      numberOfMonths={months}\n      range={{ start: toLocalDay(value.from), end: toLocalDay(value.to) }}\n      // BOTH callbacks, and the intermediate one does the work: the other fires\n      // only on the click that CLOSES a range, so a picker wired to it alone\n      // would not repaint after the first click.\n      onIntermediateRangeChange={picker.pickOnCalendar}\n      onRangeChange={picker.pickOnCalendar}\n      // The same ceiling the quick list is judged against, so the calendar\n      // cannot hand back a window the control has just called too long.\n      maxRangeLength={maxRangeDays}\n    />\n  );\n}\n\n/** The quick ranges, inside the rule that separates them from the grid. */\nfunction QuickColumn({\n  picker,\n  maxRangeDays,\n  dataTestId,\n}: {\n  picker: Picker;\n  maxRangeDays: number | undefined;\n  dataTestId: string;\n}): React.JSX.Element | null {\n  if (picker.options.length === 0) return null;\n  return (\n    <Box sx={QUICK_DIVIDER_SX}>\n      <DateRangeQuickList\n        options={picker.options}\n        activeId={picker.activeId}\n        onPick={picker.pickQuick}\n        reasonFor={(option) =>\n          picker.copy.overMax({ maxRangeDays: maxRangeDays ?? option.days, days: option.days })\n        }\n        label={picker.copy.quickRanges}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n}\n\nexport function DateRangePicker({\n  value,\n  onChange,\n  timeZone,\n  now,\n  maxRangeDays,\n  weekStartsOn = 0,\n  quickRanges = DEFAULT_QUICK_RANGES,\n  locale = 'en-US',\n  numberOfMonths,\n  messages,\n  dataTestId = 'date-range-picker',\n  className,\n}: DateRangePickerProps): React.JSX.Element {\n  const picker = useDateRangePicker({\n    value,\n    onChange,\n    timeZone,\n    now,\n    maxRangeDays,\n    weekStartsOn,\n    quickRanges,\n    messages,\n  });\n  const months = useMonthCount(numberOfMonths);\n\n  return (\n    <Paper className={className} data-testid={dataTestId} sx={ROOT_SX}>\n      <Box sx={BODY_SX}>\n        <RangeCalendar\n          calendarLabel={picker.copy.calendarLabel}\n          picker={picker}\n          value={value}\n          locale={locale}\n          weekStartsOn={weekStartsOn}\n          months={months}\n          maxRangeDays={maxRangeDays}\n        />\n        <QuickColumn picker={picker} maxRangeDays={maxRangeDays} dataTestId={dataTestId} />\n      </Box>\n      <Box sx={FIELDS_DIVIDER_SX}>\n        <DateRangeFields\n          value={value}\n          status={picker.status}\n          messages={picker.copy}\n          maxRangeDays={maxRangeDays}\n          onEdit={picker.editBound}\n          statusId={picker.statusId}\n          dataTestId={dataTestId}\n        />\n      </Box>\n    </Paper>\n  );\n}\n\nexport default DateRangePicker;\n"],"mappings":"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","names":[]}

package/dist/chunk-HIRSTFDW.js

@@ -0,0 +1,114 @@
+// src/components/form/ToggleGroup/ToggleGroup.tsx
+import { alpha, Box, ToggleButton, ToggleButtonGroup, useTheme } from "@mui/material";
+import { styled } from "@mui/material";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return {
+      main: theme.palette.grey[700],
+      dark: theme.palette.grey[800],
+      light: theme.palette.grey[500],
+      contrastText: theme.palette.getContrastText(theme.palette.grey[700])
+    };
+  }
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const palette = colorMap[color] || theme.palette.primary;
+  return {
+    main: palette.main,
+    dark: palette.dark || palette.main,
+    light: palette.light || palette.main,
+    contrastText: palette.contrastText || theme.palette.getContrastText(palette.main)
+  };
+};
+var StyledToggleGroup = styled(ToggleButtonGroup, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glass"].includes(prop)
+})(({ theme, glass }) => ({
+  backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : "transparent",
+  backdropFilter: glass ? "blur(20px)" : "none",
+  borderRadius: theme.spacing(1),
+  padding: glass ? 4 : 0,
+  border: glass ? `1px solid ${alpha(theme.palette.divider, 0.2)}` : "none",
+  "& .MuiToggleButtonGroup-grouped": {
+    margin: theme.spacing(0.5),
+    border: 0,
+    borderRadius: `${theme.shape.borderRadius}px !important`
+  }
+}));
+var ToggleGroup = forwardRef(
+  ({
+    variant = "single",
+    color = "primary",
+    size = "md",
+    options,
+    glass = false,
+    gradient = false,
+    value,
+    onChange,
+    dataTestId = "toggle-group",
+    ...props
+  }, ref) => {
+    const theme = useTheme();
+    const colorPalette = getColorFromTheme(theme, color);
+    const sizeMap = {
+      xs: { padding: "4px 8px", fontSize: "0.75rem" },
+      sm: { padding: "6px 12px", fontSize: "0.875rem" },
+      md: { padding: "8px 16px", fontSize: "1rem" },
+      lg: { padding: "10px 20px", fontSize: "1.125rem" },
+      xl: { padding: "12px 24px", fontSize: "1.25rem" }
+    };
+    return /* @__PURE__ */ jsx(
+      StyledToggleGroup,
+      {
+        ref,
+        customColor: color,
+        customSize: size,
+        glass,
+        value,
+        onChange,
+        exclusive: variant === "exclusive" || variant === "single",
+        "data-testid": dataTestId,
+        ...props,
+        children: options.map((option) => /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            "data-testid": `${dataTestId}-item-${option.value}`,
+            sx: {
+              textTransform: "none",
+              fontWeight: 500,
+              transition: "all 0.3s ease",
+              ...sizeMap[size],
+              "&.Mui-selected": {
+                backgroundColor: colorPalette.main,
+                color: colorPalette.contrastText,
+                ...gradient && {
+                  background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`
+                }
+              }
+            },
+            children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              option.icon,
+              option.label
+            ] })
+          },
+          option.value
+        ))
+      }
+    );
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+export {
+  ToggleGroup
+};
+//# sourceMappingURL=chunk-HIRSTFDW.js.map

package/dist/chunk-HNIC46DX.js

@@ -0,0 +1,177 @@
+import {
+  useColumnsWithActions,
+  useRenderedColumns
+} from "./chunk-XTMVF3YN.js";
+import {
+  filterRows
+} from "./chunk-YGQX7BNI.js";
+import {
+  useSelection
+} from "./chunk-WTOTWP6A.js";
+import {
+  resolveScope,
+  useScopeConfigChecks
+} from "./chunk-JDQACVKT.js";
+import {
+  computeActiveFilterCount,
+  defaultSortFields
+} from "./chunk-Y6SB4WU2.js";
+import {
+  serverDerived,
+  useServerQuery
+} from "./chunk-IMLIIW77.js";
+import {
+  emptyViewState
+} from "./chunk-C6ATAHBX.js";
+
+// src/components/data-display/DataViews/use-data-views-state.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+function useMatchedRows(server, rows, columns, fields, rangeFields, state) {
+  return useMemo(
+    () => server ? rows : filterRows(
+      rows,
+      columns,
+      fields,
+      { search: state.search, pills: state.pills, ranges: state.ranges },
+      rangeFields
+    ),
+    [server, rows, columns, fields, rangeFields, state.search, state.pills, state.ranges]
+  );
+}
+function nextVisibleColumns(current, id, visible) {
+  const without = current.filter((colId) => colId !== id);
+  return visible ? [...without, id] : without;
+}
+function useStateSyncEffects(appliedState, syncState, state, onStateChange, setState) {
+  const firstApplied = useRef(true);
+  useEffect(() => {
+    if (firstApplied.current) {
+      firstApplied.current = false;
+      return;
+    }
+    if (appliedState) setState(appliedState);
+  }, [appliedState, setState]);
+  const firstSync = useRef(true);
+  useEffect(() => {
+    if (firstSync.current) {
+      firstSync.current = false;
+      return;
+    }
+    if (syncState) setState((prev) => ({ ...prev, ...syncState }));
+  }, [syncState, setState]);
+  useEffect(() => {
+    onStateChange?.(state);
+  }, [state, onStateChange]);
+}
+function seedState(appliedState, syncState, allColumnIds) {
+  const seed = appliedState ?? emptyViewState(allColumnIds);
+  return syncState ? { ...seed, ...syncState } : seed;
+}
+function makeSetScope(patch, clearSelection) {
+  return (id) => {
+    patch({ scope: id });
+    clearSelection();
+  };
+}
+function orderedColumnIds(allColumnIds, order) {
+  if (!order || order.length === 0) return allColumnIds;
+  const declared = new Set(allColumnIds);
+  const kept = order.filter((id) => declared.has(id));
+  const seen = new Set(kept);
+  return [...kept, ...allColumnIds.filter((id) => !seen.has(id))];
+}
+function liveQuery(state, scope, server, matchedCount) {
+  return {
+    search: state.search,
+    pills: state.pills,
+    ranges: state.ranges ?? {},
+    sortBy: state.sortBy,
+    // Absent, not undefined, when the table declares no scopes.
+    ...scope !== void 0 ? { scope } : {},
+    page: server?.page ?? 1,
+    // Client mode has one page, and it is everything that matched.
+    pageSize: server?.pageSize ?? matchedCount
+  };
+}
+function activeSortOf(state, resolvedSortFields) {
+  const active = state.sortBy?.[0];
+  return {
+    activeSortField: active?.id ?? resolvedSortFields[0]?.value ?? "",
+    activeSortOrder: active?.dir === "desc" ? "desc" : "asc"
+  };
+}
+function useDataViewsState({
+  rows,
+  columns,
+  fields,
+  rangeFields,
+  getRowId,
+  onRowClick,
+  appliedState,
+  syncState,
+  onStateChange,
+  testIdPrefix,
+  sortFields,
+  rowActions,
+  rowActionsLeading,
+  renderRowMenu,
+  server,
+  scopes = [],
+  scopeFieldId
+}) {
+  useScopeConfigChecks(scopes, fields.map((field) => field.id), scopeFieldId, server !== void 0);
+  const { columnsWithActions, allColumnIds } = useColumnsWithActions(columns, {
+    rowActions,
+    rowActionsLeading,
+    renderRowMenu,
+    testIdPrefix,
+    getRowId
+  });
+  const [state, setState] = useState(
+    () => seedState(appliedState, syncState, allColumnIds)
+  );
+  const [filterOpen, setFilterOpen] = useState(false);
+  useStateSyncEffects(appliedState, syncState, state, onStateChange, setState);
+  const patch = (next) => setState((prev) => ({ ...prev, ...next }));
+  const matched = useMatchedRows(server, rows, columns, fields, rangeFields, state);
+  const scope = resolveScope(scopes, state.scope);
+  const { changePage } = useServerQuery(server, state, scope);
+  const { gridColumns, hideableColumns } = useRenderedColumns(
+    columnsWithActions,
+    state.visibleColumns,
+    onRowClick,
+    state.order
+  );
+  const toggleColumn = (id, visible) => setState((prev) => ({ ...prev, visibleColumns: nextVisibleColumns(prev.visibleColumns, id, visible) }));
+  const selection = useSelection(matched, getRowId);
+  const resolvedSortFields = sortFields ?? defaultSortFields(columns);
+  return {
+    state,
+    ranges: state.ranges ?? {},
+    patch,
+    matched,
+    gridColumns,
+    hideableColumns,
+    columnOrder: orderedColumnIds(allColumnIds, state.order),
+    toggleColumn,
+    ...selection,
+    filterOpen,
+    setFilterOpen,
+    resolvedSortFields,
+    ...activeSortOf(state, resolvedSortFields),
+    activeFilterCount: computeActiveFilterCount(state, fields, rangeFields),
+    ...serverDerived(server, matched.length),
+    changePage,
+    scope,
+    setScope: makeSetScope(patch, selection.clearSelection),
+    currentQuery: liveQuery(state, scope, server, matched.length),
+    // Verbatim, or absent. See DataViewServer.scopeCounts for why there is no
+    // client-side fallback.
+    scopeCounts: server?.scopeCounts
+  };
+}
+
+export {
+  useDataViewsState
+};
+//# sourceMappingURL=chunk-HNIC46DX.js.map

package/dist/chunk-HNIC46DX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/use-data-views-state.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { type GridColumn } from \"../DataGrid\";\nimport { type SortFieldDefinition } from \"../../layout/ContentToolbar\";\n\nimport { filterRows } from \"./data-views-filter\";\nimport {\n  useColumnsWithActions,\n  useRenderedColumns,\n  type HideableColumn,\n} from \"./data-views-columns\";\nimport { computeActiveFilterCount, defaultSortFields } from \"./data-views-grid-helpers\";\nimport { resolveScope, useScopeConfigChecks, type ScopeConfig } from \"./data-views-scopes\";\nimport { serverDerived, useServerQuery } from \"./data-views-server-query\";\nimport { useSelection } from \"./data-views-selection\";\nimport {\n  emptyViewState,\n  type DataViewColumn,\n  type DataViewServer,\n  type DataViewState,\n  type DataViewSyncState,\n  type FilterFieldConfig,\n  type RangeFieldConfig,\n  type DataViewQuery,\n  type RangeValue,\n  type RowAction,\n} from \"./data-views-types\";\n\nexport type { HideableColumn };\n\n/** Inputs the hook needs to own the view state + derived data. */\ninterface UseDataViewsStateArgs<T extends Record<string, unknown>> {\n  rows: T[];\n  columns: DataViewColumn<T>[];\n  fields: FilterFieldConfig<T>[];\n  rangeFields: RangeFieldConfig<T>[];\n  getRowId: (row: T) => string | number;\n  onRowClick?: (row: T) => void;\n  appliedState?: DataViewState;\n  /**\n   * URL-driven controls (search/pills/ranges/sort) that re-apply on reference\n   * change while preserving column visibility — see {@link DataViewSyncState}.\n   */\n  syncState?: DataViewSyncState;\n  onStateChange?: (state: DataViewState) => void;\n  testIdPrefix: string;\n  sortFields?: SortFieldDefinition[];\n  rowActions?: RowAction<T>[];\n  rowActionsLeading?: (row: T) => React.ReactNode;\n  /** Bespoke per-row menu rendered in the actions column instead of the auto kebab. */\n  renderRowMenu?: (row: T) => React.ReactNode;\n  /**\n   * When present, the table is BACKEND-driven: `rows` is already the current\n   * page (no in-browser filter/sort/paginate), and query changes re-fetch via\n   * `server.onQueryChange`. Omit for the legacy client-side behaviour.\n   */\n  server?: DataViewServer;\n  /**\n   * The page-level partition rendered as tabs under the toolbar. Requires server\n   * mode: a scope is applied at the BACKEND, never in the browser.\n   */\n  scopes?: ScopeConfig[];\n  /**\n   * The row field the scopes partition by, when the host knows it — used only to\n   * reject the pill/scope clash at setup. See `assertNoScopePillOverlap`.\n   */\n  scopeFieldId?: string;\n}\n\n/** Everything the DataViewsGrid render needs; keeps the component itself thin. */\nexport interface DataViewsController<T extends Record<string, unknown>> {\n  state: DataViewState;\n  ranges: Record<string, RangeValue>;\n  patch: (next: Partial<DataViewState>) => void;\n  matched: T[];\n  gridColumns: GridColumn<T>[];\n  /** Columns eligible for the show/hide menu (hideable, with a text header). */\n  hideableColumns: HideableColumn[];\n  /** Every column id in reading order — what the Colunas tab reorders. */\n  columnOrder: string[];\n  /** Toggle one column's visibility in the current view state. */\n  toggleColumn: (id: string, visible: boolean) => void;\n  selectedIds: Set<string | number>;\n  setSelectedIds: (ids: Set<string | number>) => void;\n  /**\n   * Add/remove ONE id from the selection. The card and board bodies both need\n   * it, so it lives here rather than being written out twice at the call sites —\n   * one selection model, one toggle, identical in every layout.\n   */\n  toggleId: (id: string | number) => void;\n  selectedRows: T[];\n  clearSelection: () => void;\n  selectAll: () => void;\n  filterOpen: boolean;\n  setFilterOpen: (open: boolean) => void;\n  resolvedSortFields: SortFieldDefinition[];\n  activeSortField: string;\n  activeSortOrder: \"asc\" | \"desc\";\n  activeFilterCount: number;\n  /** True when the table is backend-driven (server mode). */\n  serverMode: boolean;\n  /** Server-mode pagination: 1-based current page (1 when client mode). */\n  serverPage: number;\n  /** Server-mode pagination: total pages (1 when client mode). */\n  serverPageCount: number;\n  /** Server-mode: total matched rows across all pages (drives the counter). */\n  serverTotalCount: number;\n  /** Server-mode: request a specific 1-based page (re-fetches via onQueryChange). */\n  changePage: (page: number) => void;\n  /**\n   * The active scope id, RESOLVED against the declared scopes (see\n   * `resolveScope`). `undefined` when the table declares none — which is what\n   * keeps `scope` out of the emitted query for every table that never opted in.\n   */\n  scope: string | undefined;\n  /** Select a scope: re-fetches from page 1 and drops the selection. */\n  setScope: (id: string) => void;\n  /**\n   * The query the grid is currently showing. Read by Export, which hands it\n   * back to the host UNPAGINATED — so an export follows the filters rather\n   * than the 25 rows that happen to be loaded.\n   */\n  currentQuery: DataViewQuery;\n  /**\n   * Server-supplied per-scope totals, passed through verbatim, or `undefined`\n   * when the server omits them. NEVER falls back to counting `matched`: a count\n   * off the loaded page is wrong under pagination, which is the bug scopes fix.\n   */\n  scopeCounts?: Record<string, number>;\n}\n\n/**\n * The rows to render: in server mode `rows` is already the current page (the\n * backend filtered/sorted/paginated), so it passes through untouched; otherwise\n * the client search/pill/range filter narrows it.\n */\nfunction useMatchedRows<T extends Record<string, unknown>>(\n  server: DataViewServer | undefined,\n  rows: T[],\n  columns: DataViewColumn<T>[],\n  fields: FilterFieldConfig<T>[],\n  rangeFields: RangeFieldConfig<T>[],\n  state: DataViewState,\n): T[] {\n  return useMemo(\n    () =>\n      server\n        ? rows\n        : filterRows(\n            rows,\n            columns,\n            fields,\n            { search: state.search, pills: state.pills, ranges: state.ranges },\n            rangeFields,\n          ),\n    [server, rows, columns, fields, rangeFields, state.search, state.pills, state.ranges],\n  );\n}\n\n/** Add or remove one column id from the visible-columns list. */\nfunction nextVisibleColumns(current: string[], id: string, visible: boolean): string[] {\n  const without = current.filter((colId) => colId !== id);\n  return visible ? [...without, id] : without;\n}\n\n/**\n * Reconcile external state changes and surface every change to the caller:\n * - `appliedState` (a saved view) fully REPLACES the state — it is columns-\n *   authoritative, so applying a view restores its filters, sort AND columns.\n * - `syncState` (URL-driven controls) MERGES over the current state, leaving\n *   `visibleColumns` untouched — so browser back/forward or a same-route\n *   deep-link re-applies search/pills/sort without wiping a user's hidden columns.\n * Each channel only fires when its own reference changes (after the first run).\n */\nfunction useStateSyncEffects(\n  appliedState: DataViewState | undefined,\n  syncState: DataViewSyncState | undefined,\n  state: DataViewState,\n  onStateChange: ((state: DataViewState) => void) | undefined,\n  setState: React.Dispatch<React.SetStateAction<DataViewState>>,\n): void {\n  const firstApplied = useRef(true);\n  useEffect(() => {\n    if (firstApplied.current) {\n      firstApplied.current = false;\n      return;\n    }\n    if (appliedState) setState(appliedState);\n    // `setState` is a stable useState setter (passed in), included to satisfy\n    // exhaustive-deps; the effect still only re-applies when `appliedState` changes.\n  }, [appliedState, setState]);\n  const firstSync = useRef(true);\n  useEffect(() => {\n    if (firstSync.current) {\n      firstSync.current = false;\n      return;\n    }\n    // Merge — keep the current `visibleColumns` (never URL-carried); only the\n    // URL-driven controls change.\n    if (syncState) setState((prev) => ({ ...prev, ...syncState }));\n  }, [syncState, setState]);\n  useEffect(() => {\n    onStateChange?.(state);\n  }, [state, onStateChange]);\n}\n\n/**\n * The seed view state: a saved view (`appliedState`) or a pristine all-columns\n * one, with the URL-driven controls (`syncState`) merged over it so a deep-linked\n * filter or scope is reflected on the FIRST render. Column visibility is never\n * URL-carried, so the merge cannot wipe it.\n */\nfunction seedState(\n  appliedState: DataViewState | undefined,\n  syncState: DataViewSyncState | undefined,\n  allColumnIds: string[],\n): DataViewState {\n  const seed = appliedState ?? emptyViewState(allColumnIds);\n  return syncState ? { ...seed, ...syncState } : seed;\n}\n\n/**\n * Selecting a scope: record it, then DROP the selection.\n *\n * A scope change renders a different result set. A selection that survived it\n * would let a bulk action run against rows the user can no longer see — the\n * same reason changing any other part of the query clears it.\n */\nfunction makeSetScope(\n  patch: (next: Partial<DataViewState>) => void,\n  clearSelection: () => void,\n): (id: string) => void {\n  return (id) => {\n    patch({ scope: id });\n    clearSelection();\n  };\n}\n\n/**\n * The declared column ids in the stored reading order — the same tolerance\n * `applyOrder` uses, so the Colunas tab lists exactly what the grid renders.\n */\nfunction orderedColumnIds(allColumnIds: string[], order: string[] | undefined): string[] {\n  if (!order || order.length === 0) return allColumnIds;\n  const declared = new Set(allColumnIds);\n  const kept = order.filter((id) => declared.has(id));\n  const seen = new Set(kept);\n  return [...kept, ...allColumnIds.filter((id) => !seen.has(id))];\n}\n\n/**\n * The query the grid is currently SHOWING — the same shape `onQueryChange`\n * emits, kept as a value so a host control (Exportar) can re-run it against the\n * backend rather than reading the loaded rows.\n */\nfunction liveQuery(\n  state: DataViewState,\n  scope: string | undefined,\n  server: DataViewServer | undefined,\n  matchedCount: number,\n): DataViewQuery {\n  return {\n    search: state.search,\n    pills: state.pills,\n    ranges: state.ranges ?? {},\n    sortBy: state.sortBy,\n    // Absent, not undefined, when the table declares no scopes.\n    ...(scope !== undefined ? { scope } : {}),\n    page: server?.page ?? 1,\n    // Client mode has one page, and it is everything that matched.\n    pageSize: server?.pageSize ?? matchedCount,\n  };\n}\n\n/** The toolbar's active sort, read off the state's FIRST sort entry. */\nfunction activeSortOf(\n  state: DataViewState,\n  resolvedSortFields: SortFieldDefinition[],\n): { activeSortField: string; activeSortOrder: \"asc\" | \"desc\" } {\n  const active = state.sortBy?.[0];\n  return {\n    activeSortField: active?.id ?? resolvedSortFields[0]?.value ?? \"\",\n    activeSortOrder: active?.dir === \"desc\" ? \"desc\" : \"asc\",\n  };\n}\n\n/**\n * Owns the DataViews view state (search/pills/ranges/sort/visibleColumns),\n * multi-select, the filter-panel toggle, and every derived value (filtered rows,\n * grid columns, active sort/filter counts). Extracted from the component so the\n * render stays within the size/complexity budget.\n */\nexport function useDataViewsState<T extends Record<string, unknown>>({\n  rows,\n  columns,\n  fields,\n  rangeFields,\n  getRowId,\n  onRowClick,\n  appliedState,\n  syncState,\n  onStateChange,\n  testIdPrefix,\n  sortFields,\n  rowActions,\n  rowActionsLeading,\n  renderRowMenu,\n  server,\n  scopes = [],\n  scopeFieldId,\n}: UseDataViewsStateArgs<T>): DataViewsController<T> {\n  useScopeConfigChecks(scopes, fields.map((field) => field.id), scopeFieldId, server !== undefined);\n  const { columnsWithActions, allColumnIds } = useColumnsWithActions(columns, {\n    rowActions,\n    rowActionsLeading,\n    renderRowMenu,\n    testIdPrefix,\n    getRowId,\n  });\n  // Seed once — see {@link seedState}.\n  const [state, setState] = useState<DataViewState>(() =>\n    seedState(appliedState, syncState, allColumnIds),\n  );\n  const [filterOpen, setFilterOpen] = useState(false);\n\n  useStateSyncEffects(appliedState, syncState, state, onStateChange, setState);\n\n  const patch = (next: Partial<DataViewState>): void => setState((prev) => ({ ...prev, ...next }));\n  const matched = useMatchedRows(server, rows, columns, fields, rangeFields, state);\n  // Resolved at READ time, every render: a stale deep link or a saved view naming\n  // a scope that has since been removed falls back to the first declared scope\n  // instead of putting an id the backend rejects on the wire.\n  const scope = resolveScope(scopes, state.scope);\n  // Server mode: re-fetch on query change (page resets to 1) + drive pagination.\n  const { changePage } = useServerQuery(server, state, scope);\n  const { gridColumns, hideableColumns } = useRenderedColumns(\n    columnsWithActions,\n    state.visibleColumns,\n    onRowClick,\n    state.order,\n  );\n  const toggleColumn = (id: string, visible: boolean): void =>\n    setState((prev) => ({ ...prev, visibleColumns: nextVisibleColumns(prev.visibleColumns, id, visible) }));\n  const selection = useSelection(matched, getRowId);\n  const resolvedSortFields = sortFields ?? defaultSortFields(columns);\n\n  return {\n    state,\n    ranges: state.ranges ?? {},\n    patch,\n    matched,\n    gridColumns,\n    hideableColumns,\n    columnOrder: orderedColumnIds(allColumnIds, state.order),\n    toggleColumn,\n    ...selection,\n    filterOpen,\n    setFilterOpen,\n    resolvedSortFields,\n    ...activeSortOf(state, resolvedSortFields),\n    activeFilterCount: computeActiveFilterCount(state, fields, rangeFields),\n    ...serverDerived(server, matched.length),\n    changePage,\n    scope,\n    setScope: makeSetScope(patch, selection.clearSelection),\n    currentQuery: liveQuery(state, scope, server, matched.length),\n    // Verbatim, or absent. See DataViewServer.scopeCounts for why there is no\n    // client-side fallback.\n    scopeCounts: server?.scopeCounts,\n  };\n}\n"],"mappings":"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","names":[]}