@cloudscape-design/board-components 3.0.0

package/internal/layout-engine/utils.js

@@ -0,0 +1,79 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Position } from "../utils/position";
+export function sortGridItems(items) {
+    return [...items].sort((a, b) => (b.y - a.y === 0 ? b.x - a.x : b.y - a.y));
+}
+export function getItemRect(item) {
+    return {
+        left: item.x,
+        right: item.x + item.width - 1,
+        top: item.y,
+        bottom: item.y + item.height - 1,
+    };
+}
+export function normalizeMovePath(origin, path) {
+    path = normalizePathOrigin(origin, path);
+    // Store last visited indexes per position.
+    const positionToLastIndex = new Map();
+    for (let index = 0; index < path.length; index++) {
+        positionToLastIndex.set(`${path[index].x}:${path[index].y}`, index);
+    }
+    // Compose path from last visited indices only.
+    const normalizedPath = [];
+    let index = 0;
+    while (index < path.length) {
+        const lastVisitedIndex = positionToLastIndex.get(`${path[index].x}:${path[index].y}`);
+        normalizedPath.push(path[lastVisitedIndex]);
+        index = lastVisitedIndex + 1;
+    }
+    return normalizePathSteps(origin, normalizedPath);
+}
+export function normalizeResizePath(origin, path) {
+    path = normalizePathOrigin(origin, path);
+    if (path.length === 0) {
+        return [];
+    }
+    const normalizedPath = [path[path.length - 1]];
+    for (let stepIndex = path.length - 2; stepIndex >= 0; stepIndex--) {
+        const prev = normalizedPath[normalizedPath.length - 1];
+        const current = path[stepIndex];
+        if (current.x < prev.x || current.y < prev.y) {
+            normalizedPath.push(current);
+        }
+    }
+    normalizedPath.reverse();
+    return normalizePathSteps(origin, normalizedPath);
+}
+// Removes path prefixes that return to the original location.
+function normalizePathOrigin(origin, path) {
+    let lastOriginIndex = -1;
+    for (let i = 0; i < path.length; i++) {
+        if (path[i].x === origin.x && path[i].y === origin.y) {
+            lastOriginIndex = i;
+        }
+    }
+    return path.slice(lastOriginIndex + 1);
+}
+// Ensures path only includes single-length steps.
+function normalizePathSteps(origin, path) {
+    const normalizedPath = [];
+    let prevX = origin.x;
+    let prevY = origin.y;
+    for (const step of path) {
+        const vx = Math.sign(step.x - prevX);
+        const vy = Math.sign(step.y - prevY);
+        for (let x = prevX, y = prevY; x !== step.x || y !== step.y;) {
+            if (x !== step.x) {
+                x += vx;
+            }
+            else {
+                y += vy;
+            }
+            normalizedPath.push(new Position({ x, y }));
+        }
+        prevX = step.x;
+        prevY = step.y;
+    }
+    return normalizedPath;
+}

package/internal/live-region/index.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { ScreenreaderOnlyProps } from "../screenreader-only";
+export interface LiveRegionProps extends ScreenreaderOnlyProps {
+    assertive?: boolean;
+    delay?: number;
+    visible?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * The live region is hidden in the layout, but visible for screen readers.
+ * It's purpose it to announce changes e.g. when custom navigation logic is used.
+ *
+ * The way live region works differently in different browsers and screen readers and
+ * it is recommended to manually test every new implementation.
+ *
+ * If you notice there are different words being merged together,
+ * check if there are text nodes not being wrapped in elements, like:
+ * <LiveRegion>
+ *   {title}
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * To fix, wrap "title" in an element:
+ * <LiveRegion>
+ *   <span>{title}</span>
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * Or create a single text node if possible:
+ * <LiveRegion>
+ *   {`${title} ${details}`}
+ * </LiveRegion>
+ *
+ * The live region is always atomic, because non-atomic regions can be treated by screen readers
+ * differently and produce unexpected results. To imitate non-atomic announcements simply use
+ * multiple live regions:
+ * <>
+ *   <LiveRegion>{title}</LiveRegion>
+ *   <LiveRegion><Details /></LiveRegion>
+ * </>
+ */
+declare const _default: import("react").MemoExoticComponent<typeof LiveRegion>;
+export default _default;
+declare function LiveRegion({ assertive, delay, visible, children, ...restProps }: LiveRegionProps): JSX.Element;

package/internal/live-region/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { memo, useEffect, useRef } from "react";
+import ScreenreaderOnly from "../screenreader-only";
+/**
+ * The live region is hidden in the layout, but visible for screen readers.
+ * It's purpose it to announce changes e.g. when custom navigation logic is used.
+ *
+ * The way live region works differently in different browsers and screen readers and
+ * it is recommended to manually test every new implementation.
+ *
+ * If you notice there are different words being merged together,
+ * check if there are text nodes not being wrapped in elements, like:
+ * <LiveRegion>
+ *   {title}
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * To fix, wrap "title" in an element:
+ * <LiveRegion>
+ *   <span>{title}</span>
+ *   <span><Details /></span>
+ * </LiveRegion>
+ *
+ * Or create a single text node if possible:
+ * <LiveRegion>
+ *   {`${title} ${details}`}
+ * </LiveRegion>
+ *
+ * The live region is always atomic, because non-atomic regions can be treated by screen readers
+ * differently and produce unexpected results. To imitate non-atomic announcements simply use
+ * multiple live regions:
+ * <>
+ *   <LiveRegion>{title}</LiveRegion>
+ *   <LiveRegion><Details /></LiveRegion>
+ * </>
+ */
+export default memo(LiveRegion);
+function LiveRegion({ assertive = false, delay = 10, visible = false, children, ...restProps }) {
+    const sourceRef = useRef(null);
+    const targetRef = useRef(null);
+    /*
+      When React state changes, React often produces too many DOM updates, causing NVDA to
+      issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).
+      The code below imitates a debouncing, scheduling a callback every time new React state
+      update is detected. When a callback resolves, it copies content from a muted element
+      to the live region, which is recognized by screen readers as an update.
+      If the use case requires no announcement to be ignored, use delay = 0, but ensure it
+      does not impact the performance. If it does, prefer using a string as children prop.
+    */
+    useEffect(() => {
+        function updateLiveRegion() {
+            if (targetRef.current && sourceRef.current) {
+                const sourceContent = extractInnerText(sourceRef.current);
+                const targetContent = extractInnerText(targetRef.current);
+                if (targetContent !== sourceContent) {
+                    // The aria-atomic does not work properly in Voice Over, causing
+                    // certain parts of the content to be ignored. To fix that,
+                    // we assign the source text content as a single node.
+                    targetRef.current.innerText = sourceContent;
+                }
+            }
+        }
+        let timeoutId;
+        if (delay) {
+            timeoutId = setTimeout(updateLiveRegion, delay);
+        }
+        else {
+            updateLiveRegion();
+        }
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    });
+    return (_jsxs(_Fragment, { children: [visible && _jsx("span", { ref: sourceRef, children: children }), _jsxs(ScreenreaderOnly, { ...restProps, className: restProps.className, children: [!visible && (_jsx("span", { ref: sourceRef, "aria-hidden": "true", children: children })), _jsx("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? "assertive" : "polite" })] })] }));
+}
+// This only extracts text content from the node including all its children which is enough for now.
+// To make it more powerful, it is possible to create a more sophisticated extractor with respect to
+// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.
+function extractInnerText(node) {
+    return (node.innerText || "").replace(/\s+/g, " ").trim();
+}

package/internal/logging.d.ts

@@ -0,0 +1 @@
+export declare function warnOnce(component: string, message: string): void;

package/internal/logging.js

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const messageCache = {};
+export function warnOnce(component, message) {
+    const warning = `[${component}] ${message}`;
+    if (!messageCache[warning]) {
+        messageCache[warning] = true;
+        console.warn(warning);
+    }
+}

package/internal/manifest.json

@@ -0,0 +1,3 @@
+{
+  "commit": "f7bedc987918e00ec55f49dfcf8109c1f03b2163"
+}

package/internal/resize-handle/icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function ResizeHandleIcon(): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ResizeHandleIcon>;
+export default _default;

package/internal/resize-handle/icon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import Icon from "@cloudscape-design/components/icon";
+import { memo } from "react";
+export function ResizeHandleIcon() {
+    return _jsx(Icon, { svg: _jsx(SVG, {}) });
+}
+function SVG() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", children: [_jsx("line", { x1: "9.94", y1: "14.95", x2: "14.98", y2: "9.57" }), _jsx("line", { x1: "5.75", y1: "14.95", x2: "14.98", y2: "5.35" }), _jsx("line", { x1: "0.98", y1: "14.95", x2: "14.98", y2: "0.95" })] }));
+}
+export default memo(ResizeHandleIcon);

package/internal/resize-handle/index.d.ts

@@ -0,0 +1,8 @@
+import { KeyboardEvent, PointerEvent } from "react";
+export interface ResizeHandleProps {
+    ariaLabelledBy: string;
+    ariaDescribedBy: string;
+    onPointerDown: (event: PointerEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+export default function ResizeHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }: ResizeHandleProps): JSX.Element;

package/internal/resize-handle/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Handle from "../handle";
+import { ResizeHandleIcon } from "./icon";
+import styles from "./styles.css.js";
+export default function ResizeHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown }) {
+    return (_jsx(Handle, { className: styles.handle, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(ResizeHandleIcon, {}) }));
+}

package/internal/resize-handle/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "handle": "awsui_handle_19hnz_1caet_1"
+};
+  

package/internal/resize-handle/styles.scoped.css

@@ -0,0 +1,3 @@
+.awsui_handle_19hnz_1caet_1:not(#\9) {
+  cursor: nwse-resize;
+}

package/internal/resize-handle/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "handle": "awsui_handle_19hnz_1caet_1"
+};
+  

package/internal/screenreader-grid-navigation/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { GridLayout, ItemId } from "../interfaces";
+export interface ScreenReaderGridNavigationProps<Item> {
+    items: readonly Item[];
+    itemsLayout: GridLayout;
+    ariaLabel: string;
+    ariaDescription?: string;
+    itemAriaLabel: (item: null | Item) => string;
+    onActivateItem: (itemId: ItemId) => void;
+}
+/**
+ * The component provides a native screen-reader grid navigation for board items.
+ * A separate navigation component is used because the navigation requires a table or table-like
+ * DOM structure while the board uses CSS grid.
+ *
+ * The screen-reader navigation component is hidden and don't have a tab stop, however, it can be focused
+ * programmatically or with a screen-reader. When focused with a screen-reader the component becomes visible
+ * so that it can be clicked (e.g. the VO can imitate clicks on the elements under VO cursor with VO+Space).
+ */
+export declare function ScreenReaderGridNavigation<Item extends {
+    id: string;
+}>({ items, itemsLayout, ariaLabel, ariaDescription, itemAriaLabel, onActivateItem, }: ScreenReaderGridNavigationProps<Item>): JSX.Element;

package/internal/screenreader-grid-navigation/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useId, useMemo, useState } from "react";
+import ScreenreaderOnly from "../screenreader-only";
+import styles from "./styles.css.js";
+/**
+ * The component provides a native screen-reader grid navigation for board items.
+ * A separate navigation component is used because the navigation requires a table or table-like
+ * DOM structure while the board uses CSS grid.
+ *
+ * The screen-reader navigation component is hidden and don't have a tab stop, however, it can be focused
+ * programmatically or with a screen-reader. When focused with a screen-reader the component becomes visible
+ * so that it can be clicked (e.g. the VO can imitate clicks on the elements under VO cursor with VO+Space).
+ */
+export function ScreenReaderGridNavigation({ items, itemsLayout, ariaLabel, ariaDescription, itemAriaLabel, onActivateItem, }) {
+    const [isNavigationFocused, setIsNavigationFocused] = useState(false);
+    const className = isNavigationFocused
+        ? styles["screen-reader-navigation-visible"]
+        : styles["screen-reader-navigation-hidden"];
+    const tableId = useId();
+    const navigationDescriptionId = useId();
+    const getItem = useMemo(() => {
+        const itemById = new Map(items.map((it) => [it.id, it]));
+        return (id) => { var _a; return (id ? (_a = itemById.get(id)) !== null && _a !== void 0 ? _a : null : null); };
+    }, [items]);
+    const layout = [];
+    function makeNewRow() {
+        layout.push([...Array(itemsLayout.columns)].map(() => null));
+    }
+    for (const item of itemsLayout.items) {
+        for (let y = item.y; y < item.y + item.height; y++) {
+            while (layout.length <= y) {
+                makeNewRow();
+            }
+            for (let x = item.x; x < item.x + item.width; x++) {
+                layout[y][x] = item.id;
+            }
+        }
+    }
+    return (_jsxs("div", { role: "navigation", "aria-labelledby": tableId, "aria-describedby": ariaDescription ? navigationDescriptionId : undefined, className: className, children: [_jsx("table", { id: tableId, role: "grid", "aria-label": ariaLabel, "aria-describedby": ariaDescription ? navigationDescriptionId : undefined, children: _jsx("tbody", { children: layout.map((row, rowIndex) => (_jsx("tr", { role: "row", children: row.map((itemId, cellIndex) => (_jsx("td", { role: "gridcell", children: itemId ? (_jsx("button", { tabIndex: -1, onClick: () => itemId && onActivateItem(itemId), onFocus: () => setIsNavigationFocused(true), onBlur: () => setIsNavigationFocused(false), children: itemAriaLabel(getItem(itemId)) })) : (itemAriaLabel(getItem(itemId))) }, cellIndex))) }, rowIndex))) }) }), ariaDescription && _jsx(ScreenreaderOnly, { id: navigationDescriptionId, children: ariaDescription })] }));
+}

package/internal/screenreader-grid-navigation/styles.css.js

@@ -0,0 +1,7 @@
+
+    import './styles.scoped.css';
+    export default {
+  "screen-reader-navigation-hidden": "awsui_screen-reader-navigation-hidden_1wuib_pl8f7_1",
+  "screen-reader-navigation-visible": "awsui_screen-reader-navigation-visible_1wuib_pl8f7_6"
+};
+  

package/internal/screenreader-grid-navigation/styles.scoped.css

@@ -0,0 +1,12 @@
+.awsui_screen-reader-navigation-hidden_1wuib_pl8f7_1:not(#\9) {
+  position: absolute !important;
+  clip-path: circle(0);
+}
+
+.awsui_screen-reader-navigation-visible_1wuib_pl8f7_6:not(#\9) {
+  position: fixed;
+  background: white;
+  padding: 8px;
+  border: 1px solid black;
+  z-index: 10001;
+}

package/internal/screenreader-grid-navigation/styles.selectors.js

@@ -0,0 +1,8 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "screen-reader-navigation-hidden": "awsui_screen-reader-navigation-hidden_1wuib_pl8f7_1",
+  "screen-reader-navigation-visible": "awsui_screen-reader-navigation-visible_1wuib_pl8f7_6"
+};
+  

package/internal/screenreader-only/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface ScreenreaderOnlyProps {
+    id?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Makes content now shown on a screen but still announced by screen-reader users.
+ * The component is suitable when the aria-label cannot be used, e.g. to avoid elements being announced as "blank".
+ *
+ * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:
+ *
+ * ```
+ * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'
+ *
+ * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent
+ *
+ * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent
+ * ```
+ */
+export default function ScreenreaderOnly(props: ScreenreaderOnlyProps): JSX.Element;

package/internal/screenreader-only/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// The code is copied from https://github.com/cloudscape-design/components/blob/main/src/internal/components/screenreader-only/index.tsx
+import clsx from "clsx";
+import styles from "./styles.css.js";
+/**
+ * Makes content now shown on a screen but still announced by screen-reader users.
+ * The component is suitable when the aria-label cannot be used, e.g. to avoid elements being announced as "blank".
+ *
+ * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:
+ *
+ * ```
+ * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'
+ *
+ * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent
+ *
+ * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent
+ * ```
+ */
+export default function ScreenreaderOnly(props) {
+    return _jsx("span", { ...props, className: clsx(styles.root, props.className) });
+}

package/internal/screenreader-only/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_3gfu1_3yy3l_5"
+};
+  

package/internal/screenreader-only/styles.scoped.css

@@ -0,0 +1,9 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_3gfu1_3yy3l_5:not(#\9) {
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+}

package/internal/screenreader-only/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_3gfu1_3yy3l_5"
+};
+  

package/internal/utils/apply-display-name.d.ts

@@ -0,0 +1 @@
+export declare function applyDisplayName<T>(component: T, displayName: string): void;

package/internal/utils/apply-display-name.js

@@ -0,0 +1,5 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export function applyDisplayName(component, displayName) {
+    component.displayName = displayName;
+}

package/internal/utils/coordinates.d.ts

@@ -0,0 +1,14 @@
+import { PointerEvent as ReactPointerEvent } from "react";
+export declare class Coordinates {
+    readonly __type = "Coordinates";
+    readonly x: number;
+    readonly y: number;
+    readonly scrollX: number;
+    readonly scrollY: number;
+    static fromEvent(event: PointerEvent | ReactPointerEvent<unknown>): Coordinates;
+    static cursorOffset(current: Coordinates, start: Coordinates): Coordinates;
+    constructor({ x, y }: {
+        x: number;
+        y: number;
+    });
+}

package/internal/utils/coordinates.js

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export class Coordinates {
+    static fromEvent(event) {
+        return new Coordinates({ x: event.clientX, y: event.clientY });
+    }
+    static cursorOffset(current, start) {
+        return new Coordinates({
+            x: current.x - start.x + (current.scrollX - start.scrollX),
+            y: current.y - start.y + (current.scrollY - start.scrollY),
+        });
+    }
+    constructor({ x, y }) {
+        this.__type = "Coordinates";
+        this.scrollX = window.scrollX;
+        this.scrollY = window.scrollY;
+        this.x = x;
+        this.y = y;
+    }
+}

package/internal/utils/events.d.ts

@@ -0,0 +1,2 @@
+export type NonCancelableEventHandler<Detail> = (event: CustomEvent<Detail>) => void;
+export declare function createCustomEvent<Detail>(detail: Detail): CustomEvent<Detail>;

package/internal/utils/events.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+class CustomEventStub {
+    constructor(detail = null) {
+        this.detail = detail;
+        this.defaultPrevented = false;
+        this.cancelBubble = false;
+    }
+    preventDefault() {
+        // noop
+    }
+    stopPropagation() {
+        // noop
+    }
+}
+export function createCustomEvent(detail) {
+    return new CustomEventStub(detail);
+}

package/internal/utils/layout.d.ts

@@ -0,0 +1,18 @@
+import { BoardItemDefinition, GridLayout, ItemId } from "../interfaces";
+type Item<D = unknown> = BoardItemDefinition<D>;
+/**
+ * The function produces grid layout from board items and given number of columns.
+ * The positional data is taken from the items when available or the default placement is used otherwise.
+ */
+export declare function interpretItems(items: readonly Item[], columns: number): GridLayout;
+/**
+ * The function produces new items from the current state and updated grid layout.
+ * The positional data for the given number of columns is preserved as is while the other layouts are partially invalidated.
+ */
+export declare function transformItems<D>(sourceItems: readonly BoardItemDefinition<D>[], gridLayout: GridLayout, resizeTarget: null | ItemId): readonly BoardItemDefinition<D>[];
+export declare function createPlaceholdersLayout(rows: number, columns: number): GridLayout;
+export declare function getMinColumnSpan(item: Item, columns: number): number;
+export declare function getDefaultColumnSpan(item: Item, columns: number): number;
+export declare function getMinRowSpan(item: Item): number;
+export declare function getDefaultRowSpan(item: Item): number;
+export {};