@carto/ps-react-ui 4.4.2 → 4.5.0

package/src/widgets/table/hooks/use-selection.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react'
 import type { TableRow, TableWidgetState } from '../types'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export interface UseSelectionOptions {
   /** Callback when selection changes */
@@ -48,14 +48,10 @@ export function useSelection(
 ): UseSelectionResult {
   const { onSelectionChange } = options ?? {}
 
-  // Get store actions and state
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const getWidget = useWidgetStore((state) => state.getWidget)
-  const selected = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.widgets[widgetId] as TableWidgetState | undefined
-      return widget?.selected
-    }),
+  // Get store state
+  const selected = useWidgetSelector(
+    widgetId,
+    (w) => (w as TableWidgetState | undefined)?.selected,
   )
 
   // Use store values with fallback to empty array
@@ -91,14 +87,14 @@ export function useSelection(
   // Toggle selection of a single row
   const toggleRow = useCallback(
     (id: string | number) => {
-      const widget = getWidget<TableWidgetState>(widgetId)
+      const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
       const currentSelected = widget?.selected ?? []
 
       const newSelected = currentSelected.includes(id)
         ? currentSelected.filter((s) => s !== id)
         : [...currentSelected, id]
 
-      setWidget<TableWidgetState>(widgetId, {
+      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
         selected: newSelected,
       })
 
@@ -106,13 +102,13 @@ export function useSelection(
         onSelectionChange(newSelected)
       }
     },
-    [getWidget, setWidget, widgetId, onSelectionChange],
+    [widgetId, onSelectionChange],
   )
 
   // Toggle selection of all provided rows
   const toggleAll = useCallback(
     (rows: TableRow[]) => {
-      const widget = getWidget<TableWidgetState>(widgetId)
+      const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
       const currentSelected = widget?.selected ?? []
 
       const rowIds = rows.map((row) => row.id)
@@ -122,7 +118,7 @@ export function useSelection(
         ? currentSelected.filter((id) => !rowIds.includes(id))
         : [...new Set([...currentSelected, ...rowIds])]
 
-      setWidget<TableWidgetState>(widgetId, {
+      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
         selected: newSelected,
       })
 
@@ -130,18 +126,18 @@ export function useSelection(
         onSelectionChange(newSelected)
       }
     },
-    [getWidget, setWidget, widgetId, onSelectionChange],
+    [widgetId, onSelectionChange],
   )
 
   // Select specific rows
   const selectRows = useCallback(
     (ids: (string | number)[]) => {
-      const widget = getWidget<TableWidgetState>(widgetId)
+      const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
       const currentSelected = widget?.selected ?? []
 
       const newSelected = [...new Set([...currentSelected, ...ids])]
 
-      setWidget<TableWidgetState>(widgetId, {
+      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
         selected: newSelected,
       })
 
@@ -149,18 +145,18 @@ export function useSelection(
         onSelectionChange(newSelected)
       }
     },
-    [getWidget, setWidget, widgetId, onSelectionChange],
+    [widgetId, onSelectionChange],
   )
 
   // Deselect specific rows
   const deselectRows = useCallback(
     (ids: (string | number)[]) => {
-      const widget = getWidget<TableWidgetState>(widgetId)
+      const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
       const currentSelected = widget?.selected ?? []
 
       const newSelected = currentSelected.filter((id) => !ids.includes(id))
 
-      setWidget<TableWidgetState>(widgetId, {
+      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
         selected: newSelected,
       })
 
@@ -168,21 +164,21 @@ export function useSelection(
         onSelectionChange(newSelected)
       }
     },
-    [getWidget, setWidget, widgetId, onSelectionChange],
+    [widgetId, onSelectionChange],
   )
 
   // Clear all selections
   const clearSelection = useCallback(() => {
     const newSelected: (string | number)[] = []
 
-    setWidget<TableWidgetState>(widgetId, {
+    widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
       selected: newSelected,
     })
 
     if (onSelectionChange) {
       onSelectionChange(newSelected)
     }
-  }, [setWidget, widgetId, onSelectionChange])
+  }, [widgetId, onSelectionChange])
 
   return {
     selectedIds,

package/src/widgets/table/hooks/use-sort.ts

@@ -6,8 +6,8 @@ import type {
   TableWidgetState,
 } from '../types'
 import { sortData } from '../helpers'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import { DEFAULT_COLUMN_ID, DEFAULT_DIRECTION } from '../config'
 
 export interface UseSortResult<T> extends SortState {
@@ -43,42 +43,25 @@ export function useSort<T extends TableRow>(
   widgetId: string,
   data: T[],
 ): UseSortResult<T> {
-  // Get store actions and state
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const getWidget = useWidgetStore((state) => state.getWidget)
-  const sortEnabled = useWidgetStore(
-    useShallow(
-      (state) =>
-        !!(state.widgets[widgetId] as TableWidgetState | undefined)?.sort,
-    ),
-  )
-  const columnId = useWidgetStore(
-    useShallow(
-      (state) =>
-        (state.widgets[widgetId] as TableWidgetState | undefined)?.sort
-          ?.columnId ?? DEFAULT_COLUMN_ID,
-    ),
-  )
-  const direction = useWidgetStore(
-    useShallow(
-      (state) =>
-        (state.widgets[widgetId] as TableWidgetState | undefined)?.sort
-          ?.direction ?? DEFAULT_DIRECTION,
-    ),
-  )
-
-  const mode = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.widgets[widgetId] as TableWidgetState | undefined
-      return widget?.mode
-    }),
+  // Get store state
+  const { sortEnabled, columnId, direction, mode } = useWidgetSelector(
+    widgetId,
+    (w) => {
+      const widget = w as TableWidgetState | undefined
+      return {
+        sortEnabled: !!widget?.sort,
+        columnId: widget?.sort?.columnId ?? DEFAULT_COLUMN_ID,
+        direction: widget?.sort?.direction ?? DEFAULT_DIRECTION,
+        mode: widget?.mode,
+      }
+    },
   )
 
   // Toggle sort on a column
   const toggleSort = useCallback(
     (toggleColumnId: string) => {
       // Read current state directly from store to avoid stale closures
-      const widget = getWidget<TableWidgetState>(widgetId)
+      const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
       const currentColumnId = widget?.sort?.columnId ?? DEFAULT_COLUMN_ID
       const currentDirection = widget?.sort?.direction ?? DEFAULT_DIRECTION
 
@@ -89,42 +72,42 @@ export function useSort<T extends TableRow>(
         newDirection = currentDirection === 'asc' ? 'desc' : 'asc'
       }
 
-      setWidget<TableWidgetState>(widgetId, {
+      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
         sort: {
           columnId: toggleColumnId,
           direction: newDirection,
         },
       })
     },
-    [getWidget, setWidget, widgetId],
+    [widgetId],
   )
 
   // Set sort state directly
   const setSort = useCallback(
     (newColumnId: string | null, newDirection: SortDirection) => {
-      setWidget<TableWidgetState>(widgetId, {
+      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
         sort: {
           columnId: newColumnId,
           direction: newDirection,
         },
       })
     },
-    [setWidget, widgetId],
+    [widgetId],
   )
 
   // Clear sort
   const clearSort = useCallback(() => {
-    const widget = getWidget<TableWidgetState>(widgetId)
+    const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
     if (!widget?.sort) return
 
-    setWidget<TableWidgetState>(widgetId, {
+    widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
       sort: {
         ...widget.sort,
         columnId: null,
         direction: 'asc',
       },
     })
-  }, [setWidget, getWidget, widgetId])
+  }, [widgetId])
 
   // Sorted data for local mode
   const sortedData = useMemo(() => {

package/src/widgets/table/types.ts

@@ -84,7 +84,7 @@ export interface TableWidgetConfig {
   /** Enable row selection with checkboxes */
   selectable?: boolean
   /** Currently selected row IDs */
-  selected: (string | number)[]
+  selected?: (string | number)[]
   /** Pagination and sort mode: local (client-side) or remote (server-side) */
   mode: Mode
   /** Pagination configuration */

package/src/widgets/timeseries/config.ts

@@ -15,6 +15,7 @@ import {
   createTooltipFormatter,
   createChartDownloadConfig,
   applyYAxisFormatter,
+  applyXAxisFormatter,
 } from '../utils/chart-config'
 
 export const timeseriesDownloadConfig =
@@ -33,6 +34,7 @@ export function timeseriesConfig(
     type: 'timeseries',
     option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
     formatter: props.formatter,
+    labelFormatter: props.labelFormatter,
   }
 }
 
@@ -40,6 +42,7 @@ function getOption({
   data = [],
   theme,
   formatter,
+  labelFormatter,
 }: TimeseriesConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
@@ -73,7 +76,7 @@ function getOption({
   }
 
   return {
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend, labelFormatter }),
     grid: {
       ...buildGridConfig(hasLegend, theme),
       outerBounds: {
@@ -82,18 +85,21 @@ function getOption({
         top: parseInt(theme.spacing(2)),
       },
     },
-    xAxis: {
-      type: 'category',
-      axisTick: {
-        alignWithLabel: true,
+    xAxis: applyXAxisFormatter(
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          show: true,
+          showMaxLabel: true,
+          showMinLabel: true,
+          rotate: 45,
+        },
       },
-      axisLabel: {
-        show: true,
-        showMaxLabel: true,
-        showMinLabel: true,
-        rotate: 45,
-      },
-    },
+      labelFormatter,
+    ),
     yAxis: applyYAxisFormatter(yAxis, formatter),
     tooltip: {
       formatter: createTooltipFormatter((item) => {
@@ -108,7 +114,9 @@ function getOption({
 
         const marker = typeof item.marker === 'string' ? item.marker : ''
         const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
-        const name = item.name ?? ''
+        const name = labelFormatter
+          ? String(labelFormatter(item.name ?? ''))
+          : (item.name ?? '')
 
         return { name, seriesName, marker, value: formattedValue }
       }),

package/src/widgets/utils/chart-config/index.ts

@@ -2,7 +2,7 @@
  * Shared utilities for chart widget configuration
  */
 
-export { defaultFormatter } from '../formatter'
+export { defaultFormatter, defaultLabelFormatter } from '../formatter'
 
 export { createChartWidgetConfig } from './config-factory'
 export type {

package/src/widgets/utils/chart-config/option-builders.ts

@@ -26,10 +26,18 @@ export function niceNum(value: number): number {
 /**
  * Builds standard legend configuration for chart widgets
  *
- * @param hasLegend - Whether to show the legend
+ * @param params - Legend configuration parameters
+ * @param params.hasLegend - Whether to show the legend
+ * @param params.labelFormatter - Optional formatter for legend item names
  * @returns Legend configuration object
  */
-export function buildLegendConfig(hasLegend: boolean): LegendComponentOption {
+export function buildLegendConfig({
+  hasLegend,
+  labelFormatter,
+}: {
+  hasLegend: boolean
+  labelFormatter?: (value: string | number) => string | number
+}): LegendComponentOption {
   return {
     show: hasLegend,
     icon: 'circle' as const,
@@ -37,6 +45,9 @@ export function buildLegendConfig(hasLegend: boolean): LegendComponentOption {
     bottom: 0,
     orient: 'horizontal',
     type: 'scroll',
+    ...(labelFormatter && {
+      formatter: (name: string) => String(labelFormatter(name)),
+    }),
   }
 }
 
@@ -101,25 +112,24 @@ export function createAxisLabelFormatter(
 }
 
 /**
- * Applies formatter to xAxis configuration
- * Only applies to single axis objects (not arrays) with type 'value'
+ * Applies labelFormatter to xAxis configuration
+ * Applies to any xAxis regardless of axis type (category, value, etc.)
  *
  * @param xAxis - Existing xAxis configuration
- * @param formatter - Optional formatter function from widget config
- * @returns Updated xAxis configuration or undefined if no changes needed
+ * @param labelFormatter - Optional labelFormatter function from widget config
+ * @returns Updated xAxis configuration
  */
 export function applyXAxisFormatter(
   xAxis: unknown,
-  formatter?: (value: number) => string,
+  formatter?: (value: string | number) => string | number,
 ) {
-  let axisFormatter = createAxisLabelFormatter(formatter)
-
   const xAxisIsObject = xAxis && !Array.isArray(xAxis)
   const xAxisTyped = xAxis as { type?: string; axisLabel?: unknown }
 
-  if (!xAxisIsObject || xAxisTyped.type !== 'value') {
-    axisFormatter = undefined
-  }
+  const axisFormatter =
+    formatter && xAxisIsObject
+      ? (value: string | number) => String(formatter(value))
+      : undefined
 
   return {
     ...xAxisTyped,

package/src/widgets/utils/formatter.ts

@@ -1 +1,2 @@
-export const defaultFormatter = (value: number) => value.toString()
+export const defaultFormatter = (value: number) => String(value)
+export const defaultLabelFormatter = (value: string | number) => value

package/src/widgets/utils/index.ts

@@ -1,5 +1,5 @@
 // Formatter
-export { defaultFormatter } from './formatter'
+export { defaultFormatter, defaultLabelFormatter } from './formatter'
 
 // Chart configuration
 export { createChartWidgetConfig } from './chart-config'

package/src/widgets/wrapper/wrapper-ui.tsx

@@ -9,8 +9,7 @@ import { Title } from './components/title'
 import type { WrapperState, WrapperUIProps } from './types'
 import { Options } from './components/options'
 import { Actions } from './components/actions'
-import { useWidgetStore } from '../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../stores/use-widget-selector'
 
 const EMPTY_ACTIONS: NonNullable<WrapperUIProps['actions']> = []
 const EMPTY_OPTIONS: NonNullable<WrapperUIProps['options']> = []
@@ -38,17 +37,17 @@ export function WrapperUI({
   options = EMPTY_OPTIONS,
   onChangeCollapsed,
 }: WrapperUIProps) {
-  const title = useWidgetStore(
-    useShallow((state) => state.getWidget<WrapperState>(id)?.title),
-  )
-  const collapsed = useWidgetStore(
-    useShallow((state) => state.getWidget<WrapperState>(id)?.collapsed),
-  )
-  const disabled = useWidgetStore(
-    useShallow((state) => state.getWidget<WrapperState>(id)?.disabled),
-  )
-  const isFetching = useWidgetStore(
-    useShallow((state) => state.getWidget<WrapperState>(id)?.isFetching),
+  // Single consolidated subscription instead of 4 separate ones.
+  const { title, collapsed, disabled, isFetching } = useWidgetSelector(
+    id,
+    (w) => {
+      return {
+        title: (w as WrapperState | undefined)?.title,
+        collapsed: (w as WrapperState | undefined)?.collapsed,
+        disabled: (w as WrapperState | undefined)?.disabled,
+        isFetching: w?.isFetching,
+      }
+    },
   )
 
   return (

package/src/widgets/wrapper/wrapper.tsx

@@ -1,6 +1,6 @@
 import type { WrapperProps, WrapperState } from './types'
 import { WrapperUI } from './wrapper-ui'
-import { useWidgetStore } from '../stores/widget-store'
+import { widgetStoreActions } from '../stores/widget-store'
 import { useLayoutEffect } from 'react'
 
 /**
@@ -29,22 +29,20 @@ export function WidgetWrapper({
   children,
   onChangeCollapsed,
 }: WrapperProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-
   useLayoutEffect(() => {
-    setWidget<WrapperState>(id, {
+    widgetStoreActions.setWidget<WrapperState>(id, {
       collapsed: defaultCollapsed,
       disabled,
       title,
     })
-  }, [defaultCollapsed, disabled, title, id, setWidget])
+  }, [defaultCollapsed, disabled, title, id])
 
   const handleChangeCollapsed = (
     event: React.SyntheticEvent<Element, Event>,
     expanded: boolean,
   ) => {
     onChangeCollapsed?.(event, expanded)
-    setWidget<WrapperState>(id, { collapsed: !expanded })
+    widgetStoreActions.setWidget<WrapperState>(id, { collapsed: !expanded })
   }
 
   return (

package/dist/error-CEkRPccv.js

@@ -1,39 +0,0 @@
-import { jsx as x, jsxs as A } from "react/jsx-runtime";
-import { c as W } from "react/compiler-runtime";
-import { AlertTitle as j, Alert as y } from "@mui/material";
-import { u as g } from "./widget-store-CzDt8oSK.js";
-import { useShallow as f } from "zustand/shallow";
-function T(m) {
-  const e = W(11), {
-    id: r,
-    children: a,
-    title: h,
-    description: p
-  } = m;
-  let o;
-  e[0] !== r ? (o = (t) => t.widgets[r]?.isLoading, e[0] = r, e[1] = o) : o = e[1];
-  const u = g(f(o));
-  let s;
-  e[2] !== r ? (s = (t) => t.widgets[r]?.isFetching, e[2] = r, e[3] = s) : s = e[3];
-  const w = g(f(s));
-  let l;
-  e[4] !== r ? (l = (t) => t.widgets[r]?.error, e[4] = r, e[5] = l) : l = e[5];
-  const c = g(f(l));
-  if (u || w)
-    return a;
-  if (c) {
-    const t = h ?? c.title ?? "Error", d = p ?? c.message ?? "An error occurred while loading the widget. Please try again.";
-    let i;
-    e[6] !== t ? (i = /* @__PURE__ */ x(j, { children: t }), e[6] = t, e[7] = i) : i = e[7];
-    let n;
-    return e[8] !== d || e[9] !== i ? (n = /* @__PURE__ */ A(y, { severity: "error", children: [
-      i,
-      d
-    ] }), e[8] = d, e[9] = i, e[10] = n) : n = e[10], n;
-  }
-  return a;
-}
-export {
-  T as W
-};
-//# sourceMappingURL=error-CEkRPccv.js.map

package/dist/error-CEkRPccv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-CEkRPccv.js","sources":["../src/widgets/error/error.tsx"],"sourcesContent":["import { Alert, AlertTitle } from '@mui/material'\nimport { useWidgetStore } from '../stores/widget-store'\nimport { useShallow } from 'zustand/shallow'\nimport type { WidgetErrorProps } from './types'\n\n/**\n * Displays an error alert when a widget encounters an error during data loading. Reads error state from the widget store and hides errors during loading/fetching to prevent flashing.\n *\n * @example\n * ```tsx\n * <WidgetError id=\"my-widget\">\n *   <WidgetContent />\n * </WidgetError>\n * ```\n */\nexport function WidgetError({\n  id,\n  children,\n  title: titleProp,\n  description,\n}: WidgetErrorProps) {\n  const isLoading = useWidgetStore(\n    useShallow((state) => state.widgets[id]?.isLoading),\n  )\n  const isFetching = useWidgetStore(\n    useShallow((state) => state.widgets[id]?.isFetching),\n  )\n  const error = useWidgetStore(useShallow((state) => state.widgets[id]?.error))\n\n  // Don't show error during loading/fetching states\n  if (isLoading || isFetching) {\n    return children\n  }\n\n  // Show error UI if error exists\n  if (error) {\n    const errorTitle = titleProp ?? error.title ?? 'Error'\n    const errorMessage =\n      description ??\n      error.message ??\n      'An error occurred while loading the widget. Please try again.'\n\n    return (\n      <Alert severity='error'>\n        <AlertTitle>{errorTitle}</AlertTitle>\n        {errorMessage}\n      </Alert>\n    )\n  }\n\n  // No error, render children\n  return children\n}\n"],"names":["WidgetError","t0","$","_c","id","children","title","titleProp","description","t1","state","widgets","isLoading","useWidgetStore","useShallow","t2","state_0","isFetching","t3","state_1","error","errorTitle","errorMessage","message","t4","AlertTitle","t5","jsxs","Alert"],"mappings":";;;;;AAeO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAqB;AAAA,IAAAC,IAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,OAAAC;AAAAA,IAAAC,aAAAA;AAAAA,EAAAA,IAAAP;AAKT,MAAAQ;AAAA,EAAAP,SAAAE,KAEJK,IAAAC,CAAAA,MAAWA,EAAKC,QAASP,CAAE,GAAYQ,WAAAV,OAAAE,GAAAF,OAAAO,KAAAA,IAAAP,EAAA,CAAA;AADpD,QAAAU,IAAkBC,EAChBC,EAAWL,CAAuC,CACpD;AAAC,MAAAM;AAAA,EAAAb,SAAAE,KAEYW,IAAAC,CAAAA,MAAWN,EAAKC,QAASP,CAAE,GAAaa,YAAAf,OAAAE,GAAAF,OAAAa,KAAAA,IAAAb,EAAA,CAAA;AADrD,QAAAe,IAAmBJ,EACjBC,EAAWC,CAAwC,CACrD;AAAC,MAAAG;AAAA,EAAAhB,SAAAE,KACuCc,IAAAC,CAAAA,MAAWT,EAAKC,QAASP,CAAE,GAAQgB,OAAAlB,OAAAE,GAAAF,OAAAgB,KAAAA,IAAAhB,EAAA,CAAA;AAA3E,QAAAkB,IAAcP,EAAeC,EAAWI,CAAmC,CAAC;AAG5E,MAAIN,KAAAK;AAAuB,WAClBZ;AAIT,MAAIe,GAAK;AACP,UAAAC,IAAmBd,KAAaa,EAAKd,SAAlB,SACnBgB,IACEd,KACAY,EAAKG,WADL;AAE+D,QAAAC;AAAA,IAAAtB,SAAAmB,KAI7DG,sBAACC,kBAAuB,GAAavB,OAAAmB,GAAAnB,OAAAsB,KAAAA,IAAAtB,EAAA,CAAA;AAAA,QAAAwB;AAAA,WAAAxB,EAAA,CAAA,MAAAoB,KAAApB,SAAAsB,KADvCE,IAAA,gBAAAC,EAACC,GAAA,EAAe,UAAA,SACdJ,UAAAA;AAAAA,MAAAA;AAAAA,MACCF;AAAAA,IAAAA,GACH,GAAQpB,OAAAoB,GAAApB,OAAAsB,GAAAtB,QAAAwB,KAAAA,IAAAxB,EAAA,EAAA,GAHRwB;AAAAA,EAGQ;AAEX,SAGMrB;AAAQ;"}

package/dist/formatter-B1Xh8XDH.js

@@ -1,5 +0,0 @@
-const o = (t) => t.toString();
-export {
-  o as d
-};
-//# sourceMappingURL=formatter-B1Xh8XDH.js.map

package/dist/formatter-B1Xh8XDH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatter-B1Xh8XDH.js","sources":["../src/widgets/utils/formatter.ts"],"sourcesContent":["export const defaultFormatter = (value: number) => value.toString()\n"],"names":["defaultFormatter","value","toString"],"mappings":"AAAO,MAAMA,IAAmBA,CAACC,MAAkBA,EAAMC,SAAAA;"}

package/dist/no-data-hR3KcJ-_.js

@@ -1,60 +0,0 @@
-import { jsx as h, jsxs as A } from "react/jsx-runtime";
-import { c as T } from "react/compiler-runtime";
-import { Typography as x, Box as E } from "@mui/material";
-import { useShallow as c } from "zustand/shallow";
-import { u as p } from "./widget-store-CzDt8oSK.js";
-const W = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 1,
-    // 8px
-    paddingTop: 1,
-    // 8px
-    paddingBottom: 2,
-    // 16px
-    paddingX: 2,
-    // 16px
-    width: "100%",
-    minHeight: "100%"
-  }
-};
-function S(r) {
-  const t = T(13), {
-    id: i,
-    children: u,
-    title: y,
-    description: g,
-    isEmpty: m
-  } = r, f = y === void 0 ? "No data available" : y, d = g === void 0 ? "There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust filters" : g, v = m === void 0 ? k : m;
-  let n;
-  t[0] !== i ? (n = (e) => e.widgets[i]?.isLoading, t[0] = i, t[1] = n) : n = t[1];
-  const w = p(c(n));
-  let s;
-  t[2] !== i ? (s = (e) => e.widgets[i]?.isFetching, t[2] = i, t[3] = s) : s = t[3];
-  const b = p(c(s));
-  let l;
-  t[4] !== i ? (l = (e) => e.widgets[i]?.data, t[4] = i, t[5] = l) : l = t[5];
-  const j = p(c(l));
-  if (w || b)
-    return u;
-  if (v(j)) {
-    let e;
-    t[6] !== f ? (e = /* @__PURE__ */ h(x, { variant: "body2", color: "text.primary", children: f }), t[6] = f, t[7] = e) : e = t[7];
-    let o;
-    t[8] !== d ? (o = /* @__PURE__ */ h(x, { variant: "caption", color: "text.secondary", children: d }), t[8] = d, t[9] = o) : o = t[9];
-    let a;
-    return t[10] !== e || t[11] !== o ? (a = /* @__PURE__ */ A(E, { sx: W.root, children: [
-      e,
-      o
-    ] }), t[10] = e, t[11] = o, t[12] = a) : a = t[12], a;
-  }
-  return u;
-}
-function k(r) {
-  return r == null ? !0 : Array.isArray(r) ? !!(r.length === 0 || r.every((t) => Array.isArray(t) && t.length === 0)) : typeof r == "object" ? Object.keys(r).length === 0 : !1;
-}
-export {
-  S as W
-};
-//# sourceMappingURL=no-data-hR3KcJ-_.js.map

package/dist/no-data-hR3KcJ-_.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"no-data-hR3KcJ-_.js","sources":["../src/widgets/no-data/style.ts","../src/widgets/no-data/no-data.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material'\n\n/**\n * Styles for NoData component matching Figma design specifications\n * Design reference: node 5781-11028\n */\nexport const styles: Record<string, SxProps<Theme>> = {\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1, // 8px\n    paddingTop: 1, // 8px\n    paddingBottom: 2, // 16px\n    paddingX: 2, // 16px\n    width: '100%',\n    minHeight: '100%',\n  },\n}\n","import { Box, Typography } from '@mui/material'\nimport { useShallow } from 'zustand/shallow'\nimport { useWidgetStore } from '../stores/widget-store'\nimport type { WidgetNoDataProps } from './types'\nimport { styles } from './style'\n\n/**\n * NoData wrapper component that displays empty state UI when widget has no data\n *\n * Integrates with widget store to check loading/fetching state and data availability.\n * Works in conjunction with SkeletonLoader for complete loading/empty state handling.\n *\n * @example Basic usage\n * ```tsx\n * <NoData id=\"my-widget\">\n *   <WidgetContent id=\"my-widget\" />\n * </NoData>\n * ```\n *\n * @example With SkeletonLoader\n * ```tsx\n * <SkeletonLoader id=\"my-widget\" Skeleton={MySkeleton}>\n *   <NoData id=\"my-widget\">\n *     <WidgetContent id=\"my-widget\" />\n *   </NoData>\n * </SkeletonLoader>\n * ```\n *\n * @example With custom messages\n * ```tsx\n * <NoData\n *   id=\"my-widget\"\n *   title=\"No results found\"\n *   description=\"Try adjusting your filters\"\n * >\n *   <WidgetContent id=\"my-widget\" />\n * </NoData>\n * ```\n */\nexport function WidgetNoData({\n  id,\n  children,\n  title = 'No data available',\n  description = 'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust filters',\n  isEmpty = defaultIsEmpty,\n}: WidgetNoDataProps) {\n  // Subscribe to widget store with selective subscription for optimal performance\n  const isLoading = useWidgetStore(\n    useShallow((state) => state.widgets[id]?.isLoading),\n  )\n  const isFetching = useWidgetStore(\n    useShallow((state) => state.widgets[id]?.isFetching),\n  )\n  const data = useWidgetStore(useShallow((state) => state.widgets[id]?.data))\n\n  // If loading or fetching, show children\n  // SkeletonLoader handles loading state, this allows proper composition\n  if (isLoading || isFetching) {\n    return children\n  }\n\n  // Check if data is empty\n  if (isEmpty(data)) {\n    return (\n      <Box sx={styles.root}>\n        <Typography variant='body2' color='text.primary'>\n          {title}\n        </Typography>\n        <Typography variant='caption' color='text.secondary'>\n          {description}\n        </Typography>\n      </Box>\n    )\n  }\n\n  // Data exists, render children\n  return children\n}\n\n/**\n * Default function to determine if data is empty\n * Handles various data structures commonly used in widgets\n */\nfunction defaultIsEmpty(data: unknown): boolean {\n  // Null or undefined\n  if (data == null) {\n    return true\n  }\n\n  // Arrays (most common case)\n  if (Array.isArray(data)) {\n    // Empty array\n    if (data.length === 0) {\n      return true\n    }\n\n    // Array of arrays (CategoryWidget pattern: [[],[]])\n    // Check if all inner arrays are empty\n    if (data.every((item) => Array.isArray(item) && item.length === 0)) {\n      return true\n    }\n\n    return false\n  }\n\n  // Objects\n  if (typeof data === 'object') {\n    return Object.keys(data).length === 0\n  }\n\n  // Primitives (numbers, strings, booleans) are considered valid data\n  return false\n}\n"],"names":["styles","root","display","flexDirection","gap","paddingTop","paddingBottom","paddingX","width","minHeight","WidgetNoData","t0","$","_c","id","children","title","t1","description","t2","isEmpty","t3","undefined","defaultIsEmpty","t4","state","widgets","isLoading","useWidgetStore","useShallow","t5","state_0","isFetching","t6","state_1","data","t7","Typography","t8","t9","Box","Array","isArray","length","every","item","Object","keys"],"mappings":";;;;;AAMO,MAAMA,IAAyC;AAAA,EACpDC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,KAAK;AAAA;AAAA,IACLC,YAAY;AAAA;AAAA,IACZC,eAAe;AAAA;AAAA,IACfC,UAAU;AAAA;AAAA,IACVC,OAAO;AAAA,IACPC,WAAW;AAAA,EAAA;AAEf;ACsBO,SAAAC,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAsB;AAAA,IAAAC,IAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,OAAAC;AAAAA,IAAAC,aAAAC;AAAAA,IAAAC,SAAAC;AAAAA,EAAAA,IAAAV,GAG3BK,IAAAC,MAAAK,SAAA,sBAAAL,GACAC,IAAAC,MAAAG,SAAA,mJAAAH,GACAC,IAAAC,MAAAC,SAAAC,IAAAF;AAAwB,MAAAG;AAAA,EAAAZ,SAAAE,KAIXU,IAAAC,CAAAA,MAAWA,EAAKC,QAASZ,CAAE,GAAYa,WAAAf,OAAAE,GAAAF,OAAAY,KAAAA,IAAAZ,EAAA,CAAA;AADpD,QAAAe,IAAkBC,EAChBC,EAAWL,CAAuC,CACpD;AAAC,MAAAM;AAAA,EAAAlB,SAAAE,KAEYgB,IAAAC,CAAAA,MAAWN,EAAKC,QAASZ,CAAE,GAAakB,YAAApB,OAAAE,GAAAF,OAAAkB,KAAAA,IAAAlB,EAAA,CAAA;AADrD,QAAAoB,IAAmBJ,EACjBC,EAAWC,CAAwC,CACrD;AAAC,MAAAG;AAAA,EAAArB,SAAAE,KACsCmB,IAAAC,CAAAA,MAAWT,EAAKC,QAASZ,CAAE,GAAOqB,MAAAvB,OAAAE,GAAAF,OAAAqB,KAAAA,IAAArB,EAAA,CAAA;AAAzE,QAAAuB,IAAaP,EAAeC,EAAWI,CAAkC,CAAC;AAI1E,MAAIN,KAAAK;AAAuB,WAClBjB;AAIT,MAAIK,EAAQe,CAAI,GAAC;AAAA,QAAAC;AAAA,IAAAxB,SAAAI,KAGXoB,sBAACC,GAAA,EAAmB,SAAA,SAAc,OAAA,gBAC/BrB,UAAAA,GACH,GAAaJ,OAAAI,GAAAJ,OAAAwB,KAAAA,IAAAxB,EAAA,CAAA;AAAA,QAAA0B;AAAA,IAAA1B,SAAAM,KACboB,sBAACD,GAAA,EAAmB,SAAA,WAAgB,OAAA,kBACjCnB,UAAAA,GACH,GAAaN,OAAAM,GAAAN,OAAA0B,KAAAA,IAAA1B,EAAA,CAAA;AAAA,QAAA2B;AAAA,WAAA3B,EAAA,EAAA,MAAAwB,KAAAxB,UAAA0B,KANfC,sBAACC,GAAA,EAAQ,IAAAxC,EAAMC,MACbmC,UAAAA;AAAAA,MAAAA;AAAAA,MAGAE;AAAAA,IAAAA,GAGF,GAAM1B,QAAAwB,GAAAxB,QAAA0B,GAAA1B,QAAA2B,KAAAA,IAAA3B,EAAA,EAAA,GAPN2B;AAAAA,EAOM;AAET,SAGMxB;AAAQ;AAOjB,SAASQ,EAAeY,GAAwB;AAE9C,SAAIA,KAAQ,OACH,KAILM,MAAMC,QAAQP,CAAI,IAEhBA,GAAAA,EAAKQ,WAAW,KAMhBR,EAAKS,MAAOC,CAAAA,MAASJ,MAAMC,QAAQG,CAAI,KAAKA,EAAKF,WAAW,CAAC,KAQ/D,OAAOR,KAAS,WACXW,OAAOC,KAAKZ,CAAI,EAAEQ,WAAW,IAI/B;AACT;"}