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

Button UI for Plate

import _styled, { css } from 'styled-components';
import React, { forwardRef } from 'react';
import { Button } from '@udecode/plate-button';
import { useEditorRef, findNodePath, removeNodes, 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 plateButtonCss = [{
  "position": "relative",
  "boxSizing": "border-box",
  "display": "inline-flex",
  "maxWidth": "100%",
  "alignItems": "center",
  "justifyContent": "center",
  "> :not([hidden]) ~ :not([hidden])": {
    "--tw-space-x-reverse": "0",
    "marginRight": "calc(0.5rem * var(--tw-space-x-reverse))",
    "marginLeft": "calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))"
  },
  "padding": "0px",
  "textAlign": "center"
}, {
  "cursor": "pointer",
  "borderWidth": "0px",
  "fontWeight": "500",
  ":focus": {
    "outline": "2px solid transparent !important",
    "outlineOffset": "2px !important"
  }
}, {
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity))",
  ":hover": {
    "--tw-bg-opacity": "1",
    "backgroundColor": "rgb(243 244 246 / var(--tw-bg-opacity))"
  },
  ":active": {
    "--tw-bg-opacity": "1",
    "backgroundColor": "rgb(229 231 235 / var(--tw-bg-opacity))"
  }
}, {
  "minHeight": "28px",
  "minWidth": "28px",
  "paddingLeft": "0.625rem",
  "paddingRight": "0.625rem",
  "paddingTop": "0px",
  "paddingBottom": "0px"
}, css(["font-family:inherit;font-size:14px;border-radius:3px;color:inherit;:active{color:inherit;}:visited{color:inherit;}"])];
const cssMenuItemButton = [plateButtonCss, {
  "width": "100%",
  "justifyContent": "flex-start"
}];
const primaryButtonCss = [plateButtonCss, {
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgb(59 130 246 / var(--tw-bg-opacity))",
  "--tw-text-opacity": "1",
  "color": "rgb(255 255 255 / var(--tw-text-opacity))",
  ":hover": {
    "--tw-bg-opacity": "1",
    "backgroundColor": "rgb(37 99 235 / var(--tw-bg-opacity))"
  },
  ":active": {
    "--tw-bg-opacity": "1",
    "backgroundColor": "rgb(29 78 216 / var(--tw-bg-opacity))",
    "--tw-text-opacity": "1",
    "color": "rgb(255 255 255 / var(--tw-text-opacity))"
  }
}];
const PlateButton = /*#__PURE__*/forwardRef(({
  size,
  px,
  py,
  css: _css,
  ...props
}, ref) => /*#__PURE__*/React.createElement(_StyledButton, _extends({
  type: "button",
  ref: ref
}, props)));

var _StyledButton = _styled(Button).withConfig({
  displayName: "PlateButton___StyledButton",
  componentId: "sc-wfqywr-0"
})(["", ""], plateButtonCss);

const Icon = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    children,
    iconVerticalAlign,
    size,
    title,
    ...otherProps
  } = props;
  const iconProps = {
    height: props.height !== undefined ? props.height : size,
    width: props.width !== undefined ? props.width : size,
    'aria-hidden': title == null ? 'true' : undefined,
    focusable: 'false',
    role: title != null ? 'img' : undefined,
    ...otherProps
  };
  return /*#__PURE__*/React.createElement("svg", _extends({}, iconProps, {
    ref: ref
  }), title && /*#__PURE__*/React.createElement("title", {
    key: "icon-title"
  }, title), children);
});
const StyledIcon = _styled(Icon).withConfig({
  displayName: "StyledIcon",
  componentId: "sc-1lmwuuu-0"
})(["display:inline-block;vertical-align:", ";overflow:hidden;height:100%;"], props => props.iconVerticalAlign);

const DeleteIcon = props => /*#__PURE__*/React.createElement(StyledIcon, _extends({
  viewBox: "0 0 24 24",
  fill: "currentColor"
}, props), /*#__PURE__*/React.createElement("path", {
  fill: "none",
  d: "M0 0h24v24H0z"
}), /*#__PURE__*/React.createElement("path", {
  d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
}));

const RemoveNodeButton = ({
  element,
  children,
  ...props
}) => {
  const editor = useEditorRef();
  return /*#__PURE__*/React.createElement(PlateButton, _extends({
    onClick: () => {
      const path = findNodePath(editor, element);
      removeNodes(editor, {
        at: path
      });
      focusEditor(editor, editor.selection);
    }
  }, props), /*#__PURE__*/React.createElement(_StyledDeleteIcon, null), children);
};

var _StyledDeleteIcon = _styled(DeleteIcon).withConfig({
  displayName: "RemoveNodeButton___StyledDeleteIcon",
  componentId: "sc-nzabn0-0"
})({
  "width": "1rem"
});

const ChevronDownIcon = props => /*#__PURE__*/React.createElement(_StyledStyledIcon, _extends({
  viewBox: "0 0 24 24",
  focusable: "false",
  "aria-hidden": "true"
}, props), /*#__PURE__*/React.createElement("path", {
  fill: "currentColor",
  d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
}));

var _StyledStyledIcon = _styled(StyledIcon).withConfig({
  displayName: "ChevronDownIcon___StyledStyledIcon",
  componentId: "sc-1mognml-0"
})({
  "pointerEvents": "none",
  "display": "inline",
  "height": "100%",
  "maxHeight": "100%",
  "maxWidth": "100%",
  "userSelect": "none",
  "overflow": "hidden",
  "textAlign": "center",
  "verticalAlign": "middle"
});

export { ChevronDownIcon, DeleteIcon, PlateButton, RemoveNodeButton, StyledIcon, cssMenuItemButton, plateButtonCss, primaryButtonCss };
//# sourceMappingURL=index.es.js.map