@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.3

package/cjs/schedule/schedule-day-view/schedule-day-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("../../util/date-helper.js"),l=require("../../util/time-helper.js"),s=require("../shared/hooks.js"),o=require("../shared/utils.js"),a=require("../shared/with-optional-popover.js"),c=require("../time-indicator/time-indicator.js"),d=require("./schedule-day-view.styles.js");exports.ScheduleDayView=({serviceData:u,isMobile:m,onNextService:h,onPrevService:p,onEmptySlotClick:j,showPrevArrow:T,showNextArrow:x,minTime:f,maxTime:v,initialScrollTime:C,containerRef:S,loading:g,emptySlotPopover:y,blockedMessage:$="Unavailable"})=>{const k=s.useTimelineOffset(f,v),b=s.useInitialScroll(g,f,C),q=i.useRef(null),w=i.useMemo((()=>l.TimeHelper.generateTimings(30,"24hr",f,v)),[f,v]),P=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&o.isTimeCellCovered(e.slots,r))(e,i)&&y){const r={startTime:i,endTime:n.DateHelper.addMinutesToTime(i,30),name:e.name};return y(r)}},H=(r,i)=>{const t=l.TimeHelper.calculateDuration(r.startTime,r.endTime),n=o.calculateSlotOffset(r.startTime,i);return e.jsx(d.SlotContent,{$status:r.status,$duration:t,$offsetTop:n,onClick:e=>r.onClick&&r.onClick(r,e),children:t>=15&&e.jsxs(e.Fragment,{children:[e.jsxs(d.SlotTime,{children:[l.TimeHelper.parseInput(r.startTime,"12hr"),"–"," ",l.TimeHelper.parseInput(r.endTime,"12hr")]}),e.jsx(d.SlotAvailability,{children:"blocked"===r.status?$:`${r.booked} / ${r.capacity}`})]})})},L=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=l.TimeHelper.timeToMinutes(r),t=o.minutesToTime(i+30);return o.findSlotsStartingInTimeRange(e.slots,r,t)})(r,i);return t.length>0?e.jsx(d.SlotCell,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const l=P(r,t,i);return e.jsx(a.WithOptionalPopover,{containerRef:S,customPopover:l,children:H(t,i)},`${t.id}-${n}`)}))},i):e.jsx(d.SlotCell,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(j){const i=n.DateHelper.addMinutesToTime(e,30);j({startTime:e,endTime:i,name:r})}})(i,r.name),children:e.jsx(a.WithOptionalPopover,{containerRef:S,customPopover:P(r,void 0,i),children:e.jsx(d.EmptySlot,{})})},i)};return e.jsx(d.ScheduleContainer,{children:g?e.jsx(d.LoadingContainer,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(d.HeaderContainer,{ref:q,onScroll:e=>{q.current&&b.current&&(b.current.scrollLeft=q.current.scrollLeft)},$isMobile:m,children:[e.jsx(d.BlankCell,{}),e.jsx(d.ServiceContainer,{$columnCount:u.length,children:u.map((i=>e.jsxs(d.ServiceColumn,{children:[m&&e.jsx(d.ArrowContainer,{children:T&&p&&e.jsx(d.ArrowButton,{styleType:"light",sizeType:"small",onClick:p,"aria-label":"Previous service",children:e.jsx(r.ChevronLeftIcon,{"aria-hidden":!0})})}),e.jsxs(d.ServiceHeaderContainer,{children:[e.jsx(d.Title,{children:i.name}),e.jsxs(d.Description,{children:[e.jsx("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),m&&x&&h&&e.jsx(d.ArrowButton,{styleType:"light",sizeType:"small",onClick:h,"aria-label":"Next service",children:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})})]},i.id)))})]}),e.jsxs(d.BodyContainer,{ref:b,onScroll:e=>{if(q.current&&b.current){const e=17,r=b.current.scrollWidth-b.current.clientWidth-e,i=b.current.scrollLeft;i>r?(b.current.scrollLeft=r,q.current.scrollLeft=r):q.current.scrollLeft=i}},children:[e.jsx(c.TimeIndicator,{minTime:f,maxTime:v,format:"24hr",timelineOffset:k}),e.jsxs(d.SlotGrid,{$columnCount:u.length,children:[null!==k&&e.jsx(d.Timeline,{$top:k}),u.map((r=>e.jsx(d.SlotColumn,{children:w.map((e=>L(r,e)))},r.id)))]})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),i=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("../../util/date-helper.js"),l=require("../../util/time-helper.js"),s=require("../shared/hooks.js"),o=require("../shared/utils.js"),a=require("../shared/with-optional-popover.js"),c=require("../time-indicator/time-indicator.js"),d=require("./schedule-day-view.styles.js");const{ServiceContainer:u,ServiceColumn:m,ArrowContainer:h,ArrowButton:p,ServiceHeaderContainer:j,Title:T,Description:x,SlotContent:f,SlotTime:v,SlotAvailability:C,SlotCell:S,EmptySlot:g,SlotGrid:y,Timeline:$,SlotColumn:k,ScheduleContainer:b,LoadingContainer:q,HeaderContainer:P,BlankCell:w,BodyContainer:H}=d;exports.ScheduleDayView=({serviceData:d,isMobile:L,onNextService:I,onPrevService:M,onEmptySlotClick:D,showPrevArrow:R,showNextArrow:W,minTime:A,maxTime:O,initialScrollTime:B,containerRef:N,loading:z,emptySlotPopover:E,blockedMessage:F="Unavailable"})=>{const G=s.useTimelineOffset(A,O),U=s.useInitialScroll(z,A,B),V=i.useRef(null),J=i.useMemo((()=>l.TimeHelper.generateTimings(30,"24hr",A,O)),[A,O]),K=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&o.isTimeCellCovered(e.slots,r))(e,i)&&E){const r={startTime:i,endTime:n.DateHelper.addMinutesToTime(i,30),name:e.name};return E(r)}},Q=(r,i)=>{const t=l.TimeHelper.calculateDuration(r.startTime,r.endTime),n=o.calculateSlotOffset(r.startTime,i);return e.jsx(f,{$status:r.status,$duration:t,$offsetTop:n,onClick:e=>r.onClick&&r.onClick(r,e),children:t>=15&&e.jsxs(e.Fragment,{children:[e.jsxs(v,{children:[l.TimeHelper.parseInput(r.startTime,"12hr"),"–"," ",l.TimeHelper.parseInput(r.endTime,"12hr")]}),e.jsx(C,{children:"blocked"===r.status?F:`${r.booked} / ${r.capacity}`})]})})},X=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=l.TimeHelper.timeToMinutes(r),t=o.minutesToTime(i+30);return o.findSlotsStartingInTimeRange(e.slots,r,t)})(r,i);return t.length>0?e.jsx(S,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const l=K(r,t,i);return e.jsx(a.WithOptionalPopover,{containerRef:N,customPopover:l,children:Q(t,i)},`${t.id}-${n}`)}))},i):e.jsx(S,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(D){const i=n.DateHelper.addMinutesToTime(e,30);D({startTime:e,endTime:i,name:r})}})(i,r.name),children:e.jsx(a.WithOptionalPopover,{containerRef:N,customPopover:K(r,void 0,i),children:e.jsx(g,{})})},i)};return e.jsx(b,{children:z?e.jsx(q,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(P,{ref:V,onScroll:e=>{V.current&&U.current&&(U.current.scrollLeft=V.current.scrollLeft)},$isMobile:L,children:[e.jsx(w,{}),e.jsx(u,{$columnCount:d.length,children:d.map((i=>e.jsxs(m,{children:[L&&e.jsx(h,{children:R&&M&&e.jsx(p,{styleType:"light",sizeType:"small",onClick:M,"aria-label":"Previous service",icon:e.jsx(r.ChevronLeftIcon,{"aria-hidden":!0})})}),e.jsxs(j,{children:[e.jsx(T,{children:i.name}),e.jsxs(x,{children:[e.jsx("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),L&&W&&I&&e.jsx(p,{styleType:"light",sizeType:"small",onClick:I,"aria-label":"Next service",icon:e.jsx(r.ChevronRightIcon,{"aria-hidden":!0})})]},i.id)))})]}),e.jsxs(H,{ref:U,onScroll:e=>{if(V.current&&U.current){const e=17,r=U.current.scrollWidth-U.current.clientWidth-e,i=U.current.scrollLeft;i>r?(U.current.scrollLeft=r,V.current.scrollLeft=r):V.current.scrollLeft=i}},children:[e.jsx(c.TimeIndicator,{minTime:A,maxTime:O,format:"24hr",timelineOffset:G}),e.jsxs(y,{$columnCount:d.length,children:[null!==G&&e.jsx($,{$top:G}),d.map((r=>e.jsx(k,{children:J.map((e=>X(r,e)))},r.id)))]})]})]})})};
 //# sourceMappingURL=schedule-day-view.js.map

package/cjs/schedule/schedule-day-view/schedule-day-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport {\n    ArrowButton,\n    ArrowContainer,\n    BlankCell,\n    BodyContainer,\n    Description,\n    EmptySlot,\n    HeaderContainer,\n    LoadingContainer,\n    ScheduleContainer,\n    ServiceColumn,\n    ServiceContainer,\n    ServiceHeaderContainer,\n    SlotAvailability,\n    SlotCell,\n    SlotColumn,\n    SlotContent,\n    SlotGrid,\n    SlotTime,\n    Timeline,\n    Title,\n} from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                    >\n                                        <ChevronLeftIcon aria-hidden />\n                                    </ArrowButton>\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                            >\n                                <ChevronRightIcon aria-hidden />\n                            </ArrowButton>\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e) => slot.onClick && slot.onClick(slot, e)}\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","SlotContent","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","SlotTime","parseInput","SlotAvailability","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","SlotCell","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","EmptySlot","ScheduleContainer","LoadingContainer","ThemedLoadingSpinner","HeaderContainer","ref","onScroll","_e","current","scrollLeft","$isMobile","BlankCell","ServiceContainer","$columnCount","ServiceColumn","ArrowContainer","ArrowButton","styleType","sizeType","ChevronLeftIcon","ServiceHeaderContainer","Title","Description","filter","cell","ChevronRightIcon","BodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","SlotGrid","Timeline","$top","SlotColumn"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport type { MouseEvent } from \"react\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nconst {\n    ServiceContainer,\n    ServiceColumn,\n    ArrowContainer,\n    ArrowButton,\n    ServiceHeaderContainer,\n    Title,\n    Description,\n    SlotContent,\n    SlotTime,\n    SlotAvailability,\n    SlotCell,\n    EmptySlot,\n    SlotGrid,\n    Timeline,\n    SlotColumn,\n    ScheduleContainer,\n    LoadingContainer,\n    HeaderContainer,\n    BlankCell,\n    BodyContainer,\n} = styles;\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e: MouseEvent) =>\n                    slot.onClick && slot.onClick(slot, e)\n                }\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ServiceContainer","ServiceColumn","ArrowContainer","ArrowButton","ServiceHeaderContainer","Title","Description","SlotContent","SlotTime","SlotAvailability","SlotCell","EmptySlot","SlotGrid","Timeline","SlotColumn","ScheduleContainer","LoadingContainer","HeaderContainer","BlankCell","BodyContainer","styles","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","parseInput","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","$isMobile","$columnCount","styleType","sizeType","icon","ChevronLeftIcon","filter","cell","ChevronRightIcon","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","$top"],"mappings":"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"}

package/cjs/schedule/schedule-day-view/schedule-day-view.styles.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("styled-components"),o=require("../../icon-button/icon-button.js"),r=require("../../shared/styles/index.js"),t=require("../../typography/index.js"),i=require("../../v3_theme/index.js"),d=require("../const.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e);const s=l.default(o.IconButton)`
+"use strict";var e=require("styled-components"),o=require("../../button/button.js"),r=require("../../shared/styles/index.js"),t=require("../../typography/index.js"),i=require("../../v3_theme/index.js"),d=require("../const.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e);const s=l.default(o.Button)`
     color: ${i.V3_Colour.icon};
 `,a=l.default.div`
     width: 2rem;

package/cjs/schedule/schedule-day-view/schedule-day-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { IconButton } from \"../../icon-button\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n    $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n    $status?: string;\n    $duration?: number;\n    $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(IconButton)`\n    color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n    width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div<HeaderContainerStyleProps>`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    position: sticky;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    ${(props) =>\n        props.$isMobile\n            ? css`\n                  display: block;\n                  overflow: hidden;\n              `\n            : css`\n                  display: grid;\n                  grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n              `}\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n    width: 15rem;\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    background-color: ${V3_Colour[\"bg-success-hover\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    width: fit-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-success\"]};\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${V3_Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: ${(props) => props.$offsetTop || 0}px;\n    ${V3_Font[\"body-xs-semibold\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    z-index: 1;\n    height: ${(props) =>\n        props.$duration\n            ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n            : `${CELL_HEIGHT - 1}px`};\n    display: flex;\n    justify-content: space-between;\n    background: ${(props) => {\n        switch (props.$status) {\n            case \"pending\":\n                return css`\n                    repeating-linear-gradient(\n                        135deg,\n                        ${V3_Colour[\"bg-warning\"]},\n                        ${V3_Colour[\"bg-warning\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 10px\n                    )\n                `;\n            case \"blocked\":\n                return V3_Colour[\"bg-inverse-subtle\"];\n            case \"available\":\n                return V3_Colour[\"bg-success-hover\"];\n            case \"booked\":\n                return V3_Colour[\"bg-primary-subtler\"];\n            default:\n                return V3_Colour[\"bg\"];\n        }\n    }};\n\n    color: ${(props) =>\n        props.$status === \"blocked\"\n            ? V3_Colour[\"text-inverse\"]\n            : V3_Colour[\"text-subtle\"]};\n\n    border-left: ${V3_Border[\"width-040\"]} solid\n        ${(props) =>\n            props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n    ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n    ${V3_Font[\"body-xs-semibold\"]};\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n`;\n\nexport const EmptySlot = styled.div`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","IconButton","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.styles.js","sources":["../../../../src/schedule/schedule-day-view/schedule-day-view.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { lineClampCss } from \"../../shared/styles\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport {\n    CELL_HEIGHT,\n    HEADER_HEIGHT,\n    MIN_COLUMN_WIDTH,\n    TIME_INDICATOR_WIDTH,\n} from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface HeaderContainerStyleProps {\n    $isMobile: boolean;\n}\n\ninterface ServiceContainerStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotGridStyleProps {\n    $columnCount: number;\n}\n\ninterface SlotCellStyleProps {\n    $dashed?: boolean;\n}\n\ninterface SlotContentStyleProps {\n    $status?: string;\n    $duration?: number;\n    $offsetTop?: number;\n}\n\ninterface TimelineStyleProps {\n    $top: number;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ArrowButton = styled(Button)`\n    color: ${V3_Colour[\"icon\"]};\n`;\nexport const ArrowContainer = styled.div`\n    width: 2rem;\n`;\n\nexport const ScheduleContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n`;\n\nexport const LoadingContainer = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 25rem;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    background: ${V3_Colour[\"bg\"]};\n`;\n\nexport const HeaderContainer = styled.div<HeaderContainerStyleProps>`\n    z-index: 3;\n    max-height: ${HEADER_HEIGHT}px;\n    border-top-right-radius: ${V3_Radius[\"md\"]};\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    position: sticky;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    ${(props) =>\n        props.$isMobile\n            ? css`\n                  display: block;\n                  overflow: hidden;\n              `\n            : css`\n                  display: grid;\n                  grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n              `}\n`;\n\nexport const BlankCell = styled.div`\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg-strong\"]};\n    position: sticky;\n    left: 0;\n`;\nexport const ServiceContainer = styled.div<ServiceContainerStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n`;\n\nexport const ServiceColumn = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-8\"]};\n    background: ${V3_Colour[\"bg-strong\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const ServiceHeaderContainer = styled.div`\n    width: 15rem;\n    padding-left: ${V3_Spacing[\"spacing-16\"]};\n`;\n\nexport const Title = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n    font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    margin-top: 0;\n    ${lineClampCss(2)}\n    text-overflow: ellipsis;\n    word-wrap: break-word;\n`;\n\nexport const Description = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    background-color: ${V3_Colour[\"bg-success-hover\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    width: fit-content;\n    padding: ${V3_Spacing[\"spacing-4\"]} ${V3_Spacing[\"spacing-8\"]};\n    color: ${V3_Colour[\"text-success\"]};\n    font-weight: ${V3_Font.Spec[\"weight-regular\"]};\n    span {\n        font-weight: ${V3_Font.Spec[\"weight-semibold\"]};\n    }\n`;\n\nexport const BodyContainer = styled.div`\n    display: grid;\n    grid-template-columns: ${TIME_INDICATOR_WIDTH}px 1fr;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: auto;\n    flex: 1;\n    height: 100%;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour[\"border\"]};\n    border-top: none;\n    border-bottom-right-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n`;\n\nexport const SlotGrid = styled.div<SlotGridStyleProps>`\n    display: grid;\n    grid-template-columns: repeat(${(props) => props.$columnCount}, 1fr);\n    min-width: max-content;\n    position: relative;\n`;\n\nexport const SlotColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${MIN_COLUMN_WIDTH}px;\n    min-height: fit-content;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n    &:last-child {\n        border-right: none;\n    }\n`;\n\nexport const SlotCell = styled.div<SlotCellStyleProps>`\n    min-height: ${CELL_HEIGHT}px;\n    position: relative;\n    border-bottom: ${V3_Border[\"width-010\"]} solid ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$dashed &&\n        css`\n            border-bottom-style: dashed;\n        `}\n    cursor: pointer;\n`;\n\nexport const SlotContent = styled(Typography.BodyXS)<SlotContentStyleProps>`\n    margin-top: 0;\n    overflow: hidden;\n    width: calc(100% - 27px);\n    padding: 2px ${V3_Spacing[\"spacing-8\"]};\n    position: absolute;\n    top: ${(props) => props.$offsetTop || 0}px;\n    ${V3_Font[\"body-xs-semibold\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    z-index: 1;\n    height: ${(props) =>\n        props.$duration\n            ? `${(props.$duration / 30) * CELL_HEIGHT - 1}px`\n            : `${CELL_HEIGHT - 1}px`};\n    display: flex;\n    justify-content: space-between;\n    background: ${(props) => {\n        switch (props.$status) {\n            case \"pending\":\n                return css`\n                    repeating-linear-gradient(\n                        135deg,\n                        ${V3_Colour[\"bg-warning\"]},\n                        ${V3_Colour[\"bg-warning\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 5px,\n                        ${V3_Colour[\"bg-warning-hover\"]} 10px\n                    )\n                `;\n            case \"blocked\":\n                return V3_Colour[\"bg-inverse-subtle\"];\n            case \"available\":\n                return V3_Colour[\"bg-success-hover\"];\n            case \"booked\":\n                return V3_Colour[\"bg-primary-subtler\"];\n            default:\n                return V3_Colour[\"bg\"];\n        }\n    }};\n\n    color: ${(props) =>\n        props.$status === \"blocked\"\n            ? V3_Colour[\"text-inverse\"]\n            : V3_Colour[\"text-subtle\"]};\n\n    border-left: ${V3_Border[\"width-040\"]} solid\n        ${(props) =>\n            props.$status === \"available\" ? V3_Colour[\"icon-success\"] : \"none\"};\n`;\n\nexport const SlotTime = styled.span`\n    ${V3_Font[\"body-xs-regular\"]};\n`;\n\nexport const SlotAvailability = styled.span`\n    ${V3_Font[\"body-xs-semibold\"]};\n`;\n\nexport const Timeline = styled.div<TimelineStyleProps>`\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: ${V3_Colour[\"icon-primary\"]};\n    top: ${(props) => props.$top}px;\n    z-index: 2;\n`;\n\nexport const EmptySlot = styled.div`\n    width: 100%;\n    height: ${CELL_HEIGHT - 1}px;\n`;\n"],"names":["ArrowButton","styled","Button","V3_Colour","ArrowContainer","div","ScheduleContainer","LoadingContainer","V3_Border","solid","V3_Radius","HeaderContainer","HEADER_HEIGHT","props","$isMobile","css","TIME_INDICATOR_WIDTH","BlankCell","ServiceContainer","$columnCount","ServiceColumn","MIN_COLUMN_WIDTH","V3_Spacing","ServiceHeaderContainer","Title","Typography","BodyMD","V3_Font","Spec","lineClampCss","Description","BodySM","BodyContainer","SlotGrid","SlotColumn","SlotCell","CELL_HEIGHT","$dashed","SlotContent","BodyXS","$offsetTop","$duration","$status","SlotTime","span","SlotAvailability","Timeline","$top","EmptySlot"],"mappings":"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"}

package/cjs/schedule/schedule-header/schedule-header.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../input-select/input-select.js");require("../../util/calendar-helper.js");var r=require("../../util/date-helper.js");require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/string-helper.js");var l=require("./schedule-header.style.js");exports.ScheduleHeader=i=>{var{date:n,view:s="day",minDate:o,maxDate:c,onPreviousDayClick:d,onNextDayClick:u,onCalendarDateSelect:D,onViewChange:y,onTodayClick:j}=i,h=e.__rest(i,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const x=[{label:"Day",value:"day"},{label:"Week",value:"week"}],p=x.find((e=>e.value===s));return t.jsxs(l.ScheduleHeaderWrapper,Object.assign({},h,{children:[t.jsxs(l.LeftSection,{children:[t.jsx(l.StyledButton,{styleType:"light",onClick:j,children:"Today"}),t.jsx(l.StyledDateNavigator,{selectedDate:n,minDate:o,maxDate:c,view:s,onLeftArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).subtract(1,"week");d(t.format("YYYY-MM-DD"))}else d(e)},onRightArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).add(1,"week");u(t.format("YYYY-MM-DD"))}else u(e)},onCalendarDateSelect:D})]}),t.jsxs(l.RightSection,{children:[t.jsx(l.StyledText,{children:"View by:"}),t.jsx(a.InputSelect,{options:x,selectedOption:p,onSelectOption:e=>null==y?void 0:y(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:l.DROPDOWN_WIDTH})]})]}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../input-select/input-select.js");require("../../util/calendar-helper.js");var r=require("../../util/date-helper.js");require("../../external/dayjs/dayjs.min.js"),require("react"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./schedule-header.style.js");exports.ScheduleHeader=l=>{var{date:n,view:s="day",minDate:o,maxDate:c,onPreviousDayClick:d,onNextDayClick:u,onCalendarDateSelect:D,onViewChange:y,onTodayClick:j}=l,h=e.__rest(l,["date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick"]);const p=[{label:"Day",value:"day"},{label:"Week",value:"week"}],x=p.find((e=>e.value===s));return t.jsxs(i.ScheduleHeaderWrapper,Object.assign({},h,{children:[t.jsxs(i.LeftSection,{children:[t.jsx(i.StyledButton,{styleType:"light",onClick:j,children:"Today"}),t.jsx(i.StyledDateNavigator,{selectedDate:n,minDate:o,maxDate:c,view:s,onLeftArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).subtract(1,"week");d(t.format("YYYY-MM-DD"))}else d(e)},onRightArrowClick:e=>{if("week"===s){const t=r.DateHelper.toDayjs(e).add(1,"week");u(t.format("YYYY-MM-DD"))}else u(e)},onCalendarDateSelect:D})]}),t.jsxs(i.RightSection,{children:[t.jsx(i.StyledText,{children:"View by:"}),t.jsx(a.InputSelect,{options:p,selectedOption:x,onSelectOption:e=>null==y?void 0:y(e.value),listExtractor:e=>e.label,displayValueExtractor:e=>e.label,dropdownWidth:i.DROPDOWN_WIDTH})]})]}))};
 //# sourceMappingURL=schedule-header.js.map

package/cjs/schedule/schedule-header/schedule-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-header.js","sources":["../../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { InputSelect } from \"../../input-select\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport {\n    DROPDOWN_WIDTH,\n    LeftSection,\n    RightSection,\n    ScheduleHeaderWrapper,\n    StyledButton,\n    StyledDateNavigator,\n    StyledText,\n} from \"./schedule-header.style\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <ScheduleHeaderWrapper {...otherProps}>\n            <LeftSection>\n                <StyledButton styleType=\"light\" onClick={onTodayClick}>\n                    Today\n                </StyledButton>\n                <StyledDateNavigator\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </LeftSection>\n\n            <RightSection>\n                <StyledText>View by:</StyledText>\n                <InputSelect\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={DROPDOWN_WIDTH}\n                />\n            </RightSection>\n        </ScheduleHeaderWrapper>\n    );\n};\n"],"names":["_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","ScheduleHeaderWrapper","Object","assign","children","LeftSection","_jsx","StyledButton","styleType","onClick","StyledDateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","RightSection","StyledText","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","DROPDOWN_WIDTH"],"mappings":"kYA0B+BA,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAA,OAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,EAAAA,KAACC,EAAAA,sBAAqBC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SAAA,CACjCJ,EAAAA,KAACK,EAAAA,YAAW,CAAAD,SAAA,CACRE,EAAAA,IAACC,EAAAA,aAAY,CAACC,UAAU,QAAQC,QAASlB,EAAYa,SAAA,UAGrDE,EAAAA,IAACI,EAAAA,oBAAmB,CAChBC,aAAc5B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN4B,iBA/BcC,IAC1B,GAAa,SAAT7B,EAAiB,CACjB,MACM8B,EADiBC,EAAAA,WAAWC,QAAQH,GACNI,SAAS,EAAG,QAChD9B,EAAmB2B,EAAaI,OAAO,cAC3C,MACI/B,EAAmB0B,EACvB,EAyBYM,kBAtBeN,IAC3B,GAAa,SAAT7B,EAAiB,CACjB,MACMoC,EADiBL,EAAAA,WAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCjC,EAAegC,EAASF,OAAO,cACnC,MACI9B,EAAeyB,EACnB,EAgBYxB,qBAAsBA,OAI9BW,EAAAA,KAACsB,eAAY,CAAAlB,SAAA,CACTE,EAAAA,IAACiB,EAAAA,kCACDjB,EAAAA,IAACkB,EAAAA,YAAW,CACRC,QAAS/B,EACTgC,eAAgB7B,EAChB8B,eAAiB5B,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDgC,cAAgB7B,GAAWA,EAAOJ,MAClCkC,sBAAwB9B,GAAWA,EAAOJ,MAC1CmC,cAAeC,EAAAA,uBAGH"}
+{"version":3,"file":"schedule-header.js","sources":["../../../../src/schedule/schedule-header/schedule-header.tsx"],"sourcesContent":["import { InputSelect } from \"../../input-select\";\nimport { DateHelper } from \"../../util\";\nimport type { ScheduleView } from \"../types\";\nimport {\n    DROPDOWN_WIDTH,\n    LeftSection,\n    RightSection,\n    ScheduleHeaderWrapper,\n    StyledButton,\n    StyledDateNavigator,\n    StyledText,\n} from \"./schedule-header.style\";\n\nexport interface ScheduleHeaderProps {\n    id?: string | undefined;\n    date: string;\n    view: ScheduleView;\n    minDate?: string | undefined;\n    maxDate?: string | undefined;\n    onPreviousDayClick: (currentDate: string) => void;\n    onNextDayClick: (currentDate: string) => void;\n    onCalendarDateSelect?: (currentDate: string) => void;\n    onViewChange?: (view: ScheduleView) => void;\n    onTodayClick?: () => void;\n}\n\nexport const ScheduleHeader = ({\n    date,\n    view = \"day\",\n    minDate,\n    maxDate,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onViewChange,\n    onTodayClick,\n    ...otherProps\n}: ScheduleHeaderProps) => {\n    const viewOptions: Array<{ label: string; value: ScheduleView }> = [\n        { label: \"Day\", value: \"day\" },\n        { label: \"Week\", value: \"week\" },\n    ];\n    const selectedViewOption = viewOptions.find(\n        (option) => option.value === view\n    );\n\n    // Handle navigation based on view type\n    const handleLeftArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const previousWeek = currentDateObj.subtract(1, \"week\");\n            onPreviousDayClick(previousWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onPreviousDayClick(currentDate);\n        }\n    };\n\n    const handleRightArrowClick = (currentDate: string) => {\n        if (view === \"week\") {\n            const currentDateObj = DateHelper.toDayjs(currentDate);\n            const nextWeek = currentDateObj.add(1, \"week\");\n            onNextDayClick(nextWeek.format(\"YYYY-MM-DD\"));\n        } else {\n            onNextDayClick(currentDate);\n        }\n    };\n\n    return (\n        <ScheduleHeaderWrapper {...otherProps}>\n            <LeftSection>\n                <StyledButton styleType=\"light\" onClick={onTodayClick}>\n                    Today\n                </StyledButton>\n                <StyledDateNavigator\n                    selectedDate={date}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    view={view}\n                    onLeftArrowClick={handleLeftArrowClick}\n                    onRightArrowClick={handleRightArrowClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                />\n            </LeftSection>\n\n            <RightSection>\n                <StyledText>View by:</StyledText>\n                <InputSelect\n                    options={viewOptions}\n                    selectedOption={selectedViewOption}\n                    onSelectOption={(option) => onViewChange?.(option.value)}\n                    listExtractor={(option) => option.label}\n                    displayValueExtractor={(option) => option.label}\n                    dropdownWidth={DROPDOWN_WIDTH}\n                />\n            </RightSection>\n        </ScheduleHeaderWrapper>\n    );\n};\n"],"names":["_a","date","view","minDate","maxDate","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onViewChange","onTodayClick","otherProps","__rest","viewOptions","label","value","selectedViewOption","find","option","_jsxs","ScheduleHeaderWrapper","Object","assign","children","LeftSection","_jsx","StyledButton","styleType","onClick","StyledDateNavigator","selectedDate","onLeftArrowClick","currentDate","previousWeek","DateHelper","toDayjs","subtract","format","onRightArrowClick","nextWeek","add","RightSection","StyledText","InputSelect","options","selectedOption","onSelectOption","listExtractor","displayValueExtractor","dropdownWidth","DROPDOWN_WIDTH"],"mappings":"qdA0B+BA,QAAAC,KAC3BA,EAAIC,KACJA,EAAO,MAAKC,QACZA,EAAOC,QACPA,EAAOC,mBACPA,EAAkBC,eAClBA,EAAcC,qBACdA,EAAoBC,aACpBA,EAAYC,aACZA,KACGC,EAAUC,EAAAA,OAAAX,EAVc,CAAA,OAAA,OAAA,UAAA,UAAA,qBAAA,iBAAA,uBAAA,eAAA,iBAY3B,MAAMY,EAA6D,CAC/D,CAAEC,MAAO,MAAOC,MAAO,OACvB,CAAED,MAAO,OAAQC,MAAO,SAEtBC,EAAqBH,EAAYI,MAClCC,GAAWA,EAAOH,QAAUZ,IAwBjC,OACIgB,EAAAA,KAACC,EAAAA,sBAAqBC,OAAAC,OAAA,CAAA,EAAKX,EAAU,CAAAY,SAAA,CACjCJ,EAAAA,KAACK,EAAAA,YAAW,CAAAD,SAAA,CACRE,EAAAA,IAACC,EAAAA,aAAY,CAACC,UAAU,QAAQC,QAASlB,EAAYa,SAAA,UAGrDE,EAAAA,IAACI,EAAAA,oBAAmB,CAChBC,aAAc5B,EACdE,QAASA,EACTC,QAASA,EACTF,KAAMA,EACN4B,iBA/BcC,IAC1B,GAAa,SAAT7B,EAAiB,CACjB,MACM8B,EADiBC,EAAAA,WAAWC,QAAQH,GACNI,SAAS,EAAG,QAChD9B,EAAmB2B,EAAaI,OAAO,cAC3C,MACI/B,EAAmB0B,EACvB,EAyBYM,kBAtBeN,IAC3B,GAAa,SAAT7B,EAAiB,CACjB,MACMoC,EADiBL,EAAAA,WAAWC,QAAQH,GACVQ,IAAI,EAAG,QACvCjC,EAAegC,EAASF,OAAO,cACnC,MACI9B,EAAeyB,EACnB,EAgBYxB,qBAAsBA,OAI9BW,EAAAA,KAACsB,eAAY,CAAAlB,SAAA,CACTE,EAAAA,IAACiB,EAAAA,kCACDjB,EAAAA,IAACkB,EAAAA,YAAW,CACRC,QAAS/B,EACTgC,eAAgB7B,EAChB8B,eAAiB5B,GAAWT,aAAY,EAAZA,EAAeS,EAAOH,OAClDgC,cAAgB7B,GAAWA,EAAOJ,MAClCkC,sBAAwB9B,GAAWA,EAAOJ,MAC1CmC,cAAeC,EAAAA,uBAGH"}

package/cjs/schedule/schedule-week-view/schedule-week-view.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("../../external/dayjs/dayjs.min.js"),r=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),a=require("../../shared/internal-calendar/day-cell/day-cell.js"),s=require("../../util/time-helper.js"),n=require("../schedule-day-view/schedule-day-view.styles.js"),l=require("../shared/hooks.js"),d=require("../time-indicator/time-indicator.js"),c=require("./schedule-week-view.styles.js"),o=require("./time-cell.js"),m=require("./week-view-utils.js");exports.ScheduleWeekView=({date:u,serviceData:j,loading:h,minTime:x,maxTime:f,initialScrollTime:y,containerRef:S,blockedMessage:g,onClickHiddenSlots:p})=>{const T=l.useTimelineOffset(x,f),q=l.useInitialScroll(h,x,y),k=r.useMemo((()=>{const e=i.default(u).startOf("week");return Array.from({length:7},((i,r)=>e.add(r,"day")))}),[u]),v=r.useMemo((()=>s.TimeHelper.generateTimings(30,"24hr",x,f)),[x,f]),C=r.useMemo((()=>m.calculateSlotWidths(j,k,v)),[j,k,v]),D=i.default();return e.jsx(n.ScheduleContainer,{children:h?e.jsx(c.LoadingContainer,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(c.HeaderContainer,{children:[e.jsx(c.BlankCell,{}),e.jsx(c.ServiceContainer,{children:k.map((r=>{const t=(e=>{const i=e.isSame(D,"day"),r={labelType:i?"current":"available",interactive:null};return i&&(r.circleLeft="selected-outline",r.circleRight="selected-outline"),r})(r);return e.jsxs(c.ServiceHeader,{children:[e.jsx(a.DayCell,Object.assign({date:r,calendarDate:i.default(u)},t)),e.jsx(c.Description,{children:r.format("ddd")})]},r.format("YYYY-MM-DD"))}))})]}),e.jsxs(c.BodyContainer,{ref:q,children:[e.jsx(d.TimeIndicator,{minTime:x,maxTime:f,format:"24hr",timelineOffset:T,isWeekView:!0}),e.jsx(c.SlotGrid,{children:k.map((i=>{const r=i.format("YYYY-MM-DD");return e.jsxs(c.SlotColumn,{children:[null!==T&&i.isSame(D,"day")&&e.jsx(c.Timeline,{$top:T}),v.map((i=>e.jsx(o.TimeCell,{dayDate:r,time:i,serviceData:j,slotLayoutMap:C,containerRef:S,blockedMessage:g,onClickHiddenSlots:p},i)))]},r)}))})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),i=require("../../external/dayjs/dayjs.min.js"),r=require("react"),t=require("../../animations/themed-loading-spinner/themed-loading-spinner.js"),a=require("../../shared/internal-calendar/day-cell/day-cell.js"),s=require("../../util/time-helper.js"),n=require("../schedule-day-view/schedule-day-view.styles.js"),l=require("../shared/hooks.js"),d=require("../time-indicator/time-indicator.js"),c=require("./schedule-week-view.styles.js"),o=require("./time-cell.js"),m=require("./week-view-utils.js");exports.ScheduleWeekView=({date:u,serviceData:j,loading:h,minTime:x,maxTime:f,initialScrollTime:y,containerRef:S,blockedMessage:g,onClickHiddenSlots:p})=>{const T=l.useTimelineOffset(x,f),q=l.useInitialScroll(h,x,y),v=r.useMemo((()=>{const e=i.default(u).startOf("week");return Array.from({length:7},((i,r)=>e.add(r,"day")))}),[u]),k=r.useMemo((()=>s.TimeHelper.generateTimings(30,"24hr",x,f)),[x,f]),C=r.useMemo((()=>m.calculateSlotWidths(j,v,k)),[j,v,k]),D=i.default();return e.jsx(n.ScheduleContainer,{children:h?e.jsx(c.LoadingContainer,{children:e.jsx(t.ThemedLoadingSpinner,{})}):e.jsxs(e.Fragment,{children:[e.jsxs(c.HeaderContainer,{children:[e.jsx(c.BlankCell,{}),e.jsx(c.ServiceContainer,{children:v.map((r=>{const t=(e=>{const i=e.isSame(D,"day"),r={labelType:i?"current":"available",interactive:void 0};return i&&(r.circleLeft="selected-outline",r.circleRight="selected-outline"),r})(r);return e.jsxs(c.ServiceHeader,{children:[e.jsx(a.DayCell,Object.assign({date:r,calendarDate:i.default(u)},t)),e.jsx(c.Description,{children:r.format("ddd")})]},r.format("YYYY-MM-DD"))}))})]}),e.jsxs(c.BodyContainer,{ref:q,children:[e.jsx(d.TimeIndicator,{minTime:x,maxTime:f,format:"24hr",timelineOffset:T,isWeekView:!0}),e.jsx(c.SlotGrid,{children:v.map((i=>{const r=i.format("YYYY-MM-DD");return e.jsxs(c.SlotColumn,{children:[null!==T&&i.isSame(D,"day")&&e.jsx(c.Timeline,{$top:T}),k.map((i=>e.jsx(o.TimeCell,{dayDate:r,time:i,serviceData:j,slotLayoutMap:C,containerRef:S,blockedMessage:g,onClickHiddenSlots:p},i)))]},r)}))})]})]})})};
 //# sourceMappingURL=schedule-week-view.js.map

package/cjs/schedule/schedule-week-view/schedule-week-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-week-view.js","sources":["../../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ScheduleContainer } from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../shared\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport {\n    BlankCell,\n    BodyContainer,\n    Description,\n    HeaderContainer,\n    LoadingContainer,\n    ServiceContainer,\n    ServiceHeader,\n    SlotColumn,\n    SlotGrid,\n    Timeline,\n} from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: null,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderContainer>\n                <BlankCell />\n                <ServiceContainer>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <ServiceHeader key={day.format(\"YYYY-MM-DD\")}>\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Description>{day.format(\"ddd\")}</Description>\n                            </ServiceHeader>\n                        );\n                    })}\n                </ServiceContainer>\n            </HeaderContainer>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <SlotGrid>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <SlotColumn key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <Timeline $top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </SlotColumn>\n                );\n            })}\n        </SlotGrid>\n    );\n\n    const renderBodyContainer = () => (\n        <BodyContainer ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </BodyContainer>\n    );\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","_jsx","ScheduleContainer","children","LoadingContainer","ThemedLoadingSpinner","_jsxs","HeaderContainer","BlankCell","ServiceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","circleLeft","circleRight","generateStyleProps","ServiceHeader","DayCell","calendarDate","Description","format","BodyContainer","ref","TimeIndicator","isWeekView","SlotGrid","dayDate","SlotColumn","Timeline","$top","time","TimeCell"],"mappings":"2jBA8BgC,EAC5BA,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAAA,kBAAkBP,EAASC,GAC5CO,EAAUC,EAAAA,iBAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,EAAAA,SAAQ,KACrB,MAAMC,EAAcC,EAAAA,QAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,EAAAA,SAAQ,IACfW,EAAAA,WAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,EAAAA,SAAQ,IACnBc,sBAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,EAAAA,UAwFd,OACIc,MAACC,EAAAA,kBAAiB,CAAAC,SACb9B,EACG4B,MAACG,EAAAA,iBAAgB,CAAAD,SACbF,EAAAA,IAACI,uBAAoB,CAAA,KAGzBC,EAAAA,2BArEJA,EAAAA,KAACC,EAAAA,2BACGN,EAAAA,IAACO,EAAAA,cACDP,EAAAA,IAACQ,EAAAA,iBAAgB,CAAAN,SACZnB,EAAS0B,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOd,EAAO,OAE5BY,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,YAAa,MAQjB,OALIH,IACAD,EAAkBK,WAAa,mBAC/BL,EAAkBM,YAAc,oBAG7BN,CAAiB,EAYkBO,CAAmBR,GAC7C,OACIL,EAAAA,KAACc,EAAAA,yBACGnB,EAAAA,IAACoB,EAAAA,uBACGlD,KAAMwC,EACNW,aAAcnC,EAAAA,QAAMhB,IAChByC,IAERX,EAAAA,IAACsB,EAAAA,YAAW,CAAApB,SAAEQ,EAAIa,OAAO,WANTb,EAAIa,OAAO,cAOf,SAqCpClB,OAACmB,EAAAA,cAAa,CAACC,IAAK5C,EAAOqB,SAAA,CACvBF,EAAAA,IAAC0B,EAAAA,cAAa,CACVrD,QAASA,EACTC,QAASA,EACTiD,OAAO,OACP5C,eAAgBA,EAChBgD,YAAY,IAlCpB3B,EAAAA,IAAC4B,EAAAA,SAAQ,CAAA1B,SACJnB,EAAS0B,KAAKC,IACX,MAAMmB,EAAUnB,EAAIa,OAAO,cAC3B,OACIlB,EAAAA,KAACyB,EAAAA,WAAU,CAAA5B,SAAA,CACa,OAAnBvB,GACG+B,EAAIG,OAAOd,EAAO,QACdC,EAAAA,IAAC+B,EAAAA,SAAQ,CAAAC,KAAOrD,IAEvBe,EAAUe,KAAKwB,GACZjC,EAAAA,IAACkC,EAAAA,SAAQ,CAELL,QAASA,EACTI,KAAMA,EACN9D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfuD,OAPAJ,EAiBJ,aA+BL"}
+{"version":3,"file":"schedule-week-view.js","sources":["../../../../src/schedule/schedule-week-view/schedule-week-view.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useMemo } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport type { CellStyleProps } from \"../../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../../shared/internal-calendar/day-cell\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ScheduleContainer } from \"../schedule-day-view/schedule-day-view.styles\";\nimport { useInitialScroll, useTimelineOffset } from \"../shared\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport {\n    BlankCell,\n    BodyContainer,\n    Description,\n    HeaderContainer,\n    LoadingContainer,\n    ServiceContainer,\n    ServiceHeader,\n    SlotColumn,\n    SlotGrid,\n    Timeline,\n} from \"./schedule-week-view.styles\";\nimport { TimeCell } from \"./time-cell\";\nimport type { ScheduleWeekViewProps } from \"./types\";\nimport { calculateSlotWidths } from \"./week-view-utils\";\n\n// =============================================================================\n// MAIN COMPONENT\n// =============================================================================\n\nexport const ScheduleWeekView = ({\n    date,\n    serviceData,\n    loading,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    blockedMessage,\n    onClickHiddenSlots,\n}: ScheduleWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n\n    const weekDays = useMemo(() => {\n        const startOfWeek = dayjs(date).startOf(\"week\");\n        return Array.from({ length: 7 }, (_, i) => startOfWeek.add(i, \"day\"));\n    }, [date]);\n\n    const timeSlots = useMemo(() => {\n        return TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime);\n    }, [minTime, maxTime]);\n\n    const slotLayoutMap = useMemo(() => {\n        return calculateSlotWidths(serviceData, weekDays, timeSlots);\n    }, [serviceData, weekDays, timeSlots]);\n\n    const today = dayjs();\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const generateStyleProps = (day: dayjs.Dayjs): CellStyleProps => {\n        const isToday = day.isSame(today, \"day\");\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: isToday ? \"current\" : \"available\",\n            interactive: undefined,\n        };\n\n        if (isToday) {\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderContainer>\n                <BlankCell />\n                <ServiceContainer>\n                    {weekDays.map((day) => {\n                        const dayCellStyleProps = generateStyleProps(day);\n                        return (\n                            <ServiceHeader key={day.format(\"YYYY-MM-DD\")}>\n                                <DayCell\n                                    date={day}\n                                    calendarDate={dayjs(date)}\n                                    {...dayCellStyleProps}\n                                />\n                                <Description>{day.format(\"ddd\")}</Description>\n                            </ServiceHeader>\n                        );\n                    })}\n                </ServiceContainer>\n            </HeaderContainer>\n        );\n    };\n\n    const renderSlotGrid = () => (\n        <SlotGrid>\n            {weekDays.map((day) => {\n                const dayDate = day.format(\"YYYY-MM-DD\");\n                return (\n                    <SlotColumn key={dayDate}>\n                        {timelineOffset !== null &&\n                            day.isSame(today, \"day\") && (\n                                <Timeline $top={timelineOffset} />\n                            )}\n                        {timeSlots.map((time) => (\n                            <TimeCell\n                                key={time}\n                                dayDate={dayDate}\n                                time={time}\n                                serviceData={serviceData}\n                                slotLayoutMap={slotLayoutMap}\n                                containerRef={containerRef}\n                                blockedMessage={blockedMessage}\n                                onClickHiddenSlots={onClickHiddenSlots}\n                            />\n                        ))}\n                    </SlotColumn>\n                );\n            })}\n        </SlotGrid>\n    );\n\n    const renderBodyContainer = () => (\n        <BodyContainer ref={bodyRef}>\n            <TimeIndicator\n                minTime={minTime}\n                maxTime={maxTime}\n                format=\"24hr\"\n                timelineOffset={timelineOffset}\n                isWeekView={true}\n            />\n            {renderSlotGrid()}\n        </BodyContainer>\n    );\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {renderHeader()}\n                    {renderBodyContainer()}\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["date","serviceData","loading","minTime","maxTime","initialScrollTime","containerRef","blockedMessage","onClickHiddenSlots","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","weekDays","useMemo","startOfWeek","dayjs","startOf","Array","from","length","_","i","add","timeSlots","TimeHelper","generateTimings","slotLayoutMap","calculateSlotWidths","today","_jsx","ScheduleContainer","children","LoadingContainer","ThemedLoadingSpinner","_jsxs","HeaderContainer","BlankCell","ServiceContainer","map","day","dayCellStyleProps","isToday","isSame","labelType","interactive","undefined","circleLeft","circleRight","generateStyleProps","ServiceHeader","DayCell","calendarDate","Description","format","BodyContainer","ref","TimeIndicator","isWeekView","SlotGrid","dayDate","SlotColumn","Timeline","$top","time","TimeCell"],"mappings":"2jBA8BgC,EAC5BA,OACAC,cACAC,UACAC,UACAC,UACAC,oBACAC,eACAC,iBACAC,yBAKA,MAAMC,EAAiBC,EAAAA,kBAAkBP,EAASC,GAC5CO,EAAUC,EAAAA,iBAAiBV,EAASC,EAASE,GAE7CQ,EAAWC,EAAAA,SAAQ,KACrB,MAAMC,EAAcC,EAAAA,QAAMhB,GAAMiB,QAAQ,QACxC,OAAOC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,CAACC,EAAGC,IAAMP,EAAYQ,IAAID,EAAG,QAAO,GACtE,CAACtB,IAEEwB,EAAYV,EAAAA,SAAQ,IACfW,EAAAA,WAAWC,gBAAgB,GAAI,OAAQvB,EAASC,IACxD,CAACD,EAASC,IAEPuB,EAAgBb,EAAAA,SAAQ,IACnBc,sBAAoB3B,EAAaY,EAAUW,IACnD,CAACvB,EAAaY,EAAUW,IAErBK,EAAQb,EAAAA,UAwFd,OACIc,MAACC,EAAAA,kBAAiB,CAAAC,SACb9B,EACG4B,MAACG,EAAAA,iBAAgB,CAAAD,SACbF,EAAAA,IAACI,uBAAoB,CAAA,KAGzBC,EAAAA,2BArEJA,EAAAA,KAACC,EAAAA,2BACGN,EAAAA,IAACO,EAAAA,cACDP,EAAAA,IAACQ,EAAAA,iBAAgB,CAAAN,SACZnB,EAAS0B,KAAKC,IACX,MAAMC,EAzBC,CAACD,IACxB,MAAME,EAAUF,EAAIG,OAAOd,EAAO,OAE5BY,EAAoC,CACtCG,UAAWF,EAAU,UAAY,YACjCG,iBAAaC,GAQjB,OALIJ,IACAD,EAAkBM,WAAa,mBAC/BN,EAAkBO,YAAc,oBAG7BP,CAAiB,EAYkBQ,CAAmBT,GAC7C,OACIL,EAAAA,KAACe,EAAAA,yBACGpB,EAAAA,IAACqB,EAAAA,uBACGnD,KAAMwC,EACNY,aAAcpC,EAAAA,QAAMhB,IAChByC,IAERX,EAAAA,IAACuB,EAAAA,YAAW,CAAArB,SAAEQ,EAAIc,OAAO,WANTd,EAAIc,OAAO,cAOf,SAqCpCnB,OAACoB,EAAAA,cAAa,CAACC,IAAK7C,EAAOqB,SAAA,CACvBF,EAAAA,IAAC2B,EAAAA,cAAa,CACVtD,QAASA,EACTC,QAASA,EACTkD,OAAO,OACP7C,eAAgBA,EAChBiD,YAAY,IAlCpB5B,EAAAA,IAAC6B,EAAAA,SAAQ,CAAA3B,SACJnB,EAAS0B,KAAKC,IACX,MAAMoB,EAAUpB,EAAIc,OAAO,cAC3B,OACInB,EAAAA,KAAC0B,EAAAA,WAAU,CAAA7B,SAAA,CACa,OAAnBvB,GACG+B,EAAIG,OAAOd,EAAO,QACdC,EAAAA,IAACgC,EAAAA,SAAQ,CAAAC,KAAOtD,IAEvBe,EAAUe,KAAKyB,GACZlC,EAAAA,IAACmC,EAAAA,SAAQ,CAELL,QAASA,EACTI,KAAMA,EACN/D,YAAaA,EACb0B,cAAeA,EACfrB,aAAcA,EACdC,eAAgBA,EAChBC,mBAAoBA,GAPfwD,OAPAJ,EAiBJ,aA+BL"}

package/cjs/schedule/schedule-week-view/slot-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"slot-content.js","sources":["../../../../src/schedule/schedule-week-view/slot-content.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    SlotAvailability,\n    SlotContentContainer,\n    SlotServiceName,\n} from \"./slot-content.styles\";\nimport type { PositionedSlot } from \"./types\";\n\ninterface SlotContentProps {\n    positionedSlot: PositionedSlot;\n    blockedMessage?: string;\n}\n\nexport const SlotContent: React.FC<SlotContentProps> = ({\n    positionedSlot,\n    blockedMessage = \"Unavailable\",\n}) => {\n    const { slot, offsetTop } = positionedSlot;\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n    return (\n        <SlotContentContainer\n            $status={slot.status}\n            $duration={duration}\n            $offsetTop={offsetTop}\n            onClick={(e) => slot.onClick && slot.onClick(slot, e)}\n        >\n            <SlotServiceName>{slot.serviceName}</SlotServiceName>\n            {duration >= 30 && (\n                <SlotAvailability>\n                    {slot.status === \"blocked\"\n                        ? blockedMessage\n                        : `${slot.booked} / ${slot.capacity}`}\n                </SlotAvailability>\n            )}\n        </SlotContentContainer>\n    );\n};\n"],"names":["positionedSlot","blockedMessage","slot","offsetTop","duration","TimeHelper","calculateDuration","startTime","endTime","_jsxs","SlotContentContainer","$status","status","$duration","$offsetTop","onClick","e","children","_jsx","SlotServiceName","serviceName","SlotAvailability","booked","capacity"],"mappings":"iJAeuD,EACnDA,iBACAC,iBAAiB,kBAEjB,MAAMC,KAAEA,EAAIC,UAAEA,GAAcH,EACtBI,EAAWC,EAAAA,WAAWC,kBAAkBJ,EAAKK,UAAWL,EAAKM,SAEnE,OACIC,EAAAA,KAACC,EAAAA,qBAAoB,CAAAC,QACRT,EAAKU,OAAMC,UACTT,EAAQU,WACPX,EACZY,QAAUC,GAAMd,EAAKa,SAAWb,EAAKa,QAAQb,EAAMc,GAAEC,SAAA,CAErDC,EAAAA,IAACC,EAAAA,gBAAe,CAAAF,SAAEf,EAAKkB,cACtBhB,GAAY,IACTc,MAACG,EAAAA,2BACoB,YAAhBnB,EAAKU,OACAX,EACA,GAAGC,EAAKoB,YAAYpB,EAAKqB,eAGpB"}
+{"version":3,"file":"slot-content.js","sources":["../../../../src/schedule/schedule-week-view/slot-content.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    SlotAvailability,\n    SlotContentContainer,\n    SlotServiceName,\n} from \"./slot-content.styles\";\nimport type { PositionedSlot } from \"./types\";\n\ninterface SlotContentProps {\n    positionedSlot: PositionedSlot;\n    blockedMessage?: string;\n}\n\nexport const SlotContent: React.FC<SlotContentProps> = ({\n    positionedSlot,\n    blockedMessage = \"Unavailable\",\n}) => {\n    const { slot, offsetTop } = positionedSlot;\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n    return (\n        <SlotContentContainer\n            $status={slot.status}\n            $duration={duration}\n            $offsetTop={offsetTop}\n            onClick={(e: React.MouseEvent) =>\n                slot.onClick && slot.onClick(slot, e)\n            }\n        >\n            <SlotServiceName>{slot.serviceName}</SlotServiceName>\n            {duration >= 30 && (\n                <SlotAvailability>\n                    {slot.status === \"blocked\"\n                        ? blockedMessage\n                        : `${slot.booked} / ${slot.capacity}`}\n                </SlotAvailability>\n            )}\n        </SlotContentContainer>\n    );\n};\n"],"names":["positionedSlot","blockedMessage","slot","offsetTop","duration","TimeHelper","calculateDuration","startTime","endTime","_jsxs","SlotContentContainer","$status","status","$duration","$offsetTop","onClick","e","children","_jsx","SlotServiceName","serviceName","SlotAvailability","booked","capacity"],"mappings":"iJAeuD,EACnDA,iBACAC,iBAAiB,kBAEjB,MAAMC,KAAEA,EAAIC,UAAEA,GAAcH,EACtBI,EAAWC,EAAAA,WAAWC,kBAAkBJ,EAAKK,UAAWL,EAAKM,SAEnE,OACIC,EAAAA,KAACC,EAAAA,qBAAoB,CAAAC,QACRT,EAAKU,OAAMC,UACTT,EAAQU,WACPX,EACZY,QAAUC,GACNd,EAAKa,SAAWb,EAAKa,QAAQb,EAAMc,GAAEC,SAAA,CAGzCC,EAAAA,IAACC,EAAAA,gBAAe,CAAAF,SAAEf,EAAKkB,cACtBhB,GAAY,IACTc,MAACG,EAAAA,2BACoB,YAAhBnB,EAAKU,OACAX,EACA,GAAGC,EAAKoB,YAAYpB,EAAKqB,eAGpB"}

package/cjs/schedule/schedule.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),i=require("../external/lodash/lodash.js"),t=require("react"),s=require("../external/react-responsive/dist/react-responsive.js"),l=require("styled-components"),n=require("../v3_theme/index.js"),o=require("./schedule.styles.js"),d=require("./schedule-day-view/schedule-day-view.js"),r=require("./schedule-header/schedule-header.js"),c=require("./schedule-week-view/schedule-week-view.js");exports.Schedule=m=>{var{id:u,className:h,view:C="day",date:x,serviceData:y,loading:v=!1,minTime:k="00:00",maxTime:S="23:59",initialScrollTime:p=k,minDate:D,maxDate:g,emptyContentMessage:j,emptySlotPopover:w,onPreviousDayClick:T,onNextDayClick:b,onCalendarDateSelect:q,onTodayClick:N,onEmptySlotClick:M,blockedMessage:P,onClickHiddenSlots:f,"data-testid":E="schedule"}=m,_=e.__rest(m,["id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","data-testid"]);const[H,R]=t.useState(C),V=t.useContext(l.ThemeContext),O=n.V3_Breakpoint["lg-max"]({theme:V}),A=s.reactResponsiveExports.useMediaQuery({maxWidth:O}),B=A?"day":H,W=t.useRef(null),[$,F]=t.useState(0),Q=0===y.length||i.lodashExports.isEmpty(y),z=t.useMemo((()=>y.map((e=>Object.assign(Object.assign({},e),{slots:e.slots.filter((e=>e.date===x))})))),[y,x]),G=A?z&&z.length>0?[z[$]]:[]:z;t.useEffect((()=>{F(0)}),[z]);const I=e=>{R(e)},J=t.useCallback((()=>{null==N||N()}),[N]),K=t.useCallback((()=>{z&&F((e=>e<z.length-1?e+1:e))}),[z]),L=t.useCallback((()=>{F((e=>e>0?e-1:e))}),[]);return Q?a.jsxs(o.Container,Object.assign({},_,{"data-testid":E,$loading:v,children:[a.jsx(r.ScheduleHeader,{"data-id":"schedule-header",date:x,view:B,minDate:D,maxDate:g,onPreviousDayClick:T,onNextDayClick:b,onCalendarDateSelect:q,onViewChange:I,onTodayClick:J}),a.jsx(o.EmptyTableContainer,{className:"empty-container",children:a.jsx(o.NoResultsFound,{type:"no-item-found",description:j})})]})):a.jsxs(o.Container,Object.assign({id:u,className:h,$loading:v,"data-testid":E},_,{children:[a.jsx(r.ScheduleHeader,{"data-id":"schedule-header",date:x,view:B,minDate:D,maxDate:g,onPreviousDayClick:T,onNextDayClick:b,onCalendarDateSelect:q,onViewChange:I,onTodayClick:J}),a.jsx(o.ScheduleBodyContainer,{ref:W,"data-id":"schedule-container",children:"day"===B?a.jsx(d.ScheduleDayView,{date:x,serviceData:G,loading:v,minTime:k,maxTime:S,initialScrollTime:p,emptySlotPopover:w,isMobile:A,onNextService:K,onPrevService:L,containerRef:W,showPrevArrow:A&&$>0,showNextArrow:A&&$<z.length-1,onEmptySlotClick:M,blockedMessage:P}):a.jsx(c.ScheduleWeekView,{date:x,serviceData:y,loading:v,minTime:k,maxTime:S,initialScrollTime:p,containerRef:W,blockedMessage:P,onClickHiddenSlots:f})})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),a=require("../external/lodash/lodash.js"),t=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var s=require("../theme/utils/use-media-query.js"),r=require("./schedule.styles.js"),l=require("./schedule-day-view/schedule-day-view.js"),n=require("./schedule-header/schedule-header.js"),o=require("./schedule-week-view/schedule-week-view.js");exports.Schedule=d=>{var{id:c,className:u,view:m="day",date:h,serviceData:y,loading:j=!1,minTime:C="00:00",maxTime:k="23:59",initialScrollTime:x=C,minDate:v,maxDate:S,emptyContentMessage:g,emptySlotPopover:D,onPreviousDayClick:p,onNextDayClick:q,onCalendarDateSelect:w,onTodayClick:T,onEmptySlotClick:b,blockedMessage:N,onClickHiddenSlots:M,"data-testid":f="schedule"}=d,P=e.__rest(d,["id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","data-testid"]);const[E,H]=t.useState(m),O=s.useMaxWidthMediaQuery("lg"),R=O?"day":E,V=t.useRef(null),[_,A]=t.useState(0),W=0===y.length||a.lodashExports.isEmpty(y),$=t.useMemo((()=>y.map((e=>Object.assign(Object.assign({},e),{slots:e.slots.filter((e=>e.date===h))})))),[y,h]),B=O?$&&$.length>0?[$[_]]:[]:$;t.useEffect((()=>{A(0)}),[$]);const F=e=>{H(e)},Q=t.useCallback((()=>{null==T||T()}),[T]),z=t.useCallback((()=>{$&&A((e=>e<$.length-1?e+1:e))}),[$]),G=t.useCallback((()=>{A((e=>e>0?e-1:e))}),[]);return W?i.jsxs(r.Container,Object.assign({},P,{"data-testid":f,$loading:j,children:[i.jsx(n.ScheduleHeader,{"data-id":"schedule-header",date:h,view:R,minDate:v,maxDate:S,onPreviousDayClick:p,onNextDayClick:q,onCalendarDateSelect:w,onViewChange:F,onTodayClick:Q}),i.jsx(r.EmptyTableContainer,{className:"empty-container",children:i.jsx(r.NoResultsFound,{type:"no-item-found",description:g})})]})):i.jsxs(r.Container,Object.assign({id:c,className:u,$loading:j,"data-testid":f},P,{children:[i.jsx(n.ScheduleHeader,{"data-id":"schedule-header",date:h,view:R,minDate:v,maxDate:S,onPreviousDayClick:p,onNextDayClick:q,onCalendarDateSelect:w,onViewChange:F,onTodayClick:Q}),i.jsx(r.ScheduleBodyContainer,{ref:V,"data-id":"schedule-container",children:"day"===R?i.jsx(l.ScheduleDayView,{date:h,serviceData:B,loading:j,minTime:C,maxTime:k,initialScrollTime:x,emptySlotPopover:D,isMobile:O,onNextService:z,onPrevService:G,containerRef:V,showPrevArrow:O&&_>0,showNextArrow:O&&_<$.length-1,onEmptySlotClick:b,blockedMessage:N}):i.jsx(o.ScheduleWeekView,{date:h,serviceData:y,loading:j,minTime:C,maxTime:k,initialScrollTime:x,containerRef:V,blockedMessage:N,onClickHiddenSlots:M})})]}))};
 //# sourceMappingURL=schedule.js.map

package/cjs/schedule/schedule.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule.js","sources":["../../../src/schedule/schedule.tsx"],"sourcesContent":["import { isEmpty } from \"lodash\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Container,\n    EmptyTableContainer,\n    NoResultsFound,\n    ScheduleBodyContainer,\n} from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isSmallScreen = useMediaQuery({\n        maxWidth: tabletBreakpoint,\n    });\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n\n    const visibleServiceData = isSmallScreen\n        ? filteredServiceData && filteredServiceData.length > 0\n            ? [filteredServiceData[visibleServiceIdx]]\n            : []\n        : filteredServiceData;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId} $loading={loading}>\n                <ScheduleHeader\n                    data-id=\"schedule-header\"\n                    date={date}\n                    view={effectiveView}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                    onViewChange={handleViewChange}\n                    onTodayClick={handleTodayClick}\n                />\n                <EmptyTableContainer className=\"empty-container\">\n                    <NoResultsFound\n                        type=\"no-item-found\"\n                        description={emptyContentMessage}\n                    />\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n    return (\n        <Container\n            id={id}\n            className={className}\n            $loading={loading}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            <ScheduleBodyContainer\n                ref={contentContainerRef}\n                data-id=\"schedule-container\"\n            >\n                {effectiveView === \"day\" ? (\n                    <ScheduleDayView\n                        date={date}\n                        serviceData={visibleServiceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        emptySlotPopover={emptySlotPopover}\n                        isMobile={isSmallScreen}\n                        onNextService={handleNextService}\n                        onPrevService={handlePrevService}\n                        containerRef={contentContainerRef}\n                        showPrevArrow={isSmallScreen && visibleServiceIdx > 0}\n                        showNextArrow={\n                            isSmallScreen &&\n                            visibleServiceIdx < filteredServiceData.length - 1\n                        }\n                        onEmptySlotClick={onEmptySlotClick}\n                        blockedMessage={blockedMessage}\n                    />\n                ) : (\n                    <ScheduleWeekView\n                        date={date}\n                        serviceData={serviceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        containerRef={contentContainerRef}\n                        blockedMessage={blockedMessage}\n                        onClickHiddenSlots={onClickHiddenSlots}\n                    />\n                )}\n            </ScheduleBodyContainer>\n        </Container>\n    );\n};\n"],"names":["_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","isSmallScreen","useMediaQuery","maxWidth","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","useEffect","handleViewChange","newView","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","_jsxs","Container","Object","assign","$loading","_jsx","ScheduleHeader","onViewChange","EmptyTableContainer","children","NoResultsFound","type","description","ScheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","containerRef","showPrevArrow","showNextArrow","ScheduleWeekView"],"mappings":"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"}
+{"version":3,"file":"schedule.js","sources":["../../../src/schedule/schedule.tsx"],"sourcesContent":["import { isEmpty } from \"lodash\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport {\n    Container,\n    EmptyTableContainer,\n    NoResultsFound,\n    ScheduleBodyContainer,\n} from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const isSmallScreen = useMaxWidthMediaQuery(\"lg\");\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n\n    const visibleServiceData = isSmallScreen\n        ? filteredServiceData && filteredServiceData.length > 0\n            ? [filteredServiceData[visibleServiceIdx]]\n            : []\n        : filteredServiceData;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    if (isEmptyContent) {\n        return (\n            <Container {...otherProps} data-testid={testId} $loading={loading}>\n                <ScheduleHeader\n                    data-id=\"schedule-header\"\n                    date={date}\n                    view={effectiveView}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    onPreviousDayClick={onPreviousDayClick}\n                    onNextDayClick={onNextDayClick}\n                    onCalendarDateSelect={onCalendarDateSelect}\n                    onViewChange={handleViewChange}\n                    onTodayClick={handleTodayClick}\n                />\n                <EmptyTableContainer className=\"empty-container\">\n                    <NoResultsFound\n                        type=\"no-item-found\"\n                        description={emptyContentMessage}\n                    />\n                </EmptyTableContainer>\n            </Container>\n        );\n    }\n    return (\n        <Container\n            id={id}\n            className={className}\n            $loading={loading}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            <ScheduleBodyContainer\n                ref={contentContainerRef}\n                data-id=\"schedule-container\"\n            >\n                {effectiveView === \"day\" ? (\n                    <ScheduleDayView\n                        date={date}\n                        serviceData={visibleServiceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        emptySlotPopover={emptySlotPopover}\n                        isMobile={isSmallScreen}\n                        onNextService={handleNextService}\n                        onPrevService={handlePrevService}\n                        containerRef={contentContainerRef}\n                        showPrevArrow={isSmallScreen && visibleServiceIdx > 0}\n                        showNextArrow={\n                            isSmallScreen &&\n                            visibleServiceIdx < filteredServiceData.length - 1\n                        }\n                        onEmptySlotClick={onEmptySlotClick}\n                        blockedMessage={blockedMessage}\n                    />\n                ) : (\n                    <ScheduleWeekView\n                        date={date}\n                        serviceData={serviceData}\n                        loading={loading}\n                        minTime={minTime}\n                        maxTime={maxTime}\n                        initialScrollTime={initialScrollTime}\n                        containerRef={contentContainerRef}\n                        blockedMessage={blockedMessage}\n                        onClickHiddenSlots={onClickHiddenSlots}\n                    />\n                )}\n            </ScheduleBodyContainer>\n        </Container>\n    );\n};\n"],"names":["_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","isSmallScreen","useMaxWidthMediaQuery","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","useEffect","handleViewChange","newView","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","_jsxs","Container","Object","assign","$loading","_jsx","ScheduleHeader","onViewChange","EmptyTableContainer","children","NoResultsFound","type","description","ScheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","containerRef","showPrevArrow","showNextArrow","ScheduleWeekView"],"mappings":"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"}

package/cjs/schedule/shared/with-optional-popover.js

@@ -1,6 +1,6 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("styled-components");require("../../_virtual/_tslib.js"),require("react"),require("../../modal-v2/index.js"),require("../../typography/typography.js"),require("../../v3_theme/index.js"),require("../../popover-v2/popover.styles.js");var o=require("../../popover-v2/popover-trigger.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../popover-v2/popover-inline/popover-inline.styles.js");const i=t(r).default(o.PopoverTrigger)`
+"use strict";var e=require("react/jsx-runtime"),r=require("styled-components");require("../../_virtual/_tslib.js"),require("clsx"),require("react"),require("../../theme/theme-provider/context.js"),require("../../typography/typography.js"),require("../../card/card.styles_1gh9gs3.css"),require("../../markup/markup.js"),require("../../modal-v2/index.js"),require("../../theme/theme-provider/index.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js"),require("../../popover/popover.styles_ujnf0h.css");var t=require("../../popover/popover-trigger.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../popover/popover-inline/popover-inline.styles_bkopnt.css");const o=i(r).default(t.PopoverTrigger)`
     width: 100%;
     display: flex;
     flex-direction: column;
-`;exports.WithOptionalPopover=({containerRef:r,children:o,customPopover:t})=>{if(!t)return o;const n={position:"bottom-start",rootNode:r,customOffset:t.offset,children:o,trigger:t.trigger,delay:t.delay,popoverContent:t.content};return e.jsx(i,Object.assign({zIndex:2},n))};
+`;exports.WithOptionalPopover=({containerRef:r,children:t,customPopover:i})=>{if(!i)return t;const s={position:"bottom-start",rootNode:r,customOffset:i.offset,children:t,trigger:i.trigger,delay:i.delay,popoverContent:i.content};return e.jsx(o,Object.assign({zIndex:2},s))};
 //# sourceMappingURL=with-optional-popover.js.map

package/cjs/schedule/shared/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { SchedulePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps | undefined;\n}\n\nconst StyledPopoverTrigger = styled(PopoverTrigger)`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <StyledPopoverTrigger zIndex={2} {...popoverTriggerProps} />;\n};\n"],"names":["StyledPopoverTrigger","styled","PopoverTrigger","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","Object","assign","zIndex"],"mappings":"meAaA,MAAMA,OAAuBC,QAAOC,EAAAA,eAAe;;;;8BAMhB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OAAOC,EAAAA,IAACf,EAAoBgB,OAAAC,OAAA,CAACC,OAAQ,GAAOZ,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { SchedulePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps | undefined;\n}\n\nconst StyledPopoverTrigger = styled(PopoverTrigger)`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <StyledPopoverTrigger zIndex={2} {...popoverTriggerProps} />;\n};\n"],"names":["StyledPopoverTrigger","styled","PopoverTrigger","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","Object","assign","zIndex"],"mappings":"2kCAaA,MAAMA,OAAuBC,QAAOC,EAAAA,eAAe;;;;8BAMhB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OAAOC,EAAAA,IAACf,EAAoBgB,OAAAC,OAAA,CAACC,OAAQ,GAAOZ,GAAuB"}

package/cjs/select-histogram/select-histogram.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),s=require("../histogram-slider/histogram-slider.js");require("styled-components"),require("../util/string-helper.js"),require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js"),require("../shared/dropdown-list-v2/dropdown-list.js");var n=require("../shared/dropdown-list-v2/dropdown-list-state.js"),i=require("../shared/dropdown-list-v2/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js"),t=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js");var o=require("../shared/input-wrapper/input-wrapper.js"),u=require("../typography/index.js"),p=require("./select-histogram.styles.js");exports.SelectHistogram=h=>{var{alignment:c="left",className:g,disabled:b,dropdownZIndex:j,error:m,histogramSlider:x,id:q,"aria-labelledby":w,"aria-describedby":y,"aria-invalid":f,onBlur:v,onChange:S,onChangeEnd:L,optionTruncationType:T="end",placeholder:C="Select",rangeLabelPrefix:E,rangeLabelSuffix:R,readOnly:_,renderRangeLabel:O,value:B,dropdownRootNode:I}=h,$=e.__rest(h,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:N,bins:D=[],renderEmptyView:H,ariaLabels:P}=x,A=D.map((e=>e.minValue)),F=Math.min(...A),[V,Z]=a.useState(ae()),[k,G]=a.useState(!1),[W,M]=a.useState(!1),[z]=a.useState((()=>l.SimpleIdGenerator.generate())),J=a.useRef(null),K=a.useRef(null),Q=a.useRef(null),U=$["data-testid"]||"select-histogram";a.useEffect((()=>{B!==V&&Z(ae())}),[B]);const X=e=>{Z(e),null==S||S(e)},Y=e=>{Z(e),null==L||L(e)},ee=()=>{W||k||M(!0)},re=e=>{W&&!k&&J.current&&!J.current.contains(e.relatedTarget)&&(M(!1),null==v||v())};function ae(){return null!=B?B:[F,F+N]}const se=e=>O?O(e):r.jsxs(u.Typography.BodyBL,{children:[E,e,R]});return r.jsx(n.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!_&&!b,isOpen:k,renderElement:()=>r.jsx(o.InputBox,{className:g,"data-testid":U,id:q,ref:J,tabIndex:-1,onFocus:ee,onBlur:re,$focused:W,$disabled:b,$readOnly:_,$error:m,children:r.jsx(i.ExpandableElement,{ref:K,disabled:b,expanded:k,listboxId:z,popupRole:"dialog",readOnly:_,variant:"default","aria-labelledby":w,"aria-describedby":y,"aria-invalid":f,children:r.jsx(t.LabelContainer,{ref:Q,$disabled:b,children:A&&0!==A.length?r.jsxs(p.Label,{children:[se(V[0]),r.jsx(p.Separator,{children:"-"}),se(V[1])]}):r.jsx(p.PlaceholderLabel,{$truncateType:T,$variant:"default",children:C})})})}),renderDropdown:({elementWidth:e,styles:a,setFloatingRef:n,getFloatingProps:i})=>r.jsx(p.HistogramSliderDropdownContainer,Object.assign({style:Object.assign(Object.assign({},a),{width:e}),ref:n},i(),{children:r.jsx(s.HistogramSlider,{interval:N,value:V,bins:D,onChange:X,onChangeEnd:Y,showRangeLabels:!1,renderEmptyView:H,ariaLabels:P})})),onOpen:()=>{G(!0)},onClose:()=>{G(!1)},onDismiss:()=>{var e;null===(e=K.current)||void 0===e||e.focus(),G(!1)},clickToToggle:!0,offset:8,alignment:c,fitAvailableHeight:!0,customZIndex:j,rootNode:I})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),s=require("react"),i=require("../histogram-slider/histogram-slider.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css"),require("../shared/dropdown-list/dropdown-list.js");var l=require("../shared/dropdown-list/dropdown-list-state.js"),t=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),o=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var u=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),c=require("../typography/index.js"),p=require("./select-histogram.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=h(a);exports.SelectHistogram=a=>{var{alignment:h="left",className:g,disabled:q,dropdownZIndex:j,error:b,histogramSlider:f,id:x,"aria-labelledby":w,"aria-describedby":y,"aria-invalid":v,onBlur:_,onChange:T,onChangeEnd:C,optionTruncationType:S="end",placeholder:L="Select",rangeLabelPrefix:k,rangeLabelSuffix:A,readOnly:E,renderRangeLabel:I,value:N,dropdownRootNode:R}=a,O=e.__rest(a,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:B,bins:H=[],renderEmptyView:P,ariaLabels:D}=f,G=H.map((e=>e.minValue)),M=Math.min(...G),[F,V]=s.useState(se()),[Z,W]=s.useState(!1),[z,$]=s.useState(!1),J=n.useId(),K=s.useRef(null),Q=s.useRef(null),U=s.useRef(null),X=O["data-testid"]||"select-histogram";s.useEffect((()=>{N!==F&&V(se())}),[N]);const Y=e=>{V(e),null==T||T(e)},ee=e=>{V(e),null==C||C(e)},re=()=>{z||Z||$(!0)},ae=e=>{z&&!Z&&K.current&&!K.current.contains(e.relatedTarget)&&($(!1),null==_||_())};function se(){return null!=N?N:[M,M+B]}const ie=e=>I?I(e):r.jsxs(c.Typography.BodyBL,{children:[k,e,A]});return r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!E&&!q,isOpen:Z,renderElement:()=>r.jsx(o.InputBox,{className:g,"data-testid":X,id:x,ref:K,tabIndex:-1,onFocus:re,onBlur:ae,focused:z,disabled:q,readOnly:E,error:b,children:r.jsx(t.ExpandableElement,{ref:Q,disabled:q,expanded:Z,listboxId:J,popupRole:"dialog",readOnly:E,variant:"default","aria-labelledby":w,"aria-describedby":y,"aria-invalid":v,children:r.jsx("div",{className:u.labelContainer,ref:U,"data-disabled":q||void 0,children:G&&0!==G.length?r.jsxs("div",{className:p.label,children:[ie(F[0]),r.jsx("div",{className:p.separator,children:"-"}),ie(F[1])]}):r.jsx("div",{className:m.default(p.placeholderLabel,"middle"!==S&&p.placeholderLabelTruncateEnd),children:L})})})}),renderDropdown:({elementWidth:e,styles:a,setFloatingRef:s,getFloatingProps:n})=>r.jsx("div",Object.assign({className:p.histogramSliderDropdownContainer,style:Object.assign(Object.assign({},a),{width:e}),ref:s,"data-testid":`${X}-dropdown`},n(),{children:r.jsx(i.HistogramSlider,{interval:B,value:F,bins:H,onChange:Y,onChangeEnd:ee,showRangeLabels:!1,renderEmptyView:P,ariaLabels:D})})),onOpen:()=>{W(!0)},onClose:()=>{W(!1)},onDismiss:()=>{var e;null===(e=Q.current)||void 0===e||e.focus(),W(!1)},clickToToggle:!0,offset:8,alignment:h,fitAvailableHeight:!0,customZIndex:j,rootNode:R})})};
 //# sourceMappingURL=select-histogram.js.map

package/cjs/select-histogram/select-histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport {\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list-v2\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { LabelContainer } from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    HistogramSliderDropdownContainer,\n    Label,\n    PlaceholderLabel,\n    Separator,\n} from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <PlaceholderLabel\n                $truncateType={optionTruncationType}\n                $variant=\"default\"\n            >\n                {placeholder}\n            </PlaceholderLabel>\n        ) : (\n            <Label>\n                {renderSelector(selection[0])}\n                <Separator>-</Separator>\n                {renderSelector(selection[1])}\n            </Label>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {getDisplayValue()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <HistogramSliderDropdownContainer\n            style={{ ...styles, width: elementWidth }}\n            ref={setFloatingRef}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </HistogramSliderDropdownContainer>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","variant","LabelContainer","length","Label","Separator","PlaceholderLabel","$truncateType","$variant","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","HistogramSliderDropdownContainer","Object","assign","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"w0EAcgCA,QAAAC,UAC5BA,EAAY,OAAMC,UAClBA,EAASC,SACTA,EAAQC,eACRA,EAAcC,MACdA,EAAKC,gBACLA,EAAeC,GACfA,EACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAAWC,OAC3BA,EAAMC,SACNA,EAAQC,YACRA,EAAWC,qBACXA,EAAuB,MAAKC,YAC5BA,EAAc,SAAQC,iBACtBA,EAAgBC,iBAChBA,EAAgBC,SAChBA,EAAQC,iBACRA,EAAgBC,MAChBA,EAAKC,iBACLA,GAAgBrB,EACbsB,EAAUC,SAAAvB,EAtBe,CAAA,YAAA,YAAA,WAAA,iBAAA,QAAA,kBAAA,KAAA,kBAAA,mBAAA,eAAA,SAAA,WAAA,cAAA,uBAAA,cAAA,mBAAA,mBAAA,WAAA,mBAAA,QAAA,qBAwB5B,MAAMwB,SACFA,EAAQC,KACRA,EAAO,GAAEC,gBACTA,EAAeC,WACfA,GACArB,EAIEsB,EAASH,EAAKI,KAAKC,GAASA,EAAKC,WACjCA,EAAWC,KAAKC,OAAOL,IACtBM,EAAWC,GAAgBC,EAAAA,SAC9BC,OAEGC,EAAaC,GAAkBH,EAAAA,UAAkB,IACjDI,EAASC,GAAcL,EAAAA,UAAkB,GAC1CM,EAAaC,EAAAA,QAEbC,EAAUC,EAAAA,OAAuB,MACjCC,EAAcD,EAAAA,OAA0B,MACxCE,EAAoBF,EAAAA,OAAuB,MAE3CG,EAAS1B,EAAW,gBAAkB,mBAI5C2B,EAAAA,WAAU,KACF7B,IAAUc,GACVC,EAAaE,KACjB,GAED,CAACjB,IAKJ,MAaM8B,EAAkBtB,IACpBO,EAAaP,GACbhB,SAAAA,EAAWgB,EAAO,EAGhBuB,GAAqBvB,IACvBO,EAAaP,GACbf,SAAAA,EAAce,EAAO,EAGnBwB,GAAkB,KACfZ,GAAYF,GACbG,GAAW,EACf,EAGEY,GAAkBC,IAEhBd,IACCF,GACDM,EAAQW,UACPX,EAAQW,QAAQC,SAASF,EAAEG,iBAE5BhB,GAAW,GACX9B,SAAAA,IACJ,EAKJ,SAAS0B,KACL,OAAOjB,QAAAA,EAAS,CAACW,EAAUA,EAAWP,EAC1C,CAKA,MAAMkC,GAAkBtC,GAChBD,EACOA,EAAiBC,GAIxBuC,EAAAA,KAACC,aAAWC,OAAM,CAAAC,SAAA,CACb9C,EACAI,EACAH,KA8Fb,OACI8C,EAAAA,IAACC,EAAAA,kBAAiB,CAAAF,SACdC,EAAAA,IAACE,EAAAA,oBAAmB,CAChBC,SAAUhD,IAAaf,EACvBgE,OAAQ7B,EACR8B,cAhEU,IAEdL,MAACM,EAAAA,UACGnE,UAAWA,EAAS,cACP8C,EACbzC,GAAIA,EACJ+D,IAAK1B,EACL2B,UAAU,EACVC,QAASpB,GACTzC,OAAQ0C,GACRb,QAASA,EACTrC,SAAUA,EACVe,SAAUA,EACVb,MAAOA,WAEP0D,MAACU,EAAAA,mBACGH,IAAKxB,EACL3C,SAAUA,EACVuE,SAAUpC,EACVqC,UAAWjC,EACXkC,UAAU,SACV1D,SAAUA,EACV2D,QAAQ,UAAS,kBACArE,qBACCC,EAAe,eACnBC,EAAWoD,SAlCrCC,EAAAA,IAAA,MAAA,CACI7D,UAAW4E,EAAAA,eACXR,IAAKvB,EAAiB,gBACP5C,QAAY4E,EAASjB,SAvBhClC,GAA4B,IAAlBA,EAAOoD,OAWrBrB,EAAAA,KAAA,MAAA,CAAKzD,UAAW+E,EAAAA,MAAYnB,SAAA,CACvBJ,GAAexB,EAAU,IAC1B6B,EAAAA,IAAA,MAAA,CAAK7D,UAAWgF,EAAAA,UAAgBpB,SAAA,MAC/BJ,GAAexB,EAAU,OAb9B6B,EAAAA,IAAA,MAAA,CACI7D,UAAWiF,EAAAA,QACPC,EAAAA,iBACyB,WAAzBtE,GACIuE,EAAAA,sCAGPtE,UAsFDuE,eAhCW,EACnBC,eACAC,OAAQC,EACRC,iBACAC,sBAEA5B,EAAAA,IAAA,MAAA6B,OAAAC,OAAA,CACI3F,UAAW4F,mCACXC,qCAAYN,GAAc,CAAEO,MAAOT,IACnCjB,IAAKoB,EAAc,cACN,GAAG1C,cACZ2C,IAAkB,CAAA7B,SAEtBC,EAAAA,IAACkC,EAAAA,gBAAe,CACZzE,SAAUA,EACVJ,MAAOc,EACPT,KAAMA,EACNb,SAAUsC,EACVrC,YAAasC,GACb+C,iBAAiB,EACjBxE,gBAAiBA,EACjBC,WAAYA,OAYZwE,OAhKO,KACf5D,GAAe,EAAK,EAgKZ6D,QA7JQ,KAChB7D,GAAe,EAAM,EA6Jb8D,UA1JU,WACC,QAAnBrG,EAAA8C,EAAYS,eAAO,IAAAvD,GAAAA,EAAEsG,QACrB/D,GAAe,EAAM,EAyJbgE,eAAa,EACbC,OAAQ,EACRvG,UAAWA,EACXwG,oBAAkB,EAClBC,aAActG,EACduG,SAAUtF,KAEE"}