@cyber-harbour/ui 1.0.21 → 1.0.22

package/package.json

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

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -16,6 +16,8 @@ interface ContextMenuProps {
   anchor?: any;
   positions?: PopoverPosition[] | PopoverPosition;
   align?: PopoverAlign;
+  hasBorder?: boolean;
+  maxHeight?: number;
 }
 
 export const ContextMenu = ({
@@ -30,6 +32,8 @@ export const ContextMenu = ({
   positions = ['bottom'],
   align = 'start',
   children,
+  hasBorder = true,
+  maxHeight = 500,
 }: ContextMenuProps) => {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
@@ -49,7 +53,7 @@ export const ContextMenu = ({
         boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
         borderRadius: '5px',
         overflow: 'auto',
-        maxHeight: '500px',
+        maxHeight: `${maxHeight}px`,
         zIndex: `${9999}`,
       }}
     >
@@ -62,6 +66,7 @@ export const ContextMenu = ({
         className={className}
         type="button"
         disabled={disabled}
+        $hasBorder={hasBorder}
       >
         <div>{anchor}</div>
         {isOpen ? (
@@ -79,13 +84,14 @@ const StyledButton = styled.button<{
   $size: ButtonSize;
   $disabled?: boolean;
   $fullWidth?: boolean;
+  $hasBorder: boolean;
 }>`
-  ${({ $size, $disabled, $fullWidth, theme }) => {
+  ${({ $size, $disabled, $fullWidth, theme, $hasBorder }) => {
     const sizes = getButtonSizeStyles(theme, $size);
     return `
         background: ${theme.contextMenu.button.default.background};
         color: ${theme.contextMenu.button.default.text};
-        border-color: ${theme.contextMenu.button.default.border};
+        border-color: ${$hasBorder ? theme.contextMenu.button.default.border : 'transparent'};
         box-shadow: ${theme.contextMenu.button.default.boxShadow};
         font-size: ${sizes.fontSize};
         gap: ${sizes.gap};

package/src/Core/IconComponents/Users.tsx

@@ -0,0 +1,36 @@
+import { SVGProps } from 'react';
+
+interface PrintIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const UsersIcon = ({ fill = 'currentColor', ...props }: PrintIconProps) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12.0003 5.27318C11.9803 5.27318 11.967 5.27318 11.947 5.27318H11.9136C10.6536 5.23318 9.71362 4.25985 9.71362 3.05984C9.71362 1.83318 10.7136 0.839844 11.9336 0.839844C13.1536 0.839844 14.1536 1.83984 14.1536 3.05984C14.147 4.26651 13.207 5.23985 12.007 5.27985C12.007 5.27318 12.007 5.27318 12.0003 5.27318ZM11.9336 1.83318C11.2603 1.83318 10.7136 2.37985 10.7136 3.05318C10.7136 3.71318 11.227 4.24652 11.887 4.27318C11.8936 4.26652 11.947 4.26652 12.007 4.27318C12.6536 4.23985 13.1536 3.70652 13.1603 3.05318C13.1603 2.37985 12.6136 1.83318 11.9336 1.83318Z"
+        fill={fill}
+      />
+      <path
+        d="M12.0075 10.1871C11.7475 10.1871 11.4875 10.1671 11.2275 10.1204C10.9541 10.0738 10.7741 9.81376 10.8208 9.54042C10.8675 9.26709 11.1275 9.08709 11.4008 9.13376C12.2208 9.27376 13.0875 9.12043 13.6675 8.73376C13.9808 8.5271 14.1475 8.26709 14.1475 8.00709C14.1475 7.74709 13.9741 7.49375 13.6675 7.28709C13.0875 6.90042 12.2075 6.74709 11.3808 6.89376C11.1075 6.94709 10.8475 6.76042 10.8008 6.48709C10.7541 6.21376 10.9341 5.95376 11.2075 5.90709C12.2941 5.71376 13.4208 5.92042 14.2208 6.45375C14.8075 6.84709 15.1475 7.40709 15.1475 8.00709C15.1475 8.60042 14.8141 9.1671 14.2208 9.5671C13.6141 9.9671 12.8275 10.1871 12.0075 10.1871Z"
+        fill={fill}
+      />
+      <path
+        d="M3.98031 5.27399C3.97365 5.27399 3.96698 5.27399 3.96698 5.27399C2.76698 5.23399 1.82698 4.26065 1.82031 3.06065C1.82031 1.83398 2.82031 0.833984 4.04031 0.833984C5.26031 0.833984 6.26031 1.83399 6.26031 3.05399C6.26031 4.26065 5.32031 5.23399 4.12031 5.27399L3.98031 4.77399L4.02698 5.27399C4.01365 5.27399 3.99365 5.27399 3.98031 5.27399ZM4.04698 4.27399C4.08698 4.27399 4.12031 4.27398 4.16031 4.28065C4.75365 4.25398 5.27365 3.72065 5.27365 3.06065C5.27365 2.38732 4.72698 1.84065 4.05365 1.84065C3.38031 1.84065 2.83365 2.38732 2.83365 3.06065C2.83365 3.71398 3.34031 4.24065 3.98698 4.28065C3.99365 4.27398 4.02031 4.27399 4.04698 4.27399Z"
+        fill={fill}
+      />
+      <path
+        d="M3.97325 10.1871C3.15325 10.1871 2.36658 9.9671 1.75992 9.5671C1.17325 9.17376 0.833252 8.60709 0.833252 8.00709C0.833252 7.41376 1.17325 6.84709 1.75992 6.45375C2.55992 5.92042 3.68658 5.71376 4.77325 5.90709C5.04659 5.95376 5.22659 6.21376 5.17992 6.48709C5.13325 6.76042 4.87325 6.94709 4.59992 6.89376C3.77325 6.74709 2.89992 6.90042 2.31325 7.28709C1.99992 7.49375 1.83325 7.74709 1.83325 8.00709C1.83325 8.26709 2.00659 8.5271 2.31325 8.73376C2.89325 9.12043 3.75992 9.27376 4.57992 9.13376C4.85325 9.08709 5.11325 9.27376 5.15992 9.54042C5.20659 9.81376 5.02659 10.0738 4.75325 10.1204C4.49325 10.1671 4.23325 10.1871 3.97325 10.1871Z"
+        fill={fill}
+      />
+      <path
+        d="M8.00023 10.2537C7.98023 10.2537 7.96689 10.2537 7.94689 10.2537H7.91356C6.65356 10.2137 5.71356 9.24031 5.71356 8.04031C5.71356 6.81365 6.71356 5.82031 7.93356 5.82031C9.15356 5.82031 10.1536 6.82031 10.1536 8.04031C10.1469 9.24698 9.20689 10.2203 8.00689 10.2603C8.00689 10.2536 8.0069 10.2537 8.00023 10.2537ZM7.93356 6.81365C7.26023 6.81365 6.71356 7.36032 6.71356 8.03365C6.71356 8.69365 7.2269 9.22699 7.8869 9.25365C7.89356 9.24699 7.94689 9.24699 8.00689 9.25365C8.65356 9.22032 9.15356 8.68698 9.16023 8.03365C9.16023 7.36698 8.61356 6.81365 7.93356 6.81365Z"
+        fill={fill}
+      />
+      <path
+        d="M7.99921 15.1725C7.19921 15.1725 6.39921 14.9658 5.77921 14.5458C5.19254 14.1525 4.85254 13.5925 4.85254 12.9925C4.85254 12.3992 5.18587 11.8258 5.77921 11.4325C7.02587 10.6058 8.97921 10.6058 10.2192 11.4325C10.8059 11.8258 11.1459 12.3858 11.1459 12.9858C11.1459 13.5792 10.8125 14.1525 10.2192 14.5458C9.59921 14.9592 8.79921 15.1725 7.99921 15.1725ZM6.33254 12.2725C6.01921 12.4792 5.85254 12.7392 5.85254 12.9992C5.85254 13.2592 6.02587 13.5125 6.33254 13.7192C7.23254 14.3258 8.75921 14.3258 9.65921 13.7192C9.97254 13.5125 10.1392 13.2525 10.1392 12.9925C10.1392 12.7325 9.96587 12.4792 9.65921 12.2725C8.76587 11.6658 7.23921 11.6725 6.33254 12.2725Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -37,3 +37,4 @@ export { CheckIcon } from './Check';
 export { ChevronDownIcon } from './ChevronDown';
 export { ChevronUpIcon } from './ChevronUp';
 export { PlusIcon } from './Plus';
+export { UsersIcon } from './Users';

package/src/Core/Select/Select.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { PopoverAlign, PopoverPosition } from 'react-tiny-popover';
 import { ContextMenu } from '../ContextMenu';
-import { ButtonSize, getButtonSizeStyles } from '@/Theme';
+import { ButtonSize, getButtonSizeStyles } from '../../Theme';
 import { styled } from 'styled-components';
 
 interface SelectProps<T extends string | number> {
@@ -13,6 +13,8 @@ interface SelectProps<T extends string | number> {
   positions?: PopoverPosition[] | PopoverPosition;
   align?: PopoverAlign;
   size?: ButtonSize;
+  hasBorder?: boolean;
+  maxHeight?: number;
 }
 
 export const Select = <T extends string | number>({
@@ -24,6 +26,8 @@ export const Select = <T extends string | number>({
   positions = ['bottom'],
   align = 'start',
   size = 'small',
+  hasBorder = true,
+  maxHeight,
 }: SelectProps<T>) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const handleToggle = useCallback(() => {
@@ -41,6 +45,8 @@ export const Select = <T extends string | number>({
       positions={positions}
       align={align}
       size={size}
+      hasBorder={hasBorder}
+      maxHeight={maxHeight}
     >
       <StyledWrapper>
         {options.map((item) => (