dtable-ui-component 6.0.113-amd.3 → 6.0.113-amf.2

package/lib/Comment/footer/btns/index.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
 var _FileUploader = _interopRequireDefault(require("../../../FileUploader"));
 var _DTablePopover = _interopRequireDefault(require("../../../DTablePopover"));
 var _Loading = _interopRequireDefault(require("../../../Loading"));
 var _lang = require("../../../lang");
+var _DtableCustomButton = _interopRequireDefault(require("../../../DtableCustomButton"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class Btns extends _react.default.Component {
@@ -101,16 +101,16 @@ class Btns extends _react.default.Component {
               onClick: this.onHandleCollaboratorTip,
               children: "@"
             })]
-          }), isAdding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          }), isAdding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
             className: "dtable-ui-comment-submit",
-            color: "primary",
-            size: "sm",
+            variant: "primary",
+            size: "middle",
             disabled: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
             className: "dtable-ui-comment-submit",
-            color: "primary",
-            size: "sm",
+            variant: "primary",
+            size: "middle",
             onClick: this.onSubmit,
             tabIndex: -1,
             children: (0, _lang.getLocale)('Submit')

package/lib/DTableFiltersPopover/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
 var _DTableCommonAddTool = _interopRequireDefault(require("../DTableCommonAddTool"));
 var _utils = require("./utils");
@@ -15,6 +14,7 @@ var _filterList = _interopRequireDefault(require("./widgets/filter-list"));
 var _DTablePopover = _interopRequireDefault(require("../DTablePopover"));
 var _constants = require("./constants");
 var _lang = require("../lang");
+var _DtableCustomButton = _interopRequireDefault(require("../DtableCustomButton"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -191,14 +191,15 @@ var _jsxRuntime = require("react/jsx-runtime");
           })]
         }), this.isNeedSubmit && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "filter-popover-footer",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
+            variant: "secondary",
             disabled: readOnly,
             className: "mr-2",
             onClick: this.onClosePopover,
             children: (0, _lang.getLocale)('Cancel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
             disabled: this.state.isSubmitDisabled || readOnly,
-            color: "primary",
+            variant: "primary",
             onClick: this.onSubmitFilters,
             children: (0, _lang.getLocale)('Submit')
           })]

package/lib/DTableIcon/index.js

@@ -25,9 +25,9 @@ const DTableIcon = _ref => {
       customProps['aria-hidden'] = ariaHidden;
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", (0, _objectSpread2.default)({
-      className: (0, _classnames.default)(symbol, className, {
+      className: (0, _classnames.default)(className, {
         'dtable-font': !symbol.includes('dtable-font')
-      }),
+      }, symbol),
       style: {
         color
       }

package/lib/DTableModalHeader/index.js

@@ -9,7 +9,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
-var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _DtableIconButton = _interopRequireDefault(require("../DtableIconButton"));
 var _lang = require("../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,17 +19,11 @@ const DTableModalHeader = _ref => {
       children
     } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-    type: "button",
-    className: "close dtable-modal-close",
-    "data-dismiss": "modal",
-    "aria-label": "Close",
-    onClick: props.toggle,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
-      icon: "x",
-      className: "dtable-modal-close-inner",
-      title: (0, _lang.getLocale)('Close')
-    })
+  const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableIconButton.default, {
+    symbol: "dtable-icon-x",
+    tooltip: (0, _lang.getLocale)('Close'),
+    "aria-label": (0, _lang.getLocale)('Close'),
+    onClick: props.toggle
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     close: customCloseBtn,

package/lib/DeleteTip/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 var _lang = require("../lang");
+var _DtableCustomButton = _interopRequireDefault(require("../DtableCustomButton"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DeleteTip extends _react.default.Component {
@@ -42,12 +43,13 @@ class DeleteTip extends _react.default.Component {
             children: deleteTip
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "d-flex justify-content-end",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              className: "btn btn-secondary mr-2",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
+              variant: "secondary",
+              className: "mr-2",
               onClick: toggle,
               children: (0, _lang.getLocale)('Cancel')
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-              className: "btn btn-primary",
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
+              variant: "primary",
               onClick: handleDelete,
               children: (0, _lang.getLocale)('Delete')
             })]

package/lib/DigitalSignEditor/pc-editor/index.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
 var _DTableCustomFooter = _interopRequireDefault(require("../../DTableCustomFooter"));
 var _signatureBoard = _interopRequireDefault(require("../signature-board"));
 var _service = _interopRequireDefault(require("../service"));
@@ -17,6 +16,7 @@ var _url = require("../../utils/url");
 var _toaster = _interopRequireDefault(require("../../toaster"));
 var _lang = require("../../lang");
 var _utils2 = require("../../utils/utils");
+var _DtableCustomButton = _interopRequireDefault(require("../../DtableCustomButton"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class PCDigitalSignEditor extends _react.Component {
@@ -177,13 +177,13 @@ class PCDigitalSignEditor extends _react.Component {
           signImageUrl: signImageUrl
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DTableCustomFooter.default, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
           onClick: this.props.onCommitCancel,
-          color: "secondary",
+          variant: "secondary",
           children: (0, _lang.getLocale)('Cancel')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DtableCustomButton.default, {
           onClick: this.saveSignature,
-          color: "primary",
+          variant: "primary",
           disabled: saving,
           children: (0, _lang.getLocale)(saving ? 'Saving' : 'Save')
         })]

package/lib/DtableCustomButton/index.css

@@ -0,0 +1,243 @@
+.dtable-custom-button {
+  display: inline-flex ;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 12px ;
+  min-height: 32px;
+  font-size: 14px;
+  font-weight: normal;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  outline: none;
+  font-family: inherit;
+  border: 1px solid transparent ;
+}
+
+.dtable-custom-button:focus {
+  outline: none;
+  box-shadow: none ;
+}
+
+.dtable-custom-button:active:focus {
+  box-shadow: none ;
+}
+
+.dtable-custom-button__text {
+  display: inline-block;
+}
+
+.dtable-custom-button__icon {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1;
+  margin: 0;
+}
+
+/* ============ Size Variants ============ */
+
+.dtable-custom-button--max {
+  min-height: 40px ;
+  padding: 0 16px ;
+  font-size: 14px;
+}
+
+.dtable-custom-button--max .dtable-custom-button__icon {
+  font-size: 14px;
+}
+
+.dtable-custom-button--large {
+  min-height: 38px ;
+  padding: 0 16px ;
+  font-size: 14px;
+}
+
+.dtable-custom-button--large .dtable-custom-button__icon {
+  font-size: 14px;
+}
+
+.dtable-custom-button--middle {
+  min-height: 32px ;
+  padding: 0 12px ;
+  font-size: 14px;
+}
+
+.dtable-custom-button--middle .dtable-custom-button__icon {
+  font-size: 14px;
+}
+
+.dtable-custom-button--small {
+  min-height: 26px ;
+  padding: 0 8px ;
+  font-size: 12px;
+  gap: 4px ;
+}
+
+.dtable-custom-button--small .dtable-custom-button__icon {
+  font-size: 12px;
+}
+
+/* ============ Color Variants - Primary ============ */
+
+.dtable-custom-button--primary {
+  background-color: #FF8000 !important;
+  color: #FFFFFF !important;
+  border: 1px solid #FF8000 !important;
+}
+
+.dtable-custom-button--primary:hover:not(:disabled) {
+  background-color: #ED7109 !important;
+  border-color: #ED7109 !important;
+}
+
+.dtable-custom-button--primary:active:not(:disabled) {
+  background-color: #E16B09 !important;
+  border-color: #E16B09 !important;
+}
+
+/* ============ Color Variants - Default ============ */
+
+.dtable-custom-button--default {
+  background-color: #FFFFFF;
+  color: #ED7109 !important;
+  border: 1px solid #ED7109;
+}
+
+.dtable-custom-button--default:hover:not(:disabled) {
+  background-color: #ED7109 !important;
+  color: #FFFFFF !important;
+  border-color: #ED7109 !important;
+}
+
+.dtable-custom-button--default:active:not(:disabled) {
+  background-color: #E16B09 !important;
+  color: #FFFFFF !important;
+  border-color: #E16B09 !important;
+}
+
+/* ============ Color Variants - Secondary ============ */
+
+.dtable-custom-button--secondary {
+  background-color: #FFFFFF !important;
+  color: #212529 !important;
+  border: 1px solid rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-custom-button--secondary:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-custom-button--secondary:active:not(:disabled) {
+  background-color: #E9E9E9 !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+/* ============ Color Variants - Secondary Filled ============ */
+
+.dtable-custom-button--secondary-filled {
+  background-color: #F5F5F5 !important;
+  color: #212529 !important;
+  border: none !important;
+}
+
+.dtable-custom-button--secondary-filled:hover:not(:disabled) {
+  background-color: #EBEBEB !important;
+}
+
+.dtable-custom-button--secondary-filled:active:not(:disabled) {
+  background-color: #DDDDDD !important;
+}
+
+/* ============ State: Disabled ============ */
+
+.dtable-custom-button:disabled {
+  opacity: 0.65 !important;
+  cursor: not-allowed !important;
+}
+
+/* ============ Block Mode ============ */
+
+.dtable-custom-button--block {
+  display: flex !important;
+  width: 100% !important;
+}
+
+/* ============ Inline Mode ============ */
+
+.dtable-custom-button--inline {
+  height: 32px;
+  display: inline-flex ;
+  padding: 0 8px;
+  font-size: 14px;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 40, 100, 0.12) ;
+  background-color: #FFFFFF;
+  color: #212529;
+  gap: 4px;
+}
+
+.dtable-custom-button--inline:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+.dtable-custom-button--inline:active:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+}
+
+/* ============ With Icon ============ */
+
+.dtable-custom-button--with-icon {
+  gap: 8px;
+}
+
+/* Icon color adjustments for different variants(default,secondary,secondary-filled) */
+.dtable-custom-button--default.dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #ED7109 !important;
+}
+
+.dtable-custom-button--default:hover:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #FFFFFF !important;
+}
+
+.dtable-custom-button--default:active:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #FFFFFF !important;
+}
+
+.dtable-custom-button--default:disabled.dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #ED7109 !important;
+  opacity: 0.65;
+}
+
+.dtable-custom-button--secondary.dtable-custom-button--with-icon .dtable-custom-button__icon,
+.dtable-custom-button--secondary-filled.dtable-custom-button--with-icon .dtable-custom-button__icon,
+.dtable-custom-button--secondary:active:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon,
+.dtable-custom-button--secondary-filled:active:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon,
+.dtable-custom-button--secondary:hover:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon,
+.dtable-custom-button--secondary-filled:hover:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #666666 !important;
+}
+
+.secondary-filled-dtable,
+.secondary-filled-dtable .dtable-custom-button__text,
+.secondary-filled-dtable:hover:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon,
+.secondary-filled-dtable:active:not(:disabled).dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #ED7109 !important;
+}
+
+.secondary-filled-dtable:disabled.dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #ED7109 !important;
+  opacity: 0.65;
+}
+
+.dtable-custom-button--secondary:disabled.dtable-custom-button--with-icon .dtable-custom-button__icon,
+.dtable-custom-button--secondary-filled:disabled.dtable-custom-button--with-icon .dtable-custom-button__icon {
+  color: #666666 !important;
+  opacity: 0.65;
+}
+
+.dtable-custom-button--no-outline {
+  border: none !important;
+}

package/lib/DtableCustomButton/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["variant", "size", "block", "inline", "disabled", "icon", "iconPosition", "className", "children", "fillColor", "isOutline"];
+const DtableCustomButton = _ref => {
+  let {
+      variant = 'default',
+      size = 'large',
+      block = false,
+      inline = false,
+      disabled = false,
+      icon = null,
+      iconPosition = 'left',
+      className = '',
+      children,
+      fillColor = false,
+      isOutline = true
+    } = _ref,
+    otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const getReactstrapColor = variant => {
+    const colorMap = {
+      'primary': 'warning',
+      'default': 'light',
+      'secondary': 'light',
+      'secondary-filled': 'light'
+    };
+    return colorMap[variant] || 'light';
+  };
+  const btnClassNames = (0, _classnames.default)('dtable-custom-button', "dtable-custom-button--".concat(variant), "dtable-custom-button--".concat(size), "".concat(fillColor && variant === 'secondary-filled' ? 'secondary-filled-dtable' : ''), {
+    'dtable-custom-button--block': block,
+    'dtable-custom-button--inline': inline,
+    'dtable-custom-button--with-icon': icon,
+    'dtable-custom-button--icon-right': icon && iconPosition === 'right',
+    'dtable-custom-button--no-outline': !isOutline
+  }, className);
+  const iconElement = icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+    symbol: icon,
+    className: "dtable-custom-button__icon",
+    ariaHidden: true
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    className: btnClassNames,
+    color: getReactstrapColor(variant),
+    outline: isOutline,
+    disabled: disabled,
+    block: block
+  }, otherProps), {}, {
+    children: [icon && iconPosition === 'left' && iconElement, children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "dtable-custom-button__text",
+      children: children
+    }), icon && iconPosition === 'right' && iconElement]
+  }));
+};
+var _default = exports.default = DtableCustomButton;

package/lib/DtableIconButton/index.css

@@ -0,0 +1,126 @@
+.dtable-icon-btn {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+  color: #666666 !important;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  outline: none;
+  border-radius: 4px;
+}
+
+.dtable-icon-btn:focus {
+  outline: none;
+  box-shadow: none !important;
+}
+
+.dtable-icon-btn__icon {
+  display: inline-block;
+  line-height: 1;
+  margin: 0;
+  font-weight: normal;
+}
+
+.dtable-icon-btn--16px {
+  min-width: 24px;
+  min-height: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+.dtable-icon-btn--16px .dtable-icon-btn__icon {
+  font-size: 16px;
+}
+
+.dtable-icon-btn--14px {
+  min-width: 24px;
+  min-height: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+.dtable-icon-btn--14px .dtable-icon-btn__icon {
+  font-size: 14px;
+}
+
+.dtable-icon-btn--12px {
+  min-width: 24px;
+  min-height: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+.dtable-icon-btn--12px .dtable-icon-btn__icon {
+  font-size: 12px;
+}
+
+.dtable-icon-btn--32px {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+}
+
+.dtable-icon-btn--32px .dtable-icon-btn__icon {
+  font-size: 32px;
+}
+
+.dtable-icon-btn--solid {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn--solid:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+.dtable-icon-btn--solid:active:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+}
+
+/* ============ No Background Style ============ */
+
+.dtable-icon-btn--no-background:hover:not(:disabled) {
+  background-color: transparent !important;
+}
+
+.dtable-icon-btn--no-background:active:not(:disabled) {
+  background-color: transparent !important;
+}
+
+/* ============ Outlined Style ============ */
+
+.dtable-icon-btn--outlined {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+  background-color: #FFFFFF !important;
+  border: 1px solid rgba(0, 40, 100, 0.12) !important;
+  color: #666666 !important;
+}
+
+.dtable-icon-btn--outlined:hover:not(:disabled) {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-icon-btn--outlined:active:not(:disabled) {
+  min-width: 32px;
+  min-height: 32px;
+  width: 32px;
+  height: 32px;
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  border-color: rgba(0, 40, 100, 0.12) !important;
+}
+
+.dtable-icon-btn:disabled {
+  opacity: 0.65 !important;
+  cursor: not-allowed !important;
+}

package/lib/DtableIconButton/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
+var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
+var _dtableUtils = require("dtable-utils");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["noDisplayBac", "color", "size", "outline", "disabled", "className", "symbol", "tooltip", "tooltipPlacement", "shortcut"];
+const DtableIconButton = _ref => {
+  let {
+      noDisplayBac = false,
+      color,
+      size = 'large',
+      outline = false,
+      disabled = false,
+      className = '',
+      symbol,
+      tooltip,
+      tooltipPlacement,
+      shortcut
+    } = _ref,
+    otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const buttonIdRef = (0, _react.useRef)("dtable-icon-button-".concat((0, _dtableUtils.generatorBase64Code)(8)));
+  const buttonRef = (0, _react.useRef)(null);
+  const [mounted, setMounted] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const sizeMap = {
+    large: '16px',
+    middle: '14px',
+    small: '12px',
+    largest: '32px'
+  };
+  const normalizedSize = sizeMap[size] || size;
+  const iconElement = symbol && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+    symbol: symbol,
+    className: "dtable-icon-btn__icon",
+    ariaHidden: true,
+    color: color
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      ref: buttonRef,
+      className: (0, _classnames.default)('dtable-icon-btn', "dtable-icon-btn--".concat(normalizedSize), {
+        'dtable-icon-btn--outlined': outline,
+        'dtable-icon-btn--solid': !outline
+      }, {
+        'dtable-icon-btn--no-background': noDisplayBac
+      }, className),
+      outline: outline,
+      disabled: disabled,
+      id: buttonIdRef.current
+    }, otherProps), {}, {
+      children: iconElement
+    })), tooltip && mounted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
+      target: buttonIdRef.current,
+      placement: tooltipPlacement || 'bottom',
+      shortcut: shortcut,
+      children: tooltip
+    })]
+  });
+};
+var _default = exports.default = DtableIconButton;