@galaxy-io/dls 1.4.14 → 1.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/charts/ChartLegend.js +3 -3
  2. package/dist/charts/ChartPrimitives.d.ts +15 -0
  3. package/dist/charts/ChartPrimitives.js +28 -9
  4. package/dist/styles.css +5 -4
  5. package/package.json +1 -1
package/dist/charts/ChartLegend.js CHANGED
@@ -2,7 +2,7 @@ import Text, { TextSize, TextVariant } from "../text/Text.js";
2
2
  import Tooltip, { TooltipPosition, TooltipVariant } from "../tooltip/Tooltip.js";
3
3
  import Circle from "../shapes/Circle.js";
4
4
  import { ChartMarkState } from "./types.js";
5
- import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
5
+ import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
6
6
  import { useCallback, useLayoutEffect, useRef, useState } from "react";
7
7
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
8
8
  //#region src/charts/ChartLegend.tsx
@@ -120,7 +120,7 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
120
120
  $vertical: vertical,
121
121
  $extent: verticalExtent,
122
122
  children: [
123
- /* @__PURE__ */ jsxs(ChartLegendMeasure, {
123
+ /* @__PURE__ */ jsx(ChartLegendMeasureClip, { children: /* @__PURE__ */ jsxs(ChartLegendMeasure, {
124
124
  ref: measureRef,
125
125
  $vertical: vertical,
126
126
  "aria-hidden": "true",
@@ -141,7 +141,7 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
141
141
  children: `+${items.length - 1} more`
142
142
  })
143
143
  })]
144
- }),
144
+ }) }),
145
145
  inlineItems.map((item) => renderItem(item, vertical)),
146
146
  overflowItems.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
147
147
  isInteractive: true,
package/dist/charts/ChartPrimitives.d.ts CHANGED
@@ -228,6 +228,21 @@ export declare const ChartLegendRow: import("@linaria/react").StyledComponent<im
228
228
  /** Plot box height in px — the side legend's fit extent. */
229
229
  $extent?: number;
230
230
  }>;
231
+ /**
232
+ * Zero-size clip around the measure layer.
233
+ *
234
+ * `visibility: hidden` suppresses paint but not *overflow*: the measure layer's
235
+ * max-content box still joins the scrollable overflow region of every ancestor
236
+ * up to the nearest scroll container, and the row above cannot clip it. A
237
+ * legend wide enough to collapse therefore handed the page a horizontal
238
+ * scrollbar into empty space — the wider the collapsed entries, the further it
239
+ * scrolled.
240
+ *
241
+ * `overflow: hidden` on a 0×0 box ends the propagation there while leaving
242
+ * descendant layout geometry untouched, so the sizes the fit computation reads
243
+ * are exactly the ones it read before.
244
+ */
245
+ export declare const ChartLegendMeasureClip: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
231
246
  /**
232
247
  * Invisible copy of every legend entry plus a worst-case trigger, laid out
233
248
  * unconstrained along the legend's own axis so the fit computation can read
package/dist/charts/ChartPrimitives.js CHANGED
@@ -307,6 +307,25 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
307
307
  }
308
308
  });
309
309
  /**
310
+ * Zero-size clip around the measure layer.
311
+ *
312
+ * `visibility: hidden` suppresses paint but not *overflow*: the measure layer's
313
+ * max-content box still joins the scrollable overflow region of every ancestor
314
+ * up to the nearest scroll container, and the row above cannot clip it. A
315
+ * legend wide enough to collapse therefore handed the page a horizontal
316
+ * scrollbar into empty space — the wider the collapsed entries, the further it
317
+ * scrolled.
318
+ *
319
+ * `overflow: hidden` on a 0×0 box ends the propagation there while leaving
320
+ * descendant layout geometry untouched, so the sizes the fit computation reads
321
+ * are exactly the ones it read before.
322
+ */
323
+ var ChartLegendMeasureClip = /*#__PURE__*/ styled("div")({
324
+ name: "ChartLegendMeasureClip",
325
+ class: "c1armna5",
326
+ propsAsIs: false
327
+ });
328
+ /**
310
329
  * Invisible copy of every legend entry plus a worst-case trigger, laid out
311
330
  * unconstrained along the legend's own axis so the fit computation can read
312
331
  * real sizes.
@@ -318,11 +337,11 @@ var _exp42 = () => ({ $vertical }) => $vertical ? "column" : "row";
318
337
  var _exp43 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
319
338
  var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
320
339
  name: "ChartLegendMeasure",
321
- class: "c1armna5",
340
+ class: "cgd77rv",
322
341
  propsAsIs: false,
323
342
  vars: {
324
- "c1armna5-0": [_exp42()],
325
- "c1armna5-1": [_exp43()]
343
+ "cgd77rv-0": [_exp42()],
344
+ "cgd77rv-1": [_exp43()]
326
345
  }
327
346
  });
328
347
  /**
@@ -334,7 +353,7 @@ var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
334
353
  */
335
354
  var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
336
355
  name: "ChartLegendOverflowList",
337
- class: "cgd77rv",
356
+ class: "cutidpi",
338
357
  propsAsIs: false
339
358
  });
340
359
  /**
@@ -358,18 +377,18 @@ var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
358
377
  var _exp45 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
359
378
  var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
360
379
  name: "ChartLegendItemButton",
361
- class: "cutidpi",
380
+ class: "ccpczg",
362
381
  propsAsIs: false,
363
- vars: { "cutidpi-0": [_exp45()] }
382
+ vars: { "ccpczg-0": [_exp45()] }
364
383
  });
365
384
  /** The same row, when the legend is inert — no button semantics to announce.
366
385
  * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
367
386
  var _exp47 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
368
387
  var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
369
388
  name: "ChartLegendItemStatic",
370
- class: "ccpczg",
389
+ class: "c2re25h",
371
390
  propsAsIs: false,
372
- vars: { "ccpczg-0": [_exp47()] }
391
+ vars: { "c2re25h-0": [_exp47()] }
373
392
  });
374
393
  //#endregion
375
- export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
394
+ export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
package/dist/styles.css CHANGED
@@ -42,10 +42,11 @@
42
42
  .cz6jod1{position:absolute;left:var(--cz6jod1-0);top:var(--cz6jod1-1);width:var(--cz6jod1-2);height:var(--cz6jod1-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
43
43
  .c1de5mqk{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:6px 8px;border:0.5px solid var(--c1de5mqk-0);border-radius:6px;background-color:var(--c1de5mqk-1);pointer-events:none;text-align:center;}
44
44
  .cjirv6a{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);-webkit-box-pack:var(--cjirv6a-2);-ms-flex-pack:var(--cjirv6a-2);-webkit-justify-content:var(--cjirv6a-2);justify-content:var(--cjirv6a-2);width:var(--cjirv6a-3);min-width:var(--cjirv6a-4);height:var(--cjirv6a-5);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-6);padding-left:var(--cjirv6a-7);}
45
- .c1armna5{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1armna5-0);-ms-flex-direction:var(--c1armna5-0);flex-direction:var(--c1armna5-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--c1armna5-1);-webkit-box-align:var(--c1armna5-1);-ms-flex-align:var(--c1armna5-1);align-items:var(--c1armna5-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
46
- .cgd77rv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;}
47
- .cutidpi{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:var(--cutidpi-0);margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.cutidpi[data-state="muted"]{opacity:0.1;}.cutidpi[data-state="dimmed"]{opacity:0.4;}.cutidpi:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
48
- .ccpczg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;padding:var(--ccpczg-0);opacity:1;}.ccpczg[data-state="muted"]{opacity:0.1;}.ccpczg[data-state="dimmed"]{opacity:0.4;}
45
+ .c1armna5{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;}
46
+ .cgd77rv{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cgd77rv-0);-ms-flex-direction:var(--cgd77rv-0);flex-direction:var(--cgd77rv-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cgd77rv-1);-webkit-box-align:var(--cgd77rv-1);-ms-flex-align:var(--cgd77rv-1);align-items:var(--cgd77rv-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
47
+ .cutidpi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;}
48
+ .ccpczg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:var(--ccpczg-0);margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.ccpczg[data-state="muted"]{opacity:0.1;}.ccpczg[data-state="dimmed"]{opacity:0.4;}.ccpczg:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
49
+ .c2re25h{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;padding:var(--c2re25h-0);opacity:1;}.c2re25h[data-state="muted"]{opacity:0.1;}.c2re25h[data-state="dimmed"]{opacity:0.4;}
49
50
  .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
50
51
  .tbnx4ok{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
51
52
  .tjda4tq{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding:var(--tjda4tq-0);background-color:var(--tjda4tq-1);border:var(--tjda4tq-2);border-radius:5px;}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@galaxy-io/dls",
3
- "version": "1.4.14",
3
+ "version": "1.4.15",
4
4
  "description": "Galaxy Design Language System",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",