Fix some minor bug and add classname for pagination

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/design-system-react",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",

package.json

@@ -18,6 +18,13 @@ interface PaginationProps {
   pageSize: number;
   onChange: (page: number) => void;
   className?: string;
+  classNames?: {
+    control?: string;
+    list?: string;
+    navigation?: string;
+    ellipsis?: string;
+    active?: string;
+  };
 }
 
 const getPageNumbers = (currentPageNo: number, totalPages: number) => {
@@ -45,7 +52,7 @@ const getPageNumbers = (currentPageNo: number, totalPages: number) => {
 };
 
 function Pagination(props: PaginationProps) {
-  const { defaultPage = 1, total, pageSize, onChange, className } = props;
+  const { defaultPage = 1, total, pageSize, onChange, className, classNames } = props;
   const totalPages = Math.ceil(total / pageSize);
   const [currentPage, setCurrentPage] = useState(defaultPage);
   const [pageNumbers, setPageNumbers] = useState<(number | 'ellipsis')[]>(
@@ -56,7 +63,7 @@ function Pagination(props: PaginationProps) {
     setPageNumbers(getPageNumbers(currentPage, totalPages));
   }, [currentPage, totalPages]);
   return (
-    <PaginationUnit className={cn('select-none', className)}>
+    <PaginationUnit className={cn('select-none', className, classNames?.control)}>
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious
@@ -68,6 +75,7 @@ function Pagination(props: PaginationProps) {
             }}
             className={cn(
               'cursor-pointer',
+              classNames?.navigation,
               currentPage <= 1 && 'cursor-not-allowed pointer-events-none opacity-35',
             )}
           />
@@ -76,7 +84,7 @@ function Pagination(props: PaginationProps) {
         {pageNumbers.map((page, index) => (
           <PaginationItem key={index}>
             {page === 'ellipsis' ? (
-              <PaginationEllipsis />
+              <PaginationEllipsis className={classNames?.ellipsis} />
             ) : (
               <PaginationLink
                 onClick={() => {
@@ -85,8 +93,11 @@ function Pagination(props: PaginationProps) {
                 }}
                 className={cn(
                   'cursor-pointer w-[32px] h-[32px] flex items-center justify-center rounded-full hover:bg-primary-gray-300',
-                  page === currentPage &&
-                    'bg-primary-blue-600 hover:bg-primary-blue-700 dark:bg-primary-blue-500 dark:hover:bg-primary-blue-400 hover:text-primary-wite text-primary-white',
+                  classNames?.list,
+                  page === currentPage && [
+                    'bg-primary-blue-600 hover:bg-primary-blue-700 dark:bg-primary-blue-500 dark:hover:bg-primary-blue-400 hover:text-primary-white text-primary-white',
+                    classNames?.active,
+                  ],
                 )}
               >
                 {page}
@@ -105,6 +116,7 @@ function Pagination(props: PaginationProps) {
             }}
             className={cn(
               'cursor-pointer',
+              classNames?.navigation,
               currentPage >= totalPages && 'cursor-not-allowed pointer-events-none opacity-35',
             )}
           />

src/components/ui/Pagination/index.tsx

@@ -60,14 +60,17 @@ interface Props {
   value?: string;
   onValueChange?: (d: string) => void;
   className?: string;
-  buttonClassName?: string;
-  activeButtonClassName?: string;
   size?: 'sm' | 'base';
   variant?: 'light' | 'normal';
   color?: 'blue' | 'red' | 'black' | 'custom';
   buttonStyle?: {
     active?: React.CSSProperties;
-    inactive?: React.CSSProperties;
+    items?: React.CSSProperties;
+  };
+  classNames?: {
+    control?: string;
+    items?: string;
+    active?: string;
   };
 }
 
@@ -77,13 +80,12 @@ function SegmentedControl(props: Props) {
     defaultValue,
     onValueChange,
     className,
-    buttonClassName,
-    activeButtonClassName,
     size,
     variant,
     color,
     value,
     buttonStyle,
+    classNames,
   } = props;
   const [selected, setSelected] = useState(value || defaultValue || options[0].value);
 
@@ -92,15 +94,16 @@ function SegmentedControl(props: Props) {
     onValueChange?.(value);
   };
 
-  const setSelectedEffect = useEffectEvent(() => {
+  const setSelectedEffect = useEffectEvent((value?: string) => {
     setSelected(value || defaultValue || options[0].value);
   });
+
   useEffect(() => {
-    setSelectedEffect();
-  }, [defaultValue, options, value]);
+    setSelectedEffect(value);
+  }, [value]);
 
   return (
-    <div className={cn(segmentedButtonVariants({ size, variant }), className)}>
+    <div className={cn(segmentedButtonVariants({ size, variant }), className, classNames?.control)}>
       {options.map(option => (
         <button
           type='button'
@@ -111,10 +114,17 @@ function SegmentedControl(props: Props) {
             selected === option.value
               ? buttonSelectedVariants({ color })
               : buttonUnselectedVariants({ color }),
-            buttonClassName,
-            selected === option.value ? activeButtonClassName : '',
+            classNames?.items,
+            selected === option.value && classNames?.active,
           )}
-          style={selected === option.value ? buttonStyle?.active : buttonStyle?.inactive}
+          style={
+            buttonStyle?.items || (selected === option.value && buttonStyle?.active)
+              ? {
+                  ...(buttonStyle?.items || {}),
+                  ...(selected === option.value ? buttonStyle?.active : {}),
+                }
+              : undefined
+          }
         >
           {option.label}
         </button>

src/components/ui/segmentedControl.tsx

@@ -18,22 +18,28 @@ interface SidebarProps
     VariantProps<typeof sidebarVariants> {
   defaultValue?: string;
   activeValue?: string;
+  classNames?: {
+    active?: string;
+    controls?: string;
+    hover?: string;
+  };
   activeItemClass?: string;
   hoverItemClass?: string;
   onValueChange?: (value: string) => void;
 }
 
 const SidebarContext = React.createContext<{
   selectedValue?: string;
-  activeItemClass?: string;
   activeValue?: string;
-  hoverItemClass?: string;
+  classNames?: {
+    active?: string;
+    controls?: string;
+  };
   onValueChange: (value: string) => void;
 }>({
   selectedValue: undefined,
-  hoverItemClass: undefined,
+  classNames: undefined,
   activeValue: undefined,
-  activeItemClass: undefined,
   onValueChange: () => {},
 });
 
@@ -63,12 +69,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
       [onValueChange, activeValue],
     );
 
-    const setSelectedValueEffect = useEffectEvent(() => {
-      if (activeValue) setSelectedValue(activeValue);
+    const setSelectedValueEffect = useEffectEvent((activeValue?: string) => {
+      setSelectedValue(activeValue || defaultValue || '');
     });
 
     useEffect(() => {
-      setSelectedValueEffect();
+      setSelectedValueEffect(activeValue);
     }, [activeValue]);
 
     const contextValue = React.useMemo(
@@ -99,21 +105,16 @@ interface SidebarItemProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const SidebarItem = React.forwardRef<HTMLDivElement, SidebarItemProps>(
   ({ className, children, value, ...props }, ref) => {
-    const { selectedValue, activeItemClass, hoverItemClass, onValueChange } =
-      React.useContext(SidebarContext);
+    const { selectedValue, classNames, onValueChange } = React.useContext(SidebarContext);
     return (
       <div
         {...props}
         ref={ref}
         className={cn(
-          'text-primary-black dark:text-primary-white text-base bg-transparent p-4 flex gap-2 items-center cursor-pointer',
-          selectedValue === value
-            ? activeItemClass || 'bg-primary-gray-300 font-bold dark:bg-primary-gray-600'
-            : '',
-          hoverItemClass
-            ? `hover:${hoverItemClass} dark:hover:${hoverItemClass}`
-            : 'hover:bg-primary-gray-300 dark:hover:bg-primary-gray-600',
+          'text-primary-black dark:text-primary-white text-base bg-transparent p-4 flex gap-2 items-center cursor-pointer hover:bg-primary-gray-300 dark:hover:bg-primary-gray-600',
           className,
+          classNames?.controls,
+          selectedValue === value && classNames?.active,
         )}
         onClick={() => {
           if (value) {

src/components/ui/sidebar-nav.tsx

@@ -19,6 +19,9 @@ const meta: Meta<PagePropsAndCustomArgs> = {
       control: { type: 'number' },
       defaultValue: { summary: 10 },
     },
+    classNames: {
+      control: { type: 'object' },
+    },
   },
   args: {
     defaultPage: 1,

src/stories/Pagination/Pagination.stories.tsx

@@ -11,9 +11,8 @@ const meta: Meta<PagePropsAndCustomArgs> = {
   tags: ['autodocs'],
   argTypes: {
     defaultValue: { control: { type: 'text' } },
+    classNames: { control: { type: 'object' } },
     value: { control: { type: 'text' } },
-    buttonClassName: { control: { type: 'text' } },
-    activeButtonClassName: { control: { type: 'text' } },
     size: {
       control: { type: 'inline-radio' },
       options: ['sm', 'base'],

src/stories/SegmentedControl/SegmentedControl.stories.tsx

@@ -15,10 +15,8 @@ const meta: Meta<PagePropsAndCustomArgs> = {
       options: ['noEffect', 'background', 'border'],
       defaultValue: { summary: 'background' },
     },
-    activeItemClass: { control: { type: 'text' } },
-    hoverItemClass: { control: { type: 'text' } },
     defaultValue: { control: { type: 'text' } },
-    activeValue: { control: { type: 'text' } },
+    classNames: { control: { type: 'object' } },
   },
   args: { variant: 'background' },
   render: ({ ...args }, { globals: { theme, direction, language } }) => {