@obosbbl/grunnmuren-react 2.3.2 → 2.3.3

package/dist/index.d.mts

@@ -634,8 +634,16 @@ type CarouselProps = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
+    /**
+     * Callback that is triggered when a user navigates to new item in the Carousel.
+     * The argument to the callback is an object containing `index` of the new item scrolled into view and the `id` of that item (if set on the `<CarouselItem>`)
+     * It also provides `prevIndex` which is the index of the previous item that was in view
+     * And `prevId`, which is the id of the previous item that was in view (if set on the `<CarouselItem>`)
+     * @param item { index: number; id?: string; prevIndex: number; prevId?: string }
+     */
+    onChange?: (item: CarouselItem) => void;
 };
-declare const Carousel: ({ className, children }: CarouselProps) => react_jsx_runtime.JSX.Element;
+declare const Carousel: ({ className, children, onChange }: CarouselProps) => react_jsx_runtime.JSX.Element;
 type CarouselItemsProps = {
     /** The <CarouselItem/> components to be displayed within the carousel. */
     children: React.ReactNode;
@@ -648,7 +656,16 @@ type CarouselItemProps = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
+    id?: string;
+};
+type CarouselItem = Pick<CarouselItemProps, 'id'> & {
+    /** The index of the item that is currently in view */
+    index: number;
+    /** The index of the previous item that was in view */
+    prevIndex: number;
+    /** The id of the previous item that was in view */
+    prevId?: CarouselItemProps['id'];
 };
-declare const CarouselItem: ({ className, children }: CarouselItemProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselItem: ({ className, children, id }: CarouselItemProps) => react_jsx_runtime.JSX.Element;
 
 export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, Avatar, type AvatarProps, Backlink, type BacklinkProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonContext, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Description, type DescriptionProps, DisclosureStateContext, ErrorMessage, type ErrorMessageProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, Label, type Locale, Media, MediaContext, type MediaProps, NumberField, type NumberFieldProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, type TagGroupProps, type TagListProps, type TagProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, type CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItems as UNSAFE_CarouselItems, type CarouselItemsProps as UNSAFE_CarouselItemsProps, type CarouselProps as UNSAFE_CarouselProps, Dialog as UNSAFE_Dialog, type DialogProps as UNSAFE_DialogProps, DialogTrigger as UNSAFE_DialogTrigger, type DialogTriggerProps as UNSAFE_DialogTriggerProps, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, type DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanel as UNSAFE_DisclosurePanel, type DisclosurePanelProps as UNSAFE_DisclosurePanelProps, type DisclosureProps as UNSAFE_DisclosureProps, FileUpload as UNSAFE_FileUpload, type FileUploadProps as UNSAFE_FileUploadProps, Hero as UNSAFE_Hero, type HeroProps as UNSAFE_HeroProps, Modal as UNSAFE_Modal, type ModalProps as UNSAFE_ModalProps, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };

package/dist/index.mjs

@@ -2107,7 +2107,7 @@ const Hero = ({ variant, className, children })=>{
     });
 };
 
-const Carousel = ({ className, children })=>{
+const Carousel = ({ className, children, onChange })=>{
     const ref = useRef(null);
     const locale = _useLocale();
     const { previous, next } = translations$1;
@@ -2120,6 +2120,9 @@ const Carousel = ({ className, children })=>{
     }, [
         scrollTargetIndex
     ]);
+    // Keep track of the previous index to determine if the user is scrolling forward or backward
+    // This is used to determine which callback to call (onPrev or onNext)
+    const prevIndex = useRef(0);
     // Handle scrolling when user clicks the arrow icons
     useUpdateEffect(()=>{
         if (!ref.current) return;
@@ -2128,6 +2131,15 @@ const Carousel = ({ className, children })=>{
             inline: 'start',
             block: 'nearest'
         });
+        if (prevIndex.current !== scrollTargetIndex && onChange) {
+            onChange({
+                index: scrollTargetIndex,
+                id: ref.current.children[scrollTargetIndex]?.id,
+                prevIndex: prevIndex.current,
+                prevId: ref.current.children[prevIndex.current]?.id
+            });
+        }
+        prevIndex.current = scrollTargetIndex;
     }, [
         scrollTargetIndex
     ]);
@@ -2249,10 +2261,11 @@ const CarouselItems = ({ className, children })=>/*#__PURE__*/ jsx(CarouselItems
                 children: children
             })
     });
-const CarouselItem = ({ className, children })=>{
+const CarouselItem = ({ className, children, id })=>{
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'shrink-0 basis-full snap-start'),
         "data-slot": "carousel-item",
+        id: id,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"