Bug fixes & improvements

traboda · Jan 6, 2024 · e196b6c · e196b6c
1 parent bd776a4
commit e196b6c
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 28 deletions.
diff --git a/src/components/HorizontalNavigator/index.tsx b/src/components/HorizontalNavigator/index.tsx
@@ -100,7 +100,7 @@ const HorizontalNavigator = ({
           'dsr-list-none tab-selector horizontal-tabs dsr-relative dsr-inline-flex',
           'dsr-items-center dsr-rounded-lg',
           variant === 'pill' && 'dsr-z-[1000] dsr-p-1.5 dsr-gap-x-1',
-          variant === 'line' && 'dsr-gap-x-4',
+          variant === 'line' && 'dsr-gap-2',
           className,
         ])}
       >
@@ -117,14 +117,16 @@ const HorizontalNavigator = ({
           />
         ))}
       </ul>
-      <div
-        className={activeMarkerClassName({ variant: variant, color: color })}
-        style={{
-          transform: `${indicatorStyle?.translateY ? `translateY(${indicatorStyle?.translateY}px)` : ''} ${indicatorStyle?.translateX ? `translateX(${indicatorStyle?.translateX}px)` : ''}`,
-          width: indicatorStyle?.width || 0,
-          height: indicatorStyle?.height || 0,
-        }}
-      />
+      {activeItem ? (
+        <div
+          className={activeMarkerClassName({ variant: variant, color: color })}
+          style={{
+            transform: `${indicatorStyle?.translateY ? `translateY(${indicatorStyle?.translateY}px)` : ''} ${indicatorStyle?.translateX ? `translateX(${indicatorStyle?.translateX}px)` : ''}`,
+            width: indicatorStyle?.width || 0,
+            height: indicatorStyle?.height || 0,
+          }}
+        />
+      ) : null}
     </div>
   );
 

diff --git a/src/components/HorizontalNavigator/item.tsx b/src/components/HorizontalNavigator/item.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { nanoid } from 'nanoid';
 import clsx from 'clsx';
 
-import { cva } from '../../utils/cva';
+import { cva, cx } from '../../utils/cva';
 import { LinkWrapper } from '../../utils/misc';
 import Icon, { IconInputType } from '../Icon';
 import Badge, { BaseBadgeProps } from '../Badge';
@@ -38,15 +38,6 @@ export type HorizontalNavigatorItemProps = {
   onClickItem?: (key: string, item: HorizontalNavigatorItemType) => void,
 };
 
-const buttonClassNames = cva({
-  variants: {
-    variant: {
-      pill: 'dsr-px-5 dsr-py-2',
-      line: 'dsr-py-1 dsr-px-3',
-    },
-  },
-});
-
 const HorizontalNavigatorItem = ({
   item, activeItem, badgeProps, variant = 'pill', className, navigatorID, onClickItem = () => {}, color = 'primary',
 }: HorizontalNavigatorItemProps) => {
@@ -63,13 +54,14 @@ const HorizontalNavigatorItem = ({
       color: EMPTY_COLOR_MAP,
       variant: {
         pill: [
-          'border border-neutral-300/20 ',
+          'border border-neutral-300/20 dsr-px-5 dsr-py-2',
           activeItem === item.key && 'dsr-text-primaryTextColor',
           activeItem !== item.key && !item?.isDisabled && 'hover:dsr-bg-neutral-50/80 dark:hover:dsr-bg-neutral-500/80',
         ],
         line: [
-          'dsr-transition-all dsr-rounded-lg dsr-gap-2 dsr-border-0 dsr-mb-2',
+          'dsr-transition-all dsr-rounded-lg dsr-gap-2 dsr-border-0 dsr-py-1 dsr-px-3',
           activeItem !== item.key && !item?.isDisabled && 'hover:dsr-bg-neutral-400/20',
+          activeItem && 'dsr-mb-2',
         ],
       },
     },
@@ -121,7 +113,6 @@ const HorizontalNavigatorItem = ({
       onClick={() =>
         item?.onClick && typeof item.onClick === 'function' ? item.onClick() : onClickItem(item.key, item)
       }
-      className={buttonClassNames({ variant })}
       role="tab"
       id={`${navigatorID}-${item.key}-tab`}
       data-toggle="tab"
@@ -138,14 +129,13 @@ const HorizontalNavigatorItem = ({
     <li
       key={item?.key ? `tab_selector_${item?.key}` : nanoid()}
       role="presentation"
-      className={clsx([
+      className={cx([
         liClassNames({ color, variant }),
         className, item.className,
       ])}
     >
       {item.link ? LinkWrapper(!item.isDisabled ? item.link : '', renderOption(item), {
         id: `${navigatorID}-${item.key}-tab`,
-        className: buttonClassNames({ variant }),
       }) : renderButton(item)}
     </li>
   );

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -26,8 +26,6 @@ const Icon = ({ icon, ...defaultProps }: IconComponentProps) => {
   // 1rem = 16px by default
   props.size = typeof props.size === 'number' ? `${props.size / 16}rem` : props.size;
 
-  console.log(icon);
-
   return typeof icon === 'function' ? icon(props) : (iconWrapper?.(typeof icon === 'object' ? icon.icon : icon, props) ?? <span />);
 };
 

diff --git a/src/components/Radio/index.tsx b/src/components/Radio/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React, { forwardRef, KeyboardEvent } from 'react';
 import clsx from 'clsx';
 

diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 

diff --git a/src/components/SimpleSelect/index.tsx b/src/components/SimpleSelect/index.tsx
@@ -294,7 +294,14 @@ const SimpleSelect = <Type extends SimpleSelectValue | SimpleSelectValue[]>({
                   {variant === 'pill' && Array.isArray(value) ? value.map(val => {
                     const option = getOption(val);
                     return option ? (
-                      <div key={val} className="dsr-bg-black/10 dark:dsr-bg-white/10 dsr-rounded dsr-items-center dsr-inline-flex dsr-px-1 dsr-overflow-hidden">
+                      <div
+                        key={val}
+                        className={clsx([
+                          'dsr-bg-black/10 dark:dsr-bg-white/10 dsr-border dsr-border-neutral-200',
+                          'dsr-rounded dsr-inline-flex dsr-items-center dsr-px-1 dsr-overflow-hidden',
+                          'hover:dsr-shadow hover:dsr-border-neutral-300',
+                        ])}
+                      >
                         {option?.icon && (<Icon icon={option?.icon} size={16} />)}
                         {option?.iconRenderer && (
                         <div className="dsr-p-1 dsr-flex dsr-items-center dsr-justify-center dsr-h-full">

diff --git a/src/components/VerticalNavigator/index.tsx b/src/components/VerticalNavigator/index.tsx
@@ -83,7 +83,7 @@ const VerticalNavigator = ({
     if (activeItem) {
       updateIndicator();
     }
-  });
+  }, [activeItem]);
 
   const listRenderer = (
     <ul