@aloudata/aloudata-design 1.3.0 → 1.3.1

package/dist/IconButton/index.d.ts

@@ -1,16 +1,23 @@
 import React from 'react';
 import { IDropdownProps } from '../Dropdown';
 import { TSize } from '../Input';
+import { ITooltipProps } from '../Tooltip';
 interface IIconButtonProps {
     icon: React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLElement>;
+    onClick?: (e: React.MouseEvent) => void;
     disabled?: boolean;
     size?: TSize;
     className?: string;
     keepFocus?: boolean;
+    tooltip?: ITooltipProps;
+    id?: string;
+    mode?: 'light' | 'dark';
 }
-declare const DropdownButton: React.ForwardRefExoticComponent<IIconButtonProps & IDropdownProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownButton: React.ForwardRefExoticComponent<IIconButtonProps & IDropdownProps & {
+    showArrow?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const IconButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>> & {
     dropdown: typeof DropdownButton;
+    __ANT_BUTTON: boolean;
 };
 export default IconButton;

package/dist/IconButton/index.js

@@ -1,6 +1,4 @@
-var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange"];
-
-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); }
+var _excluded = ["icon", "onClick", "disabled", "size", "menu", "className", "onOpenChange", "tooltip", "id", "overlay", "showArrow", "mode"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -18,11 +16,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+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); }
+
 import { FoldDownFill } from '@aloudata/icons-react';
 import classnames from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import Dropdown from "../Dropdown";
 import { getSizeType } from "../Input/components/Input";
+import Tooltip from "../Tooltip";
 var InternalIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
       _props$onClick = props.onClick,
@@ -31,7 +32,11 @@ var InternalIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 'middle' : _props$size,
       keepFocus = props.keepFocus,
-      className = props.className;
+      className = props.className,
+      tooltip = props.tooltip,
+      id = props.id,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'light' : _props$mode;
 
   var onButtonClick = function onButtonClick(e) {
     if (disabled) {
@@ -43,18 +48,22 @@ var InternalIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onClick(e);
   };
 
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+    title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
+  }), /*#__PURE__*/React.createElement("button", {
+    id: id,
     className: classnames(className, 'ald-icon-button', "ald-icon-button-".concat(getSizeType(size)), {
       'ald-icon-button-disabled': disabled,
-      'ald-icon-button-focus': keepFocus
+      'ald-icon-button-focus': keepFocus,
+      'ald-icon-button-dark': mode === 'dark'
     }),
     type: "button",
     ref: ref,
-    onClick: onButtonClick,
-    disabled: disabled
+    onClick: onButtonClick // disabled={disabled}
+
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-icon-button-wrap"
-  }, icon));
+  }, icon)));
 });
 var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var icon = props.icon,
@@ -66,6 +75,13 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
       menu = props.menu,
       className = props.className,
       onOpenChange = props.onOpenChange,
+      tooltip = props.tooltip,
+      id = props.id,
+      overlay = props.overlay,
+      _props$showArrow = props.showArrow,
+      showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+      _props$mode2 = props.mode,
+      mode = _props$mode2 === void 0 ? 'light' : _props$mode2,
       restDropdownProps = _objectWithoutProperties(props, _excluded);
 
   var sizeMemo = React.useMemo(function () {
@@ -95,25 +111,52 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+  var canDropdown = useMemo(function () {
+    var hasMenu = menu && menu.items && menu.items.length > 0;
+    return (hasMenu || overlay) && !disabled;
+  }, [menu, overlay, disabled]);
+
+  if (!canDropdown) {
+    return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+      title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
+    }), /*#__PURE__*/React.createElement("button", {
+      id: id,
+      className: classnames(className, 'ald-icon-button-dropdown', "ald-icon-button-".concat(getSizeType(size)), {
+        'ald-icon-button-disabled': disabled,
+        'ald-icon-button-dropdown-open': dropdownOpen,
+        'ald-icon-button-dark': mode === 'dark'
+      }),
+      type: "button",
+      ref: ref,
+      onClick: onButtonClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-icon-button-wrap"
+    }, icon), showArrow && /*#__PURE__*/React.createElement(FoldDownFill, {
+      size: sizeMemo === 'large' ? 20 : 16
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltip, {
+    title: tooltip === null || tooltip === void 0 ? void 0 : tooltip.title
+  }), /*#__PURE__*/React.createElement(Dropdown, _extends({
     menu: menu,
     onOpenChange: onDropdownOpenChange
   }, restDropdownProps), /*#__PURE__*/React.createElement("button", {
+    id: id,
     className: classnames(className, 'ald-icon-button-dropdown', "ald-icon-button-".concat(getSizeType(size)), {
       'ald-icon-button-disabled': disabled,
       'ald-icon-button-dropdown-open': dropdownOpen
     }),
     type: "button",
     ref: ref,
-    onClick: onButtonClick,
-    disabled: disabled
+    onClick: onButtonClick
   }, /*#__PURE__*/React.createElement("div", {
     className: "ald-icon-button-wrap"
-  }, icon), /*#__PURE__*/React.createElement(FoldDownFill, {
-    size: sizeMemo === 'large' ? 20 : 16,
-    fill: "#575757"
-  })));
+  }, icon), showArrow && /*#__PURE__*/React.createElement(FoldDownFill, {
+    size: sizeMemo === 'large' ? 20 : 16
+  }))));
 });
 var IconButton = InternalIconButton;
 IconButton.dropdown = DropdownButton;
+IconButton.__ANT_BUTTON = true;
 export default IconButton;

package/dist/IconButton/style/index.less

@@ -1,7 +1,7 @@
 @import '../../style/index.less';
 @import '../../Dropdown/style/index.less';
 @import '../../Menu/style/index.less';
-
+@import '../../Tooltip/style/index.less';
 @icon-button-size-large: 28px;
 @icon-button-size-middle: 24px;
 @icon-button-size-small: 20px;
@@ -24,7 +24,7 @@
   padding: 0;
   outline: 0;
   font-size: inherit;
-  color: inherit;
+  color: #171717;
   -webkit-tap-highlight-color: transparent;
   appearance: none;
   box-sizing: border-box;
@@ -60,10 +60,26 @@
     background: var(--colors-gray-98, #f4f4f4);
   }
 
-  &.ant-dropdown-trigger {
+  &.ald-icon-button-dropdown {
     width: fit-content;
     word-spacing: 0;
   }
+
+  &.ald-icon-button-dark {
+    color: #d5d5d5;
+
+    &:hover {
+      background: fade(#f4f4f4, 10%);
+    }
+
+    &:active {
+      background: fade(#ededed, 20%);
+    }
+  }
+
+  &:not(.ald-icon-button-dark) {
+    mix-blend-mode: multiply;
+  }
 }
 
 .ald-icon-button-wrap-content(@size) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "",
   "license": "MIT",
   "module": "dist/index.js",