vira 26.5.3 → 26.5.4

package/dist/elements/pop-up/vira-menu.element.js

@@ -42,6 +42,7 @@ export const ViraMenu = defineViraElement()({
             max-width: 100%;
             max-height: 100%;
             overflow-y: auto;
+            overscroll-behavior: contain;
             z-index: 100;
             box-sizing: border-box;
             background-color: ${viraFormCssVars['vira-form-background-color'].value};

package/dist/elements/pop-up/vira-pop-up-trigger.element.js

@@ -95,6 +95,7 @@ export const ViraPopUpTrigger = defineViraElement()({
             position: absolute;
             pointer-events: none;
             display: flex;
+            box-sizing: border-box;
             flex-direction: column;
             align-items: flex-start;
 

package/dist/util/define-table.d.ts

@@ -0,0 +1,108 @@
+import { type ArrayElement, type PartialWithUndefined } from '@augment-vir/common';
+import { type HtmlInterpolation } from 'element-vir';
+/**
+ * An individual key definition in {@link ViraTableHeaders}.
+ *
+ * @category Internal
+ */
+export type ViraTableKey = Readonly<{
+    /** The key that cells must set a value to. */
+    key: string | number;
+} & PartialWithUndefined<{
+    /** If this is not provided, `key` will be used directly. */
+    content: HtmlInterpolation;
+}>>;
+/**
+ * All header definitions for a {@link ViraTable} instance.
+ *
+ * @category Internal
+ */
+export type ViraTableHeaders = ReadonlyArray<ViraTableKey>;
+/**
+ * An individual entry in {@link ViraTable}. In default table orientation, this will be a row. In
+ * horizontal orientation, this will be a column.
+ *
+ * @category Internal
+ */
+export type ViraTableEntry<Headers extends ViraTableHeaders | undefined = undefined> = Record<HeaderKey<Headers>, HtmlInterpolation>;
+/**
+ * An individual cell in {@link ViraTableRow}.
+ *
+ * @category Internal
+ */
+export type ViraTableCell<Headers extends ViraTableHeaders | undefined = undefined, CellData = any> = {
+    content: HtmlInterpolation;
+    key: HeaderKey<Headers>;
+    /**
+     * The original entry that created this row (in default or vertical table orientation) or column
+     * (in horizontal table orientation). This is `undefined` in header cells.
+     */
+    data: CellData;
+};
+/**
+ * An individual row in {@link ViraTable}.
+ *
+ * @category Internal
+ */
+export type ViraTableRow<Headers extends ViraTableHeaders | undefined = undefined, CellData = any, RowData = CellData> = {
+    cells: ViraTableCell<Headers, CellData>[];
+    data: RowData;
+};
+/**
+ * All keys for the given headers.
+ *
+ * @category Internal
+ */
+export type HeaderKey<Headers extends ViraTableHeaders | undefined = undefined> = undefined extends Headers ? string | number : ArrayElement<Exclude<Headers, undefined>>['key'];
+/**
+ * Table information that can easily be mapped into a `<table>` element.
+ *
+ * @category Internal
+ */
+export type ViraTable<Headers extends ViraTableHeaders | undefined = undefined, Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical, OriginalData extends ReadonlyArray<any> = any[]> = Orientation extends ViraTableOrientation.Horizontal ? {
+    headerRow: undefined;
+    orientation: Orientation;
+    rows: ViraTableRow<Headers, ArrayElement<OriginalData> | undefined, undefined>[];
+} : {
+    headerRow: ViraTableCell<Headers, undefined>[];
+    orientation: Orientation;
+    rows: ViraTableRow<Headers, ArrayElement<OriginalData>>[];
+};
+/**
+ * Orientation options for {@link ViraTable}.
+ *
+ * @category Internal
+ */
+export declare enum ViraTableOrientation {
+    /**
+     * This corresponds to a _vertical_ entry sequence (as you move from entry to entry, you move
+     * across the table vertically). This is the default table layout. Each entry becomes a new row.
+     * Headers are in a separate row.
+     */
+    Vertical = "vertical",
+    /**
+     * This corresponds to a _horizontal_ entry sequence (as you move from entry to entry, you move
+     * across the table horizontally). Each entry becomes a column. Headers are the left most
+     * column.
+     */
+    Horizontal = "horizontal"
+}
+/**
+ * Options for {@link defineTable}.
+ *
+ * @category Internal
+ */
+export type ViraTableOptions<Orientation extends ViraTableOrientation = ViraTableOrientation> = PartialWithUndefined<{
+    orientation: Orientation;
+    hideHeaders: boolean;
+}>;
+/**
+ * Accepts headers and entries and lays them out into rows according to the given
+ * `options.orientation` (defaulting to vertical). This does not itself create a `<table>` element,
+ * but makes it easy to loop over rows to (with `.map()`) to generate rows in a table.
+ *
+ * @category Table
+ */
+export declare function defineTable<const Headers extends ViraTableHeaders, OriginalData extends ReadonlyArray<any>, const Orientation extends ViraTableOrientation = ViraTableOrientation.Vertical>(
+/** The order of these keys determines the order that they render in. */
+headers: Readonly<Headers>, originalData: OriginalData, dataMap: (entry: ArrayElement<OriginalData>) => ViraTableEntry<Headers> | undefined, options?: ViraTableOptions<Orientation>): ViraTable<Headers, Orientation, OriginalData>;

package/dist/util/define-table.js

@@ -0,0 +1,106 @@
+import { check } from '@augment-vir/assert';
+import { filterMap } from '@augment-vir/common';
+/**
+ * Orientation options for {@link ViraTable}.
+ *
+ * @category Internal
+ */
+export var ViraTableOrientation;
+(function (ViraTableOrientation) {
+    /**
+     * This corresponds to a _vertical_ entry sequence (as you move from entry to entry, you move
+     * across the table vertically). This is the default table layout. Each entry becomes a new row.
+     * Headers are in a separate row.
+     */
+    ViraTableOrientation["Vertical"] = "vertical";
+    /**
+     * This corresponds to a _horizontal_ entry sequence (as you move from entry to entry, you move
+     * across the table horizontally). Each entry becomes a column. Headers are the left most
+     * column.
+     */
+    ViraTableOrientation["Horizontal"] = "horizontal";
+})(ViraTableOrientation || (ViraTableOrientation = {}));
+/**
+ * Accepts headers and entries and lays them out into rows according to the given
+ * `options.orientation` (defaulting to vertical). This does not itself create a `<table>` element,
+ * but makes it easy to loop over rows to (with `.map()`) to generate rows in a table.
+ *
+ * @category Table
+ */
+export function defineTable(
+/** The order of these keys determines the order that they render in. */
+headers, originalData, dataMap, options = {}) {
+    const mappedData = originalData.map((dataRow) => {
+        return {
+            cells: dataMap(dataRow),
+            data: dataRow,
+        };
+    });
+    if (options.orientation === ViraTableOrientation.Horizontal) {
+        const rows = headers.map((header) => {
+            const headerCellArray = options.hideHeaders
+                ? []
+                : [
+                    {
+                        content: header.content ?? header.key,
+                        key: header.key,
+                        data: undefined,
+                    },
+                ];
+            const cells = filterMap(mappedData, ({ data, cells, }) => {
+                if (!cells) {
+                    return undefined;
+                }
+                return {
+                    content: cells[header.key],
+                    key: header.key,
+                    data,
+                };
+            }, check.isTruthy);
+            const allCells = [
+                ...headerCellArray,
+                ...cells,
+            ];
+            return {
+                cells: allCells,
+                data: undefined,
+            };
+        });
+        return {
+            headerRow: undefined,
+            rows,
+            orientation: ViraTableOrientation.Horizontal,
+        };
+    }
+    else {
+        const headerRow = options.hideHeaders
+            ? []
+            : headers.map((header) => {
+                return {
+                    content: header.content ?? header.key,
+                    key: header.key,
+                    data: undefined,
+                };
+            });
+        const rows = filterMap(mappedData, ({ cells, data }) => {
+            if (!cells) {
+                return undefined;
+            }
+            return {
+                cells: headers.map((header) => {
+                    return {
+                        content: cells[header.key],
+                        key: header.key,
+                        data,
+                    };
+                }),
+                data,
+            };
+        }, check.isTruthy);
+        return {
+            headerRow,
+            rows,
+            orientation: ViraTableOrientation.Vertical,
+        };
+    }
+}

package/dist/util/pop-up-manager.js

@@ -155,8 +155,8 @@ export class PopUpManager {
             ? {
                 top: 0,
                 left: 0,
-                right: globalThis.innerWidth,
-                bottom: globalThis.innerHeight,
+                right: containerRect.width,
+                bottom: containerRect.height,
             }
             : {
                 top: containerRect.top,
@@ -170,13 +170,7 @@ export class PopUpManager {
         const diff = mapObjectValues(emptyPositionRect, (key) => {
             const containerDimension = containerPosition[key];
             const hostDimension = rootPosition[key];
-            /**
-             * Chrome will trigger a scroll bar sometimes if the PopUp is too close to the bottom,
-             * even if clearly isn't overflowing. The value here was found by experimentation to be
-             * the lowest value that wouldn't trigger that.
-             */
-            const additionalOffset = key === 'bottom' ? -51 : 0;
-            return Math.abs(containerDimension - hostDimension + additionalOffset);
+            return Math.abs(containerDimension - hostDimension);
         });
         const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
             diff.bottom < currentOptions.minDownSpace;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "26.5.3",
+    "version": "26.5.4",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -67,7 +67,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^26.5.3"
+        "element-vir": "^26.5.4"
     },
     "engines": {
         "node": ">=22"