@carto/ps-react-ui 5.0.0-widgets.1 → 5.0.0-widgets.2

package/dist/error-zHOU_QIB.js

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

package/dist/error-zHOU_QIB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-zHOU_QIB.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 { ErrorProps } from './types'\n\nexport function Error({ id, children }: ErrorProps) {\n  const widget = useWidgetStore(\n    useShallow((state) => {\n      const w = state.widgets[id]\n      return {\n        isLoading: w?.isLoading,\n        isFetching: w?.isFetching,\n        error: w?.error,\n      }\n    }),\n  )\n\n  // Don't show error during loading/fetching states\n  if (widget?.isLoading || widget?.isFetching) {\n    return children\n  }\n\n  // Show error UI if error exists\n  if (widget?.error) {\n    const errorTitle = widget.error.title ?? 'Error'\n    const errorMessage =\n      widget.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":["Error","t0","$","_c","id","children","t1","state","w","widgets","isLoading","isFetching","error","widget","useWidgetStore","useShallow","errorTitle","title","errorMessage","message","t2","AlertTitle","t3","jsxs","Alert"],"mappings":";;;;;AAKO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,CAAA,GAAe;AAAA,IAAAC,IAAAA;AAAAA,IAAAC,UAAAA;AAAAA,EAAAA,IAAAJ;AAA4B,MAAAK;AAAA,EAAAJ,SAAAE,KAEnCE,IAAAC,CAAAA,MAAA;AACT,UAAAC,IAAUD,EAAKE,QAASL,CAAE;AAAC,WACpB;AAAA,MAAAM,WACMF,GAACE;AAAAA,MAAWC,YACXH,GAACG;AAAAA,MAAYC,OAClBJ,GAACI;AAAAA,IAAAA;AAAAA,EACT,GACFV,OAAAE,GAAAF,OAAAI,KAAAA,IAAAJ,EAAA,CAAA;AARH,QAAAW,IAAeC,EACbC,EAAWT,CAOV,CACH;AAGA,MAAIO,GAAMH,aAAeG,GAAMF;AAAY,WAClCN;AAIT,MAAIQ,GAAMD,OAAO;AACf,UAAAI,IAAmBH,EAAMD,MAAMK,SAAZ,SACnBC,IACEL,EAAMD,MAAMO,WAAZ;AAC+D,QAAAC;AAAA,IAAAlB,SAAAc,KAI7DI,sBAACC,kBAAuB,GAAanB,OAAAc,GAAAd,OAAAkB,KAAAA,IAAAlB,EAAA,CAAA;AAAA,QAAAoB;AAAA,WAAApB,EAAA,CAAA,MAAAgB,KAAAhB,SAAAkB,KADvCE,IAAA,gBAAAC,EAACC,GAAA,EAAe,UAAA,SACdJ,UAAAA;AAAAA,MAAAA;AAAAA,MACCF;AAAAA,IAAAA,GACH,GAAQhB,OAAAgB,GAAAhB,OAAAkB,GAAAlB,OAAAoB,KAAAA,IAAApB,EAAA,CAAA,GAHRoB;AAAAA,EAGQ;AAEX,SAGMjB;AAAQ;"}

package/dist/no-data-Cz80hEWj.js

@@ -0,0 +1,61 @@
+import { jsx as y, jsxs as h } from "react/jsx-runtime";
+import { c as x } from "react/compiler-runtime";
+import { Typography as g, Box as v } from "@mui/material";
+import { useShallow as w } from "zustand/shallow";
+import { u as b } from "./widget-store-DNyVElxd.js";
+const j = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 1,
+    // 8px
+    paddingTop: 1,
+    // 8px
+    paddingBottom: 2,
+    // 16px
+    paddingX: 2,
+    // 16px
+    width: "100%",
+    minHeight: "100%"
+  }
+};
+function k(r) {
+  const t = x(9), {
+    id: s,
+    children: c,
+    title: f,
+    description: p,
+    isEmpty: u
+  } = r, a = f === void 0 ? "No data available" : f, l = p === 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" : p, m = u === void 0 ? A : u;
+  let o;
+  t[0] !== s ? (o = (i) => {
+    const e = i.widgets[s];
+    return {
+      isLoading: e?.isLoading,
+      isFetching: e?.isFetching,
+      data: e?.data
+    };
+  }, t[0] = s, t[1] = o) : o = t[1];
+  const d = b(w(o));
+  if (d?.isLoading || d?.isFetching)
+    return c;
+  if (m(d?.data)) {
+    let i;
+    t[2] !== a ? (i = /* @__PURE__ */ y(g, { variant: "body2", color: "text.primary", children: a }), t[2] = a, t[3] = i) : i = t[3];
+    let e;
+    t[4] !== l ? (e = /* @__PURE__ */ y(g, { variant: "caption", color: "text.secondary", children: l }), t[4] = l, t[5] = e) : e = t[5];
+    let n;
+    return t[6] !== i || t[7] !== e ? (n = /* @__PURE__ */ h(v, { sx: j.root, children: [
+      i,
+      e
+    ] }), t[6] = i, t[7] = e, t[8] = n) : n = t[8], n;
+  }
+  return c;
+}
+function A(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 {
+  k as N
+};
+//# sourceMappingURL=no-data-Cz80hEWj.js.map

package/dist/no-data-Cz80hEWj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-data-Cz80hEWj.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 { NoDataProps } 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 NoData({\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}: NoDataProps) {\n  // Subscribe to widget store with selective subscription for optimal performance\n  const widget = useWidgetStore(\n    useShallow((state) => {\n      const w = state.widgets[id]\n      return {\n        isLoading: w?.isLoading,\n        isFetching: w?.isFetching,\n        data: w?.data,\n      }\n    }),\n  )\n\n  // If loading or fetching, show children\n  // SkeletonLoader handles loading state, this allows proper composition\n  if (widget?.isLoading || widget?.isFetching) {\n    return children\n  }\n\n  // Check if data is empty\n  if (isEmpty(widget?.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","NoData","t0","$","_c","id","children","title","t1","description","t2","isEmpty","t3","undefined","defaultIsEmpty","t4","state","w","widgets","isLoading","isFetching","data","widget","useWidgetStore","useShallow","t5","Typography","t6","t7","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,CAAA,GAAgB;AAAA,IAAAC,IAAAA;AAAAA,IAAAC,UAAAA;AAAAA,IAAAC,OAAAC;AAAAA,IAAAC,aAAAC;AAAAA,IAAAC,SAAAC;AAAAA,EAAAA,IAAAV,GAGrBK,IAAAC,MAAAK,SAAA,sBAAAL,GACAC,IAAAC,MAAAG,SAAA,mJAAAH,GACAC,IAAAC,MAAAC,SAAAC,IAAAF;AAAwB,MAAAG;AAAA,EAAAZ,SAAAE,KAIXU,IAAAC,CAAAA,MAAA;AACT,UAAAC,IAAUD,EAAKE,QAASb,CAAE;AAAC,WACpB;AAAA,MAAAc,WACMF,GAACE;AAAAA,MAAWC,YACXH,GAACG;AAAAA,MAAYC,MACnBJ,GAACI;AAAAA,IAAAA;AAAAA,EACR,GACFlB,OAAAE,GAAAF,OAAAY,KAAAA,IAAAZ,EAAA,CAAA;AARH,QAAAmB,IAAeC,EACbC,EAAWT,CAOV,CACH;AAIA,MAAIO,GAAMH,aAAeG,GAAMF;AAAY,WAClCd;AAIT,MAAIK,EAAQW,GAAMD,IAAM,GAAC;AAAA,QAAAI;AAAA,IAAAtB,SAAAI,KAGnBkB,sBAACC,GAAA,EAAmB,SAAA,SAAc,OAAA,gBAC/BnB,UAAAA,GACH,GAAaJ,OAAAI,GAAAJ,OAAAsB,KAAAA,IAAAtB,EAAA,CAAA;AAAA,QAAAwB;AAAA,IAAAxB,SAAAM,KACbkB,sBAACD,GAAA,EAAmB,SAAA,WAAgB,OAAA,kBACjCjB,UAAAA,GACH,GAAaN,OAAAM,GAAAN,OAAAwB,KAAAA,IAAAxB,EAAA,CAAA;AAAA,QAAAyB;AAAA,WAAAzB,EAAA,CAAA,MAAAsB,KAAAtB,SAAAwB,KANfC,sBAACC,GAAA,EAAQ,IAAAtC,EAAMC,MACbiC,UAAAA;AAAAA,MAAAA;AAAAA,MAGAE;AAAAA,IAAAA,GAGF,GAAMxB,OAAAsB,GAAAtB,OAAAwB,GAAAxB,OAAAyB,KAAAA,IAAAzB,EAAA,CAAA,GAPNyB;AAAAA,EAOM;AAET,SAGMtB;AAAQ;AAOjB,SAASQ,EAAeO,GAAwB;AAE9C,SAAIA,KAAQ,OACH,KAILS,MAAMC,QAAQV,CAAI,IAEhBA,GAAAA,EAAKW,WAAW,KAMhBX,EAAKY,MAAOC,CAAAA,MAASJ,MAAMC,QAAQG,CAAI,KAAKA,EAAKF,WAAW,CAAC,KAQ/D,OAAOX,KAAS,WACXc,OAAOC,KAAKf,CAAI,EAAEW,WAAW,IAI/B;AACT;"}

package/dist/types/widgets/actions/searcher/searcher.d.ts

@@ -18,4 +18,4 @@ export declare const SEARCHER_TOOL_ID = "searcher";
  * />
  * ```
  */
-export declare function Searcher({ id, filterFn, order, labels, TextFieldProps, ClearIcon, }: SearcherProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Searcher({ id, filterFn, order, labels, TextFieldProps, ClearIcon, debounceDelay, }: SearcherProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/widgets/actions/searcher/types.d.ts

@@ -59,4 +59,6 @@ export interface SearcherProps {
     TextFieldProps?: Omit<TextFieldProps, 'value' | 'onChange' | 'size'>;
     /** Custom icon for clear button */
     ClearIcon?: ReactNode;
+    /** Debounce delay in milliseconds for search input. Defaults to 300ms */
+    debounceDelay?: number;
 }

package/dist/types/widgets/error/error.d.ts

@@ -0,0 +1,2 @@
+import { ErrorProps } from './types';
+export declare function Error({ id, children }: ErrorProps): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/widgets/error/index.d.ts

@@ -0,0 +1,2 @@
+export { Error } from './error';
+export type { ErrorProps } from './types';

package/dist/types/widgets/error/types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { WidgetState } from '../stores/types';
+export interface ErrorProps {
+    /**
+     * Widget ID to fetch error state from store
+     */
+    id: WidgetState['id'];
+    /**
+     * Children to render when no error exists
+     */
+    children: ReactNode;
+}

package/dist/types/widgets/index.d.ts

@@ -1,2 +1,6 @@
 export { useWidgetStore } from './stores/widget-store';
 export type { BaseWidgetState, WidgetsStoreProps, WidgetState, WidgetStore, WidgetStoreActions, WidgetStoreState, } from './stores/types';
+export { NoData } from './no-data';
+export type { NoDataProps } from './no-data';
+export { Error } from './error';
+export type { ErrorProps } from './error';

package/dist/types/widgets/no-data/index.d.ts

@@ -0,0 +1,2 @@
+export { NoData } from './no-data';
+export type { NoDataProps } from './types';

package/dist/types/widgets/no-data/no-data.d.ts

@@ -0,0 +1,35 @@
+import { NoDataProps } from './types';
+/**
+ * NoData wrapper component that displays empty state UI when widget has no data
+ *
+ * Integrates with widget store to check loading/fetching state and data availability.
+ * Works in conjunction with SkeletonLoader for complete loading/empty state handling.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <NoData id="my-widget">
+ *   <WidgetContent id="my-widget" />
+ * </NoData>
+ * ```
+ *
+ * @example With SkeletonLoader
+ * ```tsx
+ * <SkeletonLoader id="my-widget" Skeleton={MySkeleton}>
+ *   <NoData id="my-widget">
+ *     <WidgetContent id="my-widget" />
+ *   </NoData>
+ * </SkeletonLoader>
+ * ```
+ *
+ * @example With custom messages
+ * ```tsx
+ * <NoData
+ *   id="my-widget"
+ *   title="No results found"
+ *   description="Try adjusting your filters"
+ * >
+ *   <WidgetContent id="my-widget" />
+ * </NoData>
+ * ```
+ */
+export declare function NoData({ id, children, title, description, isEmpty, }: NoDataProps): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/types/widgets/no-data/style.d.ts

@@ -0,0 +1,6 @@
+import { SxProps, Theme } from '@mui/material';
+/**
+ * Styles for NoData component matching Figma design specifications
+ * Design reference: node 5781-11028
+ */
+export declare const styles: Record<string, SxProps<Theme>>;

package/dist/types/widgets/no-data/types.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { WidgetState } from '../stores/types';
+/**
+ * Props for the NoData wrapper component
+ *
+ * @example Basic usage
+ * ```tsx
+ * <NoData id="my-widget">
+ *   <WidgetContent id="my-widget" />
+ * </NoData>
+ * ```
+ *
+ * @example With custom messages
+ * ```tsx
+ * <NoData
+ *   id="my-widget"
+ *   title="No results found"
+ *   description="Try adjusting your filters"
+ * >
+ *   <WidgetContent id="my-widget" />
+ * </NoData>
+ * ```
+ *
+ * @example With custom isEmpty logic
+ * ```tsx
+ * <NoData
+ *   id="my-widget"
+ *   isEmpty={(data) => {
+ *     const d = data as CustomData
+ *     return !d?.items?.length
+ *   }}
+ * >
+ *   <WidgetContent id="my-widget" />
+ * </NoData>
+ * ```
+ */
+export interface NoDataProps {
+    /**
+     * Widget ID to fetch state from store
+     */
+    id: WidgetState['id'];
+    /**
+     * Children to render when data is available
+     */
+    children: ReactNode;
+    /**
+     * Optional custom title for empty state
+     * @default "No data available"
+     */
+    title?: string;
+    /**
+     * Optional custom description for empty state
+     * @default "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"
+     */
+    description?: string;
+    /**
+     * Optional custom function to determine if data is empty
+     * If not provided, uses default isEmpty logic that handles:
+     * - null/undefined → empty
+     * - [] (empty array) → empty
+     * - [[]] (nested empty arrays) → empty
+     * - {} (empty object) → empty
+     * - Primitives → not empty
+     * - Arrays/objects with content → not empty
+     */
+    isEmpty?: (data: unknown) => boolean;
+}

package/dist/types/widgets/stores/types.d.ts

@@ -62,7 +62,10 @@ export interface WidgetsStoreProps {
     /** Fetching state (e.g., for async data) */
     isFetching: boolean;
     /** Error message if any */
-    error?: string;
+    error?: {
+        title?: string;
+        message?: string;
+    };
     /** Whether widget is visible */
     visible?: boolean;
     /** Reference to the widget ui instance */