@sikka/hawa 0.1.22 → 0.1.24

package/lib/layout/Sidebar.d.ts

@@ -21,11 +21,13 @@ interface SidebarGroupProps {
     isOpen?: boolean;
     onItemClick?: (value: string[]) => void;
     onSubItemClick?: (values: string[]) => void;
+    direction?: "rtl" | "ltr";
 }
 declare const SidebarGroup: React.FC<SidebarGroupProps>;
 declare const SidebarItem: React.FC<{
     item: Item;
     isSelected: any;
+    direction?: "rtl" | "ltr";
     onItemClick?: (value: string[]) => void;
     onSubItemClick?: (values: string[]) => void;
     isOpen?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/layout/AppLayout.tsx

@@ -56,7 +56,7 @@ type ProfileItem = {
 }
 
 export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
-  direction = "rtl",
+  direction = "ltr",
   drawerSize = "md",
   onSettingsClick,
   DrawerFooterActions,
@@ -327,6 +327,7 @@ export const AppLayout: React.FunctionComponent<AppLayoutTypes> = ({
            */}
 
           <SidebarGroup
+            direction={direction}
             onItemClick={(values) => {
               setSelectedItem(values)
               clickedItem(values)

package/src/layout/Sidebar.tsx

@@ -7,7 +7,7 @@ import { Button } from "../elements"
 const Accordion = AccordionPrimitive.Root
 
 let triggerStyles =
-  "flex flex-1 items-center cursor-pointer bg-primary-foreground rounded justify-between p-2 px-3 font-medium transition-all  [&[data-state=open]>svg]:-rotate-90"
+  "flex flex-1 items-center select-none cursor-pointer bg-primary-foreground rounded justify-between p-2 px-3 font-medium transition-all  [&[data-state=open]>svg]:-rotate-90"
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
@@ -94,6 +94,7 @@ interface SidebarGroupProps {
   isOpen?: boolean
   onItemClick?: (value: string[]) => void
   onSubItemClick?: (values: string[]) => void
+  direction?: "rtl" | "ltr"
 }
 
 const SidebarGroup: React.FC<SidebarGroupProps> = ({
@@ -104,6 +105,7 @@ const SidebarGroup: React.FC<SidebarGroupProps> = ({
   setOpenedItem,
   onItemClick,
   onSubItemClick,
+  direction,
   isOpen,
 }) => {
   return (
@@ -124,6 +126,7 @@ const SidebarGroup: React.FC<SidebarGroupProps> = ({
               isOpen={isOpen}
               isSelected={selectedItem}
               key={idx}
+              direction={direction}
               item={item}
               onItemClick={onItemClick}
               onSubItemClick={onSubItemClick}
@@ -137,10 +140,19 @@ const SidebarGroup: React.FC<SidebarGroupProps> = ({
 const SidebarItem: React.FC<{
   item: Item
   isSelected: any
+  direction?: "rtl" | "ltr"
+
   onItemClick?: (value: string[]) => void
   onSubItemClick?: (values: string[]) => void
   isOpen?: boolean
-}> = ({ item, isSelected, onItemClick, onSubItemClick, isOpen = true }) => {
+}> = ({
+  item,
+  isSelected,
+  onItemClick,
+  onSubItemClick,
+  direction,
+  isOpen = true,
+}) => {
   const getSelectedStyle = (value: string, index: number) => {
     return isSelected && isSelected[index] === value
       ? "bg-primary text-primary-foreground  cursor-default"
@@ -148,7 +160,11 @@ const SidebarItem: React.FC<{
   }
   if (item.subitems) {
     return (
-      <AccordionItem value={item.value} className="overflow-x-clip">
+      <AccordionItem
+        value={item.value}
+        className="overflow-x-clip"
+        dir={direction}
+      >
         <AccordionTrigger
           className={cn(getSelectedStyle(item.value, 0))}
           showArrow={isOpen}
@@ -203,6 +219,7 @@ const SidebarItem: React.FC<{
   } else {
     return (
       <div
+        dir={direction}
         onClick={() => {
           if (onItemClick) {
             onItemClick([item.value])
@@ -218,7 +235,7 @@ const SidebarItem: React.FC<{
           {item.icon}
           <span
             className={cn(
-              "transition-all",
+              "whitespace-nowrap transition-all",
               isOpen ? "opacity-100" : "opacity-0"
             )}
           >