@cloudscape-design/board-components 3.0.0

package/internal/grid/styles.scoped.css

@@ -0,0 +1,221 @@
+.awsui_grid_1hw7z_67wyf_1:not(#\9) {
+  display: grid;
+  /* Matches GRID_GAP constant used for calculations. */
+  /* TODO: consider using different gaps for comfortable/compact which would require a mode observer. */
+  gap: 16px;
+  /* Matches ROWSPAN_HEIGHT constant used for calculations. */
+  grid-auto-rows: 100px;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"]:not(#\9) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"]:not(#\9) {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"]:not(#\9) {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"]:not(#\9) {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="1"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="1"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="1"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="1"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
+  grid-column-end: span 2;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
+  grid-column-end: span 2;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="2"]:not(#\9) {
+  grid-column-end: span 2;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
+  grid-column-end: span 3;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
+  grid-column-end: span 3;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="3"]:not(#\9) {
+  grid-column-end: span 3;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
+  grid-column-end: span 4;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
+  grid-column-end: span 4;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="4"]:not(#\9) {
+  grid-column-end: span 4;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
+  grid-column-end: span 5;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
+  grid-column-end: span 5;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="5"]:not(#\9) {
+  grid-column-end: span 5;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
+  grid-column-end: span 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
+  grid-column-end: span 6;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
+  grid-column-end: span 6;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-span="6"]:not(#\9) {
+  grid-column-end: span 6;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="1"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
+  grid-column-start: 2;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
+  grid-column-start: 2;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="2"]:not(#\9) {
+  grid-column-start: 2;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
+  grid-column-start: 3;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
+  grid-column-start: 3;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="3"]:not(#\9) {
+  grid-column-start: 3;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
+  grid-column-start: 4;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
+  grid-column-start: 4;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="4"]:not(#\9) {
+  grid-column-start: 4;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
+  grid-column-start: 5;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
+  grid-column-start: 5;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="5"]:not(#\9) {
+  grid-column-start: 5;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="1"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
+  grid-column-start: 1;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="2"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
+  grid-column-start: 6;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="4"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
+  grid-column-start: 6;
+}
+
+.awsui_grid_1hw7z_67wyf_1[data-columns="6"] > .awsui_grid__item_1hw7z_67wyf_26[data-column-offset="6"]:not(#\9) {
+  grid-column-start: 6;
+}
+
+.awsui_grid__item_1hw7z_67wyf_26:not(#\9) {
+  display: block;
+  position: relative;
+}

package/internal/grid/styles.selectors.js

@@ -0,0 +1,8 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "grid": "awsui_grid_1hw7z_67wyf_1",
+  "grid__item": "awsui_grid__item_1hw7z_67wyf_26"
+};
+  

package/internal/handle/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonHTMLAttributes } from "react";
+declare const _default: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+export default _default;

package/internal/handle/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "./styles.css.js";
+function Handle(props, ref) {
+    function handlePointerDown(event) {
+        var _a;
+        if (event.button !== 0) {
+            return;
+        }
+        (_a = props.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    }
+    return (_jsx("button", { ...props, onPointerDown: handlePointerDown, className: clsx(styles.handle, props.className), ref: ref }));
+}
+export default forwardRef(Handle);

package/internal/handle/styles.css.js

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

package/internal/handle/styles.scoped.css

@@ -0,0 +1,32 @@
+.awsui_handle_cc1pu_5hnpc_1:not(#\9) {
+  -webkit-appearance: none;
+          appearance: none;
+  background: transparent;
+  border: none;
+  padding: var(--space-scaled-xxs-95dhkm, 4px);
+  color: var(--color-text-interactive-default-9me1cm, #545b64);
+}
+.awsui_handle_cc1pu_5hnpc_1:not(#\9):hover {
+  color: var(--color-text-interactive-hover-79wpl9, #16191f);
+}
+.awsui_handle_cc1pu_5hnpc_1:not(#\9):focus-visible {
+  position: relative;
+  box-sizing: border-box;
+  outline: none;
+}
+.awsui_handle_cc1pu_5hnpc_1:not(#\9):focus-visible {
+  outline: 2px dotted transparent;
+  outline-offset: 3px;
+}
+.awsui_handle_cc1pu_5hnpc_1:not(#\9):focus-visible::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  left: calc(-1 * 4px);
+  top: calc(-1 * 4px);
+  width: calc(100% + 2 * 4px);
+  height: calc(100% + 2 * 4px);
+  border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
+  border: 2px solid var(--color-border-item-focused-n5kd8g, #0073bb);
+}

package/internal/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_cc1pu_5hnpc_1"
+};
+  

package/internal/interfaces.d.ts

@@ -0,0 +1,50 @@
+export type ItemId = string;
+export type DataFallbackType = Record<string, unknown>;
+export interface BoardItemDefinitionBase<D = DataFallbackType> {
+    id: ItemId;
+    data: D;
+    definition?: {
+        minRowSpan?: number;
+        minColumnSpan?: number;
+        defaultRowSpan?: number;
+        defaultColumnSpan?: number;
+    };
+}
+export interface BoardItemDefinition<D = DataFallbackType> extends BoardItemDefinitionBase<D> {
+    columnOffset?: BoardItemColumnOffset;
+    rowSpan?: number;
+    columnSpan?: number;
+}
+export interface BoardItemColumnOffset {
+    [columns: number]: number;
+}
+export interface GridLayout {
+    items: readonly GridLayoutItem[];
+    columns: number;
+    rows: number;
+}
+export interface GridLayoutItem {
+    id: ItemId;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+export interface Rect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export type Transform = TransformMove | TransformRemove;
+export interface TransformMove {
+    type: "move";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface TransformRemove {
+    type: "remove";
+}
+export type Direction = "up" | "right" | "down" | "left";

package/internal/interfaces.js

@@ -0,0 +1,3 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};

package/internal/is-development.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether the bundle is a development bundle.
+ * Only use this in an if condition and on its own! This will help bundlers find
+ * and remove the conditional statement for production bundles.
+ */
+export declare const IS_DEV: boolean;

package/internal/is-development.js

@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Whether the bundle is a development bundle.
+ * Only use this in an if condition and on its own! This will help bundlers find
+ * and remove the conditional statement for production bundles.
+ */
+export const IS_DEV = process.env.NODE_ENV !== "production";

package/internal/item-container/get-next-droppable.d.ts

@@ -0,0 +1,7 @@
+import { Droppable } from "../dnd-controller/controller";
+import { Direction, ItemId } from "../interfaces";
+/**
+ * Finds closest droppable to provided draggable element and direction.
+ * Returns null if there is no droppable in the given direction.
+ */
+export declare function getNextDroppable(draggableElement: HTMLElement, droppables: readonly [ItemId, Droppable][], direction: Direction): null | ItemId;

package/internal/item-container/get-next-droppable.js

@@ -0,0 +1,15 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getClosestNeighbor } from "../utils/rects";
+import { getNormalizedElementRect } from "../utils/screen";
+/**
+ * Finds closest droppable to provided draggable element and direction.
+ * Returns null if there is no droppable in the given direction.
+ */
+export function getNextDroppable(draggableElement, droppables, direction) {
+    var _a;
+    const draggableRect = getNormalizedElementRect(draggableElement);
+    const sources = new Map(droppables.map(([id, d]) => [getNormalizedElementRect(d.element), id]));
+    const closest = getClosestNeighbor(draggableRect, [...sources.keys()], direction);
+    return (_a = sources.get(closest)) !== null && _a !== void 0 ? _a : null;
+}

package/internal/item-container/index.d.ts

@@ -0,0 +1,48 @@
+import { KeyboardEvent, ReactNode, PointerEvent as ReactPointerEvent, RefObject } from "react";
+import { DropTargetContext } from "../dnd-controller/controller";
+import { BoardItemDefinitionBase, Direction, Transform } from "../interfaces";
+export interface ItemContainerRef {
+    focusDragHandle(): void;
+}
+export interface ItemContext {
+    isActive: boolean;
+    dragHandle: {
+        ref: RefObject<HTMLButtonElement>;
+        onPointerDown(event: ReactPointerEvent): void;
+        onKeyDown(event: KeyboardEvent): void;
+    };
+    resizeHandle: null | {
+        onPointerDown(event: ReactPointerEvent): void;
+        onKeyDown(event: KeyboardEvent): void;
+    };
+}
+export declare function useItemContext(): ItemContext;
+/**
+ * Defines item's parameters and its relation with the layout.
+ *
+ * `item` - the unique board item base object to be used in d&d context.
+ * `placed` - specifies if the item already belongs to the board.
+ * `acquired` - specifies if the item is essentially a copy temporarily acquired by a droppable but not submitted yet.
+ * `inTransition` - specifies if the item is currently being moved.
+ * `transform` - specifies if the item's position needs to be altered.
+ * `getItemSize` - item size getter that takes droppable context as argument.
+ * `onKeyMove` - a callback that fires when arrow keys are pressed in drag- or resize handle.
+ */
+export interface ItemContainerProps {
+    item: BoardItemDefinitionBase<unknown>;
+    placed: boolean;
+    acquired: boolean;
+    inTransition: boolean;
+    transform: Transform | undefined;
+    getItemSize: (context: null | DropTargetContext) => {
+        width: number;
+        minWidth: number;
+        maxWidth: number;
+        height: number;
+        minHeight: number;
+        maxHeight: number;
+    };
+    onKeyMove?(direction: Direction): void;
+    children: ReactNode;
+}
+export declare const ItemContainer: import("react").ForwardRefExoticComponent<ItemContainerProps & import("react").RefAttributes<ItemContainerRef>>;