@gunkin/uiify 0.0.25-alpha → 0.0.27-alpha

package/dist/components/line-chart/LineChart.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
 import { useRenderElement } from "@gunkin/uiify/core/render";
-import { mergeRepeatedSlotProps, omitProps } from "../../core/slot-props.js";
+import { mergeRepeatedSlotProps } from "../../core/slot-props.js";
 import { assignRef } from "../../hooks/utils/assign-ref.js";
 import {
   axisLabelsFor,
@@ -15,21 +16,12 @@ import {
   slotCrosshairStyle,
   valueLabelsFor
 } from "./line-chart-geometry.js";
-function getPartProps(props, protectedKeys = []) {
-  return omitProps(props, ["children", "dangerouslySetInnerHTML", ...protectedKeys]);
-}
-function getIndexedPartProps(props, index, protectedKeys = []) {
+function getIndexedPartProps(props, index) {
   const { byItemIndex, ...common } = props ?? {};
-  const merged = mergeRepeatedSlotProps(common, byItemIndex?.[index]);
-  return omitProps(merged, [
-    "children",
-    "dangerouslySetInnerHTML",
-    "byItemIndex",
-    ...protectedKeys
-  ]);
+  return mergeRepeatedSlotProps(common, byItemIndex?.[index]);
 }
 function withGeneratedStyle(props, generatedStyle) {
-  return { ...props, style: { ...props.style, ...generatedStyle } };
+  return { ...props, style: { ...generatedStyle, ...props.style } };
 }
 function forwardPointRef(ref) {
   return (element) => {
@@ -58,25 +50,10 @@ function LineChartPoint({
   slotProps
 }) {
   const geometry = geometryFor(point, previousPoint, index, count, min, max);
-  const pointSlotProps = getIndexedPartProps(slotProps?.point, index, [
-    "aria-hidden",
-    "data-crosshair-active",
-    "data-first",
-    "data-part",
-    "data-point-selected",
-    "data-time",
-    "data-trend"
-  ]);
+  const pointSlotProps = getIndexedPartProps(slotProps?.point, index);
   const { ref: pointRef, ...pointProps } = pointSlotProps;
-  const pointHitSlotProps = getIndexedPartProps(slotProps?.pointHit, index, [
-    "aria-label",
-    "aria-pressed",
-    "data-part",
-    "type"
-  ]);
+  const pointHitSlotProps = getIndexedPartProps(slotProps?.pointHit, index);
   const handleKeyDown = (event) => {
-    pointHitSlotProps.onKeyDown?.(event);
-    if (event.defaultPrevented) return;
     if (event.key !== "Enter" && event.key !== " ") return;
     event.preventDefault();
     onPointClick?.(index);
@@ -84,8 +61,6 @@ function LineChartPoint({
   return /* @__PURE__ */ jsx(
     Tag,
     {
-      ...pointProps,
-      ...pointRef ? { ref: forwardPointRef(pointRef) } : {},
       "aria-hidden": interactive ? void 0 : true,
       "data-part": "point",
       "data-first": previousPoint === void 0 ? "" : void 0,
@@ -93,32 +68,30 @@ function LineChartPoint({
       "data-point-selected": interactive && isSelected ? "" : void 0,
       "data-time": String(point.time),
       "data-trend": geometry.trend,
+      ...pointProps,
+      ...pointRef ? { ref: forwardPointRef(pointRef) } : {},
       style: {
-        ...pointSlotProps.style,
-        ...pointStyle(geometry, isActive ? cursorY : void 0)
+        ...pointStyle(geometry, isActive ? cursorY : void 0),
+        ...pointSlotProps.style
       },
       children: interactive ? /* @__PURE__ */ jsx(
         "button",
         {
-          ...pointHitSlotProps,
           "data-part": "point-hit",
           type: "button",
           "aria-label": `Point ${String(point.time)}`,
           "aria-pressed": isSelected,
-          onClick: (event) => {
-            pointHitSlotProps.onClick?.(event);
-            if (!event.defaultPrevented) onPointClick?.(index);
-          },
-          onKeyDown: handleKeyDown,
-          onPointerLeave: (event) => {
-            pointHitSlotProps.onPointerLeave?.(event);
-            if (!event.defaultPrevented) onPointPointerLeave?.();
-          },
-          onPointerMove: (event) => {
-            pointHitSlotProps.onPointerMove?.(event);
-            if (!event.defaultPrevented)
-              onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY });
-          }
+          ...pointHitSlotProps,
+          onClick: composeEventHandlers(pointHitSlotProps.onClick, () => onPointClick?.(index)),
+          onKeyDown: composeEventHandlers(pointHitSlotProps.onKeyDown, handleKeyDown),
+          onPointerLeave: composeEventHandlers(
+            pointHitSlotProps.onPointerLeave,
+            () => onPointPointerLeave?.()
+          ),
+          onPointerMove: composeEventHandlers(
+            pointHitSlotProps.onPointerMove,
+            (event) => onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY })
+          )
         }
       ) : null
     }
@@ -132,7 +105,6 @@ function LineChart(props) {
     data,
     xAxis,
     yAxis,
-    "aria-label": ariaLabel,
     activePointIndex,
     cursorY,
     interactive = false,
@@ -149,7 +121,7 @@ function LineChart(props) {
     ...consumerProps
   } = props;
   const { min, max } = getValueBounds(data);
-  const label = ariaLabel ?? "Line chart";
+  const label = consumerProps["aria-label"] ?? "Line chart";
   const timeLabels = axisLabelsFor(xAxis, monthLabelsFor(data, locale));
   const valueLabels = axisLabelsFor(yAxis, valueLabelsFor(min, max, locale));
   const readoutIndex = activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : void 0);
@@ -158,10 +130,10 @@ function LineChart(props) {
   const points = pointLayer ?? /* @__PURE__ */ jsx(
     "ol",
     {
-      ...getPartProps(slotProps?.points, ["aria-label", "data-part"]),
       "data-part": "points",
       "aria-label": `${label} points`,
-      style: { ...slotProps?.points?.style, ...pointsStyle(data.length) },
+      ...slotProps?.points,
+      style: { ...pointsStyle(data.length), ...slotProps?.points?.style },
       children: data.map((point, index) => /* @__PURE__ */ jsx(
         LineChartPoint,
         {
@@ -190,179 +162,133 @@ function LineChart(props) {
     as,
     defaultTag: "figure",
     props: {
-      ...consumerProps,
       "aria-label": label,
       "data-uiify-line-chart": "",
       "data-interactive": interactive ? "" : void 0,
+      ...consumerProps,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("figcaption", { ...getPartProps(slotProps?.caption), children: label }),
+        /* @__PURE__ */ jsx("figcaption", { ...slotProps?.caption, children: label }),
         interactive && readoutPoint ? /* @__PURE__ */ jsxs(
           "div",
           {
-            ...getPartProps(slotProps?.readout, ["aria-live", "data-part"]),
             "data-part": "readout",
             "aria-live": announceReadout ? "polite" : "off",
+            ...slotProps?.readout,
             children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  ...getPartProps(slotProps?.readoutTime, ["data-part"]),
-                  "data-part": "readout-time",
-                  children: String(readoutPoint.time)
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { ...getPartProps(slotProps?.readoutValue), children: readoutPoint.value })
+              /* @__PURE__ */ jsx("span", { "data-part": "readout-time", ...slotProps?.readoutTime, children: String(readoutPoint.time) }),
+              /* @__PURE__ */ jsx("span", { ...slotProps?.readoutValue, children: readoutPoint.value })
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ...getPartProps(slotProps?.plot, ["aria-hidden", "data-part"]),
-            "data-part": "plot",
-            "aria-hidden": interactive ? void 0 : true,
-            children: [
-              /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { "data-part": "plot", "aria-hidden": interactive ? void 0 : true, ...slotProps?.plot, children: [
+          /* @__PURE__ */ jsx("div", { "data-part": "scroll-viewport", ...slotProps?.scrollViewport, children: /* @__PURE__ */ jsxs("div", { "data-part": "canvas", ...slotProps?.canvas, children: [
+            /* @__PURE__ */ jsxs("div", { "data-part": "viewport", ...slotProps?.viewport, children: [
+              points,
+              interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
                 "div",
                 {
-                  ...getPartProps(slotProps?.scrollViewport, ["data-part"]),
-                  "data-part": "scroll-viewport",
-                  children: /* @__PURE__ */ jsxs("div", { ...getPartProps(slotProps?.canvas, ["data-part"]), "data-part": "canvas", children: [
-                    /* @__PURE__ */ jsxs("div", { ...getPartProps(slotProps?.viewport, ["data-part"]), "data-part": "viewport", children: [
-                      points,
-                      interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          ...getPartProps(slotProps?.crosshair, ["aria-hidden", "data-part"]),
-                          "data-part": "crosshair",
-                          "aria-hidden": "true",
-                          style: {
-                            ...slotProps?.crosshair?.style,
-                            ...crosshairFor(activePointIndex, cursorY)
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              ...getPartProps(slotProps?.crosshairMarker, ["data-part"]),
-                              "data-part": "crosshair-marker",
-                              children: "+"
-                            }
-                          )
-                        }
-                      ) : null
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        ...getPartProps(slotProps?.timeViewport, ["data-part"]),
-                        "data-part": "time-viewport",
-                        children: /* @__PURE__ */ jsxs(
-                          "ol",
-                          {
-                            ...getPartProps(slotProps?.timeAxis, ["aria-label", "data-axis", "data-part"]),
-                            "data-part": "time-axis",
-                            "data-axis": "time",
-                            "aria-label": `${label} dates`,
-                            children: [
-                              timeLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
-                                "li",
-                                {
-                                  ...withGeneratedStyle(
-                                    getIndexedPartProps(slotProps?.timeAxisLabel, index, ["data-part"]),
-                                    axisStyle("x", axisLabel.position)
-                                  ),
-                                  children: axisLabel.label
-                                },
-                                `${axisLabel.position}-${index}`
-                              )),
-                              interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
-                                "li",
-                                {
-                                  ...getPartProps(slotProps?.crosshairTime, ["data-part"]),
-                                  "data-part": "crosshair-time",
-                                  style: {
-                                    ...slotProps?.crosshairTime?.style,
-                                    ...crosshairFor(activePointIndex, void 0)
-                                  },
-                                  children: String(crosshairPoint.time)
-                                }
-                              ) : null
-                            ]
-                          }
-                        )
-                      }
-                    )
-                  ] })
+                  "data-part": "crosshair",
+                  "aria-hidden": "true",
+                  ...slotProps?.crosshair,
+                  style: {
+                    ...crosshairFor(activePointIndex, cursorY),
+                    ...slotProps?.crosshair?.style
+                  },
+                  children: /* @__PURE__ */ jsx("span", { "data-part": "crosshair-marker", ...slotProps?.crosshairMarker, children: "+" })
                 }
-              ),
-              /* @__PURE__ */ jsxs(
-                "ol",
-                {
-                  ...getPartProps(slotProps?.valueAxis, ["aria-label", "data-axis", "data-part"]),
-                  "data-part": "value-axis",
-                  "data-axis": "value",
-                  "aria-label": `${label} values`,
-                  children: [
-                    valueLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
-                      "li",
-                      {
-                        ...withGeneratedStyle(
-                          getIndexedPartProps(slotProps?.valueAxisLabel, index, ["data-part"]),
-                          axisStyle("y", axisLabel.position)
-                        ),
-                        children: axisLabel.label
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { "data-part": "time-viewport", ...slotProps?.timeViewport, children: /* @__PURE__ */ jsxs(
+              "ol",
+              {
+                "data-part": "time-axis",
+                "data-axis": "time",
+                "aria-label": `${label} dates`,
+                ...slotProps?.timeAxis,
+                children: [
+                  timeLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      ...withGeneratedStyle(
+                        getIndexedPartProps(slotProps?.timeAxisLabel, index),
+                        axisStyle("x", axisLabel.position)
+                      ),
+                      children: axisLabel.label
+                    },
+                    `${axisLabel.position}-${index}`
+                  )),
+                  interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      "data-part": "crosshair-time",
+                      ...slotProps?.crosshairTime,
+                      style: {
+                        ...crosshairFor(activePointIndex, void 0),
+                        ...slotProps?.crosshairTime?.style
                       },
-                      `${axisLabel.position}-${index}`
-                    )),
-                    interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
-                      "li",
-                      {
-                        ...getPartProps(slotProps?.crosshairValue, ["data-part"]),
-                        "data-part": "crosshair-value",
-                        style: { ...slotProps?.crosshairValue?.style, ...cursorStyle(cursorY) },
-                        children: crosshairPoint.value
-                      }
-                    ) : null
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "table",
-          {
-            ...getPartProps(slotProps?.dataTable, ["aria-label", "data-part"]),
-            "data-part": "data",
-            "aria-label": `${label} data`,
-            children: [
-              /* @__PURE__ */ jsx("thead", { ...getPartProps(slotProps?.dataTableHead), children: /* @__PURE__ */ jsxs("tr", { ...getPartProps(slotProps?.dataTableHeaderRow), children: [
-                /* @__PURE__ */ jsx("th", { ...getPartProps(slotProps?.dataTableTimeHeader, ["scope"]), scope: "col", children: "Time" }),
-                /* @__PURE__ */ jsx("th", { ...getPartProps(slotProps?.dataTableValueHeader, ["scope"]), scope: "col", children: "Value" })
-              ] }) }),
-              /* @__PURE__ */ jsx("tbody", { ...getPartProps(slotProps?.dataTableBody), children: data.map((point, index) => /* @__PURE__ */ jsxs(
-                "tr",
-                {
-                  ...getIndexedPartProps(slotProps?.dataTableRow, slotOffset + index),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "th",
-                      {
-                        ...getIndexedPartProps(slotProps?.dataTableTimeCell, slotOffset + index, [
-                          "scope"
-                        ]),
-                        scope: "row",
-                        children: String(point.time)
-                      }
+                      children: String(crosshairPoint.time)
+                    }
+                  ) : null
+                ]
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            "ol",
+            {
+              "data-part": "value-axis",
+              "data-axis": "value",
+              "aria-label": `${label} values`,
+              ...slotProps?.valueAxis,
+              children: [
+                valueLabels.map((axisLabel, index) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    ...withGeneratedStyle(
+                      getIndexedPartProps(slotProps?.valueAxisLabel, index),
+                      axisStyle("y", axisLabel.position)
                     ),
-                    /* @__PURE__ */ jsx("td", { ...getIndexedPartProps(slotProps?.dataTableValueCell, slotOffset + index), children: point.value })
-                  ]
-                },
-                `${point.time}-${index}`
-              )) })
-            ]
-          }
-        )
+                    children: axisLabel.label
+                  },
+                  `${axisLabel.position}-${index}`
+                )),
+                interactive && crosshairPoint && activePointIndex !== void 0 ? /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    "data-part": "crosshair-value",
+                    ...slotProps?.crosshairValue,
+                    style: { ...cursorStyle(cursorY), ...slotProps?.crosshairValue?.style },
+                    children: crosshairPoint.value
+                  }
+                ) : null
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("table", { "data-part": "data", "aria-label": `${label} data`, ...slotProps?.dataTable, children: [
+          /* @__PURE__ */ jsx("thead", { ...slotProps?.dataTableHead, children: /* @__PURE__ */ jsxs("tr", { ...slotProps?.dataTableHeaderRow, children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", ...slotProps?.dataTableTimeHeader, children: "Time" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", ...slotProps?.dataTableValueHeader, children: "Value" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { ...slotProps?.dataTableBody, children: data.map((point, index) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              ...getIndexedPartProps(slotProps?.dataTableRow, slotOffset + index),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    scope: "row",
+                    ...getIndexedPartProps(slotProps?.dataTableTimeCell, slotOffset + index),
+                    children: String(point.time)
+                  }
+                ),
+                /* @__PURE__ */ jsx("td", { ...getIndexedPartProps(slotProps?.dataTableValueCell, slotOffset + index), children: point.value })
+              ]
+            },
+            `${point.time}-${index}`
+          )) })
+        ] })
       ] })
     },
     render,

package/dist/components/line-chart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/line-chart/LineChart.tsx"],"sourcesContent":["import type { ElementType, KeyboardEvent, PointerEvent, ReactElement, Ref } from \"react\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { mergeRepeatedSlotProps, omitProps } from \"../../core/slot-props.js\";\nimport { assignRef } from \"../../hooks/utils/assign-ref.js\";\nimport {\n  axisLabelsFor,\n  axisStyle,\n  crosshairStyle,\n  cursorStyle,\n  geometryFor,\n  getValueBounds,\n  monthLabelsFor,\n  pointStyle,\n  pointsStyle,\n  slotCrosshairStyle,\n  valueLabelsFor,\n} from \"./line-chart-geometry.js\";\nimport type { LineChartPointProps, LineChartProps, LineChartViewProps } from \"./types.js\";\n\nfunction getPartProps<T extends object>(\n  props: T | undefined,\n  protectedKeys: readonly string[] = [],\n): T {\n  return omitProps(props, [\"children\", \"dangerouslySetInnerHTML\", ...protectedKeys]);\n}\n\nfunction getIndexedPartProps<T extends object>(\n  props: (T & { readonly byItemIndex?: Readonly<Record<number, T>> }) | undefined,\n  index: number,\n  protectedKeys: readonly string[] = [],\n): T {\n  const { byItemIndex, ...common } = props ?? {};\n  const merged = mergeRepeatedSlotProps(common as T, byItemIndex?.[index]);\n  return omitProps(merged, [\n    \"children\",\n    \"dangerouslySetInnerHTML\",\n    \"byItemIndex\",\n    ...protectedKeys,\n  ]);\n}\n\nfunction withGeneratedStyle<T extends { readonly style?: object | undefined }>(\n  props: T,\n  generatedStyle: object,\n): T {\n  return { ...props, style: { ...props.style, ...generatedStyle } };\n}\n\nfunction forwardPointRef(ref: Ref<HTMLElement> | undefined) {\n  return (element: HTMLLIElement | HTMLDivElement | null): void | (() => void) => {\n    const cleanup = assignRef(ref, element);\n    if (typeof cleanup === \"function\") return cleanup;\n    if (ref && typeof ref !== \"function\" && element !== null) {\n      return () => assignRef(ref, null);\n    }\n  };\n}\n\n/** One point and the segment from its predecessor; shared by the static list and virtual rows. */\nexport function LineChartPoint({\n  as: Tag,\n  point,\n  previousPoint,\n  index,\n  count,\n  min,\n  max,\n  interactive,\n  isActive,\n  isSelected,\n  cursorY,\n  onPointClick,\n  onPointPointerLeave,\n  onPointPointerMove,\n  slotProps,\n}: LineChartPointProps): ReactElement {\n  const geometry = geometryFor(point, previousPoint, index, count, min, max);\n  const pointSlotProps = getIndexedPartProps(slotProps?.point, index, [\n    \"aria-hidden\",\n    \"data-crosshair-active\",\n    \"data-first\",\n    \"data-part\",\n    \"data-point-selected\",\n    \"data-time\",\n    \"data-trend\",\n  ]);\n  const { ref: pointRef, ...pointProps } = pointSlotProps;\n  const pointHitSlotProps = getIndexedPartProps(slotProps?.pointHit, index, [\n    \"aria-label\",\n    \"aria-pressed\",\n    \"data-part\",\n    \"type\",\n  ]);\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    pointHitSlotProps.onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    if (event.key !== \"Enter\" && event.key !== \" \") return;\n    event.preventDefault();\n    onPointClick?.(index);\n  };\n\n  return (\n    <Tag\n      {...pointProps}\n      {...(pointRef ? { ref: forwardPointRef(pointRef) } : {})}\n      aria-hidden={interactive ? undefined : true}\n      data-part=\"point\"\n      data-first={previousPoint === undefined ? \"\" : undefined}\n      data-crosshair-active={interactive && isActive ? \"\" : undefined}\n      data-point-selected={interactive && isSelected ? \"\" : undefined}\n      data-time={String(point.time)}\n      data-trend={geometry.trend}\n      style={{\n        ...pointSlotProps.style,\n        ...pointStyle(geometry, isActive ? cursorY : undefined),\n      }}\n    >\n      {interactive ? (\n        <button\n          {...pointHitSlotProps}\n          data-part=\"point-hit\"\n          type=\"button\"\n          aria-label={`Point ${String(point.time)}`}\n          aria-pressed={isSelected}\n          onClick={(event) => {\n            pointHitSlotProps.onClick?.(event);\n            if (!event.defaultPrevented) onPointClick?.(index);\n          }}\n          onKeyDown={handleKeyDown}\n          onPointerLeave={(event) => {\n            pointHitSlotProps.onPointerLeave?.(event);\n            if (!event.defaultPrevented) onPointPointerLeave?.();\n          }}\n          onPointerMove={(event: PointerEvent<HTMLButtonElement>) => {\n            pointHitSlotProps.onPointerMove?.(event);\n            if (!event.defaultPrevented)\n              onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY });\n          }}\n        />\n      ) : null}\n    </Tag>\n  );\n}\nLineChartPoint.displayName = \"LineChartPoint\";\n\nexport function LineChart<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    data,\n    xAxis,\n    yAxis,\n    \"aria-label\": ariaLabel,\n    activePointIndex,\n    cursorY,\n    interactive = false,\n    locale = \"en-US\",\n    onPointClick,\n    onPointPointerLeave,\n    onPointPointerMove,\n    selectedPointIndex,\n    slotProps,\n    pointLayer,\n    announceReadout = true,\n    slotCount,\n    slotOffset = 0,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\"> & LineChartViewProps;\n  const { min, max } = getValueBounds(data);\n  const label = ariaLabel ?? \"Line chart\";\n  const timeLabels = axisLabelsFor(xAxis, monthLabelsFor(data, locale));\n  const valueLabels = axisLabelsFor(yAxis, valueLabelsFor(min, max, locale));\n  const readoutIndex =\n    activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : undefined);\n  const readoutPoint = readoutIndex === undefined ? undefined : data[readoutIndex];\n  const crosshairPoint = activePointIndex === undefined ? undefined : data[activePointIndex];\n  const points = pointLayer ?? (\n    <ol\n      {...getPartProps(slotProps?.points, [\"aria-label\", \"data-part\"])}\n      data-part=\"points\"\n      aria-label={`${label} points`}\n      style={{ ...slotProps?.points?.style, ...pointsStyle(data.length) }}\n    >\n      {data.map((point, index) => (\n        <LineChartPoint\n          key={`${point.time}-${index}`}\n          as=\"li\"\n          point={point}\n          previousPoint={data[index - 1]}\n          index={index}\n          count={data.length}\n          min={min}\n          max={max}\n          interactive={interactive}\n          isActive={activePointIndex === index}\n          isSelected={selectedPointIndex === index}\n          cursorY={cursorY}\n          onPointClick={onPointClick}\n          onPointPointerLeave={onPointPointerLeave}\n          onPointPointerMove={onPointPointerMove}\n          slotProps={slotProps}\n        />\n      ))}\n    </ol>\n  );\n  const crosshairFor = (index: number, y: number | undefined) =>\n    slotCount === undefined\n      ? crosshairStyle(index, data.length, y)\n      : slotCrosshairStyle(slotOffset + index, slotCount, y);\n\n  return useRenderElement({\n    as,\n    defaultTag: \"figure\",\n    props: {\n      ...consumerProps,\n      \"aria-label\": label,\n      \"data-uiify-line-chart\": \"\",\n      \"data-interactive\": interactive ? \"\" : undefined,\n      children: (\n        <>\n          <figcaption {...getPartProps(slotProps?.caption)}>{label}</figcaption>\n          {interactive && readoutPoint ? (\n            <div\n              {...getPartProps(slotProps?.readout, [\"aria-live\", \"data-part\"])}\n              data-part=\"readout\"\n              aria-live={announceReadout ? \"polite\" : \"off\"}\n            >\n              <span\n                {...getPartProps(slotProps?.readoutTime, [\"data-part\"])}\n                data-part=\"readout-time\"\n              >\n                {String(readoutPoint.time)}\n              </span>\n              <span {...getPartProps(slotProps?.readoutValue)}>{readoutPoint.value}</span>\n            </div>\n          ) : null}\n          <div\n            {...getPartProps(slotProps?.plot, [\"aria-hidden\", \"data-part\"])}\n            data-part=\"plot\"\n            aria-hidden={interactive ? undefined : true}\n          >\n            <div\n              {...getPartProps(slotProps?.scrollViewport, [\"data-part\"])}\n              data-part=\"scroll-viewport\"\n            >\n              <div {...getPartProps(slotProps?.canvas, [\"data-part\"])} data-part=\"canvas\">\n                <div {...getPartProps(slotProps?.viewport, [\"data-part\"])} data-part=\"viewport\">\n                  {points}\n                  {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                    <div\n                      {...getPartProps(slotProps?.crosshair, [\"aria-hidden\", \"data-part\"])}\n                      data-part=\"crosshair\"\n                      aria-hidden=\"true\"\n                      style={{\n                        ...slotProps?.crosshair?.style,\n                        ...crosshairFor(activePointIndex, cursorY),\n                      }}\n                    >\n                      <span\n                        {...getPartProps(slotProps?.crosshairMarker, [\"data-part\"])}\n                        data-part=\"crosshair-marker\"\n                      >\n                        +\n                      </span>\n                    </div>\n                  ) : null}\n                </div>\n                <div\n                  {...getPartProps(slotProps?.timeViewport, [\"data-part\"])}\n                  data-part=\"time-viewport\"\n                >\n                  <ol\n                    {...getPartProps(slotProps?.timeAxis, [\"aria-label\", \"data-axis\", \"data-part\"])}\n                    data-part=\"time-axis\"\n                    data-axis=\"time\"\n                    aria-label={`${label} dates`}\n                  >\n                    {timeLabels.map((axisLabel, index) => (\n                      <li\n                        key={`${axisLabel.position}-${index}`}\n                        {...withGeneratedStyle(\n                          getIndexedPartProps(slotProps?.timeAxisLabel, index, [\"data-part\"]),\n                          axisStyle(\"x\", axisLabel.position),\n                        )}\n                      >\n                        {axisLabel.label}\n                      </li>\n                    ))}\n                    {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                      <li\n                        {...getPartProps(slotProps?.crosshairTime, [\"data-part\"])}\n                        data-part=\"crosshair-time\"\n                        style={{\n                          ...slotProps?.crosshairTime?.style,\n                          ...crosshairFor(activePointIndex, undefined),\n                        }}\n                      >\n                        {String(crosshairPoint.time)}\n                      </li>\n                    ) : null}\n                  </ol>\n                </div>\n              </div>\n            </div>\n            <ol\n              {...getPartProps(slotProps?.valueAxis, [\"aria-label\", \"data-axis\", \"data-part\"])}\n              data-part=\"value-axis\"\n              data-axis=\"value\"\n              aria-label={`${label} values`}\n            >\n              {valueLabels.map((axisLabel, index) => (\n                <li\n                  key={`${axisLabel.position}-${index}`}\n                  {...withGeneratedStyle(\n                    getIndexedPartProps(slotProps?.valueAxisLabel, index, [\"data-part\"]),\n                    axisStyle(\"y\", axisLabel.position),\n                  )}\n                >\n                  {axisLabel.label}\n                </li>\n              ))}\n              {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                <li\n                  {...getPartProps(slotProps?.crosshairValue, [\"data-part\"])}\n                  data-part=\"crosshair-value\"\n                  style={{ ...slotProps?.crosshairValue?.style, ...cursorStyle(cursorY) }}\n                >\n                  {crosshairPoint.value}\n                </li>\n              ) : null}\n            </ol>\n          </div>\n          <table\n            {...getPartProps(slotProps?.dataTable, [\"aria-label\", \"data-part\"])}\n            data-part=\"data\"\n            aria-label={`${label} data`}\n          >\n            <thead {...getPartProps(slotProps?.dataTableHead)}>\n              <tr {...getPartProps(slotProps?.dataTableHeaderRow)}>\n                <th {...getPartProps(slotProps?.dataTableTimeHeader, [\"scope\"])} scope=\"col\">\n                  Time\n                </th>\n                <th {...getPartProps(slotProps?.dataTableValueHeader, [\"scope\"])} scope=\"col\">\n                  Value\n                </th>\n              </tr>\n            </thead>\n            <tbody {...getPartProps(slotProps?.dataTableBody)}>\n              {data.map((point, index) => (\n                <tr\n                  key={`${point.time}-${index}`}\n                  {...getIndexedPartProps(slotProps?.dataTableRow, slotOffset + index)}\n                >\n                  <th\n                    {...getIndexedPartProps(slotProps?.dataTableTimeCell, slotOffset + index, [\n                      \"scope\",\n                    ])}\n                    scope=\"row\"\n                  >\n                    {String(point.time)}\n                  </th>\n                  <td {...getIndexedPartProps(slotProps?.dataTableValueCell, slotOffset + index)}>\n                    {point.value}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </>\n      ),\n    },\n    render,\n    state: {},\n  });\n}\nLineChart.displayName = \"LineChart\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/line-chart/LineChart.tsx"],"sourcesContent":["import type { ElementType, KeyboardEvent, PointerEvent, ReactElement, Ref } from \"react\";\nimport { composeEventHandlers } from \"@gunkin/uiify/core/compose-event-handlers\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { mergeRepeatedSlotProps } from \"../../core/slot-props.js\";\nimport { assignRef } from \"../../hooks/utils/assign-ref.js\";\nimport {\n  axisLabelsFor,\n  axisStyle,\n  crosshairStyle,\n  cursorStyle,\n  geometryFor,\n  getValueBounds,\n  monthLabelsFor,\n  pointStyle,\n  pointsStyle,\n  slotCrosshairStyle,\n  valueLabelsFor,\n} from \"./line-chart-geometry.js\";\nimport type { LineChartPointProps, LineChartProps, LineChartViewProps } from \"./types.js\";\n\nfunction getIndexedPartProps<T extends object>(\n  props: (T & { readonly byItemIndex?: Readonly<Record<number, T>> }) | undefined,\n  index: number,\n): T {\n  const { byItemIndex, ...common } = props ?? {};\n  return mergeRepeatedSlotProps(common as T, byItemIndex?.[index]);\n}\n\nfunction withGeneratedStyle<T extends { readonly style?: object | undefined }>(\n  props: T,\n  generatedStyle: object,\n): T {\n  return { ...props, style: { ...generatedStyle, ...props.style } };\n}\n\nfunction forwardPointRef(ref: Ref<HTMLElement> | undefined) {\n  return (element: HTMLLIElement | HTMLDivElement | null): void | (() => void) => {\n    const cleanup = assignRef(ref, element);\n    if (typeof cleanup === \"function\") return cleanup;\n    if (ref && typeof ref !== \"function\" && element !== null) {\n      return () => assignRef(ref, null);\n    }\n  };\n}\n\n/** One point and the segment from its predecessor; shared by the static list and virtual rows. */\nexport function LineChartPoint({\n  as: Tag,\n  point,\n  previousPoint,\n  index,\n  count,\n  min,\n  max,\n  interactive,\n  isActive,\n  isSelected,\n  cursorY,\n  onPointClick,\n  onPointPointerLeave,\n  onPointPointerMove,\n  slotProps,\n}: LineChartPointProps): ReactElement {\n  const geometry = geometryFor(point, previousPoint, index, count, min, max);\n  const pointSlotProps = getIndexedPartProps(slotProps?.point, index);\n  const { ref: pointRef, ...pointProps } = pointSlotProps;\n  const pointHitSlotProps = getIndexedPartProps(slotProps?.pointHit, index);\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key !== \"Enter\" && event.key !== \" \") return;\n    event.preventDefault();\n    onPointClick?.(index);\n  };\n\n  return (\n    <Tag\n      aria-hidden={interactive ? undefined : true}\n      data-part=\"point\"\n      data-first={previousPoint === undefined ? \"\" : undefined}\n      data-crosshair-active={interactive && isActive ? \"\" : undefined}\n      data-point-selected={interactive && isSelected ? \"\" : undefined}\n      data-time={String(point.time)}\n      data-trend={geometry.trend}\n      {...pointProps}\n      {...(pointRef ? { ref: forwardPointRef(pointRef) } : {})}\n      style={{\n        ...pointStyle(geometry, isActive ? cursorY : undefined),\n        ...pointSlotProps.style,\n      }}\n    >\n      {interactive ? (\n        <button\n          data-part=\"point-hit\"\n          type=\"button\"\n          aria-label={`Point ${String(point.time)}`}\n          aria-pressed={isSelected}\n          {...pointHitSlotProps}\n          onClick={composeEventHandlers(pointHitSlotProps.onClick, () => onPointClick?.(index))}\n          onKeyDown={composeEventHandlers(pointHitSlotProps.onKeyDown, handleKeyDown)}\n          onPointerLeave={composeEventHandlers(pointHitSlotProps.onPointerLeave, () =>\n            onPointPointerLeave?.(),\n          )}\n          onPointerMove={composeEventHandlers(\n            pointHitSlotProps.onPointerMove,\n            (event: PointerEvent<HTMLButtonElement>) =>\n              onPointPointerMove?.({ index, offsetY: event.nativeEvent.offsetY }),\n          )}\n        />\n      ) : null}\n    </Tag>\n  );\n}\nLineChartPoint.displayName = \"LineChartPoint\";\n\nexport function LineChart<TAs extends ElementType = \"figure\">(\n  props: LineChartProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    data,\n    xAxis,\n    yAxis,\n    activePointIndex,\n    cursorY,\n    interactive = false,\n    locale = \"en-US\",\n    onPointClick,\n    onPointPointerLeave,\n    onPointPointerMove,\n    selectedPointIndex,\n    slotProps,\n    pointLayer,\n    announceReadout = true,\n    slotCount,\n    slotOffset = 0,\n    ...consumerProps\n  } = props as LineChartProps<\"figure\"> & LineChartViewProps;\n  const { min, max } = getValueBounds(data);\n  const label = consumerProps[\"aria-label\"] ?? \"Line chart\";\n  const timeLabels = axisLabelsFor(xAxis, monthLabelsFor(data, locale));\n  const valueLabels = axisLabelsFor(yAxis, valueLabelsFor(min, max, locale));\n  const readoutIndex =\n    activePointIndex ?? selectedPointIndex ?? (data.length > 0 ? data.length - 1 : undefined);\n  const readoutPoint = readoutIndex === undefined ? undefined : data[readoutIndex];\n  const crosshairPoint = activePointIndex === undefined ? undefined : data[activePointIndex];\n  const points = pointLayer ?? (\n    <ol\n      data-part=\"points\"\n      aria-label={`${label} points`}\n      {...slotProps?.points}\n      style={{ ...pointsStyle(data.length), ...slotProps?.points?.style }}\n    >\n      {data.map((point, index) => (\n        <LineChartPoint\n          key={`${point.time}-${index}`}\n          as=\"li\"\n          point={point}\n          previousPoint={data[index - 1]}\n          index={index}\n          count={data.length}\n          min={min}\n          max={max}\n          interactive={interactive}\n          isActive={activePointIndex === index}\n          isSelected={selectedPointIndex === index}\n          cursorY={cursorY}\n          onPointClick={onPointClick}\n          onPointPointerLeave={onPointPointerLeave}\n          onPointPointerMove={onPointPointerMove}\n          slotProps={slotProps}\n        />\n      ))}\n    </ol>\n  );\n  const crosshairFor = (index: number, y: number | undefined) =>\n    slotCount === undefined\n      ? crosshairStyle(index, data.length, y)\n      : slotCrosshairStyle(slotOffset + index, slotCount, y);\n\n  return useRenderElement({\n    as,\n    defaultTag: \"figure\",\n    props: {\n      \"aria-label\": label,\n      \"data-uiify-line-chart\": \"\",\n      \"data-interactive\": interactive ? \"\" : undefined,\n      ...consumerProps,\n      children: (\n        <>\n          <figcaption {...slotProps?.caption}>{label}</figcaption>\n          {interactive && readoutPoint ? (\n            <div\n              data-part=\"readout\"\n              aria-live={announceReadout ? \"polite\" : \"off\"}\n              {...slotProps?.readout}\n            >\n              <span data-part=\"readout-time\" {...slotProps?.readoutTime}>\n                {String(readoutPoint.time)}\n              </span>\n              <span {...slotProps?.readoutValue}>{readoutPoint.value}</span>\n            </div>\n          ) : null}\n          <div data-part=\"plot\" aria-hidden={interactive ? undefined : true} {...slotProps?.plot}>\n            <div data-part=\"scroll-viewport\" {...slotProps?.scrollViewport}>\n              <div data-part=\"canvas\" {...slotProps?.canvas}>\n                <div data-part=\"viewport\" {...slotProps?.viewport}>\n                  {points}\n                  {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                    <div\n                      data-part=\"crosshair\"\n                      aria-hidden=\"true\"\n                      {...slotProps?.crosshair}\n                      style={{\n                        ...crosshairFor(activePointIndex, cursorY),\n                        ...slotProps?.crosshair?.style,\n                      }}\n                    >\n                      <span data-part=\"crosshair-marker\" {...slotProps?.crosshairMarker}>\n                        +\n                      </span>\n                    </div>\n                  ) : null}\n                </div>\n                <div data-part=\"time-viewport\" {...slotProps?.timeViewport}>\n                  <ol\n                    data-part=\"time-axis\"\n                    data-axis=\"time\"\n                    aria-label={`${label} dates`}\n                    {...slotProps?.timeAxis}\n                  >\n                    {timeLabels.map((axisLabel, index) => (\n                      <li\n                        key={`${axisLabel.position}-${index}`}\n                        {...withGeneratedStyle(\n                          getIndexedPartProps(slotProps?.timeAxisLabel, index),\n                          axisStyle(\"x\", axisLabel.position),\n                        )}\n                      >\n                        {axisLabel.label}\n                      </li>\n                    ))}\n                    {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                      <li\n                        data-part=\"crosshair-time\"\n                        {...slotProps?.crosshairTime}\n                        style={{\n                          ...crosshairFor(activePointIndex, undefined),\n                          ...slotProps?.crosshairTime?.style,\n                        }}\n                      >\n                        {String(crosshairPoint.time)}\n                      </li>\n                    ) : null}\n                  </ol>\n                </div>\n              </div>\n            </div>\n            <ol\n              data-part=\"value-axis\"\n              data-axis=\"value\"\n              aria-label={`${label} values`}\n              {...slotProps?.valueAxis}\n            >\n              {valueLabels.map((axisLabel, index) => (\n                <li\n                  key={`${axisLabel.position}-${index}`}\n                  {...withGeneratedStyle(\n                    getIndexedPartProps(slotProps?.valueAxisLabel, index),\n                    axisStyle(\"y\", axisLabel.position),\n                  )}\n                >\n                  {axisLabel.label}\n                </li>\n              ))}\n              {interactive && crosshairPoint && activePointIndex !== undefined ? (\n                <li\n                  data-part=\"crosshair-value\"\n                  {...slotProps?.crosshairValue}\n                  style={{ ...cursorStyle(cursorY), ...slotProps?.crosshairValue?.style }}\n                >\n                  {crosshairPoint.value}\n                </li>\n              ) : null}\n            </ol>\n          </div>\n          <table data-part=\"data\" aria-label={`${label} data`} {...slotProps?.dataTable}>\n            <thead {...slotProps?.dataTableHead}>\n              <tr {...slotProps?.dataTableHeaderRow}>\n                <th scope=\"col\" {...slotProps?.dataTableTimeHeader}>\n                  Time\n                </th>\n                <th scope=\"col\" {...slotProps?.dataTableValueHeader}>\n                  Value\n                </th>\n              </tr>\n            </thead>\n            <tbody {...slotProps?.dataTableBody}>\n              {data.map((point, index) => (\n                <tr\n                  key={`${point.time}-${index}`}\n                  {...getIndexedPartProps(slotProps?.dataTableRow, slotOffset + index)}\n                >\n                  <th\n                    scope=\"row\"\n                    {...getIndexedPartProps(slotProps?.dataTableTimeCell, slotOffset + index)}\n                  >\n                    {String(point.time)}\n                  </th>\n                  <td {...getIndexedPartProps(slotProps?.dataTableValueCell, slotOffset + index)}>\n                    {point.value}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </>\n      ),\n    },\n    render,\n    state: {},\n  });\n}\nLineChart.displayName = \"LineChart\";\n"],"mappings":"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","names":[]}

package/dist/components/line-chart/client/LineChartClient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChartClient.d.ts","sourceRoot":"","sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,WAAW,EAAE,YAAY,EAAO,MAAM,OAAO,CAAC;AAa3E,OAAO,KAAK,EACV,oBAAoB,EAKrB,MAAM,aAAa,CAAC;AAwBrB,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CAwKrB;yBA1Ke,eAAe"}
+{"version":3,"file":"LineChartClient.d.ts","sourceRoot":"","sources":["../../../../src/components/line-chart/client/LineChartClient.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,WAAW,EAAE,YAAY,EAAO,MAAM,OAAO,CAAC;AAY3E,OAAO,KAAK,EACV,oBAAoB,EAKrB,MAAM,aAAa,CAAC;AAwBrB,wBAAgB,eAAe,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,GAC/B,YAAY,GAAG,IAAI,CAkKrB;yBApKe,eAAe"}

package/dist/components/line-chart/client/LineChartClient.js

@@ -9,7 +9,6 @@ import {
   useLiveChartWindow
 } from "../../internal/live-chart/use-live-chart-window.js";
 import { useScrollbarReserve } from "../../internal/chart-scrollbar/use-scrollbar-reserve.js";
-import { omitProps } from "../../../core/slot-props.js";
 import { VirtualScroll } from "../../virtual-scroll/VirtualScroll.js";
 import { LineChart, LineChartPoint } from "../LineChart.js";
 import { getValueBounds } from "../line-chart-geometry.js";
@@ -42,9 +41,10 @@ function LineChartClient(props) {
     visibleCount,
     itemWidth: viewport.itemWidth,
     figureHeight: figureSize?.height,
-    scrollVariable: "--line-scroll-x"
+    scrollVariable: "--line-scroll-x",
+    consumerStyle
   });
-  useScrollbarReserve(liveWindow.chartRef, "--line-scrollbar-size");
+  useScrollbarReserve(liveWindow.chartRef, "--line-scrollbar-size", consumerStyle);
   const [cursor, setCursor] = useState(null);
   const [selectedPointIndex, setSelectedPointIndex] = useState();
   const chartRef = useMergedRefs(viewport.ref, consumerRef, liveWindow.chartRef);
@@ -71,8 +71,8 @@ function LineChartClient(props) {
     [data, live]
   );
   const style = {
-    ...consumerStyle,
-    "--line-scale": String(viewport.scale)
+    "--line-scale": String(viewport.scale),
+    ...consumerStyle
   };
   if (!live) {
     const chartProps2 = {
@@ -131,15 +131,7 @@ function LineChartClient(props) {
           }
         );
       },
-      ...omitProps(liveScrollportProps, [
-        "children",
-        "dangerouslySetInnerHTML",
-        "data-dynamic-layout",
-        "data-orientation",
-        "data-part",
-        "data-uiify-virtual-scroll",
-        "role"
-      ]),
+      ...liveScrollportProps,
       ...liveScrollportRef ? { ref: liveScrollportRef } : {},
       slotProps: {
         ...slotProps?.liveSpacer ? { spacer: slotProps.liveSpacer } : {},
@@ -152,7 +144,8 @@ function LineChartClient(props) {
     "--line-content-size": `${contentSize}px`,
     "--line-plot-height": `${plotHeight}px`,
     // One virtual row: the viewport holds `visibleCount` of them.
-    "--line-run": String(100 / visibleCount)
+    "--line-run": String(100 / visibleCount),
+    ...consumerStyle
   };
   const chartProps = {
     ...consumerProps,