@aiquants/resize-panels 1.9.0 → 2.0.0

package/dist/tests/support/dom-harness.d.ts

@@ -0,0 +1,89 @@
+/**
+ * @file Shared jsdom harness for panel group component tests.
+ * パネルグループのコンポーネントテスト用 jsdom 共通ハーネス。
+ *
+ * jsdom does not lay out flex containers, so the harness supplies the one measurement the package reads
+ * from the DOM — the group's box — and lets the assertions work on the allocator's state and on the inline
+ * styles the components render from it.
+ * jsdom はフレックスレイアウトを行わないため、パッケージが DOM から読む唯一の計測値 (グループの矩形) を
+ * ハーネスが与え、検証は配分器の状態とそこから描画されるインラインスタイルに対して行う。
+ */
+/**
+ * Observer stub that re-invokes its callback on demand.
+ * 任意のタイミングでコールバックを再実行できる ResizeObserver スタブ。
+ */
+declare class ManualResizeObserver implements ResizeObserver {
+    static instances: ManualResizeObserver[];
+    readonly callback: ResizeObserverCallback;
+    readonly targets: Element[];
+    disconnected: boolean;
+    constructor(callback: ResizeObserverCallback);
+    /**
+     * Build the observation a browser would deliver for one target.
+     * ブラウザが 1 つの対象について届ける観測結果を組み立てる処理。
+     */
+    entriesFor: (target: Element) => ResizeObserverEntry[];
+    observe: (target: Element) => void;
+    unobserve: () => void;
+    disconnect: () => void;
+    takeRecords: () => ResizeObserverEntry[];
+}
+/**
+ * Give an element a fixed box so `getContainerSize` can measure it.
+ * `getContainerSize` が計測できるよう、要素へ固定の矩形を与える処理。
+ *
+ * @param element - Element to measure / 計測対象の要素
+ * @param width - Border-box width in pixels / 境界領域の幅 (px)
+ * @param height - Border-box height in pixels / 境界領域の高さ (px)
+ */
+export declare const setElementBox: (element: HTMLElement, width: number, height: number) => void;
+/**
+ * Install the observer stub and clear the instances collected by a previous test.
+ * オブザーバースタブを導入し、直前のテストで収集したインスタンスを破棄する処理。
+ *
+ * @returns Accessor for the observers created during the test / テスト中に生成されたオブザーバーへのアクセサ
+ */
+export declare const installResizeObserver: () => {
+    readonly instances: ManualResizeObserver[];
+    /**
+     * Re-run every live observer callback, as the browser would after a layout change.
+     * レイアウト変化後にブラウザが行うのと同様、生存中の全オブザーバーのコールバックを再実行する処理。
+     */
+    flush: () => void;
+};
+/**
+ * Resize the group element and notify the observers, as a real container resize would.
+ * グループ要素をリサイズしてオブザーバーへ通知する (実際のコンテナリサイズ相当) 処理。
+ *
+ * @param group - Group element to resize / リサイズするグループ要素
+ * @param observers - Observer accessor returned by `installResizeObserver` / オブザーバーアクセサ
+ * @param width - New border-box width in pixels / 新しい境界領域の幅 (px)
+ * @param height - New border-box height in pixels / 新しい境界領域の高さ (px)
+ */
+export declare const resizeGroup: (group: HTMLElement, observers: ReturnType<typeof installResizeObserver>, width: number, height: number) => void;
+/**
+ * Read the panel elements of one group in DOM order.
+ * 1 つのグループに属するパネル要素を DOM 順で取得する処理。
+ *
+ * @param group - Group element / グループ要素
+ * @returns Panel elements that are direct children of the group / グループ直下のパネル要素
+ */
+export declare const getPanelElements: (group: HTMLElement) => HTMLElement[];
+/**
+ * Read the allocated sizes the panels published through their data attributes.
+ * パネルが data 属性で公開している配分済みサイズを読み取る処理。
+ *
+ * @param group - Group element / グループ要素
+ * @returns Allocated sizes in DOM order / DOM 順の配分済みサイズ
+ */
+export declare const getPanelSizes: (group: HTMLElement) => number[];
+/**
+ * Read the flex basis each panel rendered, in pixels.
+ * 各パネルが描画した flex basis をピクセルで読み取る処理。
+ *
+ * @param group - Group element / グループ要素
+ * @returns Rendered flex basis values in DOM order / DOM 順の flex basis 値 (px)
+ */
+export declare const getRenderedBases: (group: HTMLElement) => number[];
+export {};
+//# sourceMappingURL=dom-harness.d.ts.map

package/dist/tests/support/dom-harness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-harness.d.ts","sourceRoot":"","sources":["../../../tests/support/dom-harness.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAQH;;;GAGG;AACH,cAAM,oBAAqB,YAAW,cAAc;IAChD,MAAM,CAAC,SAAS,EAAE,oBAAoB,EAAE,CAAK;IAE7C,QAAQ,CAAC,QAAQ,EAAE,sBAAsB,CAAA;IACzC,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAK;IAChC,YAAY,UAAQ;gBAER,QAAQ,EAAE,sBAAsB;IAK5C;;;OAGG;IACH,UAAU,GAAI,QAAQ,OAAO,KAAG,mBAAmB,EAAE,CAepD;IAED,OAAO,GAAI,QAAQ,OAAO,KAAG,IAAI,CAGhC;IAED,SAAS,QAAO,IAAI,CAAM;IAE1B,UAAU,QAAO,IAAI,CAEpB;IAED,WAAW,QAAO,mBAAmB,EAAE,CAAM;CAChD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,SAAS,WAAW,EAAE,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,IASnF,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB;;IAO1B;;;OAGG;;CAcV,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,WAAW,EAAE,WAAW,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAAE,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,IAGpI,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW,KAAG,WAAW,EAA8H,CAAA;AAE/L;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,KAAG,MAAM,EAA6E,CAAA;AAEtI;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,WAAW,KAAG,MAAM,EAQtD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/resize-panels",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "description": "Reusable resizable panel components and utilities for React",
   "sideEffects": [
     "**/*.css"

package/src/GlobalDebugOverlay.tsx

@@ -225,7 +225,7 @@ export const GlobalDebugOverlay = () => {
                                         const measuredPixel = panel.measuredPixelSize ?? panel.size
                                         const statePixel = panel.size
                                         const statePixelLabel = formatNumericValue(statePixel, "px")
-                                        const statePercentage = panel.percentageSize ?? (axisSize > 0 ? (panel.size / axisSize) * 100 : undefined)
+                                        const statePercentage = axisSize > 0 ? (panel.size / axisSize) * 100 : undefined
                                         const measuredPercentage = panel.measuredPercentageSize !== undefined ? panel.measuredPercentageSize : axisSize > 0 ? (measuredPixel / axisSize) * 100 : undefined
                                         const isHidden = panel.collapsed || measuredPixel <= PANEL_SNAP_THRESHOLD
                                         const statusLabel = panel.collapsed ? "collapsed" : isHidden ? "hidden" : "visible"
@@ -253,14 +253,14 @@ export const GlobalDebugOverlay = () => {
                                                     <span>{measuredPixelLabel}</span>
                                                     <span>percentage (state):</span>
                                                     <span>{percentageLabel}</span>
+                                                    <span>preference:</span>
+                                                    <span>{panel.sizeUnit === "pixels" ? formatNumericValue(panel.preferredPixelSize, "px") : formatNumericValue(panel.preferredPercentageSize, "%")}</span>
                                                     <span>percentage (measured):</span>
                                                     <span>{measuredPercentageLabel}</span>
                                                     <span>unit:</span>
                                                     <span>{panel.sizeUnit}</span>
                                                     <span>min:</span>
                                                     <span>{panel.minSize !== undefined ? JSON.stringify(panel.minSize) : "—"}</span>
-                                                    <span>auto min:</span>
-                                                    <span>{panel.autoMinSize !== undefined ? JSON.stringify(panel.autoMinSize) : "—"}</span>
                                                     <span>max:</span>
                                                     <span>{panel.maxSize !== undefined ? JSON.stringify(panel.maxSize) : "—"}</span>
                                                     <span>priority:</span>