@carto/ps-react-ui 4.4.0-chat-ui.5 → 4.4.0-chat-ui.7

package/src/widgets-v2/wrapper/widget-wrapper.tsx

@@ -0,0 +1,178 @@
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useState,
+  type ComponentType,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  LinearProgress,
+  Typography,
+  type SvgIconProps,
+  type SxProps,
+  type Theme,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { SmartTooltip } from '../../components/smart-tooltip/smart-tooltip'
+import { useWidget, useWidgetId } from '../stores'
+import { Actions, Options } from './widget-actions'
+import { styles } from './style'
+import { DEFAULT_WRAPPER_LABELS, type WrapperLabels } from './labels'
+
+export interface WrapperProps {
+  title: string
+  /**
+   * Controlled collapsed state. When supplied, the wrapper is fully
+   * controlled — the consumer is responsible for updating it via
+   * `onCollapseChange`. Leave undefined to use the uncontrolled mode,
+   * which seeds internal state from `defaultCollapsed`.
+   */
+  collapsed?: boolean
+  /**
+   * Fires whenever the user interacts to toggle the wrapper, with the
+   * NEXT collapsed value. Called for both controlled and uncontrolled
+   * usage — consumers can subscribe to user-driven toggles even when
+   * letting the wrapper manage its own state.
+   */
+  onCollapseChange?: (collapsed: boolean) => void
+  /**
+   * Initial collapsed state when the wrapper is uncontrolled (i.e.
+   * `collapsed` is undefined). Ignored when `collapsed` is supplied.
+   */
+  defaultCollapsed?: boolean
+  disabled?: boolean
+  labels?: Partial<WrapperLabels>
+  /**
+   * Icon shown at the right edge of the summary row. Accordion rotates it
+   * 180° automatically when the wrapper expands. Default: `ExpandMoreIcon`.
+   */
+  expandIcon?: ComponentType<SvgIconProps>
+  iconProps?: SvgIconProps
+  sx?: SxProps<Theme>
+  children: ReactNode
+}
+
+/**
+ * Widget shell — title + collapsible body, built on MUI `<Accordion>` for
+ * native click-to-toggle on the summary header and a smooth open/close
+ * transition. UX matches v1 `<WrapperUI>`:
+ *
+ *   • hover-fade action buttons (always visible on coarse-pointer devices)
+ *   • multi-line title clamp (`WebkitLineClamp: 2`, word-break) + SmartTooltip
+ *     when the text overflows
+ *   • top-edge `<LinearProgress>` driven by the widget store's `isFetching`
+ *   • chevron at the right end (rotated by Accordion based on expanded state)
+ *
+ * Children are partitioned by component identity: `<Actions>` and `<Options>`
+ * render inside the summary row; everything else (`<Content>`, `<Footer>`,
+ * loose nodes) renders inside the details panel.
+ */
+export function Wrapper({
+  title,
+  collapsed,
+  onCollapseChange,
+  defaultCollapsed = false,
+  disabled = false,
+  labels,
+  expandIcon: ExpandIcon = ExpandMoreIcon,
+  iconProps,
+  sx,
+  children,
+}: WrapperProps) {
+  const id = useWidgetId()
+  const isFetching = useWidget(id, (s) => s.isFetching)
+  // Controlled vs uncontrolled: when the consumer passes `collapsed`, they
+  // own the state; otherwise we keep an internal copy seeded from
+  // `defaultCollapsed`. `internalCollapsed` is still tracked in controlled
+  // mode so a consumer can drop the controlled prop later without losing
+  // the last-known position.
+  const isControlled = collapsed !== undefined
+  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed)
+  const effectiveCollapsed = isControlled ? collapsed : internalCollapsed
+  const handleAccordionToggle = useCallback(
+    (_: unknown, expanded: boolean) => {
+      const next = !expanded
+      onCollapseChange?.(next)
+      setInternalCollapsed(next)
+    },
+    [onCollapseChange],
+  )
+  const _labels = { ...DEFAULT_WRAPPER_LABELS, ...labels }
+
+  const { summary: summarySlots, details: detailsSlots } =
+    partitionChildren(children)
+
+  const ariaLabel = effectiveCollapsed ? _labels.expand : _labels.collapse
+
+  return (
+    <Accordion
+      data-collapsed={effectiveCollapsed ? 'true' : undefined}
+      expanded={!effectiveCollapsed}
+      onChange={handleAccordionToggle}
+      disabled={disabled}
+      disableGutters
+      elevation={0}
+      square
+      sx={{ ...styles.root, ...sx }}
+    >
+      {isFetching ? (
+        <LinearProgress sx={styles.loading} color='primary' />
+      ) : null}
+
+      <AccordionSummary
+        expandIcon={<ExpandIcon fontSize='small' {...iconProps} />}
+        aria-label={ariaLabel}
+        sx={styles.summary}
+      >
+        <SmartTooltip title={title}>
+          {({ ref }) => (
+            <Box sx={styles.titleCell}>
+              <Typography
+                ref={ref}
+                variant='subtitle1'
+                sx={styles.titleText}
+                textTransform='none'
+              >
+                {title}
+              </Typography>
+            </Box>
+          )}
+        </SmartTooltip>
+        {summarySlots}
+      </AccordionSummary>
+      <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
+    </Accordion>
+  )
+}
+
+/**
+ * Splits children by component identity: `<Actions>` and `<Options>` belong
+ * in the summary row, everything else in the details panel. Identity
+ * comparison works because both slot components are imported from the same
+ * module that consumers use.
+ */
+function partitionChildren(children: ReactNode): {
+  summary: ReactNode[]
+  details: ReactNode[]
+} {
+  const summary: ReactNode[] = []
+  const details: ReactNode[] = []
+  for (const child of Children.toArray(children)) {
+    if (isSlot(child, Actions) || isSlot(child, Options)) {
+      summary.push(child)
+    } else {
+      details.push(child)
+    }
+  }
+  return { summary, details }
+}
+
+function isSlot(node: ReactNode, type: unknown): node is ReactElement {
+  return isValidElement(node) && node.type === type
+}

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\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":";;;;;AAKO,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;"}