@ktnpm_devops/react-component 0.17.0 → 0.18.0

package/dist/index98.js

@@ -1,46 +1,48 @@
-import { CHART_COLORS, GEO_MAP } from "./index64.js";
-import { orbitTokens } from "./index3.js";
-const SELECTION_RING = {
-  light: orbitTokens.purple.base,
-  dark: "#FFFFFF"
+const root = "krc-root-U8B4Y";
+const header = "krc-header-dy6xQ";
+const headerLeft = "krc-headerLeft-80jJu";
+const title = "krc-title--e-Ci";
+const subtitle = "krc-subtitle-63ixC";
+const headerRight = "krc-headerRight-3Vuls";
+const toolbar = "krc-toolbar-h6ALf";
+const chartTypeToggle = "krc-chartTypeToggle-6DRWb";
+const active = "krc-active-Un9q0";
+const chartContainer = "krc-chartContainer-2Oz2N";
+const loading = "krc-loading-hTkxl";
+const error = "krc-error--F7yO";
+const retryButton = "krc-retryButton-w0SS7";
+const empty = "krc-empty-HWTS-";
+const styles = {
+  root,
+  header,
+  headerLeft,
+  title,
+  subtitle,
+  headerRight,
+  toolbar,
+  chartTypeToggle,
+  active,
+  chartContainer,
+  loading,
+  error,
+  retryButton,
+  empty
 };
-const UNCATEGORISED_COLOR = orbitTokens.brand.orange;
-const buildCategoryColors = (points) => {
-  const categories = [...new Set(points.map((p) => p.category).filter((c) => c != null))];
-  categories.sort((a, b) => a.localeCompare(b));
-  return new Map(categories.map((category, i) => [category, CHART_COLORS[i % CHART_COLORS.length]]));
-};
-const buildWeightScale = (points) => {
-  const weights = points.map((p) => p.weight).filter((w) => w != null && Number.isFinite(w));
-  if (weights.length === 0) return null;
-  const min = Math.min(...weights);
-  const max = Math.max(...weights);
-  return min === max ? null : { min, max };
-};
-const radiusFor = (weight, scale) => {
-  if (scale == null || weight == null || !Number.isFinite(weight)) return GEO_MAP.BASE_MARKER_RADIUS;
-  const ratio = (weight - scale.min) / (scale.max - scale.min);
-  const clamped = Math.min(Math.max(ratio, 0), 1);
-  const minArea = GEO_MAP.MIN_MARKER_RADIUS ** 2;
-  const maxArea = GEO_MAP.MAX_MARKER_RADIUS ** 2;
-  return Math.sqrt(minArea + clamped * (maxArea - minArea));
-};
-const buildMarkerStyle = (point, { categoryColors, weightScale, selected, theme }) => {
-  const fillColor = (point.category != null ? categoryColors.get(point.category) : void 0) ?? UNCATEGORISED_COLOR;
-  const radius = radiusFor(point.weight, weightScale);
-  return {
-    radius: selected ? radius + GEO_MAP.SELECTED_RADIUS_BOOST : radius,
-    color: selected ? SELECTION_RING[theme] : fillColor,
-    weight: selected ? GEO_MAP.SELECTED_STROKE_WIDTH : GEO_MAP.MARKER_STROKE_WIDTH,
-    fillColor,
-    fillOpacity: selected ? 1 : GEO_MAP.MARKER_FILL_OPACITY
-  };
-};
-const buildLegendItems = (categoryColors) => [...categoryColors].map(([label, color]) => ({ label, color }));
 export {
-  buildCategoryColors,
-  buildLegendItems,
-  buildMarkerStyle,
-  buildWeightScale
+  active,
+  chartContainer,
+  chartTypeToggle,
+  styles as default,
+  empty,
+  error,
+  header,
+  headerLeft,
+  headerRight,
+  loading,
+  retryButton,
+  root,
+  subtitle,
+  title,
+  toolbar
 };
 //# sourceMappingURL=index98.js.map

package/dist/index98.js.map

@@ -1 +1 @@
-{"version":3,"file":"index98.js","sources":["../src/geo/GeoMapCard/buildMarkerStyle.ts"],"sourcesContent":["import { CHART_COLORS, GEO_MAP } from '../../constants';\nimport { orbitTokens } from '../../tokens/tokens';\nimport type { ThemeMode } from '../../hooks/useThemeMode';\nimport type { GeoLegendItem, GeoPoint } from '../../types/geo.types';\n\n/**\n * Leaflet draws its markers as SVG paths, out of reach of the CSS custom\n * properties, so colours are resolved here as hex — the same exception the\n * ECharts family makes. Everything styled with CSS still uses the tokens.\n */\nexport interface MarkerStyle {\n  radius: number;\n  /** Stroke colour. */\n  color: string;\n  /** Stroke width. */\n  weight: number;\n  fillColor: string;\n  fillOpacity: number;\n}\n\n/** Weight range actually present in the data, or `null` when it carries none. */\nexport interface WeightScale {\n  min: number;\n  max: number;\n}\n\nexport interface MarkerStyleOptions {\n  categoryColors: Map<string, string>;\n  weightScale: WeightScale | null;\n  selected: boolean;\n  theme: ThemeMode;\n}\n\n/** Ring drawn around a selected marker: maximum contrast against the basemap. */\nconst SELECTION_RING: Record<ThemeMode, string> = {\n  light: orbitTokens.purple.base,\n  dark: '#FFFFFF',\n};\n\n/** Colour used when no point carries a category. */\nconst UNCATEGORISED_COLOR = orbitTokens.brand.orange;\n\n/**\n * Categories are sorted before being indexed into the palette, so a colour\n * belongs to a category and not to the order the rows happened to arrive in.\n */\nexport const buildCategoryColors = (points: GeoPoint[]): Map<string, string> => {\n  const categories = [...new Set(points.map((p) => p.category).filter((c): c is string => c != null))];\n\n  categories.sort((a, b) => a.localeCompare(b));\n\n  return new Map(categories.map((category, i) => [category, CHART_COLORS[i % CHART_COLORS.length]]));\n};\n\n/**\n * Null when nothing carries a weight, and also when every weight is equal:\n * a dataset with no size information should render at the base radius rather\n * than paint every marker at the maximum.\n */\nexport const buildWeightScale = (points: GeoPoint[]): WeightScale | null => {\n  const weights = points\n    .map((p) => p.weight)\n    .filter((w): w is number => w != null && Number.isFinite(w));\n\n  if (weights.length === 0) return null;\n\n  const min = Math.min(...weights);\n  const max = Math.max(...weights);\n\n  return min === max ? null : { min, max };\n};\n\n/**\n * Interpolate on the *area*, which is what a reader actually compares, and take\n * the square root to get back to a radius.\n */\nconst radiusFor = (weight: number | null | undefined, scale: WeightScale | null): number => {\n  if (scale == null || weight == null || !Number.isFinite(weight)) return GEO_MAP.BASE_MARKER_RADIUS;\n\n  const ratio = (weight - scale.min) / (scale.max - scale.min);\n  const clamped = Math.min(Math.max(ratio, 0), 1);\n  const minArea = GEO_MAP.MIN_MARKER_RADIUS ** 2;\n  const maxArea = GEO_MAP.MAX_MARKER_RADIUS ** 2;\n\n  return Math.sqrt(minArea + clamped * (maxArea - minArea));\n};\n\n/**\n * Selection changes the radius and the stroke as well as the colour, because\n * colour is never allowed to be the only indicator of a state.\n */\nexport const buildMarkerStyle = (\n  point: GeoPoint,\n  { categoryColors, weightScale, selected, theme }: MarkerStyleOptions,\n): MarkerStyle => {\n  const fillColor =\n    (point.category != null ? categoryColors.get(point.category) : undefined) ?? UNCATEGORISED_COLOR;\n  const radius = radiusFor(point.weight, weightScale);\n\n  return {\n    radius: selected ? radius + GEO_MAP.SELECTED_RADIUS_BOOST : radius,\n    color: selected ? SELECTION_RING[theme] : fillColor,\n    weight: selected ? GEO_MAP.SELECTED_STROKE_WIDTH : GEO_MAP.MARKER_STROKE_WIDTH,\n    fillColor,\n    fillOpacity: selected ? 1 : GEO_MAP.MARKER_FILL_OPACITY,\n  };\n};\n\n/** Legend swatches, in the same order the palette was handed out. */\nexport const buildLegendItems = (categoryColors: Map<string, string>): GeoLegendItem[] =>\n  [...categoryColors].map(([label, color]) => ({ label, color }));\n"],"names":[],"mappings":";;AAkCA,MAAM,iBAA4C;AAAA,EAChD,OAAO,YAAY,OAAO;AAAA,EAC1B,MAAM;AACR;AAGA,MAAM,sBAAsB,YAAY,MAAM;AAMvC,MAAM,sBAAsB,CAAC,WAA4C;AAC9E,QAAM,aAAa,CAAC,GAAG,IAAI,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,MAAmB,KAAK,IAAI,CAAC,CAAC;AAEnG,aAAW,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC;AAE5C,SAAO,IAAI,IAAI,WAAW,IAAI,CAAC,UAAU,MAAM,CAAC,UAAU,aAAa,IAAI,aAAa,MAAM,CAAC,CAAC,CAAC;AACnG;AAOO,MAAM,mBAAmB,CAAC,WAA2C;AAC1E,QAAM,UAAU,OACb,IAAI,CAAC,MAAM,EAAE,MAAM,EACnB,OAAO,CAAC,MAAmB,KAAK,QAAQ,OAAO,SAAS,CAAC,CAAC;AAE7D,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,MAAM,KAAK,IAAI,GAAG,OAAO;AAC/B,QAAM,MAAM,KAAK,IAAI,GAAG,OAAO;AAE/B,SAAO,QAAQ,MAAM,OAAO,EAAE,KAAK,IAAA;AACrC;AAMA,MAAM,YAAY,CAAC,QAAmC,UAAsC;AAC1F,MAAI,SAAS,QAAQ,UAAU,QAAQ,CAAC,OAAO,SAAS,MAAM,EAAG,QAAO,QAAQ;AAEhF,QAAM,SAAS,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM;AACxD,QAAM,UAAU,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC;AAC9C,QAAM,UAAU,QAAQ,qBAAqB;AAC7C,QAAM,UAAU,QAAQ,qBAAqB;AAE7C,SAAO,KAAK,KAAK,UAAU,WAAW,UAAU,QAAQ;AAC1D;AAMO,MAAM,mBAAmB,CAC9B,OACA,EAAE,gBAAgB,aAAa,UAAU,YACzB;AAChB,QAAM,aACH,MAAM,YAAY,OAAO,eAAe,IAAI,MAAM,QAAQ,IAAI,WAAc;AAC/E,QAAM,SAAS,UAAU,MAAM,QAAQ,WAAW;AAElD,SAAO;AAAA,IACL,QAAQ,WAAW,SAAS,QAAQ,wBAAwB;AAAA,IAC5D,OAAO,WAAW,eAAe,KAAK,IAAI;AAAA,IAC1C,QAAQ,WAAW,QAAQ,wBAAwB,QAAQ;AAAA,IAC3D;AAAA,IACA,aAAa,WAAW,IAAI,QAAQ;AAAA,EAAA;AAExC;AAGO,MAAM,mBAAmB,CAAC,mBAC/B,CAAC,GAAG,cAAc,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,QAAQ;"}
+{"version":3,"file":"index98.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index99.cjs

@@ -1,27 +1,27 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const reactLeaflet = require("react-leaflet");
-const useResizeObserver = require("./index6.cjs");
-const constants = require("./index64.cjs");
-const MapViewport = ({ bounds, fitBounds }) => {
-  const map = reactLeaflet.useMap();
-  const containerRef = react.useRef(null);
-  if (containerRef.current === null) containerRef.current = map.getContainer();
-  const { width, height } = useResizeObserver.useResizeObserver(containerRef);
-  react.useEffect(() => {
-    map.invalidateSize();
-  }, [map, width, height]);
-  react.useEffect(() => {
-    if (!fitBounds || bounds == null) return;
-    map.fitBounds(bounds, {
-      padding: [...constants.GEO_MAP.FIT_BOUNDS_PADDING],
-      // A single point makes `fitBounds` collapse to the maximum zoom level.
-      maxZoom: constants.GEO_MAP.SINGLE_POINT_ZOOM
-    });
-  }, [map, bounds, fitBounds]);
-  return null;
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "krc-root-1fbld";
+const rail = "krc-rail-S-V5h";
+const fill = "krc-fill-NAEy9";
+const tick = "krc-tick-j75qi";
+const disabled = "krc-disabled-DgBiL";
+const thumb = "krc-thumb-QVYVM";
+const valueTooltip = "krc-valueTooltip-Vuimh";
+const styles = {
+  root,
+  rail,
+  fill,
+  tick,
+  disabled,
+  thumb,
+  valueTooltip
 };
-MapViewport.displayName = "MapViewport";
-exports.MapViewport = MapViewport;
+exports.default = styles;
+exports.disabled = disabled;
+exports.fill = fill;
+exports.rail = rail;
+exports.root = root;
+exports.thumb = thumb;
+exports.tick = tick;
+exports.valueTooltip = valueTooltip;
 //# sourceMappingURL=index99.cjs.map

package/dist/index99.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index99.cjs","sources":["../src/geo/GeoMapCard/MapViewport.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMap } from 'react-leaflet';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { GEO_MAP } from '../../constants';\nimport type { MapViewportProps } from './GeoMapCard.types';\n\n/**\n * A childless child of `MapContainer`, which is the only place `useMap()` works.\n * It owns the two things Leaflet cannot work out on its own:\n *\n * - **Framing**: `fitBounds` over the drawn points, instead of a centroid at a\n *   fixed zoom that leaves half a province outside the viewport.\n * - **Sizing**: `invalidateSize()` on every resize. Leaflet caches its container\n *   size, so a map mounted hidden — a wizard step, a collapsed split panel —\n *   renders grey tiles forever without this.\n */\nexport const MapViewport = ({ bounds, fitBounds }: MapViewportProps) => {\n  const map = useMap();\n  const containerRef = useRef<HTMLElement | null>(null);\n\n  if (containerRef.current === null) containerRef.current = map.getContainer();\n\n  const { width, height } = useResizeObserver(containerRef);\n\n  useEffect(() => {\n    map.invalidateSize();\n  }, [map, width, height]);\n\n  useEffect(() => {\n    if (!fitBounds || bounds == null) return;\n\n    map.fitBounds(bounds, {\n      padding: [...GEO_MAP.FIT_BOUNDS_PADDING],\n      // A single point makes `fitBounds` collapse to the maximum zoom level.\n      maxZoom: GEO_MAP.SINGLE_POINT_ZOOM,\n    });\n  }, [map, bounds, fitBounds]);\n\n  return null;\n};\n\nMapViewport.displayName = 'MapViewport';\n"],"names":["useMap","useRef","useResizeObserver","useEffect","GEO_MAP"],"mappings":";;;;;;AAgBO,MAAM,cAAc,CAAC,EAAE,QAAQ,gBAAkC;AACtE,QAAM,MAAMA,aAAAA,OAAA;AACZ,QAAM,eAAeC,MAAAA,OAA2B,IAAI;AAEpD,MAAI,aAAa,YAAY,KAAM,cAAa,UAAU,IAAI,aAAA;AAE9D,QAAM,EAAE,OAAO,WAAWC,kBAAAA,kBAAkB,YAAY;AAExDC,QAAAA,UAAU,MAAM;AACd,QAAI,eAAA;AAAA,EACN,GAAG,CAAC,KAAK,OAAO,MAAM,CAAC;AAEvBA,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,aAAa,UAAU,KAAM;AAElC,QAAI,UAAU,QAAQ;AAAA,MACpB,SAAS,CAAC,GAAGC,UAAAA,QAAQ,kBAAkB;AAAA;AAAA,MAEvC,SAASA,UAAAA,QAAQ;AAAA,IAAA,CAClB;AAAA,EACH,GAAG,CAAC,KAAK,QAAQ,SAAS,CAAC;AAE3B,SAAO;AACT;AAEA,YAAY,cAAc;;"}
+{"version":3,"file":"index99.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index99.js

@@ -1,27 +1,27 @@
-import { useRef, useEffect } from "react";
-import { useMap } from "react-leaflet";
-import { useResizeObserver } from "./index6.js";
-import { GEO_MAP } from "./index64.js";
-const MapViewport = ({ bounds, fitBounds }) => {
-  const map = useMap();
-  const containerRef = useRef(null);
-  if (containerRef.current === null) containerRef.current = map.getContainer();
-  const { width, height } = useResizeObserver(containerRef);
-  useEffect(() => {
-    map.invalidateSize();
-  }, [map, width, height]);
-  useEffect(() => {
-    if (!fitBounds || bounds == null) return;
-    map.fitBounds(bounds, {
-      padding: [...GEO_MAP.FIT_BOUNDS_PADDING],
-      // A single point makes `fitBounds` collapse to the maximum zoom level.
-      maxZoom: GEO_MAP.SINGLE_POINT_ZOOM
-    });
-  }, [map, bounds, fitBounds]);
-  return null;
+const root = "krc-root-1fbld";
+const rail = "krc-rail-S-V5h";
+const fill = "krc-fill-NAEy9";
+const tick = "krc-tick-j75qi";
+const disabled = "krc-disabled-DgBiL";
+const thumb = "krc-thumb-QVYVM";
+const valueTooltip = "krc-valueTooltip-Vuimh";
+const styles = {
+  root,
+  rail,
+  fill,
+  tick,
+  disabled,
+  thumb,
+  valueTooltip
 };
-MapViewport.displayName = "MapViewport";
 export {
-  MapViewport
+  styles as default,
+  disabled,
+  fill,
+  rail,
+  root,
+  thumb,
+  tick,
+  valueTooltip
 };
 //# sourceMappingURL=index99.js.map

package/dist/index99.js.map

@@ -1 +1 @@
-{"version":3,"file":"index99.js","sources":["../src/geo/GeoMapCard/MapViewport.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMap } from 'react-leaflet';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { GEO_MAP } from '../../constants';\nimport type { MapViewportProps } from './GeoMapCard.types';\n\n/**\n * A childless child of `MapContainer`, which is the only place `useMap()` works.\n * It owns the two things Leaflet cannot work out on its own:\n *\n * - **Framing**: `fitBounds` over the drawn points, instead of a centroid at a\n *   fixed zoom that leaves half a province outside the viewport.\n * - **Sizing**: `invalidateSize()` on every resize. Leaflet caches its container\n *   size, so a map mounted hidden — a wizard step, a collapsed split panel —\n *   renders grey tiles forever without this.\n */\nexport const MapViewport = ({ bounds, fitBounds }: MapViewportProps) => {\n  const map = useMap();\n  const containerRef = useRef<HTMLElement | null>(null);\n\n  if (containerRef.current === null) containerRef.current = map.getContainer();\n\n  const { width, height } = useResizeObserver(containerRef);\n\n  useEffect(() => {\n    map.invalidateSize();\n  }, [map, width, height]);\n\n  useEffect(() => {\n    if (!fitBounds || bounds == null) return;\n\n    map.fitBounds(bounds, {\n      padding: [...GEO_MAP.FIT_BOUNDS_PADDING],\n      // A single point makes `fitBounds` collapse to the maximum zoom level.\n      maxZoom: GEO_MAP.SINGLE_POINT_ZOOM,\n    });\n  }, [map, bounds, fitBounds]);\n\n  return null;\n};\n\nMapViewport.displayName = 'MapViewport';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,cAAc,CAAC,EAAE,QAAQ,gBAAkC;AACtE,QAAM,MAAM,OAAA;AACZ,QAAM,eAAe,OAA2B,IAAI;AAEpD,MAAI,aAAa,YAAY,KAAM,cAAa,UAAU,IAAI,aAAA;AAE9D,QAAM,EAAE,OAAO,WAAW,kBAAkB,YAAY;AAExD,YAAU,MAAM;AACd,QAAI,eAAA;AAAA,EACN,GAAG,CAAC,KAAK,OAAO,MAAM,CAAC;AAEvB,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,UAAU,KAAM;AAElC,QAAI,UAAU,QAAQ;AAAA,MACpB,SAAS,CAAC,GAAG,QAAQ,kBAAkB;AAAA;AAAA,MAEvC,SAAS,QAAQ;AAAA,IAAA,CAClB;AAAA,EACH,GAAG,CAAC,KAAK,QAAQ,SAAS,CAAC;AAE3B,SAAO;AACT;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"index99.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/style.css

@@ -1157,6 +1157,12 @@
   padding: var(--spacing-md);
 }
 
+/* Opens leftwards when it does not fit rightwards (usePanelPlacement). */
+.krc-popover-IJFWK[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+
 .krc-popoverHeader-mdeD8 {
   margin-bottom: var(--spacing-sm);
 }
@@ -1337,6 +1343,12 @@
   box-sizing: border-box;
 }
 
+/* Opens leftwards when it does not fit rightwards (usePanelPlacement). */
+.krc-pop-boLzq[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+
 .krc-head-FDhHr {
   display: flex;
   align-items: center;
@@ -1489,7 +1501,9 @@
   font-family: inherit;
   font-size: var(--font-size-sm);
   cursor: pointer;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
 }
 
 .krc-trigger-2YW6R:hover {
@@ -1546,6 +1560,12 @@
   overflow: auto;
 }
 
+/* Opens leftwards when it does not fit rightwards (usePanelPlacement). */
+.krc-pop-IfyfL[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+
 .krc-chips-J7YEf {
   display: flex;
   flex-wrap: wrap;
@@ -2496,7 +2516,9 @@
   color: var(--text-primary);
   font-size: var(--font-size-sm);
   cursor: pointer;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
 }
 
 .krc-trigger-UedSS:hover {
@@ -2563,7 +2585,9 @@
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
   cursor: pointer;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
 }
 
 .krc-clear-11V9Q:hover {
@@ -2585,6 +2609,12 @@
   overflow: hidden;
 }
 
+/* Opens leftwards when it does not fit rightwards (usePanelPlacement). */
+.krc-panel-xf2f8[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+
 .krc-header--VMR- {
   padding: var(--spacing-sm);
   border-bottom: var(--border-width) solid var(--border-color);
@@ -3561,7 +3591,9 @@
   color: var(--text-primary);
   font-size: var(--font-size-sm);
   cursor: pointer;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
 }
 
 .krc-trigger-WMlNa:hover {
@@ -3631,6 +3663,12 @@
   overflow: hidden;
 }
 
+/* Opens leftwards when it does not fit rightwards (usePanelPlacement). */
+.krc-panel--0odx[data-align='end'] {
+  left: auto;
+  right: 0;
+}
+
 .krc-searchContainer-WRS-U {
   padding: var(--spacing-sm);
   border-bottom: var(--border-width) solid var(--border-color);

package/dist/utils/clippingRect.d.ts

@@ -0,0 +1,15 @@
+/** Horizontal extent of a box, in viewport px. */
+export interface HorizontalRect {
+    left: number;
+    right: number;
+}
+/**
+ * The horizontal box that clips `element`'s overflow: the inner box (no border, no
+ * scrollbar) of its nearest ancestor whose `overflow-x` is not `visible`, intersected
+ * with the viewport. The viewport alone when no ancestor clips.
+ *
+ * The walk stops below `<body>`: overflow set on `<body>` or `<html>` applies to the
+ * viewport, which is already the outer limit.
+ */
+export declare function getClippingRect(element: HTMLElement): HorizontalRect;
+//# sourceMappingURL=clippingRect.d.ts.map

package/dist/utils/clippingRect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clippingRect.d.ts","sourceRoot":"","sources":["../../src/utils/clippingRect.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,cAAc,CAapE"}

package/dist/utils/clippingRect.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=clippingRect.test.d.ts.map

package/dist/utils/clippingRect.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clippingRect.test.d.ts","sourceRoot":"","sources":["../../src/utils/clippingRect.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktnpm_devops/react-component",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Kenmei Technologies React Component Library",
   "type": "module",
   "license": "MIT",