@cyber-harbour/ui 1.0.55 → 1.0.57

package/package.json

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

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import { ButtonSize, getButtonSizeStyles } from '../../Theme';
-import { useRef } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
 import { styled, useTheme } from 'styled-components';
 import { ChevronDownIcon, ChevronUpIcon } from '../IconComponents';
@@ -18,6 +18,7 @@ interface ContextMenuProps {
   align?: PopoverAlign;
   hasBorder?: boolean;
   maxHeight?: number;
+  matchAnchorWidth?: boolean;
 }
 
 export const ContextMenu = ({
@@ -34,10 +35,17 @@ export const ContextMenu = ({
   children,
   hasBorder = true,
   maxHeight = 500,
+  matchAnchorWidth = false,
 }: ContextMenuProps) => {
+  const [anchorWidth, setAnchorWidth] = useState<number>(0);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const theme = useTheme();
+  useLayoutEffect(() => {
+    if (buttonRef.current) {
+      setAnchorWidth(buttonRef.current.offsetWidth);
+    }
+  }, [matchAnchorWidth]);
 
   return (
     <Popover
@@ -47,6 +55,7 @@ export const ContextMenu = ({
       align={align}
       onClickOutside={onClickOutside}
       content={children}
+      ref={buttonRef}
       containerStyle={{
         backgroundColor: theme.colors.background,
         border: `1px solid ${theme.colors.stroke.light}`,
@@ -55,10 +64,10 @@ export const ContextMenu = ({
         overflow: 'auto',
         maxHeight: `${maxHeight}px`,
         zIndex: `${9999}`,
+        width: anchorWidth && matchAnchorWidth ? `${anchorWidth}px` : undefined,
       }}
     >
       <StyledButton
-        ref={buttonRef}
         onClick={onClick}
         $disabled={disabled}
         $fullWidth={fullWidth}
@@ -68,7 +77,7 @@ export const ContextMenu = ({
         disabled={disabled}
         $hasBorder={hasBorder}
       >
-        <div>{anchor}</div>
+        <StyledAnchor>{anchor}</StyledAnchor>
         {isOpen ? (
           <ChevronUpIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
         ) : (
@@ -78,7 +87,10 @@ export const ContextMenu = ({
     </Popover>
   );
 };
-
+const StyledAnchor = styled.div`
+  flex-grow: 1;
+  text-align: start;
+`;
 // Створюємо стилізований компонент, що використовує уніфіковану палітру
 const StyledButton = styled.button<{
   $size: ButtonSize;

package/src/Core/Drawer/Drawer.tsx

@@ -1,17 +1,20 @@
 import { createPortal } from 'react-dom';
 import { styled } from 'styled-components';
-import { pxToRem } from '../../Theme';
-import { CrossIcon } from '../IconComponents';
+import { createComponent, FabricComponent, generatePropertySpaceStyle, propToRem, pxToRem } from '../../Theme';
+import { useBodyScrollLock } from '../../utils';
 import { useEffect, useRef } from 'react';
 
 type DrawerProps = {
   isOpen: boolean;
   onClose: () => void;
-  children: any;
-  header?: number;
-  width?: number;
+  children?: any;
+  header?: number; //TODO: remove deps;
+  width?: string | number;
 };
+
 export const Drawer = (props: DrawerProps) => {
+  useBodyScrollLock(props.isOpen);
+
   if (!props.isOpen) return null;
   return createPortal(<DrawerWithOutclick {...props} />, document.body);
 };
@@ -30,53 +33,63 @@ const DrawerWithOutclick = ({ onClose, children, width, header }: DrawerProps) =
       document.removeEventListener('mousedown', handleClick);
     };
   }, [onClose]);
+
   return (
     <StyledDrawer $header={header} $width={width} ref={drawerRef}>
-      <CloseButton onClick={onClose}>
-        <CrossIcon width={14} height={14} color="currentColor" />
-      </CloseButton>
-      <Content>{children}</Content>
+      {children}
     </StyledDrawer>
   );
 };
 
-const CloseButton = styled.button(
-  ({ theme }) => `
-    display: block;
-    position: absolute;
-    background-color: inherit;
-    top: ${pxToRem(16, theme.baseSize)};
-    right: ${pxToRem(16, theme.baseSize)};
-    cursor: pointer;
-    z-index: 1;
+type DrawerHeaderProps = FabricComponent<{
+  children?: any;
+}>;
 
-    color: ${theme.colors.text.light};
-    padding: ${pxToRem(4, theme.baseSize)};
-    border: none;
-    outline: none;
-    transition: color 0.2s ease;
-    &: hover {
-      color: ${theme.colors.primary.light};
-    }
-`
+export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
+  styled.div<DrawerHeaderProps>(
+    ({ theme, p = theme.drawer.padding }) => `
+    grid-area: drawer-header;
+    ${generatePropertySpaceStyle(theme, 'padding', p)};
+  `
+  ),
+  {
+    ignoreStyles: ['padding-inline'],
+  }
 );
 
-const Content = styled.div(
-  ({ theme }) => `
-    max-height: 100%;
-    overflow-y: auto;
+type DrawerBodyProps = FabricComponent<{
+  children?: any;
+}>;
+
+export const DrawerBody: any = createComponent(
+  styled.div<DrawerBodyProps>(
+    ({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
+  grid-area: drawer-body;
+  max-height: 100%;
+  overflow-y: auto;
+  ${generatePropertySpaceStyle(theme, 'padding-inline', px)};
+  ${generatePropertySpaceStyle(theme, 'padding-bottom', pb)};
 `
+  ),
+  {
+    ignoreStyles: ['padding', 'padding-bottom'],
+  }
 );
-const StyledDrawer = styled.div<{ $header?: number; $width?: number }>(
+
+const StyledDrawer = styled.div<{ $header?: number; $width?: string | number }>(
   ({ theme, $header, $width }) => `
   position: fixed;
+  display: grid;
+  grid-template-areas:
+    "drawer-header"
+    "drawer-body";
+  grid-template-rows: auto 1fr;
   z-index: ${theme.zIndex.sticky};
   top: ${pxToRem($header || 0, theme.baseSize)};
   bottom: 0;
   right: 0;
-  width: ${$width ? pxToRem($width, theme.baseSize) : theme.drawer.width};
+  width: ${$width ? propToRem($width, theme.baseSize) : theme.drawer.width};
   max-width: 100%;
-  padding: ${theme.drawer.padding};
   background-color: ${theme.colors.background};
   box-shadow: ${theme.drawer.shadow};
   border-left: 1px solid ${theme.colors.stroke.lighter};

package/src/Core/IconComponents/RelationPointsIcon.tsx

@@ -0,0 +1,36 @@
+import { SVGProps } from 'react';
+
+interface RelationPointsIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const RelationPointsIcon = ({ fill = '#80A0F5', ...props }: RelationPointsIconProps) => {
+  return (
+    <svg viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M4.90056 13.6504C5.95056 13.476 5.95056 14.0866 6.65056 14.6099C9.88806 17.0087 14.0443 17.314 17.5443 15.2205C18.0256 14.9152 19.4693 13.6504 19.6881 13.6068C20.8693 13.4324 23.0131 15.0461 23.7568 15.9184C25.1568 17.7065 25.3318 20.4978 25.0693 22.6785C24.9381 23.856 23.9756 24.8155 22.7943 24.9464C16.2756 24.5103 8.92556 25.557 2.53806 24.9464C1.44431 24.8592 0.350563 24.0741 0.175563 22.9402C-0.0869367 21.4573 0.0880633 18.4479 0.744313 17.0523C1.40056 15.6567 3.41306 13.8685 4.94431 13.6068L4.90056 13.6504Z"
+        fill={fill}
+      />
+      <path
+        d="M49.9618 58.4401C50.7931 58.3093 51.4931 59.4432 52.2806 59.923C55.3868 61.8856 59.5868 61.8856 62.6931 59.923C63.4806 59.4432 64.1806 58.3093 65.0118 58.4401C66.8493 58.7018 68.9931 60.708 69.6056 62.409C70.0431 63.5865 70.1743 67.1629 69.7368 68.2532C69.4306 69.0383 68.5118 69.6925 67.6806 69.7797C61.1618 69.3436 53.8118 70.3903 47.4243 69.7797C46.3306 69.6925 45.2368 68.9074 45.0618 67.7735C44.8868 66.6395 44.9743 63.7174 45.2806 62.627C45.8493 60.7953 48.0368 58.7018 49.9618 58.4401Z"
+        fill={fill}
+      />
+      <path
+        d="M32.1562 3.83814C38.325 3.35839 44.4937 4.53596 49.9187 7.50169C50.4875 7.80699 53.1125 9.68237 53.3312 9.68237C53.4187 9.68237 54.25 9.15901 54.6437 9.02817C58.5812 7.89421 62.125 11.4269 60.9437 15.3522C60.8125 15.7447 60.2875 16.617 60.2875 16.6606C60.2875 16.8786 62.1688 19.4955 62.4313 20.0624C65.8438 26.2992 67.5937 36.5048 65.0562 43.3085C64.4437 44.9659 62.825 44.9659 62.4313 43.3085C62.7375 41.8693 63.1312 40.43 63.35 38.9472C64.1812 32.6232 62.9562 25.9067 59.675 20.4113C59.4125 20.0188 58.5812 18.536 58.1875 18.4923C57.925 18.4923 57.575 18.754 57.225 18.7976C53.4187 19.1465 50.925 16.835 51.2312 12.9534C51.2312 12.43 51.7125 11.9503 51.4062 11.5578C51.1 11.1652 48.3 9.63876 47.6875 9.33347C41.2125 6.14967 33.8625 5.58269 26.95 7.5453C25.8562 7.8506 23.5812 9.02817 22.6625 8.50481C21.7875 7.98144 22.0062 6.76026 22.8812 6.23689C24.85 5.10294 29.8812 4.05621 32.2 3.88175L32.1562 3.83814Z"
+        fill={fill}
+      />
+      <path
+        d="M5.3366 27.4741C8.0491 26.8636 6.60535 30.7888 6.4741 32.1844C5.90535 37.9851 7.3491 44.6579 10.4116 49.5863C10.5866 49.8916 11.3303 51.1128 11.5491 51.2436C11.9866 51.5489 12.3366 51.1128 12.8178 51.0692C16.6678 50.7203 19.1178 53.0318 18.8116 56.9134C18.8116 57.3495 18.3741 57.9165 18.5491 58.2218C18.7241 58.5707 21.8303 60.3153 22.4428 60.577C27.0803 62.8013 32.6366 63.848 37.7553 63.3682C39.1553 63.2374 42.1741 61.9726 42.6116 63.848C43.0491 65.7234 38.6741 65.9414 37.4491 66.0287C31.5866 66.3776 25.7241 65.2436 20.5178 62.5396C19.9053 62.1907 16.9303 60.1844 16.7116 60.1844C16.6241 60.1844 16.1866 60.5333 15.9678 60.6206C11.5053 62.3215 7.5241 58.3963 9.2741 53.9477C9.3616 53.7296 9.7116 53.2498 9.7116 53.2062C9.7116 52.9882 7.83035 50.3713 7.56785 49.8044C4.68035 44.5271 3.45535 38.552 3.8491 32.4897C3.89285 31.6611 4.33035 28.3464 4.76785 27.8231C4.8991 27.6486 5.11785 27.5178 5.3366 27.4741Z"
+        fill={fill}
+      />
+      <path
+        d="M11.2893 0.0856923C22.3143 -1.39717 22.3143 15.2633 11.7268 14.2165C3.41434 13.3879 3.63309 1.13242 11.2893 0.0856923Z"
+        fill={fill}
+      />
+      <path
+        d="M56.3517 44.9207C66.4142 43.6995 67.2892 58.1793 58.3204 59.0079C48.6517 59.9238 47.7767 45.9238 56.3517 44.9207Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -55,3 +55,4 @@ export { AndroidIcon } from './AndroidIcon';
 export { MicrosoftIcon } from './MicrosoftIcon';
 export { FolderAlertIcon } from './FolderAlertIcon';
 export { RelationIcon } from './RelationIcon';
+export { RelationPointsIcon } from './RelationPointsIcon';

package/src/Core/Input/Input.tsx

@@ -89,7 +89,7 @@ const TextAreaInput = forwardRef<HTMLTextAreaElement, TextAreaInputProps>(functi
 
   return (
     <div style={{ position: 'relative', width: '100%' }}>
-      <StyledTextarea disabled={disabled} {...props} rows={areaSize} ref={ref} />
+      <StyledTextarea disabled={disabled} $autoResize={autoResize} {...props} rows={areaSize} ref={ref} />
       <SizeContainer
         ref={divRef}
         $size={size}
@@ -111,11 +111,14 @@ type StyledGroupProps = StyledInputProps & {
   $multiline?: boolean;
 };
 
-const StyledTextarea = styled.textarea`
+const StyledTextarea = styled.textarea<{ $autoResize: boolean }>(
+  ({ $autoResize }) => `
   resize: none;
   margin: 0;
   display: block;
-`;
+  ${$autoResize ? 'overflow: hidden;' : ''}
+`
+);
 
 const StyledInput = styled.input``;
 

package/src/Core/Select/Select.tsx

@@ -1,13 +1,13 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { PopoverAlign, PopoverPosition } from 'react-tiny-popover';
 import { ContextMenu } from '../ContextMenu';
 import { ButtonSize, getButtonSizeStyles } from '../../Theme';
 import { styled } from 'styled-components';
 
-interface SelectProps<T extends string | number> {
+type SelectBaseProps<T extends string | number> = {
   selected?: T;
   options: { value: T; inputDisplay?: string }[];
-  handleSelect: (id: T) => void;
+  onSelect: (id: T) => void;
   placeholder: string;
   disabled?: boolean;
   positions?: PopoverPosition[] | PopoverPosition;
@@ -15,12 +15,25 @@ interface SelectProps<T extends string | number> {
   size?: ButtonSize;
   hasBorder?: boolean;
   maxHeight?: number;
-}
+  matchAnchorWidth?: boolean;
+};
+
+type SelectDefaultProps = {
+  isSearchable?: false;
+};
+
+type SelectSearchableProps = {
+  isSearchable: true;
+  noOptionsMessage: string;
+  inputPlaceholder: string;
+};
+
+type SelectProps<T extends string | number> = SelectBaseProps<T> & (SelectSearchableProps | SelectDefaultProps);
 
 export const Select = <T extends string | number>({
   options,
   selected,
-  handleSelect,
+  onSelect,
   placeholder,
   disabled = false,
   positions = ['bottom'],
@@ -28,31 +41,68 @@ export const Select = <T extends string | number>({
   size = 'small',
   hasBorder = true,
   maxHeight,
+  matchAnchorWidth = true,
+  isSearchable = false,
+  ...props
 }: SelectProps<T>) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const visibleOptions = useMemo(() => {
+    if (!isSearchable) return options;
+
+    const normalizedValue = searchValue?.trim().toLocaleLowerCase() || '';
+    return options.filter(({ value, inputDisplay }) =>
+      String(inputDisplay || value)
+        .toLocaleLowerCase()
+        .includes(normalizedValue)
+    );
+  }, [options, searchValue, isSearchable]);
+
   const handleToggle = useCallback(() => {
     if (!disabled) setIsOpen((prev) => !prev);
   }, []);
 
+  const noOptionsMessage = 'noOptionsMessage' in props ? props.noOptionsMessage : '';
+  const inputPlaceholder = 'inputPlaceholder' in props ? props.inputPlaceholder : '';
+
   return (
     <ContextMenu
       isOpen={isOpen}
       onClickOutside={() => setIsOpen(false)}
       onClick={handleToggle}
       disabled={disabled}
-      anchor={!selected ? placeholder : options.find((option) => option.value === selected)?.inputDisplay || selected}
+      anchor={
+        isSearchable && isOpen ? (
+          <StyledSearchInput
+            type="text"
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            placeholder={inputPlaceholder}
+            autoFocus
+            onClick={(e) => e.stopPropagation()}
+            $size={size}
+          />
+        ) : !selected ? (
+          placeholder
+        ) : (
+          options.find((option) => option.value === selected)?.inputDisplay || selected
+        )
+      }
       fullWidth
       positions={positions}
       align={align}
       size={size}
       hasBorder={hasBorder}
       maxHeight={maxHeight}
+      matchAnchorWidth={matchAnchorWidth}
     >
       <StyledWrapper>
-        {options.map((item) => (
+        {visibleOptions.map((item) => (
           <StyledItem
             onClick={() => {
-              handleSelect(item.value);
+              onSelect(item.value);
+              if (isSearchable) setSearchValue('');
               setIsOpen(false);
             }}
             type="button"
@@ -64,19 +114,34 @@ export const Select = <T extends string | number>({
             {item.inputDisplay || item.value}
           </StyledItem>
         ))}
+        {!visibleOptions.length && <NoMatchMessage $size={size}>{noOptionsMessage}</NoMatchMessage>}
       </StyledWrapper>
     </ContextMenu>
   );
 };
 
-const StyledWrapper = styled.div`
-  padding-block: 7px;
-  padding-inline: 5px;
-  button:not(:last-of-type) {
-    margin-bottom: 4px;
-  }
-`;
+const StyledSearchInput = styled.input<{ $size: ButtonSize }>(
+  ({ theme, $size }) => `
+  outline: none;
+  border: none;
+  padding: 0;
+  background: transparent;
+  width: 100%;
+  font-size: ${theme.button.sizes[$size].fontSize};
+  color: ${theme.colors.text.main};
+`
+);
 
+const NoMatchMessage = styled.p<{ $size: ButtonSize }>(
+  ({ theme, $size }) => `
+  padding-block: ${theme.select.padding};
+  padding-inline: ${theme.button.sizes[$size].paddingInline};
+  font-size: ${theme.button.sizes[$size].fontSize};
+  color: ${theme.colors.text.main};
+  white-space: pre-line;
+  word-break: break-word;
+`
+);
 const StyledItem = styled.button<{ $size: ButtonSize; $selected: boolean }>`
   ${({ theme, $size, $selected }) => {
     const sizes = getButtonSizeStyles(theme, $size);
@@ -85,7 +150,7 @@ const StyledItem = styled.button<{ $size: ButtonSize; $selected: boolean }>`
         color: ${theme.select.item.default.text};
         font-size: ${sizes.fontSize};
         gap: ${sizes.gap};
-        padding-block: ${sizes.paddingBlock};
+        padding-block: ${theme.select.padding};
         padding-inline: ${sizes.paddingInline};
         border-radius: ${sizes.borderRadius};
         border-width: ${sizes.borderWidth};
@@ -120,3 +185,13 @@ const StyledItem = styled.button<{ $size: ButtonSize; $selected: boolean }>`
     `;
   }}
 `;
+
+const StyledWrapper = styled.div(
+  ({ theme }) => `
+  padding-block: ${theme.select.paddingBlock};
+  padding-inline: ${theme.select.paddingInline};
+  ${StyledItem}:not(:last-of-type) {
+    margin-bottom: ${theme.select.margin};
+  }
+`
+);

package/src/Theme/themes/dark.ts

@@ -697,6 +697,10 @@ export const darkThemePx: Theme = {
         boxShadow: 'none',
       },
     },
+    paddingBlock: 7,
+    paddingInline: 5,
+    margin: 2,
+    padding: 6,
   },
   // Компонент RowActionsMenu
   rowActionsMenu: {

package/src/Theme/themes/light.ts

@@ -696,6 +696,10 @@ export const lightThemePx: Theme = {
         boxShadow: 'none',
       },
     },
+    paddingBlock: 7,
+    paddingInline: 5,
+    margin: 2,
+    padding: 6,
   },
   // Компонент RowActionsMenu
   rowActionsMenu: {

package/src/Theme/types.ts

@@ -211,6 +211,10 @@ export type Theme = {
   //Select
   select: {
     item: Record<ButtonState, ButtonElementStyle>;
+    paddingBlock: string | number;
+    paddingInline: string | number;
+    margin: string | number;
+    padding: string | number;
   };
   // RowActionsMenu
   rowActionsMenu: {

package/src/Theme/utils.ts

@@ -1,14 +1,5 @@
 import { DefaultTheme } from 'styled-components';
-import {
-  Breakpoint,
-  ButtonColor,
-  ButtonSize,
-  ButtonState,
-  ButtonVariant,
-  InputSize,
-  InputState,
-  InputVariant,
-} from './types';
+import { Breakpoint, ButtonColor, ButtonSize, ButtonState, ButtonVariant, InputState, InputVariant } from './types';
 
 /**
  * Helper function to resolve nested color paths from theme
@@ -96,7 +87,11 @@ const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
  * @returns The value in rem units as a string (e.g., "1.25rem")
  */
 export const propToRem = (value: number | string, baseSize: number = 16): string => {
-  if (typeof value === 'string' && value.trim().endsWith('%')) return value; // Return percentage values as-is
+  // Check if value ends with units that should not be converted to rem
+  if (typeof value === 'string' && /(%|d?vh|d?vw)$/.test(value.trim())) {
+    return value; // Return percentage and viewport values as-is
+  }
+
   const numericValue = typeof value === 'string' ? parseFloat(value) : value;
 
   // Handle invalid values

package/src/utils.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook для блокування скролу body та збереження позиції контенту
+ * Додає padding-right замість скролбару щоб уникнути стрибків контенту
+ *
+ * @param isLocked - чи заблоковано скрол
+ */
+export const useBodyScrollLock = (isLocked: boolean) => {
+  useEffect(() => {
+    if (!isLocked) return;
+
+    const originalStyle = window.getComputedStyle(document.body);
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+    // Зберігаємо оригінальні стилі
+    const originalPaddingRight = originalStyle.paddingRight;
+    const originalOverflow = originalStyle.overflow;
+
+    // Блокуємо скрол та додаємо падінг замість скролбару
+    document.body.style.overflow = 'hidden';
+    document.body.style.paddingRight = `${parseInt(originalPaddingRight) + scrollBarWidth}px`;
+
+    return () => {
+      // Відновлюємо оригінальні стилі
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [isLocked]);
+};