@undp/design-system-react/dist/Sidebar.cjs.map

React based design system for UNDP

{"version":3,"file":"Sidebar.cjs","names":[],"sources":["../src/components/ui/sidebar-nav.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport React, { useEffect, useEffectEvent } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst sidebarVariants = cva('w-full @2xl:w-1/2 @3xl:w-1/3 @7xl:w-1/4 @8xl:w-1/5', {\n  variants: {\n    variant: {\n      noEffect: '',\n      background: 'bg-surface',\n      border: 'border-r border-r-stroke',\n    },\n  },\n  defaultVariants: { variant: 'background' },\n});\ninterface SidebarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    VariantProps<typeof sidebarVariants> {\n  defaultValue?: string;\n  activeValue?: string;\n  classNames?: {\n    active?: string;\n    controls?: string;\n    hover?: string;\n  };\n  activeItemClass?: string;\n  hoverItemClass?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst SidebarContext = React.createContext<{\n  selectedValue?: string;\n  activeValue?: string;\n  classNames?: {\n    active?: string;\n    controls?: string;\n  };\n  onValueChange: (value: string) => void;\n}>({\n  selectedValue: undefined,\n  classNames: undefined,\n  activeValue: undefined,\n  onValueChange: () => {},\n});\n\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(\n  (\n    {\n      className,\n      children,\n      variant,\n      defaultValue,\n      activeValue,\n      activeItemClass,\n      hoverItemClass,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const [selectedValue, setSelectedValue] = React.useState<string>(\n      activeValue || defaultValue || '',\n    );\n    const handleValueChange = React.useCallback(\n      (itemValue: string) => {\n        setSelectedValue(activeValue || itemValue);\n        onValueChange?.(itemValue);\n      },\n      [onValueChange, activeValue],\n    );\n\n    const setSelectedValueEffect = useEffectEvent((activeValue?: string) => {\n      setSelectedValue(activeValue || defaultValue || '');\n    });\n\n    useEffect(() => {\n      setSelectedValueEffect(activeValue);\n    }, [activeValue]);\n\n    const contextValue = React.useMemo(\n      () => ({\n        activeItemClass,\n        activeValue,\n        selectedValue,\n        hoverItemClass,\n        onValueChange: handleValueChange,\n      }),\n      [activeItemClass, activeValue, selectedValue, hoverItemClass, handleValueChange],\n    );\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <div className='@container w-full'>\n          <div className={cn(sidebarVariants({ variant }), className)} ref={ref} {...props}>\n            {children}\n          </div>\n        </div>\n      </SidebarContext.Provider>\n    );\n  },\n);\nSidebar.displayName = 'Sidebar';\n\nconst SidebarItem = React.forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement> & {\n    value?: string;\n  }\n>(({ className, children, value, ...props }, ref) => {\n  const { selectedValue, classNames, onValueChange } = React.useContext(SidebarContext);\n  return (\n    <button\n      {...props}\n      ref={ref}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent p-4 text-base text-content-primary hover:bg-surface-hover',\n        className,\n        classNames?.controls,\n        selectedValue === value && classNames?.active,\n      )}\n      onClick={() => {\n        if (value) {\n          onValueChange(value);\n        }\n      }}\n    >\n      {children}\n    </button>\n  );\n});\nSidebarItem.displayName = 'SidebarItem';\n\nexport { Sidebar, SidebarItem };\n"],"mappings":"8PAKA,IAAM,EAAkB,EAAA,EAAI,qDAAsD,CAChF,SAAU,CACR,QAAS,CACP,SAAU,GACV,WAAY,aACZ,OAAQ,0BACV,CACF,EACA,gBAAiB,CAAE,QAAS,YAAa,CAC3C,CAAC,EAgBK,EAAiB,EAAA,QAAM,cAQ1B,CACD,cAAe,IAAA,GACf,WAAY,IAAA,GACZ,YAAa,IAAA,GACb,kBAAqB,CAAC,CACxB,CAAC,EAEK,EAAU,EAAA,QAAM,YAElB,CACE,YACA,WACA,UACA,eACA,cACA,kBACA,iBACA,gBACA,GAAG,GAEL,IACG,CACH,GAAM,CAAC,EAAe,GAAoB,EAAA,QAAM,SAC9C,GAAe,GAAgB,EACjC,EACM,EAAoB,EAAA,QAAM,YAC7B,GAAsB,CACrB,EAAiB,GAAe,CAAS,EACzC,IAAgB,CAAS,CAC3B,EACA,CAAC,EAAe,CAAW,CAC7B,EAEM,GAAA,EAAA,EAAA,eAAA,CAAyC,GAAyB,CACtE,EAAiB,GAAe,GAAgB,EAAE,CACpD,CAAC,GAED,EAAA,EAAA,UAAA,KAAgB,CACd,EAAuB,CAAW,CACpC,EAAG,CAAC,CAAW,CAAC,EAEhB,IAAM,EAAe,EAAA,QAAM,aAClB,CACL,kBACA,cACA,gBACA,iBACA,cAAe,CACjB,GACA,CAAC,EAAiB,EAAa,EAAe,EAAgB,CAAiB,CACjF,EAEA,OACE,EAAA,EAAA,IAAA,CAAC,EAAe,SAAhB,CAAyB,MAAO,YAC9B,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8BACb,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,EAAG,EAAgB,CAAE,SAAQ,CAAC,EAAG,CAAS,EAAQ,MAAK,GAAI,EACxE,UACE,CAAA,CACF,CAAA,CACkB,CAAA,CAE7B,CACF,EACA,EAAQ,YAAc,UAEtB,IAAM,EAAc,EAAA,QAAM,YAKvB,CAAE,YAAW,WAAU,QAAO,GAAG,GAAS,IAAQ,CACnD,GAAM,CAAE,gBAAe,aAAY,iBAAkB,EAAA,QAAM,WAAW,CAAc,EACpF,OACE,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,GAAI,EACC,MACL,UAAW,EAAA,EACT,kIACA,EACA,GAAY,SACZ,IAAkB,GAAS,GAAY,MACzC,EACA,YAAe,CACT,GACF,EAAc,CAAK,CAEvB,EAEC,UACK,CAAA,CAEZ,CAAC,EACD,EAAY,YAAc"}