@udecode/plate-ui-table/dist/index.es.js

Table UI for Plate

import _styled, { css } from 'styled-components';
import React from 'react';
import { DropdownMenu, ElementPopover } from '@udecode/plate-floating';
import { useTableBordersDropdownMenuContentState, BorderBottomIcon, BorderTopIcon, BorderLeftIcon, BorderRightIcon, BorderNoneIcon, BorderOuterIcon, TableCellElement, useTableCellElementState, BorderAllIcon, TableElement, useTableElementState, TableRowElement, ELEMENT_TABLE } from '@udecode/plate-table';
import { PlateButton, cssMenuItemButton, RemoveNodeButton } from '@udecode/plate-ui-button';
import { floatingRootCss, ToolbarButton } from '@udecode/plate-ui-toolbar';
import { useElement, usePlateEditorState, useEventPlateId, getPluginType, someNode, focusEditor } from '@udecode/plate-common';

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };
  return _extends.apply(this, arguments);
}

const CheckIcon = props => /*#__PURE__*/React.createElement("svg", _extends({
  "aria-hidden": "true",
  viewBox: "0 0 24 24",
  focusable: "false",
  fill: "currentColor",
  xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/React.createElement("path", {
  fill: "none",
  d: "M0 0h24v24H0z"
}), /*#__PURE__*/React.createElement("path", {
  d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
}));

var _StyledCheckIcon = _styled(CheckIcon).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledCheckIcon",
  componentId: "sc-1ukuss6-0"
})({
  "display": "block",
  "width": "1rem"
});

const Check = ({
  checked
}) => checked ? /*#__PURE__*/React.createElement(_StyledCheckIcon, null) : /*#__PURE__*/React.createElement(_StyledDiv$1, null);

const PlateTableBordersDropdownMenuContent = () => {
  const {
    getOnSelectTableBorder,
    hasOuterBorders,
    hasBottomBorder,
    hasLeftBorder,
    hasNoBorders,
    hasRightBorder,
    hasTopBorder
  } = useTableBordersDropdownMenuContentState();
  return /*#__PURE__*/React.createElement(_StyledDropdownMenuContent, {
    side: "right",
    align: "start",
    sideOffset: 8,
    $_css: [floatingRootCss, {
      "minWidth": "220px",
      "paddingTop": "0.375rem",
      "paddingBottom": "0.375rem",
      "--tw-text-opacity": "1",
      "color": "rgb(23 23 23 / var(--tw-text-opacity))"
    }]
  }, /*#__PURE__*/React.createElement(_StyledDiv2, null, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onSelect: getOnSelectTableBorder('bottom')
  }, /*#__PURE__*/React.createElement(_StyledPlateButton$1, null, /*#__PURE__*/React.createElement(Check, {
    checked: hasBottomBorder
  }), /*#__PURE__*/React.createElement(BorderBottomIcon, null), /*#__PURE__*/React.createElement("div", null, "Bottom Border"))), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onSelect: getOnSelectTableBorder('top')
  }, /*#__PURE__*/React.createElement(_StyledPlateButton2, null, /*#__PURE__*/React.createElement(Check, {
    checked: hasTopBorder
  }), /*#__PURE__*/React.createElement(BorderTopIcon, null), /*#__PURE__*/React.createElement("div", null, "Top Border"))), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onSelect: getOnSelectTableBorder('left')
  }, /*#__PURE__*/React.createElement(_StyledPlateButton3, null, /*#__PURE__*/React.createElement(Check, {
    checked: hasLeftBorder
  }), /*#__PURE__*/React.createElement(BorderLeftIcon, null), /*#__PURE__*/React.createElement("div", null, "Left Border"))), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onSelect: getOnSelectTableBorder('right')
  }, /*#__PURE__*/React.createElement(_StyledPlateButton4, null, /*#__PURE__*/React.createElement(Check, {
    checked: hasRightBorder
  }), /*#__PURE__*/React.createElement(BorderRightIcon, null), /*#__PURE__*/React.createElement("div", null, "Right Border")))), /*#__PURE__*/React.createElement(_StyledDiv3, null), /*#__PURE__*/React.createElement(_StyledDiv4, null, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onSelect: getOnSelectTableBorder('none')
  }, /*#__PURE__*/React.createElement(_StyledPlateButton5, null, /*#__PURE__*/React.createElement(Check, {
    checked: hasNoBorders
  }), /*#__PURE__*/React.createElement(BorderNoneIcon, null), /*#__PURE__*/React.createElement("div", null, "No Border"))), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
    onSelect: getOnSelectTableBorder('outer')
  }, /*#__PURE__*/React.createElement(_StyledPlateButton6, null, /*#__PURE__*/React.createElement(Check, {
    checked: hasOuterBorders
  }), /*#__PURE__*/React.createElement(BorderOuterIcon, null), /*#__PURE__*/React.createElement("div", null, "Outside Borders")))));
};

var _StyledDiv$1 = _styled("div").withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledDiv",
  componentId: "sc-1ukuss6-1"
})({
  "height": "1rem",
  "width": "1rem"
});

var _StyledDropdownMenuContent = _styled(DropdownMenu.Content).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledDropdownMenuContent",
  componentId: "sc-1ukuss6-2"
})(["", ""], p => p.$_css);

var _StyledDiv2 = _styled("div").withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledDiv2",
  componentId: "sc-1ukuss6-3"
})({
  "paddingLeft": "0.25rem",
  "paddingRight": "0.25rem"
});

var _StyledPlateButton$1 = _styled(PlateButton).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton",
  componentId: "sc-1ukuss6-4"
})(["", ""], cssMenuItemButton);

var _StyledPlateButton2 = _styled(PlateButton).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton2",
  componentId: "sc-1ukuss6-5"
})(["", ""], cssMenuItemButton);

var _StyledPlateButton3 = _styled(PlateButton).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton3",
  componentId: "sc-1ukuss6-6"
})(["", ""], cssMenuItemButton);

var _StyledPlateButton4 = _styled(PlateButton).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton4",
  componentId: "sc-1ukuss6-7"
})(["", ""], cssMenuItemButton);

var _StyledDiv3 = _styled("div").withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledDiv3",
  componentId: "sc-1ukuss6-8"
})({
  "marginTop": "0.375rem",
  "marginBottom": "0.375rem",
  "height": "1px",
  "width": "100%",
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(229 231 235 / var(--tw-bg-opacity))"
});

var _StyledDiv4 = _styled("div").withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledDiv4",
  componentId: "sc-1ukuss6-9"
})({
  "paddingLeft": "0.25rem",
  "paddingRight": "0.25rem"
});

var _StyledPlateButton5 = _styled(PlateButton).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton5",
  componentId: "sc-1ukuss6-10"
})(["", ""], cssMenuItemButton);

var _StyledPlateButton6 = _styled(PlateButton).withConfig({
  displayName: "PlateTableBordersDropdownMenuContent___StyledPlateButton6",
  componentId: "sc-1ukuss6-11"
})(["", ""], cssMenuItemButton);

const getCssTableCellRoot = ({
  hideBorder,
  isHeader,
  selected,
  borders
} = {}) => [{
  "position": "relative",
  "overflow": "visible",
  "borderStyle": "none",
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity))",
  "padding": "0px"
}, hideBorder && {
  "::before": {
    "content": "var(--tw-content)",
    "borderStyle": "none"
  }
}, !hideBorder && [{
  "::before": {
    "content": "var(--tw-content)",
    "position": "absolute",
    "boxSizing": "border-box",
    "userSelect": "none",
    "--tw-content": "''"
  }
}, borders && [borders.bottom && css(["::before{border-bottom:", "px ", " ", ";}"], borders.bottom.size, borders.bottom.style, borders.bottom.color), borders.right && css(["::before{border-right:", "px ", " ", ";}"], borders.right.size, borders.right.style, borders.right.color), borders.left && css(["::before{border-left:", "px ", " ", ";}"], borders.left.size, borders.left.style, borders.left.color), borders.top && css(["::before{border-top:", "px ", " ", ";}"], borders.top.size, borders.top.style, borders.top.color)]], isHeader && {
  "textAlign": "left"
}, isHeader && css(["::before{background-color:rgb(244,245,247);}> *{margin:0;}"]), {
  "::before": {
    "content": "var(--tw-content)",
    "height": "100%",
    "width": "100%"
  }
}, selected && {
  "::before": {
    "content": "var(--tw-content)",
    "zIndex": "10",
    "--tw-border-opacity": "1",
    "borderColor": "rgb(59 130 246 / var(--tw-border-opacity))",
    "--tw-bg-opacity": "1",
    "backgroundColor": "rgb(239 246 255 / var(--tw-bg-opacity))"
  }
}];
const cssTableCellContent = [{
  "position": "relative",
  "zIndex": "20",
  "boxSizing": "border-box",
  "height": "100%",
  "paddingLeft": "0.75rem",
  "paddingRight": "0.75rem",
  "paddingTop": "0.5rem",
  "paddingBottom": "0.5rem"
}];
const cssTableCellResizable = [{
  "position": "absolute",
  "top": "0px",
  "height": "100%",
  "width": "100%",
  "userSelect": "none"
}];
const getCssTableCellHandle = ({
  side
}) => [{
  "position": "absolute",
  "zIndex": "30",
  "width": "0.25rem",
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(59 130 246 / var(--tw-bg-opacity))"
}, css(["top:-12px;", ":-1.5px;height:calc(100% + 12px);"], side)];
const PlateTableCellElement = props => {
  const {
    children,
    hideBorder,
    isHeader,
    ...rootProps
  } = props;
  const {
    colIndex,
    rowIndex,
    readOnly,
    selected,
    hovered,
    hoveredLeft,
    rowSize,
    borders
  } = useTableCellElementState(); // const [openDropdown, setOpenDropdown] = useState(false);

  return /*#__PURE__*/React.createElement(_StyledTableCellElementRoot, _extends({
    asAlias: isHeader ? 'th' : 'td'
  }, rootProps, {
    $_css: getCssTableCellRoot({
      borders,
      hideBorder,
      isHeader,
      selected
    })
  }), /*#__PURE__*/React.createElement(_StyledTableCellElementContent, {
    style: {
      minHeight: rowSize
    }
  }, children), /*#__PURE__*/React.createElement(_StyledTableCellElementResizableWrapper, {
    className: "group"
  }, /*#__PURE__*/React.createElement(TableCellElement.Resizable, {
    colIndex: colIndex,
    rowIndex: rowIndex,
    readOnly: readOnly
  }), !readOnly && hovered && /*#__PURE__*/React.createElement(_StyledTableCellElementHandle, {
    $_css2: getCssTableCellHandle({
      side: 'right'
    })
  }), !readOnly && hoveredLeft && /*#__PURE__*/React.createElement(_StyledTableCellElementHandle2, {
    $_css3: getCssTableCellHandle({
      side: 'left'
    })
  })));
};

var _StyledTableCellElementRoot = _styled(TableCellElement.Root).withConfig({
  displayName: "PlateTableCellElement___StyledTableCellElementRoot",
  componentId: "sc-1lpt1jm-0"
})(["", ""], p => p.$_css);

var _StyledTableCellElementContent = _styled(TableCellElement.Content).withConfig({
  displayName: "PlateTableCellElement___StyledTableCellElementContent",
  componentId: "sc-1lpt1jm-1"
})(["", ""], cssTableCellContent);

var _StyledTableCellElementResizableWrapper = _styled(TableCellElement.ResizableWrapper).withConfig({
  displayName: "PlateTableCellElement___StyledTableCellElementResizableWrapper",
  componentId: "sc-1lpt1jm-2"
})(["", ""], cssTableCellResizable);

var _StyledTableCellElementHandle = _styled(TableCellElement.Handle).withConfig({
  displayName: "PlateTableCellElement___StyledTableCellElementHandle",
  componentId: "sc-1lpt1jm-3"
})(["", ""], p => p.$_css2);

var _StyledTableCellElementHandle2 = _styled(TableCellElement.Handle).withConfig({
  displayName: "PlateTableCellElement___StyledTableCellElementHandle2",
  componentId: "sc-1lpt1jm-4"
})(["", ""], p => p.$_css3);

const PlateTableCellHeaderElement = props => {
  return /*#__PURE__*/React.createElement(PlateTableCellElement, _extends({}, props, {
    isHeader: true
  }));
};

const PlateTablePopover = ({
  children,
  ...props
}) => {
  const element = useElement();
  return /*#__PURE__*/React.createElement(_StyledElementPopover, _extends({
    content: /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(DropdownMenu.Root, null, /*#__PURE__*/React.createElement(DropdownMenu.Trigger, {
      asChild: true
    }, /*#__PURE__*/React.createElement(_StyledPlateButton, {
      type: "button",
      "aria-label": "Borders"
    }, /*#__PURE__*/React.createElement(_StyledBorderAllIcon, null), /*#__PURE__*/React.createElement("div", null, "Borders"))), /*#__PURE__*/React.createElement(DropdownMenu.Portal, null, /*#__PURE__*/React.createElement(PlateTableBordersDropdownMenuContent, null))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_StyledRemoveNodeButton, {
      element: element,
      contentEditable: false,
      $_css: [cssMenuItemButton, {
        "width": "10rem",
        "justifyContent": "flex-start"
      }]
    }, /*#__PURE__*/React.createElement("div", null, "Delete"))))
  }, props), children);
};

var _StyledDiv = _styled("div").withConfig({
  displayName: "PlateTablePopover___StyledDiv",
  componentId: "sc-17z6fo8-0"
})({
  "minWidth": "140px",
  "paddingLeft": "0.25rem",
  "paddingRight": "0.25rem",
  "paddingTop": "0.375rem",
  "paddingBottom": "0.375rem"
});

var _StyledPlateButton = _styled(PlateButton).withConfig({
  displayName: "PlateTablePopover___StyledPlateButton",
  componentId: "sc-17z6fo8-1"
})({
  "width": "100%",
  "justifyContent": "flex-start"
});

var _StyledBorderAllIcon = _styled(BorderAllIcon).withConfig({
  displayName: "PlateTablePopover___StyledBorderAllIcon",
  componentId: "sc-17z6fo8-2"
})({
  "width": "1rem"
});

var _StyledRemoveNodeButton = _styled(RemoveNodeButton).withConfig({
  displayName: "PlateTablePopover___StyledRemoveNodeButton",
  componentId: "sc-17z6fo8-3"
})(["", ""], p => p.$_css);

var _StyledElementPopover = _styled(ElementPopover).withConfig({
  displayName: "PlateTablePopover___StyledElementPopover",
  componentId: "sc-17z6fo8-4"
})(["", ""], floatingRootCss);

const PlateTableElement = props => {
  const {
    as,
    children,
    ...rootProps
  } = props;
  const {
    colSizes,
    isSelectingCell,
    minColumnWidth,
    marginLeft
  } = useTableElementState();
  return /*#__PURE__*/React.createElement(PlateTablePopover, null, /*#__PURE__*/React.createElement(TableElement.Wrapper, {
    style: {
      paddingLeft: marginLeft
    }
  }, /*#__PURE__*/React.createElement(_StyledTableElementRoot, _extends({}, rootProps, {
    $_css: [{
      "marginTop": "1rem",
      "marginBottom": "1rem",
      "marginLeft": "1px",
      "marginRight": "0px",
      "display": "table",
      "height": "1px",
      "width": "100%",
      "tableLayout": "fixed",
      "borderCollapse": "collapse"
    }, isSelectingCell && css(["*::selection{background:none;}"])]
  }), /*#__PURE__*/React.createElement(TableElement.ColGroup, null, colSizes.map((width, index) => /*#__PURE__*/React.createElement(TableElement.Col, {
    key: index,
    style: {
      minWidth: minColumnWidth,
      width: width || undefined
    }
  }))), /*#__PURE__*/React.createElement(_StyledTableElementTBody, null, children))));
};

var _StyledTableElementRoot = _styled(TableElement.Root).withConfig({
  displayName: "PlateTableElement___StyledTableElementRoot",
  componentId: "sc-1ibsave-0"
})(["", ""], p => p.$_css);

var _StyledTableElementTBody = _styled(TableElement.TBody).withConfig({
  displayName: "PlateTableElement___StyledTableElementTBody",
  componentId: "sc-1ibsave-1"
})({
  "minWidth": "100%"
});

const PlateTableRowElement = props => {
  const {
    as,
    children,
    hideBorder,
    ...rootProps
  } = props;
  return /*#__PURE__*/React.createElement(_StyledTableRowElementRoot, _extends({}, rootProps, {
    $_css: [{
      "height": "100%"
    }, hideBorder && {
      "borderStyle": "none"
    }]
  }), children);
};

var _StyledTableRowElementRoot = _styled(TableRowElement.Root).withConfig({
  displayName: "PlateTableRowElement___StyledTableRowElementRoot",
  componentId: "sc-16lthnv-0"
})(["", ""], p => p.$_css);

const TableToolbarButton = ({
  id,
  transform,
  header,
  ...props
}) => {
  const editor = usePlateEditorState(useEventPlateId(id));
  const type = getPluginType(editor, ELEMENT_TABLE);
  const active = !!(editor !== null && editor !== void 0 && editor.selection) && someNode(editor, {
    match: {
      type
    }
  });
  return /*#__PURE__*/React.createElement(ToolbarButton, _extends({
    active: active,
    onClick: e => {
      e.preventDefault();
      e.stopPropagation();
      transform(editor, {
        header
      });
      focusEditor(editor);
    }
  }, props));
};

export { PlateTableBordersDropdownMenuContent, PlateTableCellElement, PlateTableCellHeaderElement, PlateTableElement, PlateTablePopover, PlateTableRowElement, TableToolbarButton, cssTableCellContent, cssTableCellResizable, getCssTableCellHandle, getCssTableCellRoot };
//# sourceMappingURL=index.es.js.map