@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

package/lib/components/NewComponents/ContextMenu/styles.js

@@ -1,308 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-const fadeIn = keyframes `
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-const slideIn = keyframes `
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-`;
-export const MenuContainer = styled.div `
-  position: fixed;
-  left: ${props => props.$openLeft ? 'auto' : `${props.$x}px`};
-  right: ${props => props.$openLeft ? `${window.innerWidth - props.$x}px` : 'auto'};
-  top: ${props => props.$openUp ? 'auto' : `${props.$y}px`};
-  bottom: ${props => props.$openUp ? `${window.innerHeight - props.$y}px` : 'auto'};
-  z-index: 10000;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
-              0 2px 8px rgba(0, 0, 0, 0.08);
-  min-width: max-content;
-  width: max-content;
-  padding: 4px 0;
-  animation: ${fadeIn} 0.15s ease-out;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-
-  [data-theme='dark'] & {
-    background: #2a2a2a;
-    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
-                0 2px 8px rgba(0, 0, 0, 0.3);
-  }
-`;
-export const MenuItem = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 12px;
-  cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${props => props.$disabled ? 0.4 : 1};
-  transition: all 0.15s ease;
-  position: relative;
-  user-select: none;
-  font-size: 13px;
-  color: ${props => props.$disabled ? '#999' : '#1a1a1a'};
-  font-weight: 500;
-  ${props => props.$beginGroup && `
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin-top: 4px;
-    padding-top: 8px;
-  `}
-
-  &:hover {
-    ${props => !props.$disabled && `
-      background: linear-gradient(90deg, #f0f7ff 0%, #e6f2ff 100%);
-      color: #0066cc;
-      padding-left: 14px;
-    `}
-  }
-
-  &:active {
-    ${props => !props.$disabled && `
-      background: linear-gradient(90deg, #e6f2ff 0%, #d9ebff 100%);
-      transform: scale(0.98);
-    `}
-  }
-
-  [data-theme='dark'] & {
-    color: ${props => props.$disabled ? '#666' : '#e0e0e0'};
-    ${props => props.$beginGroup && `
-      border-top-color: rgba(255, 255, 255, 0.1);
-    `}
-
-    &:hover {
-      ${props => !props.$disabled && `
-        background: linear-gradient(90deg, #1a3a52 0%, #1e4159 100%);
-        color: #4db8ff;
-      `}
-    }
-
-    &:active {
-      ${props => !props.$disabled && `
-        background: linear-gradient(90deg, #1e4159 0%, #234a66 100%);
-      `}
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 14px 16px;
-    font-size: 15px;
-  }
-`;
-export const MenuItemContent = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-`;
-export const IconWrapper = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  width: 18px;
-  height: 18px;
-`;
-export const MenuItemName = styled.span `
-  flex: 1;
-  white-space: normal;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  line-height: 1.4;
-`;
-export const RightIconButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 4px 8px;
-  margin-left: 8px;
-  border-radius: 6px;
-  color: inherit;
-  font-size: 14px;
-  opacity: 0.6;
-  transition: all 0.15s ease;
-
-  &:hover {
-    opacity: 1;
-    background: rgba(0, 0, 0, 0.05);
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  [data-theme='dark'] & {
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-`;
-export const SubmenuIndicator = styled.span `
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  margin-left: 8px;
-  opacity: 0.6;
-  transition: transform 0.15s ease;
-
-  ${MenuItem}:hover & {
-    ${props => !props.$isMobile && `
-      transform: translateX(2px);
-      opacity: 1;
-    `}
-  }
-`;
-export const Submenu = styled.div `
-  position: fixed;
-  left: ${props => {
-    const spaceOnRight = globalThis.innerWidth - props.$parentRect.right;
-    return spaceOnRight > 240 ? `${props.$parentRect.right - 8}px` : 'auto';
-}};
-  right: ${props => {
-    const spaceOnRight = globalThis.innerWidth - props.$parentRect.right;
-    return spaceOnRight > 240 ? 'auto' : `${globalThis.innerWidth - props.$parentRect.left + 8}px`;
-}};
-  /* Vertical positioning: Each submenu independently decides direction based on its own space */
-  top: ${props => {
-    // If openUp is true, don't anchor to top
-    return props.$openUp ? 'auto' : `${props.$parentRect.top - 8}px`;
-}};
-  bottom: ${props => {
-    // If openUp is true, anchor to bottom and grow upward
-    return props.$openUp ? `${globalThis.innerHeight - props.$parentRect.bottom - 8}px` : 'auto';
-}};
-  z-index: 10001;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
-              0 2px 8px rgba(0, 0, 0, 0.08);
-  min-width: max-content;
-  width: max-content;
-  padding: 4px 0;
-  animation: ${slideIn} 0.15s ease-out;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  
-  /* Add invisible padding to bridge the gap - works for both sides */
-  &::before {
-    content: '';
-    position: absolute;
-    right: 100%;
-    top: 0;
-    bottom: 0;
-    width: 15px;
-    background: transparent;
-  }
-  
-  /* Bridge on the right side for nested submenus */
-  &::after {
-    content: '';
-    position: absolute;
-    left: 100%;
-    top: 0;
-    bottom: 0;
-    width: 15px;
-    background: transparent;
-  }
-
-  [data-theme='dark'] & {
-    background: #2a2a2a;
-    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
-                0 2px 8px rgba(0, 0, 0, 0.3);
-  }
-`;
-export const MobileMenuHeader = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  margin-bottom: 8px;
-  gap: 12px;
-  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
-  border-radius: 12px 12px 0 0;
-
-  [data-theme='dark'] & {
-    background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
-    border-bottom-color: rgba(255, 255, 255, 0.1);
-  }
-`;
-export const BackButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0066cc;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  font-size: 18px;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background: #0052a3;
-    transform: scale(1.05);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  [data-theme='dark'] & {
-    background: #4db8ff;
-    color: #1a1a1a;
-
-    &:hover {
-      background: #66c2ff;
-    }
-  }
-`;
-export const HeaderTitle = styled.h3 `
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1a1a1a;
-  flex: 1;
-
-  [data-theme='dark'] & {
-    color: #e0e0e0;
-  }
-`;
-export const MenuDivider = styled.div `
-  height: 1px;
-  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
-  margin: 8px 0;
-
-  [data-theme='dark'] & {
-    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
-  }
-`;
-export const Overlay = styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  background: transparent;
-`;

package/lib/components/NewComponents/ContextMenu/types.d.ts

@@ -1,26 +0,0 @@
-export interface TMContextMenuItemProps {
-    name: string;
-    icon?: React.ReactNode;
-    disabled?: boolean;
-    onClick?: () => void;
-    submenu?: TMContextMenuItemProps[];
-    visible?: boolean;
-    rightIcon?: React.ReactNode;
-    onRightIconClick?: () => void;
-    beginGroup?: boolean;
-}
-export interface TMContextMenuProps {
-    items: TMContextMenuItemProps[];
-    trigger?: 'right' | 'left';
-    children?: React.ReactNode;
-}
-export interface Position {
-    x: number;
-    y: number;
-}
-export interface MenuState {
-    visible: boolean;
-    position: Position;
-    submenuStack: TMContextMenuItemProps[][];
-    parentNames: string[];
-}

package/lib/components/NewComponents/ContextMenu/types.js

@@ -1 +0,0 @@
-export {};

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { TMFloatingMenuBarProps } from './types';
-declare const TMFloatingMenuBar: React.FC<TMFloatingMenuBarProps>;
-export default TMFloatingMenuBar;