SITE-3882/seat-selection

src/components/Popover/index.tsx

@@ -23,6 +23,7 @@ function Popover(props: TPopoverProps): JSX.Element {
     zIndex = OVERLAY_Z_INDEX - 1,
     className = '',
     autoWidth = false,
+    isHidden = false,
   } = props
 
   const {
@@ -37,6 +38,8 @@ function Popover(props: TPopoverProps): JSX.Element {
     side,
   } = usePopover(placement)
 
+  const isPopoverShow = isOpen && !isHidden
+
   return (
     <>
       <div
@@ -48,7 +51,7 @@ function Popover(props: TPopoverProps): JSX.Element {
       >
         {children}
       </div>
-      {isOpen && (
+      {isPopoverShow && (
         <Portal>
           <GlobalStylesScope>
             <div

src/components/Popover/types.ts

@@ -34,6 +34,8 @@ type TPopoverProps = {
   className?: string,
 
   autoWidth?: boolean,
+
+  isHidden?: boolean,
 }
 
 type TPopoverWithDefaultsProps = Required<TPopoverProps>

src/components/Toggler/Toggler.stories.tsx

@@ -20,6 +20,7 @@ export const GenderToggler = (args: TTogglerProps): JSX.Element => {
       {...args}
       onChange={onChange}
       name="gender"
+      disabled
     >
       <TogglerItem value="male">
         Мужской

src/components/Toggler/TogglerGroup/index.tsx

@@ -30,6 +30,8 @@ type TProps = {
   name?: string,
 
   helperText?: React.ReactNode,
+
+  disabled?: boolean,
 }
 
 /**
@@ -44,6 +46,7 @@ const TogglerGroup = ({
   errorMessage = '',
   name = '',
   helperText = '',
+  disabled = false,
   ...props
 }: TProps): JSX.Element => {
   return (
@@ -68,6 +71,7 @@ const TogglerGroup = ({
             errorMessage,
             name,
             hasDelimiter,
+            disabled,
             ...props,
           })
         })}

src/components/Toggler/TogglerItem/index.tsx

@@ -17,6 +17,7 @@ type TProps = {
   onBlur?: () => void,
   className?: string,
   hasDelimiter?: boolean,
+  disabled?: boolean,
 }
 
 const ENTER_KEY_CODE = 13
@@ -32,6 +33,7 @@ const TogglerItem = ({
   onBlur,
   className = '',
   hasDelimiter = true,
+  disabled = false,
   ...props
 }: TProps): JSX.Element => {
   const isSelected = value === currentValue
@@ -43,6 +45,7 @@ const TogglerItem = ({
       as="div"
       onClick={() => onChange(value)}
       className={className}
+      disabled={disabled}
     >
       {children}
     </StyledWrapper>

src/components/Toggler/TogglerItem/styled.ts

@@ -3,6 +3,7 @@ import { borderRadiusSmall } from 'utils/borderRadius'
 
 interface TStyledWrapperProps {
   isSelected: boolean,
+  disabled: boolean,
 }
 
 export const StyledWrapper = styled.span<TStyledWrapperProps>`
@@ -26,6 +27,13 @@ export const StyledWrapper = styled.span<TStyledWrapperProps>`
     font-weight: 500;
     box-shadow: 0px 1px 3px rgba(98, 112, 139, 0.2);
   `}
+
+  ${({ disabled }) => disabled && css`
+    pointer-events: none;
+    cursor: default;
+    color: ${({ theme }) => theme.color.colorTextAccentDisable};
+  `}
+
   ${({ theme }) => css`
     @media ${theme.queries.isMobile} {
       font-size: 14px;