@cyber-harbour/ui 1.0.22 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -114,21 +114,21 @@ const StyledButton = styled.button<{
         &:hover {
           background: ${theme.contextMenu.button.hover.background};
           color: ${theme.contextMenu.button.hover.text};
-          border-color: ${theme.contextMenu.button.hover.border};
+          border-color: ${$hasBorder ? theme.contextMenu.button.hover.border : 'transparent'};
           box-shadow: ${theme.contextMenu.button.hover.boxShadow};
         }
 
         &:active {
           background: ${theme.contextMenu.button.active.background};
           color: ${theme.contextMenu.button.active.text};
-          border-color: ${theme.contextMenu.button.active.border};
+          border-color: ${$hasBorder ? theme.contextMenu.button.active.border : 'transparent'};
           box-shadow: ${theme.contextMenu.button.active.boxShadow};
         }
 
         &:disabled {
           background: ${theme.contextMenu.button.disabled.background};
           color: ${theme.contextMenu.button.disabled.text};
-          border-color: ${theme.contextMenu.button.disabled.border};
+          border-color: ${$hasBorder ? theme.contextMenu.button.disabled.border : 'transparent'};
           box-shadow: ${theme.contextMenu.button.disabled.boxShadow};
         }
 

package/src/Core/RowActionsMenu/RowActionsMenu.tsx

@@ -0,0 +1,151 @@
+import { ButtonColor, ButtonSize, getButtonSizeStyles } from '../../Theme';
+import { useRef } from 'react';
+import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
+import { styled, useTheme } from 'styled-components';
+import { BallsMenu } from '../IconComponents';
+import { useContextMenuControl } from '../ContextMenu';
+import { Button } from '../Button';
+
+export type Action = {
+  label: string;
+  onClick: () => void;
+  color: ButtonColor;
+};
+
+interface RowActionsMenuProps {
+  items: Action[];
+  size?: ButtonSize;
+  disabled?: boolean;
+  className?: string;
+  positions?: PopoverPosition[] | PopoverPosition;
+  align?: PopoverAlign;
+}
+
+export const RowActionsMenu = ({
+  size = 'small',
+  disabled,
+  className,
+  positions = ['bottom'],
+  align = 'end',
+  items,
+}: RowActionsMenuProps) => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const { isOpen, closeMenu, toggleMenu } = useContextMenuControl();
+
+  const theme = useTheme();
+
+  return (
+    <Popover
+      padding={theme.contextMenu.padding}
+      isOpen={isOpen}
+      positions={positions}
+      align={align}
+      onClickOutside={closeMenu}
+      content={
+        <ContentWrapper>
+          {items.map(({ label, onClick, color }, idx) => (
+            <Button
+              variant="empty"
+              key={`row-action-${idx}`}
+              color={color}
+              fullWidth
+              size={size}
+              onClick={() => {
+                onClick();
+                closeMenu();
+              }}
+            >
+              {label}
+            </Button>
+          ))}
+        </ContentWrapper>
+      }
+      containerStyle={{
+        backgroundColor: theme.colors.background,
+        border: `1px solid ${theme.colors.stroke.light}`,
+        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
+        borderRadius: '5px',
+        zIndex: `${9999}`,
+      }}
+    >
+      <StyledButton
+        ref={buttonRef}
+        onClick={toggleMenu}
+        $disabled={disabled}
+        $size={size}
+        className={className}
+        type="button"
+        disabled={disabled}
+      >
+        <BallsMenu width={theme.rowActionsMenu.icon.size} height={theme.rowActionsMenu.icon.size} />
+      </StyledButton>
+    </Popover>
+  );
+};
+
+const StyledButton = styled.button<{
+  $size: ButtonSize;
+  $disabled?: boolean;
+}>`
+  ${({ $size, $disabled, theme }) => {
+    const sizes = getButtonSizeStyles(theme, $size);
+    return `
+        background: ${theme.rowActionsMenu.button.default.background};
+        color: ${theme.rowActionsMenu.button.default.text};
+        border: none;
+        font-size: ${sizes.fontSize};
+        gap: ${sizes.gap};
+        padding: 4px;
+        border-radius: ${sizes.borderRadius};
+        width: auto;
+        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+        font-weight: 500;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+        transition: all 0.2s ease;
+        outline: none;
+
+        &:hover {
+          background: ${theme.rowActionsMenu.button.hover.background};
+          color: ${theme.rowActionsMenu.button.hover.text};
+        }
+
+        &:active {
+          background: ${theme.rowActionsMenu.button.active.background};
+          color: ${theme.rowActionsMenu.button.active.text};
+        }
+
+        &:disabled {
+          background: ${theme.rowActionsMenu.button.disabled.background};
+          color: ${theme.rowActionsMenu.button.disabled.text};
+        }
+
+    `;
+  }}
+`;
+const ContentWrapper = styled.div(
+  ({ theme }) => `
+  padding: 5px 10px;
+  display: flex;
+  flex-direction: column;
+  button {
+    min-width: 110px;
+    justify-content: flex-start;
+    font-weight: 400;
+  }
+  button:not(:last-of-type) {
+    position: relative;
+    ::after {
+      position: absolute;
+      content: '';
+      bottom: 0;
+      left: 5px;
+      right: 5px;
+      height: 1px;
+      background-color: ${theme.rowActionsMenu.delimiterColor};
+    }
+  }
+`
+);

package/src/Core/RowActionsMenu/index.ts

@@ -0,0 +1 @@
+export * from './RowActionsMenu';

package/src/Core/index.ts

@@ -8,3 +8,4 @@ export * from './Table';
 export * from './Pagination';
 export * from './ContextMenu';
 export * from './Select';
+export * from './RowActionsMenu';

package/src/Theme/theme.ts

@@ -545,6 +545,39 @@ export const lightThemePx: Theme = {
       },
     },
   },
+  // Компонент RowActionsMenu
+  rowActionsMenu: {
+    button: {
+      default: {
+        background: 'transparent',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: 'transparent',
+        text: '#0042EC',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      active: {
+        background: 'transparent',
+        text: '#0042EC',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' none',
+        boxShadow: 'none',
+      },
+    },
+    delimiterColor: '#EBEBEB',
+    icon: {
+      size: 16,
+    },
+  },
 };
 
 // Конвертуємо всі розміри з px в rem

package/src/Theme/types.ts

@@ -151,6 +151,13 @@ export type Theme = {
   select: {
     item: Record<ButtonState, ButtonElementStyle>;
   };
+  rowActionsMenu: {
+    button: Record<ButtonState, ButtonElementStyle>;
+    delimiterColor: string;
+    icon: {
+      size: number | string;
+    };
+  };
 };
 
 //TODO check and refactoring