@kanaries/graphic-walker 0.2.9 → 0.2.10

package/src/components/toolbar/toolbar-item.tsx

@@ -0,0 +1,218 @@
+import { ChevronDownIcon, Cog6ToothIcon, Cog8ToothIcon } from "@heroicons/react/24/solid";
+import React, { HTMLAttributes, memo, ReactNode, useEffect, useMemo, useRef } from "react";
+import styled from "styled-components";
+import ToolbarButton, { ToolbarButtonItem } from "./toolbar-button";
+import ToolbarToggleButton, { ToolbarToggleButtonItem } from "./toolbar-toggle-button";
+import ToolbarSelectButton, { ToolbarSelectButtonItem } from "./toolbar-select-button";
+import { ToolbarContainer, ToolbarItemContainerElement, ToolbarSplitter, useHandlers } from "./components";
+import Toolbar, { ToolbarProps } from ".";
+import Tooltip from "../tooltip";
+import Callout from "../callout";
+
+
+const ToolbarSplit = styled.div<{ open: boolean }>`
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: inline-block;
+    height: var(--height);
+    position: relative;
+    margin-right: 4px;
+    > svg {
+        position: absolute;
+        width: calc(var(--icon-size) * 0.6);
+        height: calc(var(--icon-size) * 0.6);
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, ${({ open }) => open ? '-20%' : '-50%'});
+        transition: transform 120ms;
+    }
+    :hover > svg, :focus > svg {
+        transform: translate(-50%, -20%);
+    }
+`;
+
+const FormContainer = styled(ToolbarContainer)`
+    width: max-content;
+    height: max-content;
+    background-color: #fff;
+`;
+
+export interface IToolbarItem {
+    key: string;
+    icon: (props: React.ComponentProps<'svg'> & {
+        title?: string;
+        titleId?: string;
+    }) => JSX.Element;
+    label: string;
+    /** @default false */
+    disabled?: boolean;
+    menu?: ToolbarProps;
+    form?: JSX.Element;
+}
+
+export const ToolbarItemSplitter = '-';
+
+export type ToolbarItemProps = (
+    | ToolbarButtonItem
+    | ToolbarToggleButtonItem
+    | ToolbarSelectButtonItem
+    | typeof ToolbarItemSplitter
+);
+
+export interface IToolbarProps<P extends Exclude<ToolbarItemProps, typeof ToolbarItemSplitter> = Exclude<ToolbarItemProps, typeof ToolbarItemSplitter>> {
+    item: P;
+    styles?: ToolbarProps['styles'];
+    openedKey: string | null;
+    setOpenedKey: (key: string | null) => void;
+    renderSlot: (node: ReactNode) => void;
+}
+
+let idFlag = 0;
+
+export const ToolbarItemContainer = memo<{
+    props: IToolbarProps;
+    handlers: ReturnType<typeof useHandlers> | null;
+    children: unknown;
+} & HTMLAttributes<HTMLDivElement>>(function ToolbarItemContainer (
+    {
+        props: {
+            item: { key, label, disabled = false, menu, form },
+            styles, openedKey, setOpenedKey, renderSlot,
+        },
+        handlers,
+        children,
+        ...props
+    }
+) {
+    const id = useMemo(() => `toolbar-item-${idFlag++}`, []);
+    const splitOnly = Boolean(form || menu) && handlers === null;
+
+    const opened = Boolean(form || menu) && key === openedKey && !disabled;
+    const openedRef = useRef(opened);
+    openedRef.current = opened;
+
+    const splitHandlers = useHandlers(() => {
+        setOpenedKey(opened ? null : key);
+    }, disabled ?? false, [' '], false);
+
+    useEffect(() => {
+        if (opened) {
+            const close = (e?: unknown) => {
+                if (!openedRef.current) {
+                    return;
+                }
+                if (!e) {
+                    setOpenedKey(null);
+                } else if (e instanceof KeyboardEvent && e.key === 'Escape') {
+                    setOpenedKey(null);
+                } else if (e instanceof MouseEvent) {
+                    setTimeout(() => {
+                        if (openedRef.current) {
+                            setOpenedKey(null);
+                        }
+                    }, 100);
+                }
+            };
+
+            document.addEventListener('mousedown', close);
+            document.addEventListener('keydown', close);
+
+            return () => {
+                document.removeEventListener('mousedown', close);
+                document.removeEventListener('keydown', close);
+            };
+        }
+    }, [setOpenedKey, opened]);
+
+    useEffect(() => {
+        if (opened && menu) {
+            renderSlot(<Toolbar {...menu} />);
+            return () => renderSlot(null);
+        }
+    }, [opened, menu, renderSlot]);
+
+    return (
+        <>
+            <Tooltip content={label}>
+                <ToolbarItemContainerElement
+                    role="button" tabIndex={disabled ? undefined : 0} aria-label={label} aria-disabled={disabled ?? false}
+                    split={Boolean(form || menu)}
+                    style={styles?.item}
+                    className={opened ? 'open' : undefined}
+                    aria-haspopup={splitOnly ? 'menu' : 'false'}
+                    {...(splitOnly ? splitHandlers : handlers)}
+                    {...props}
+                    id={id}
+                >
+                    {children}
+                    {form ? (
+                        splitOnly ? (
+                            <ToolbarSplit
+                                open={opened}
+                                {...splitHandlers}
+                            >
+                                <Cog6ToothIcon style={styles?.splitIcon}/>
+                            </ToolbarSplit>
+                        ) : (
+                            <ToolbarSplit
+                                open={opened}
+                                role="button"
+                                tabIndex={disabled ? undefined : 0}
+                                {...splitHandlers}
+                            >
+                                <Cog6ToothIcon style={styles?.splitIcon}/>
+                            </ToolbarSplit>
+                        )
+                    ) : (
+                        menu && (
+                            splitOnly ? (
+                                <ToolbarSplit
+                                    open={opened}
+                                    {...splitHandlers}
+                                >
+                                    <ChevronDownIcon style={styles?.splitIcon} />
+                                </ToolbarSplit>
+                            ) : (
+                                <ToolbarSplit
+                                    role="button" tabIndex={disabled ? undefined : 0} aria-label={label} aria-disabled={disabled} aria-haspopup="menu"
+                                    open={opened}
+                                    {...splitHandlers}
+                                >
+                                    <Cog8ToothIcon style={styles?.splitIcon} />
+                                </ToolbarSplit>
+                            )
+                        )
+                    )}
+                </ToolbarItemContainerElement>
+            </Tooltip>
+            {opened && form && (
+                <Callout target={`#${id}`}>
+                    <FormContainer onMouseDown={e => e.stopPropagation()}>
+                        {form}
+                    </FormContainer>
+                </Callout>
+            )}
+        </>
+    );
+});
+
+const ToolbarItem = memo<{
+    item: ToolbarItemProps;
+    styles?: ToolbarProps['styles'];
+    openedKey: string | null;
+    setOpenedKey: (key: string | null) => void;
+    renderSlot: (node: ReactNode) => void;
+}>(function ToolbarItem ({ item, styles, openedKey, setOpenedKey, renderSlot }) {
+    if (item === ToolbarItemSplitter) {
+        return  <ToolbarSplitter />;
+    }
+    if ('checked' in item) {
+        return <ToolbarToggleButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+    } else if ('options' in item) {
+        return <ToolbarSelectButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+    }
+    return <ToolbarButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+});
+
+
+export default ToolbarItem;

package/src/components/toolbar/toolbar-select-button.tsx

@@ -0,0 +1,196 @@
+import React, { memo, useEffect, useRef } from "react";
+import styled from "styled-components";
+import produce from "immer";
+import { IToolbarItem, IToolbarProps, ToolbarItemContainer } from "./toolbar-item";
+import { ToolbarContainer, useHandlers, ToolbarItemContainerElement } from "./components";
+import Callout from "../callout";
+
+
+const OptionGroup = styled(ToolbarContainer)`
+    flex-direction: column;
+    width: max-content;
+    height: max-content;
+    --aside: 8px;
+    --background-color: #f7f7f7;
+    --background-color-hover: #fefefe;
+    --color: #777;
+    --color-hover: #555;
+    --blue: #282958;
+    background-color: var(--background-color);
+`;
+
+const Option = styled(ToolbarItemContainerElement)`
+    width: unset;
+    height: var(--height);
+    position: relative;
+    font-size: 95%;
+    padding-left: var(--aside);
+    padding-right: 1em;
+    align-items: center;
+    &[aria-selected="true"] {
+        ::before {
+            display: block;
+            position: absolute;
+            content: "";
+            left: calc(var(--aside) / 2);
+            width: calc(var(--aside) / 2);
+            top: calc(var(--height) / 8);
+            bottom: calc(var(--height) / 8);
+            background-color: var(--blue);
+        }
+    }
+    > label {
+        user-select: none;
+        pointer-events: none;
+    }
+    :hover, &[aria-selected="true"] {
+        color: var(--color-hover);
+    }
+`;
+
+const TriggerFlag = styled.span`
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+`;
+
+export interface ToolbarSelectButtonItem<T extends string = string> extends IToolbarItem {
+    options: {
+        key: T;
+        icon: (props: React.SVGProps<SVGSVGElement> & {
+            title?: string | undefined;
+            titleId?: string | undefined;
+        }) => JSX.Element;
+        label: string;
+        /** @default false */
+        disabled?: boolean;
+    }[];
+    value: T;
+    onSelect: (value: T) => void;
+}
+
+const ToolbarSelectButton = memo<IToolbarProps<ToolbarSelectButtonItem>>(function ToolbarSelectButton(props) {
+    const { item, styles, openedKey, setOpenedKey } = props;
+    const { key, icon: Icon, disabled, options, value, onSelect } = item;
+    const id = `${key}::button`;
+    
+    const opened = openedKey === id;
+    const handlers = useHandlers(() => {
+        setOpenedKey(opened ? null : id);
+    }, disabled ?? false);
+
+    const openedRef = useRef(opened);
+    openedRef.current = opened;
+
+    useEffect(() => {
+        if (opened) {
+            const close = (e?: unknown) => {
+                if (!openedRef.current) {
+                    return;
+                }
+                if (!e) {
+                    setOpenedKey(null);
+                } else if (e instanceof KeyboardEvent && e.key === 'Escape') {
+                    setOpenedKey(null);
+                } else if (e instanceof MouseEvent) {
+                    setTimeout(() => {
+                        if (openedRef.current) {
+                            setOpenedKey(null);
+                        }
+                    }, 100);
+                }
+            };
+
+            document.addEventListener('mousedown', close);
+            document.addEventListener('keydown', close);
+
+            return () => {
+                document.removeEventListener('mousedown', close);
+                document.removeEventListener('keydown', close);
+            };
+        }
+    }, [setOpenedKey, opened]);
+
+    const currentOption = options.find(opt => opt.key === value);
+    const CurrentIcon = currentOption?.icon;
+
+    return (
+        <>
+            <ToolbarItemContainer
+                props={produce(props, draft => {
+                    if (currentOption) {
+                        draft.item.label = `${draft.item.label}: ${currentOption.label}`;
+                    }
+                })}
+                handlers={handlers}
+                aria-haspopup="listbox"
+            >
+                <Icon style={styles?.icon} />
+                {CurrentIcon && (
+                    <CurrentIcon
+                        style={{
+                            ...styles?.icon,
+                            position: 'absolute',
+                            left: 'calc(var(--height) - var(--icon-size) * 1.2)',
+                            bottom: 'calc((var(--height) - var(--icon-size)) * 0.1)',
+                            width: 'calc(var(--icon-size) * 0.6)',
+                            height: 'calc(var(--icon-size) * 0.6)',
+                            margin: 'calc((var(--height) - var(--icon-size)) * 0.2)',
+                            filter: 'drop-shadow(0 0 0.5px var(--background-color)) '.repeat(4),
+                            pointerEvents: 'none',
+                            color: '#1d1e38',
+                        }}
+                    />
+                )}
+                <TriggerFlag aria-hidden id={id} />
+            </ToolbarItemContainer>
+            {opened && (
+                <Callout target={`#${id}`}>
+                    <OptionGroup role="listbox" aria-activedescendant={`${id}::${value}`} aria-describedby={id} aria-disabled={disabled} onMouseDown={e => e.stopPropagation()}>
+                        {options.map((option, idx, arr) => {
+                            const selected = option.key === value;
+                            const OptionIcon = option.icon;
+                            const optionId = `${id}::${value}`;
+                            const prev = arr[(idx + arr.length - 1) % arr.length];
+                            const next = arr[(idx + 1) % arr.length];
+                            return (
+                                <Option
+                                    key={option.key}
+                                    id={optionId}
+                                    role="option"
+                                    aria-disabled={option.disabled ?? false}
+                                    aria-selected={selected}
+                                    split={false}
+                                    tabIndex={0}
+                                    onClick={() => {
+                                        onSelect(option.key);
+                                        setOpenedKey(null);
+                                    }}
+                                    onKeyDown={e => {
+                                        if (e.key === 'ArrowDown') {
+                                            onSelect(next.key);
+                                        } else if (e.key === 'ArrowUp') {
+                                            onSelect(prev.key);
+                                        }
+                                    }}
+                                    ref={e => {
+                                        if (e && selected) {
+                                            e.focus();
+                                        }
+                                    }}
+                                >
+                                    <OptionIcon style={styles?.icon} />
+                                    <label className="text-xs">{option.label}</label>
+                                </Option>
+                            );
+                        })}
+                    </OptionGroup>
+                </Callout>
+            )}
+        </>
+    );
+});
+
+
+export default ToolbarSelectButton;

package/src/components/toolbar/toolbar-toggle-button.tsx

@@ -0,0 +1,70 @@
+import React, { memo } from "react";
+import styled from "styled-components";
+import { IToolbarItem, IToolbarProps, ToolbarItemContainer } from "./toolbar-item";
+import { useHandlers } from "./components";
+
+
+const ToggleContainer = styled.div<{ checked: boolean }>`
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: calc(var(--icon-size) + 12px);
+    height: calc(var(--icon-size) + 12px);
+    margin: calc((var(--height) - var(--icon-size) - 12px) / 2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-shadow: ${({ checked }) => checked ? 'inset 0px 1px 6px 2px rgba(0, 0, 0, 0.33)' : 'inset 0px 1px 4px 1px rgba(136, 136, 136, 0.16)'};
+    border-radius: 4px;
+    position: relative;
+    background-color: #F7F7F722;
+    > svg {
+        width: var(--icon-size);
+        height: var(--icon-size);
+        position: absolute;
+        color: ${({ checked }) => checked ? '#EDEFF4' : 'var(--color)'};
+        --shadow-color: ${({ checked }) => checked ? '#2956bf66' : '#9ba1ab66' || '#52576366'};
+        transition: color 120ms;
+    }
+    ::before {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--blue-dark);
+        transform: ${({ checked }) => checked ? 'translate(0)' : 'translateX(-100%)'};
+        transition: transform 80ms;
+    }
+`;
+
+export interface ToolbarToggleButtonItem extends IToolbarItem {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+
+const ToolbarToggleButton = memo<IToolbarProps<ToolbarToggleButtonItem>>(function ToolbarToggleButton(props) {
+    const { item, styles } = props;
+    const { icon: Icon, label, disabled, checked, onChange } = item;
+    const handlers = useHandlers(() => onChange(!checked), disabled ?? false);
+
+    return (
+        <>
+            <ToolbarItemContainer
+                props={props}
+                handlers={handlers}
+                role="checkbox"
+                aria-checked={checked}
+            >
+                <ToggleContainer checked={checked}>
+                    <Icon style={styles?.icon} />
+                </ToggleContainer>
+            </ToolbarItemContainer>
+        </>
+    );
+});
+
+
+export default ToolbarToggleButton;

package/src/components/tooltip.tsx

@@ -0,0 +1,135 @@
+import React, { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import styled from "styled-components";
+import { ShadowDomContext } from "..";
+
+
+export interface TooltipProps {
+    children: JSX.Element;
+    content: string | JSX.Element | JSX.Element[];
+    /** @default 250 */
+    showDelay?: number;
+    /** @default 250 */
+    hideDelay?: number;
+    /** @default 3_000 */
+    autoHide?: number;
+}
+
+const attrName = 'data-tooltip-host-id';
+let flag = 0;
+
+const Bubble = styled.div`
+    border-radius: 1px;
+    transform: translate(-50%, -100%);
+    filter: drop-shadow(0 1.6px 1.2px rgba(0, 0, 0, 0.15)) drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.12));
+    user-select: none;
+    ::before {
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 8px;
+        height: 8px;
+        transform: translate(-50%, 50%) rotate(45deg);
+        background-color: #fff;
+        border-radius: 1px;
+    }
+`;
+
+const Tooltip = memo<TooltipProps>(function Tooltip ({ children, content, autoHide = 3_000, showDelay = 250, hideDelay = 250 }) {
+    const hostId = useMemo(() => flag++, []);
+    const [pos, setPos] = useState<[number, number]>([0, 0]);
+    const [show, setShow] = useState(false);
+    const [hover, setHover] = useState(false);
+    const shadowDomMeta = useContext(ShadowDomContext);
+    const { root } = shadowDomMeta;
+    const element = typeof children === 'object' ? { ...children as any } : children;
+    if ('props' in element) {
+        element.props = {
+            ...element.props,
+            [attrName]: hostId,
+        };
+    }
+
+    const autoHideRef = useRef(autoHide);
+    autoHideRef.current = autoHide;
+    const showDelayRef = useRef(showDelay);
+    showDelayRef.current = showDelay;
+    const hideDelayRef = useRef(hideDelay);
+    hideDelayRef.current = hideDelay;
+
+    useEffect(() => {
+        const item = root?.querySelector(`[${attrName}="${hostId}"]`) as HTMLElement | null;
+        if (item) {
+            let showTimer: NodeJS.Timeout | null = null;
+            let hideTimer: NodeJS.Timeout | null = null;
+            let autoHideTimer: NodeJS.Timeout | null = null;
+            const resetTimers = () => {
+                for (const timer of [showTimer, hideTimer, autoHideTimer]) {
+                    if (timer) {
+                        clearTimeout(timer);
+                    }
+                }
+            };
+            const handleMouseOver = () => {
+                resetTimers();
+                showTimer = setTimeout(() => {
+                    const rect = item.getBoundingClientRect();
+                    setPos([rect.x + rect.width / 2, rect.y]);
+                    setShow(true);
+                    autoHideTimer = setTimeout(() => {
+                        handleMouseOut();
+                    }, autoHideRef.current);
+                }, showDelayRef.current);
+            };
+            const handleMouseMove = () => {
+                for (const timer of [hideTimer, autoHideTimer]) {
+                    if (timer) {
+                        clearTimeout(timer);
+                    }
+                }
+                autoHideTimer = setTimeout(() => {
+                    handleMouseOut();
+                }, autoHideRef.current);
+            };
+            const handleMouseOut = () => {
+                resetTimers();
+                hideTimer = setTimeout(() => {
+                    setShow(false);
+                }, hideDelayRef.current);
+            };
+            item.addEventListener('mouseover', handleMouseOver);
+            item.addEventListener('mousemove', handleMouseMove);
+            item.addEventListener('mouseout', handleMouseOut);
+            return () => {
+                item.removeEventListener('mouseover', handleMouseOver);
+                item.removeEventListener('mousemove', handleMouseMove);
+                item.removeEventListener('mouseout', handleMouseOut);
+                if (autoHideTimer) {
+                    clearTimeout(autoHideTimer);
+                }
+            };
+        }
+    }, [root, hostId]);
+
+    return (
+        <>
+            {element}
+            {(show || hover) && root && createPortal(
+                <Bubble
+                    className="fixed text-xs p-1 px-3 text-gray-500 bg-white z-50"
+                    onMouseOver={() => setHover(true)}
+                    onMouseOut={() => setHover(false)}
+                    style={{ left: pos[0], top: pos[1] - 4 }}
+                >
+                    {content}
+                </Bubble>,
+                root
+            )}
+        </>
+    );
+});
+
+
+export default Tooltip;

package/src/empty_sheet.css

@@ -0,0 +1,9 @@
+/* 
+ * This file is empty and importing it causes no side effect
+ * expect creating an empty <style> tag in the <head>.
+ * GraphicWalker starts using encapsuled css styles since v0.2.10
+ * so it's no more necessary to explicitly import a styled file
+ * from the production directory.
+ * This file will be temporarily kept to avoid breaking compiling
+ * while trying to import the out-dated style file.
+ */

package/src/fields/aestheticFields.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Droppable } from "react-beautiful-dnd";
+import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { DRAGGABLE_STATE_KEYS } from './fieldsContext';
 import { AestheticFieldContainer } from './components'
 import OBFieldContainer from './obComponents/obFContainer';

package/src/fields/datasetFields/dimFields.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Draggable, DroppableProvided } from 'react-beautiful-dnd';
+import { Draggable, DroppableProvided } from '@kanaries/react-beautiful-dnd';
 import { observer } from 'mobx-react-lite';
 import { useGlobalStore } from '../../store';
 import DataTypeIcon from '../../components/dataTypeIcon';
@@ -19,7 +19,7 @@ const DimFields: React.FC<Props> = props => {
                     return (
                         <>
                             <FieldPill
-                                className="pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full truncate"
+                                className="pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full truncate border border-transparent"
                                 ref={provided.innerRef}
                                 isDragging={snapshot.isDragging}
                                 {...provided.draggableProps}
@@ -28,7 +28,7 @@ const DimFields: React.FC<Props> = props => {
                                 <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
                             </FieldPill>
                             {
-                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
+                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
                                 isDragging={snapshot.isDragging}
                                 >
                                     <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;

package/src/fields/datasetFields/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Droppable } from "react-beautiful-dnd";
+import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { useTranslation } from "react-i18next";
 import styled from 'styled-components';
 import { NestContainer } from "../../components/container";
@@ -16,7 +16,7 @@ const DatasetFields: React.FC = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.DatasetFields" });
 
     return (
-        <DSContainer className="flex md:flex-col" style={{ paddingBlock: 0 }}>
+        <DSContainer className="flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
             <h4 className="text-xs mb-2 flex-grow-0 cursor-default select-none mt-2">{t("field_list")}</h4>
             <div className="pd-1 overflow-y-auto" style={{ maxHeight: "380px", minHeight: '100px' }}>
                 <Droppable droppableId="dimensions" direction="vertical">