@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/time-slot-bar/types.d.ts

@@ -1,56 +1,151 @@
-import { ThemeStyleProps } from "../theme/types";
-export type SlotStyle = "default" | "stripes";
-export type Direction = "right" | "left";
+import type { SlotStyle } from "../shared/time-slot/types";
+/**
+ * Visual density variant for `TimeSlotBar`.
+ *
+ * - `"default"` — full-height bar; slots show labels and are clickable.
+ * - `"minified"` — compact bar; slot labels and click interactions are disabled.
+ */
 export type TimeSlotBarVariant = "minified" | "default";
+export type { SlotStyle } from "../shared/time-slot/types";
+/**
+ * Imperative handle returned by `TimeSlotBar` via `ref`.
+ */
 export interface TimeSlotBarRef {
-    /** Resets the scroll position to the initialScrollTime if provided */
+    /**
+     * Scrolls the bar back to `initialScrollTime`,
+     * or to the start if `initialScrollTime` is not set.
+     */
     resetScroll: () => void;
 }
+/**
+ * Visual styling attributes applied to an individual time slot or the bar background.
+ */
 interface TimeSlotBarStyleAttributes {
-    /** The type of style of the time slot. Values: "default" | "stripes"  */
+    /**
+     * Visual style for the slot fill.
+     *
+     * @default "default"
+     */
     styleType?: SlotStyle | undefined;
-    /** The label color */
+    /** Text color for the slot label. */
     color?: string | undefined;
-    /** The background color */
-    backgroundColor: string | ((props: ThemeStyleProps) => string);
-    /** The secondary background color. Used in conjunction if styleType is "stripes" */
-    backgroundColor2?: string | ((props: ThemeStyleProps) => string) | undefined;
-    /** The background color on hover */
-    hoverBackgroundColor?: string | ((props: ThemeStyleProps) => string) | undefined;
-    /** The secondary background color on hover. Used in conjunction if styleType is "stripes" */
-    hoverBackgroundColor2?: string | ((props: ThemeStyleProps) => string) | undefined;
+    /** Primary fill color of the slot. */
+    backgroundColor: string;
+    /**
+     * Secondary fill color used for the alternating stripe.
+     *
+     * @remarks Only applies when `styleType` is `"stripes"`.
+     */
+    backgroundColor2?: string | undefined;
+    /** Primary fill color of the slot on hover. */
+    hoverBackgroundColor?: string | undefined;
+    /**
+     * Secondary fill color on hover when `styleType` is `"stripes"`.
+     *
+     * @remarks Only applies when `styleType` is `"stripes"`.
+     */
+    hoverBackgroundColor2?: string | undefined;
 }
+/**
+ * Props for the `TimeSlotBar` component.
+ */
 export interface TimeSlotBarProps {
     "data-testid"?: string | undefined;
     className?: string | undefined;
-    /** The display variant of the component. Values: "minified" | "default" */
+    /**
+     * Visual density of the bar.
+     *
+     * @default "default"
+     */
     variant?: TimeSlotBarVariant;
-    /** The start time of time slot bar. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * Start of the visible time range in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     startTime: string;
-    /** The end time of time slot bar. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * End of the visible time range in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     endTime: string;
-    /** Initial scroll position in HH:mm format (e.g., "09:00" will scroll to 9am on mount) */
+    /**
+     * Time position the bar scrolls to on mount, in `HH:mm` format.
+     *
+     * When `roundInitialScrollTime` is `true`, the value is
+     * rounded down to the nearest 30-minute interval before scrolling.
+     */
     initialScrollTime?: string | undefined;
+    /**
+     * The individual time slots shown within the configured time range.
+     *
+     * @remarks Slots outside the `startTime`–`endTime` range are clipped.
+     */
     slots: TimeSlot[];
-    /** Callback function when user clicks on the time slot */
+    /**
+     * Called when the user clicks a slot cell.
+     *
+     * @param timeSlot The clicked `TimeSlot` object.
+     */
     onSlotClick: (timeSlot: TimeSlot) => void;
-    /** The default click behaviour when no time slot is specified for the time period */
+    /**
+     * Called when the user clicks an empty slot.
+     *
+     * @remarks Only active in the `"default"` variant.
+     */
     onClick?: () => void;
-    /** The default styling attributes when no time slot is specified for the time period */
+    /**
+     * Styling applied to the bar background region not covered by any slot.
+     * Required to make the background region visible or interactive.
+     */
     styleAttributes?: TimeSlotBarStyleAttributes | undefined;
-    /** Rounds initial scroll time to the nearest interval, e.g 6:30 will be clamped to 6:00 when interval = 60. Default is true */
+    /**
+     * When `true`, `initialScrollTime` is rounded down to the nearest
+     * 30-minute interval before the bar scrolls to it.
+     *
+     * @default true
+     */
     roundInitialScrollTime?: boolean | undefined;
 }
+/**
+ * A single bookable or occupied slot rendered within a `TimeSlotBar`.
+ *
+ */
 export interface TimeSlot {
+    /** Unique identifier for this slot. */
     id: string;
-    /** The start time of time slot. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * Start boundary of the slot in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     startTime: string;
-    /** The end time of time slot. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * End boundary of the slot in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     endTime: string;
-    /** The slot cell label */
+    /**
+     * Text rendered inside the slot cell.
+     * Replaced with `"..."` when the cell is too narrow to display the full label.
+     *
+     * @remarks Only displayed in the `"default"` variant.
+     */
     label?: string | undefined;
-    /** Specifies if the slot cell is clickable */
+    /**
+     * Whether the slot responds to clicks.
+     *
+     * @remarks Only active in the `"default"` variant.
+     *
+     * @default true
+     */
     clickable?: boolean | undefined;
+    /** Visual styling for the slot. */
     styleAttributes: TimeSlotBarStyleAttributes;
+    /**
+     * Accessible label for this slot.
+     */
+    ariaLabel?: string | undefined;
 }
-export {};

package/time-slot-bar-week/consts.d.ts

@@ -0,0 +1,3 @@
+export declare const SLOT_HEIGHT = 12;
+export declare const SLOT_GAP = 4;
+export declare const ROW_HEIGHT: number;

package/time-slot-bar-week/consts.js

@@ -0,0 +1,2 @@
+const o=12,t=4,c=16;export{c as ROW_HEIGHT,t as SLOT_GAP,o as SLOT_HEIGHT};
+//# sourceMappingURL=consts.js.map

package/time-slot-bar-week/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sources":["../../src/time-slot-bar-week/consts.ts"],"sourcesContent":["export const SLOT_HEIGHT = 12; // px\nexport const SLOT_GAP = 4; // px\nexport const ROW_HEIGHT = SLOT_HEIGHT + SLOT_GAP;\n"],"names":["SLOT_HEIGHT","SLOT_GAP","ROW_HEIGHT"],"mappings":"AAAO,MAAMA,EAAc,GACdC,EAAW,EACXC,EAAaF"}

package/time-slot-bar-week/time-slot-bar-week-days.d.ts

@@ -1,8 +1,7 @@
-import { Dayjs } from "dayjs";
-import { InternalCalendarProps } from "../shared/internal-calendar";
-import { TimeSlot } from "../time-slot-bar/types";
-import { TimeSlotCellsVariant } from "./types";
-export type DayVariant = "default" | "other-month" | "today";
+import type { Dayjs } from "dayjs";
+import type { InternalCalendarProps } from "../shared/internal-calendar";
+import type { TimeSlot } from "../time-slot-bar/types";
+import type { TimeSlotCellsVariant } from "./types";
 interface TimeSlotWeekDaysProps extends Pick<InternalCalendarProps, "disabledDates" | "minDate" | "maxDate"> {
     selectedDate: string | undefined;
     calendarDate: Dayjs;

package/time-slot-bar-week/time-slot-bar-week-days.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";import l from"../external/dayjs/dayjs.min.js";import i from"../external/lodash/isEmpty.js";import n from"../external/lodash/maxBy.js";import o from"../external/lodash/minBy.js";import{useState as a,useRef as d,useMemo as c}from"react";import{useResizeDetector as s}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as m,inertValue as u}from"../shared/accessibility/index.js";import{DayCell as f}from"../shared/internal-calendar/day-cell/day-cell.js";import{Colour as h}from"../theme/index.js";import{CalendarHelper as v}from"../util/calendar-helper.js";import{DateHelper as p}from"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import{StringHelper as b}from"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as g}from"../util/time-helper.js";import{Wrapper as y,GridWrapper as x,HeaderCellWeekColumn as T,HeaderCellWeek as w,CellWeekText as k,TimeColumn as j,TimeColumnWrapper as $,TimeColumnText as M,Expandable as D,ColumnWeekCell as I,TimeSlotWrapper as A,CollapseExpandAllWrapper as S,CollapseExpandAllButton as C,ChevronIcon as L,TimeSlotComponent as O}from"./time-slot-bar-week-days.style.js";const Y=({calendarDate:Y,disabledDates:E,selectedDate:H,onSelect:R,minDate:F,maxDate:B,startTime:P,endTime:U,maxVisibleCellHeight:W,slots:z,interval:K=30,variant:N="flexible",enableSelection:V=!0,onSlotClick:q})=>{var G,J,Q,X;const Z="YYYY-MM-DD",[_,ee]=a(!1),[te,re]=a(),le=d({}),ie=c((()=>v.generateDaysForCurrentWeek(Y)),[Y]),ne=Object.values(null!=z?z:{}).flat(),oe=null!==(J=null!=P?P:null===(G=o(ne,"startTime"))||void 0===G?void 0:G.startTime)&&void 0!==J?J:"00:00",ae=null!==(X=null!=U?U:null===(Q=n(ne,"endTime"))||void 0===Q?void 0:Q.endTime)&&void 0!==X?X:"24:00",de=Math.ceil(p.getTimeDiffInMinutes(oe,ae)/K),{height:ce=0,ref:se}=s(),me=!!W&&ce>W,ue=void 0!==W?Math.max(1,Math.floor((W+4)/16)):0,fe=W?!me||_?ce:ue>0?16*ue-4:W:ce,he=r({height:fe}),ve=c((()=>{if(z){const e={};return Object.entries(z).forEach((([t,r])=>{const l=function(e){const t=Array(de).fill({});return e.forEach((e=>{const r=Math.max(0,p.getTimeDiffInMinutes(oe,e.startTime)/K),l=Math.min(de,p.getTimeDiffInMinutes(oe,e.endTime)/K),n=Math.ceil(l)-Math.floor(r);switch(N){case"fixed":t[Math.floor(r)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(r),cellLength:l-r});break;case"flexible":for(let o=0;o<n;o++){const a=p.addMinutesToTime(oe,Math.floor(r+o)*K),d=p.addMinutesToTime(a,K);let c;i(t[Math.floor(r+o)])?0===o&&r%1!=0?c="top":o===n-1&&l%1!=0&&(c="bottom"):c=void 0,t[Math.floor(r+o)]=Object.assign(Object.assign({},e),{id:`${e.id}-${o}`,startTime:a,endTime:d,isActualSlot:!0,rowIndex:Math.floor(r+o),cellLength:1,halfFill:c})}}})),t}(r);e[t]=function(e){var t,r,l,n;let o=0;switch(N){case"fixed":for(e=e.reduce(((e,t)=>{const r=e.length>0?e[e.length-1]:e[0];return i(t)&&i(r)?e:[...e,t]}),[{}]);o<e.length;){if(i(e[o])){const i=null!==(r=null===(t=e[o-1])||void 0===t?void 0:t.endTime)&&void 0!==r?r:oe,a=null!==(n=null===(l=e[o+1])||void 0===l?void 0:l.startTime)&&void 0!==n?n:ae;if(i!==a){const t=p.getTimeDiffInMinutes(i,a)/K;e[o]=Object.assign(Object.assign({},ke(o)),{startTime:i,endTime:a,cellLength:t})}}o++}break;case"flexible":for(;o<e.length;)i(e[o])?(e[o]=ke(o),o++):o+=e[o].cellLength}return e.filter((e=>!i(e)&&e.cellLength>0))}(l)})),e}return{}}),[z]),pe=c((()=>ie.reduce(((e,t)=>{const r=t.format(Z);return e[r]=$e(r).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${r}-${e.id}`,date:r,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[ie,ve]),be=e=>{re(e)},ge=()=>{re(void 0)},ye=(e,t)=>{null==q||q(e,t)},xe=(e,t)=>r=>{r.stopPropagation(),ye(e,t)},Te=e=>{e.preventDefault(),ee((e=>!e))},we=e=>{var t;const r=v.isWithinRange(e,F?l(F):void 0,B?l(B):void 0),i=null!==(t=E&&E.includes(e.format(Z)))&&void 0!==t&&t;return!r||i};function ke(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:h["bg-stronger"]},cellLength:t}}function je(e,t){var r;const{startTime:i,endTime:n}=t;return b.joinNonEmptyStrings([l(e).format("D MMMM YYYY dddd"),i&&n?g.formatTimeRange(i,n):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function $e(e){var t;return null!==(t=ve[e])&&void 0!==t?t:Array("flexible"===N?de:1).fill(void 0).map(((e,t)=>ke(t,"fixed"===N?de:void 0)))}const Me=(e,r)=>{var l;const{id:i,clickable:n=!0,isActualSlot:o,styleAttributes:a,cellLength:d,halfFill:c}=r,{styleType:s="default",backgroundColor:f,backgroundColor2:h}=a,v=`${e}-${i}`,p=me&&!_&&(null!==(l=r.rowIndex)&&void 0!==l?l:0)>=ue;return t(O,{$type:"vertical",$variant:"default",$styleType:s,$bgColor:f,$bgColor2:h,$halfFill:c,$clickable:n,$height:"fixed"===N?12*d+4*(d-1):12,onClick:()=>n&&ye(e,r),children:o&&t(m,{inert:u(p),children:t("button",{type:"button",ref:e=>{le.current[v]=e},"aria-disabled":!n,"aria-label":je(e,r),onKeyDown:t=>{var l;return((e,t)=>{var r;const l=null!==(r=pe[t.date])&&void 0!==r?r:[],i=e=>{var t;e&&(null===(t=le.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const r=l.findIndex((e=>e.key===t.key));i(l[r+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const r=l.findIndex((e=>e.key===t.key));i(l[r-1]);break}case"Home":case"PageUp":e.preventDefault(),i(l[0]);break;case"End":e.preventDefault(),i(l[l.length-1]);break;case"PageDown":if(e.preventDefault(),me&&!_){ee(!0);const e=[...l].reverse().find((e=>e.rowIndex<ue));i(null!=e?e:l[0]);break}i(l[l.length-1])}})(t,{key:v,date:e,rowIndex:null!==(l=r.rowIndex)&&void 0!==l?l:0})},onClick:n?xe(e,r):void 0})})},i)};return e(y,{children:[e(x,{role:"grid",children:[t(T,{role:"row",onBlur:ge,children:ie.map(((e,r)=>{const i=(e=>{const t=e.format(Z),r=we(e),l={},i=V&&!r;r&&(l.disabled=!0),l.interactive=V?i:null;const n=i&&te&&e.isSame(te,"day"),o=[H].includes(t);return o&&n?(l.labelType="selected-hover",l.circleLeft="selected-hover-outline",l.circleRight="selected-hover-outline"):o?(l.labelType="selected",l.circleLeft="selected-outline",l.circleRight="selected-outline"):n&&(l.labelType="hover",l.circleLeft="hover-subtle",l.circleRight="hover-subtle"),l})(e);return t(f,Object.assign({date:e,calendarDate:l(H),role:"columnheader",tabIndex:i.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&V&&R(e)})(e,!i.interactive)},onHover:be,onHoverEnd:ge,onFocus:be},i),`day-${r}`)}))}),t(T,{role:"row",children:ie.map(((e,r)=>t(w,{role:"gridcell",children:t(k,{weight:"semibold",$disabled:we(e),children:l(e).format("ddd")})},`week-day-${r}`)))}),(()=>{let e=!1;const r=t=>{const r=l(oe,"HH:mm").add(4*t*K,"minutes"),i=r.format("h"),n=r.format("mm"),o=r.format("a");let a=`${i}${"00"!==n?` ${n}`:""}`;return e||"pm"!==o||"00"!==n||(a+=` ${o}`,e=!0),a};return t(j,{$height:fe,"aria-hidden":!0,children:Array(Math.ceil(de/4)).fill(void 0).map(((e,l)=>t($,{children:t(M,{children:r(l)})},`time-${l}`)))})})(),t(D,{style:he,role:"row",children:t(I,{ref:se,children:ie.map(((e,r)=>{const l=e.format(Z),i=$e(l);return t(A,{role:"gridcell",children:i.map((e=>Me(l,e)))},`wrapper-${r}`)}))},`week-cell-${Y.format(Z)}`)})]}),(()=>{if(W&&se.current)return t(S,{children:e(C,{"data-testid":"time-bar-expand-collapse-button",styleType:"light","aria-expanded":_,onClick:Te,children:[t(L,{$isExpanded:_}),(_?"Hide":"Show")+" later times"]})})})()]})};export{Y as TimeSlotBarWeekDays};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ChevronUpIcon as r}from"@lifesg/react-icons";import{useSpring as i,animated as l}from"@react-spring/web";import o from"clsx";import a from"../external/dayjs/dayjs.min.js";import n from"../external/lodash/isEmpty.js";import s from"../external/lodash/maxBy.js";import c from"../external/lodash/minBy.js";import{useState as d,useRef as m,useMemo as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Button as h}from"../button/button.js";import{DayCell as p}from"../shared/internal-calendar/day-cell/day-cell.js";import"../theme/theme-provider/index.js";import{formatUnitValue as v}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as g}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as b}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as y}from"../typography/index.js";import{CalendarHelper as j}from"../util/calendar-helper.js";import{DateHelper as x}from"../util/date-helper.js";import"../util/simple-id-generator.js";import{StringHelper as T}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as w}from"../util/use-mount.js";import{TimeHelper as k}from"../util/time-helper.js";import{ROW_HEIGHT as M,SLOT_GAP as D}from"./consts.js";import{tokens as N,wrapper as S,gridWrapper as A,headerCellWeekColumn as I,headerCellWeek as $,cellWeekTextDisabled as C,timeColumn as L,timeColumnWrapper as O,timeColumnText as R,expandable as Y,columnWeekCell as H,timeSlotWrapper as B,collapseExpandAllWrapper as E,collapseExpandAllButton as F,collapseExpandAllButtonContent as P,chevronIcon as U,chevronIconExpanded as q}from"./time-slot-bar-week-days.styles.js";import{WeekTimeSlotCell as z}from"./time-slot-cell.js";const W=({calendarDate:W,disabledDates:K,selectedDate:V,onSelect:X,minDate:G,maxDate:J,startTime:Q,endTime:Z,maxVisibleCellHeight:_,slots:ee,interval:te=30,variant:re="flexible",enableSelection:ie=!0,onSlotClick:le})=>{var oe,ae,ne,se;const ce="YYYY-MM-DD",[de,me]=d(!1),[ue,fe]=d(),he=w(),pe=m({}),ve=m(null),ge=u((()=>j.generateDaysForCurrentWeek(W)),[W]),be=Object.values(null!=ee?ee:{}).flat(),ye=null!==(ae=null!=Q?Q:null===(oe=c(be,"startTime"))||void 0===oe?void 0:oe.startTime)&&void 0!==ae?ae:"00:00",je=null!==(se=null!=Z?Z:null===(ne=s(be,"endTime"))||void 0===ne?void 0:ne.endTime)&&void 0!==se?se:"24:00",xe=Math.ceil(x.getTimeDiffInMinutes(ye,je)/te),{height:Te=0,ref:we}=f(),ke=!!_&&Te>_,Me=void 0!==_?Math.max(1,Math.floor((_+D)/M)):0,De=_?!ke||de?Te:Me>0?Me*M-D:_:Te,Ne=i({height:De}),Se=u((()=>{if(ee){const e={};return Object.entries(ee).forEach((([t,r])=>{const i=function(e){const t=Array(xe).fill({});return e.forEach((e=>{const r=Math.max(0,x.getTimeDiffInMinutes(ye,e.startTime)/te),i=Math.min(xe,x.getTimeDiffInMinutes(ye,e.endTime)/te),l=Math.ceil(i)-Math.floor(r);switch(re){case"fixed":t[Math.floor(r)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(r),cellLength:i-r});break;case"flexible":for(let o=0;o<l;o++){const a=x.addMinutesToTime(ye,Math.floor(r+o)*te),s=x.addMinutesToTime(a,te);let c;c=n(t[Math.floor(r+o)])?0===o&&r%1!=0?"top":o===l-1&&i%1!=0?"bottom":"default":"default",t[Math.floor(r+o)]=Object.assign(Object.assign({},e),{id:`${e.id}-${o}`,startTime:a,endTime:s,isActualSlot:!0,rowIndex:Math.floor(r+o),cellLength:1,halfFill:c})}}})),t}(r);e[t]=function(e){var t,r,i,l;let o=0;switch(re){case"fixed":for(e=e.reduce(((e,t)=>{const r=e.length>0?e[e.length-1]:e[0];return n(t)&&n(r)?e:[...e,t]}),[{}]);o<e.length;){if(n(e[o])){const a=null!==(r=null===(t=e[o-1])||void 0===t?void 0:t.endTime)&&void 0!==r?r:ye,n=null!==(l=null===(i=e[o+1])||void 0===i?void 0:i.startTime)&&void 0!==l?l:je;if(a!==n){const t=x.getTimeDiffInMinutes(a,n)/te;e[o]=Object.assign(Object.assign({},He(o)),{startTime:a,endTime:n,cellLength:t})}}o++}break;case"flexible":for(;o<e.length;)n(e[o])?(e[o]=He(o),o++):o+=e[o].cellLength}return e.filter((e=>!n(e)&&e.cellLength>0))}(i)})),e}return{}}),[ee]),Ae=u((()=>ge.reduce(((e,t)=>{const r=t.format(ce);return e[r]=Ee(r).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${r}-${e.id}`,date:r,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[ge,Se]);b(ve,{[N.timeColumn.height]:v(De,"px")});const Ie=e=>{fe(e)},$e=()=>{fe(void 0)},Ce=(e,t)=>{null==le||le(e,t)},Le=(e,t)=>r=>{r.stopPropagation(),Ce(e,t)},Oe=e=>{e.preventDefault(),me((e=>!e))},Re=(e,t)=>{var r;const i=null!==(r=Ae[t.date])&&void 0!==r?r:[],l=e=>{var t;e&&(null===(t=pe.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r-1]);break}case"Home":case"PageUp":e.preventDefault(),l(i[0]);break;case"End":e.preventDefault(),l(i[i.length-1]);break;case"PageDown":if(e.preventDefault(),ke&&!de){me(!0);const e=[...i].reverse().find((e=>e.rowIndex<Me));l(null!=e?e:i[0]);break}l(i[i.length-1])}},Ye=e=>{var t;const r=j.isWithinRange(e,G?a(G):void 0,J?a(J):void 0),i=null!==(t=K&&K.includes(e.format(ce)))&&void 0!==t&&t;return!r||i};function He(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:g["bg-stronger"]},cellLength:t}}function Be(e,t){var r;const{startTime:i,endTime:l}=t;return T.joinNonEmptyStrings([a(e).format("D MMMM YYYY dddd"),i&&l?k.formatTimeRange(i,l):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function Ee(e){var t;return null!==(t=Se[e])&&void 0!==t?t:Array("flexible"===re?xe:1).fill(void 0).map(((e,t)=>He(t,"fixed"===re?xe:void 0)))}return e("div",{className:S,children:[e("div",{className:A,role:"grid",children:[t("div",{className:I,role:"row",onBlur:$e,children:ge.map(((e,r)=>{const i=(e=>{const t=e.format(ce),r=Ye(e),i={},l=ie&&!r;r&&(i.disabled=!0),i.interactive=!!ie&&l;const o=l&&ue&&e.isSame(ue,"day"),a=[V].includes(t);return a&&o?(i.labelType="selected-hover",i.circleLeft="selected-hover-outline",i.circleRight="selected-hover-outline"):a?(i.labelType="selected",i.circleLeft="selected-outline",i.circleRight="selected-outline"):o&&(i.labelType="hover",i.circleLeft="hover-subtle",i.circleRight="hover-subtle"),i})(e);return t(p,Object.assign({date:e,calendarDate:a(V),role:"columnheader",tabIndex:i.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&ie&&X(e)})(e,!i.interactive)},onHover:Ie,onHoverEnd:$e,onFocus:Ie},i),`day-${r}`)}))}),t("div",{className:I,role:"row",children:ge.map(((e,r)=>t("div",{className:$,role:"gridcell",children:t(y.BodyXS,{weight:"semibold",className:o(Ye(e)&&C),children:a(e).format("ddd")})},`week-day-${r}`)))}),(()=>{let e=!1;const r=t=>{const r=a(ye,"HH:mm").add(4*t*te,"minutes"),i=r.format("h"),l=r.format("mm"),o=r.format("a");let n=`${i}${"00"!==l?` ${l}`:""}`;return e||"pm"!==o||"00"!==l||(n+=` ${o}`,e=!0),n};return t("div",{className:L,ref:ve,"aria-hidden":!0,children:Array(Math.ceil(xe/4)).fill(void 0).map(((e,i)=>t("div",{className:O,children:t("div",{className:R,children:r(i)})},`time-${i}`)))})})(),t(l.div,{className:Y,style:he?Ne:void 0,role:"row",children:t("div",{className:H,ref:we,children:ge.map(((e,r)=>{const i=e.format(ce),l=Ee(i);return t("div",{className:B,role:"gridcell",children:l.map((e=>((e,r)=>t(z,{formattedDate:e,slot:r,variant:re,hasCollapsedContent:ke,expandAll:de,visibleRowCount:Me,onSlotClick:Ce,getSlotAriaLabel:Be,onSlotKeyDown:Re,onSlotButtonClick:Le,slotButtonRefs:pe},r.id))(i,e)))},`wrapper-${r}`)}))},`week-cell-${W.format(ce)}`)})]}),(()=>{if(_&&we.current)return t("div",{className:E,children:t(h,{"data-testid":"time-bar-expand-collapse-button",styleType:"light",sizeType:"small","aria-expanded":de,onClick:Oe,className:F,children:e("span",{className:P,children:[t(r,{className:o(U,de&&q)}),(de?"Hide":"Show")+" later times"]})})})})()]})};export{W as TimeSlotBarWeekDays};
 //# sourceMappingURL=time-slot-bar-week-days.js.map

package/time-slot-bar-week/time-slot-bar-week-days.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar-week-days.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport dayjs, { Dayjs } from \"dayjs\";\nimport isEmpty from \"lodash/isEmpty\";\nimport maxBy from \"lodash/maxBy\";\nimport minBy from \"lodash/minBy\";\nimport React, { useMemo, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { VisuallyHidden, inertValue } from \"../shared/accessibility\";\nimport { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport { CellStyleProps, DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { Colour } from \"../theme\";\nimport { TimeSlot } from \"../time-slot-bar/types\";\nimport { DateHelper } from \"../util\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    CellWeekText,\n    ChevronIcon,\n    CollapseExpandAllButton,\n    CollapseExpandAllWrapper,\n    ColumnWeekCell,\n    Expandable,\n    GridWrapper,\n    HeaderCellWeek,\n    HeaderCellWeekColumn,\n    TimeColumn,\n    TimeColumnText,\n    TimeColumnWrapper,\n    TimeSlotComponent,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-bar-week-days.style\";\nimport { TimeSlotCellsVariant } from \"./types\";\n\nexport type DayVariant = \"default\" | \"other-month\" | \"today\";\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots: { [date: string]: TimeSlot[] };\n    startTime?: string | undefined;\n    endTime?: string | undefined;\n    maxVisibleCellHeight?: number | undefined;\n    interval?: number | undefined;\n    variant?: TimeSlotCellsVariant | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\ninterface TimeSlotCell extends TimeSlot {\n    cellLength: number;\n    halfFill?: \"top\" | \"bottom\" | undefined;\n    isActualSlot?: boolean | undefined;\n    rowIndex?: number | undefined;\n}\n\ninterface FocusableSlotMeta {\n    key: string;\n    date: string;\n    rowIndex: number;\n}\n\nconst SLOT_HEIGHT = 12; // px\nconst SLOT_GAP = 4; // px\nconst ROW_HEIGHT = SLOT_HEIGHT + SLOT_GAP;\n\nexport const TimeSlotBarWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    maxVisibleCellHeight,\n    slots: daySlots,\n    interval = 30,\n    variant = \"flexible\",\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dateFormat = \"YYYY-MM-DD\";\n    const [expandAll, setExpandAll] = useState<boolean>(false);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n\n    const flattenedSlots = Object.values(daySlots ?? {}).flat();\n    const minStartTime =\n        startTime ?? minBy(flattenedSlots, \"startTime\")?.startTime ?? \"00:00\";\n    const maxEndTime =\n        endTime ?? maxBy(flattenedSlots, \"endTime\")?.endTime ?? \"24:00\";\n    const numberOfCells = Math.ceil(\n        DateHelper.getTimeDiffInMinutes(minStartTime, maxEndTime) / interval\n    );\n\n    // React spring animation configuration\n    const { height: actualHeight = 0, ref: cellsRef } = useResizeDetector();\n    const hasCollapsedContent =\n        !!maxVisibleCellHeight && actualHeight > maxVisibleCellHeight;\n    const visibleRowCount =\n        maxVisibleCellHeight !== undefined\n            ? Math.max(\n                  1,\n                  Math.floor((maxVisibleCellHeight + SLOT_GAP) / ROW_HEIGHT)\n              )\n            : 0;\n    const collapsedHeight =\n        visibleRowCount > 0\n            ? visibleRowCount * ROW_HEIGHT - SLOT_GAP\n            : maxVisibleCellHeight;\n    const height = maxVisibleCellHeight\n        ? !hasCollapsedContent || expandAll\n            ? actualHeight\n            : collapsedHeight\n        : actualHeight;\n    const expandableStyles = useSpring({ height });\n\n    const generatedDaySlots = useMemo((): {\n        [date: string]: TimeSlotCell[];\n    } => {\n        if (daySlots) {\n            const transformedDaySlots: Record<string, TimeSlotCell[]> = {};\n            Object.entries(daySlots).forEach(([key, slots]) => {\n                const cellsArray = initializeAndFillSlots(slots);\n                transformedDaySlots[key] = populateEmptyCells(cellsArray);\n            });\n            return transformedDaySlots;\n        }\n        return {};\n    }, [daySlots]);\n\n    const focusableSlotsByDate = useMemo(() => {\n        return currentCalendarWeek.reduce<Record<string, FocusableSlotMeta[]>>(\n            (result, day) => {\n                const formattedDate = day.format(dateFormat);\n\n                result[formattedDate] = getCellsForDate(formattedDate)\n                    .filter(\n                        (\n                            slot\n                        ): slot is TimeSlotCell & {\n                            isActualSlot: true;\n                            rowIndex: number;\n                        } => !!slot.isActualSlot && slot.rowIndex !== undefined\n                    )\n                    .map((slot) => ({\n                        key: `${formattedDate}-${slot.id}`,\n                        date: formattedDate,\n                        rowIndex: slot.rowIndex,\n                    }))\n                    .sort((a, b) => a.rowIndex - b.rowIndex);\n\n                return result;\n            },\n            {}\n        );\n    }, [currentCalendarWeek, generatedDaySlots]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayHoverClear = () => {\n        setHoverDay(undefined);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleSlotButtonClick =\n        (date: string, slot: TimeSlot) =>\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n\n            handleSlotClick(date, slot);\n        };\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => !prevExpandValue);\n    };\n\n    const handleSlotKeyDown = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        currentSlot: FocusableSlotMeta\n    ) => {\n        const sameColumnSlots = focusableSlotsByDate[currentSlot.date] ?? [];\n\n        const focusSlot = (slot?: FocusableSlotMeta) => {\n            if (!slot) return;\n            slotButtonRefs.current[slot.key]?.focus();\n        };\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex + 1]);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex - 1]);\n                break;\n            }\n            case \"Home\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"End\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            case \"PageUp\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"PageDown\": {\n                event.preventDefault();\n                if (hasCollapsedContent && !expandAll) {\n                    setExpandAll(true);\n                    const lastVisibleSlot = [...sameColumnSlots]\n                        .reverse()\n                        .find((slot) => slot.rowIndex < visibleRowCount);\n                    focusSlot(lastVisibleSlot ?? sameColumnSlots[0]);\n                    break;\n                }\n\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            }\n            default:\n                break;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            (disabledDates && disabledDates.includes(day.format(dateFormat))) ??\n            false;\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const dayCellStyleProps: CellStyleProps = {};\n        const isHoverEnabled = enableSelection && !disabled;\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n        }\n\n        dayCellStyleProps.interactive = !enableSelection\n            ? null\n            : isHoverEnabled;\n\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    function generateFallbackCell(\n        prefix: string | number,\n        cellLength = 1\n    ): TimeSlotCell {\n        return {\n            id: `${prefix.toString()}-${new Date().getTime()}`,\n            startTime: \"\",\n            endTime: \"\",\n            clickable: false,\n            isActualSlot: false,\n            styleAttributes: {\n                backgroundColor: Colour[\"bg-stronger\"],\n            },\n            cellLength,\n        };\n    }\n\n    function getSlotAriaLabel(date: string, slot: TimeSlot) {\n        const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n        return StringHelper.joinNonEmptyStrings([\n            dayjs(date).format(\"D MMMM YYYY dddd\"),\n            slotStartTime && slotEndTime\n                ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)\n                : undefined,\n            slot.label,\n            slot.clickable ?? true ? \"Available\" : \"Unavailable\",\n        ]);\n    }\n\n    function initializeAndFillSlots(slots: TimeSlot[]): TimeSlotCell[] {\n        const cellsArray = Array(numberOfCells).fill({});\n\n        slots.forEach((slot) => {\n            const startIndex = Math.max(\n                0,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.startTime) /\n                    interval\n            );\n            const endIndex = Math.min(\n                numberOfCells,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.endTime) /\n                    interval\n            );\n            const cellLength = Math.ceil(endIndex) - Math.floor(startIndex);\n\n            switch (variant) {\n                case \"fixed\":\n                    // Keep fixed slots as 1 long cell\n                    cellsArray[Math.floor(startIndex)] = {\n                        ...slot,\n                        isActualSlot: true,\n                        rowIndex: Math.floor(startIndex),\n                        cellLength: endIndex - startIndex,\n                    };\n                    break;\n                case \"flexible\":\n                    // Split long slot into multiple cells of length 1\n                    for (let i = 0; i < cellLength; i++) {\n                        const startTime = DateHelper.addMinutesToTime(\n                            minStartTime,\n                            Math.floor(startIndex + i) * interval\n                        );\n                        const endTime = DateHelper.addMinutesToTime(\n                            startTime,\n                            interval\n                        );\n\n                        let halfFill: string | undefined;\n\n                        if (!isEmpty(cellsArray[Math.floor(startIndex + i)])) {\n                            // Previous cell extends into current cell, fill entire cell\n                            halfFill = undefined;\n                        } else if (i === 0 && startIndex % 1 !== 0) {\n                            halfFill = \"top\";\n                        } else if (i === cellLength - 1 && endIndex % 1 !== 0) {\n                            halfFill = \"bottom\";\n                        }\n\n                        cellsArray[Math.floor(startIndex + i)] = {\n                            ...slot,\n                            id: `${slot.id}-${i}`,\n                            startTime,\n                            endTime,\n                            isActualSlot: true,\n                            rowIndex: Math.floor(startIndex + i),\n                            cellLength: 1,\n                            halfFill,\n                        };\n                    }\n                    break;\n            }\n        });\n        return cellsArray;\n    }\n\n    function populateEmptyCells(cellsArray: any[]): TimeSlotCell[] {\n        let i = 0;\n        switch (variant) {\n            case \"fixed\":\n                // Truncate consecutive empty cells into 1 [{},{},{...},{},{}] -> [{},{...},{}]\n                cellsArray = cellsArray.reduce(\n                    (result, obj) => {\n                        const lastObj =\n                            result.length > 0\n                                ? result[result.length - 1]\n                                : result[0];\n                        if (isEmpty(obj) && isEmpty(lastObj)) {\n                            return result;\n                        }\n                        return [...result, obj];\n                    },\n                    [{}]\n                );\n\n                // Fill in empty cells with timings & corresponding cell lengths\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        const startTime =\n                            cellsArray[i - 1]?.endTime ?? minStartTime;\n                        const endTime =\n                            cellsArray[i + 1]?.startTime ?? maxEndTime;\n                        if (startTime !== endTime) {\n                            const cellLength =\n                                DateHelper.getTimeDiffInMinutes(\n                                    startTime,\n                                    endTime\n                                ) / interval;\n                            cellsArray[i] = {\n                                ...generateFallbackCell(i),\n                                startTime,\n                                endTime,\n                                cellLength,\n                            };\n                        }\n                    }\n                    i++;\n                }\n                break;\n            case \"flexible\":\n                // Fill in individual empty cell with interval timings\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        cellsArray[i] = generateFallbackCell(i);\n                        i++;\n                    } else {\n                        i += cellsArray[i].cellLength;\n                    }\n                }\n                break;\n        }\n        return cellsArray.filter(\n            (slot) => !isEmpty(slot) && slot.cellLength > 0\n        );\n    }\n\n    function getCellsForDate(formattedDate: string) {\n        return (\n            generatedDaySlots[formattedDate] ??\n            Array(variant === \"flexible\" ? numberOfCells : 1)\n                .fill(undefined)\n                .map((_, index) =>\n                    generateFallbackCell(\n                        index,\n                        variant === \"fixed\" ? numberOfCells : undefined\n                    )\n                )\n        );\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderWeek = () => {\n        return (\n            <HeaderCellWeekColumn role=\"row\">\n                {currentCalendarWeek.map((day, index) => (\n                    <HeaderCellWeek key={`week-day-${index}`} role=\"gridcell\">\n                        <CellWeekText\n                            weight={\"semibold\"}\n                            $disabled={isDisabled(day)}\n                        >\n                            {dayjs(day).format(\"ddd\")}\n                        </CellWeekText>\n                    </HeaderCellWeek>\n                ))}\n            </HeaderCellWeekColumn>\n        );\n    };\n\n    const renderHeader = () => {\n        return (\n            <HeaderCellWeekColumn role=\"row\" onBlur={handleDayHoverClear}>\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <DayCell\n                            key={`day-${dayIndex}`}\n                            date={day}\n                            calendarDate={dayjs(selectedDate)}\n                            role=\"columnheader\"\n                            tabIndex={dayCellStyleProps.interactive ? 0 : -1}\n                            onSelect={() => {\n                                handleDayClick(\n                                    day,\n                                    !dayCellStyleProps.interactive\n                                );\n                            }}\n                            onHover={handleDayHover}\n                            onHoverEnd={handleDayHoverClear}\n                            onFocus={handleDayHover}\n                            {...dayCellStyleProps}\n                        ></DayCell>\n                    );\n                })}\n            </HeaderCellWeekColumn>\n        );\n    };\n\n    const renderTimeColumn = () => {\n        let hasSetFirstAfternoonHour = false;\n\n        const formatTime = (index: number) => {\n            const parsedTime = dayjs(minStartTime, \"HH:mm\").add(\n                index * 4 * interval,\n                \"minutes\"\n            );\n            const hour = parsedTime.format(\"h\");\n            const minutes = parsedTime.format(\"mm\");\n            const amPm = parsedTime.format(\"a\");\n\n            let formattedTime = `${hour}${\n                minutes !== \"00\" ? ` ${minutes}` : \"\"\n            }`;\n\n            if (\n                !hasSetFirstAfternoonHour &&\n                amPm === \"pm\" &&\n                minutes === \"00\"\n            ) {\n                formattedTime += ` ${amPm}`;\n                hasSetFirstAfternoonHour = true;\n            }\n\n            return formattedTime;\n        };\n\n        return (\n            <TimeColumn $height={height} aria-hidden>\n                {Array(Math.ceil(numberOfCells / 4))\n                    .fill(undefined)\n                    .map((_, index) => (\n                        <TimeColumnWrapper key={`time-${index}`}>\n                            <TimeColumnText>{formatTime(index)}</TimeColumnText>\n                        </TimeColumnWrapper>\n                    ))}\n            </TimeColumn>\n        );\n    };\n    const renderSlotCell = (formattedDate: string, slot: TimeSlotCell) => {\n        const {\n            id,\n            clickable = true,\n            isActualSlot,\n            styleAttributes,\n            cellLength,\n            halfFill,\n        } = slot;\n        const {\n            styleType = \"default\",\n            backgroundColor,\n            backgroundColor2,\n        } = styleAttributes;\n        const slotId = `${formattedDate}-${id}`;\n        const isCollapsedSlot =\n            hasCollapsedContent &&\n            !expandAll &&\n            (slot.rowIndex ?? 0) >= visibleRowCount;\n\n        return (\n            <TimeSlotComponent\n                $type=\"vertical\"\n                $variant=\"default\"\n                key={id}\n                $styleType={styleType}\n                $bgColor={backgroundColor}\n                $bgColor2={backgroundColor2}\n                $halfFill={halfFill}\n                $clickable={clickable}\n                $height={\n                    variant === \"fixed\"\n                        ? cellLength * SLOT_HEIGHT + (cellLength - 1) * SLOT_GAP\n                        : SLOT_HEIGHT\n                }\n                onClick={() =>\n                    clickable && handleSlotClick(formattedDate, slot)\n                }\n            >\n                {isActualSlot && (\n                    <VisuallyHidden inert={inertValue(isCollapsedSlot)}>\n                        <button\n                            type=\"button\"\n                            ref={(element) => {\n                                slotButtonRefs.current[slotId] = element;\n                            }}\n                            aria-disabled={!clickable}\n                            aria-label={getSlotAriaLabel(formattedDate, slot)}\n                            onKeyDown={(event) =>\n                                handleSlotKeyDown(event, {\n                                    key: slotId,\n                                    date: formattedDate,\n                                    rowIndex: slot.rowIndex ?? 0,\n                                })\n                            }\n                            onClick={\n                                clickable\n                                    ? handleSlotButtonClick(formattedDate, slot)\n                                    : undefined\n                            }\n                        />\n                    </VisuallyHidden>\n                )}\n            </TimeSlotComponent>\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <Expandable style={expandableStyles} role=\"row\">\n                <ColumnWeekCell\n                    ref={cellsRef}\n                    key={`week-cell-${calendarDate.format(dateFormat)}`}\n                >\n                    {currentCalendarWeek.map((day, dayIndex) => {\n                        const formattedDate = day.format(dateFormat);\n                        const cellsArray = getCellsForDate(formattedDate);\n                        return (\n                            <TimeSlotWrapper\n                                key={`wrapper-${dayIndex}`}\n                                role=\"gridcell\"\n                            >\n                                {cellsArray.map((slot) =>\n                                    renderSlotCell(formattedDate, slot)\n                                )}\n                            </TimeSlotWrapper>\n                        );\n                    })}\n                </ColumnWeekCell>\n            </Expandable>\n        );\n    };\n\n    const renderCollapseExpandAll = () => {\n        if (!maxVisibleCellHeight || !cellsRef.current) return;\n        return (\n            <CollapseExpandAllWrapper>\n                <CollapseExpandAllButton\n                    data-testid=\"time-bar-expand-collapse-button\"\n                    styleType=\"light\"\n                    aria-expanded={expandAll}\n                    onClick={handleExpandCollapseClick}\n                >\n                    <ChevronIcon $isExpanded={expandAll} />\n                    {`${expandAll ? \"Hide\" : \"Show\"} later times`}\n                </CollapseExpandAllButton>\n            </CollapseExpandAllWrapper>\n        );\n    };\n\n    return (\n        <Wrapper>\n            <GridWrapper role=\"grid\">\n                {renderHeader()}\n                {renderWeek()}\n                {renderTimeColumn()}\n                {renderTimeSlotBarCells()}\n            </GridWrapper>\n            {renderCollapseExpandAll()}\n        </Wrapper>\n    );\n};\n"],"names":["TimeSlotBarWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","startTime","endTime","maxVisibleCellHeight","slots","daySlots","interval","variant","enableSelection","onSlotClick","dateFormat","expandAll","setExpandAll","useState","hoverDay","setHoverDay","slotButtonRefs","useRef","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","flattenedSlots","Object","values","flat","minStartTime","_b","_a","minBy","maxEndTime","_d","_c","maxBy","numberOfCells","Math","ceil","DateHelper","getTimeDiffInMinutes","height","actualHeight","ref","cellsRef","useResizeDetector","hasCollapsedContent","visibleRowCount","undefined","max","floor","SLOT_HEIGHT","expandableStyles","useSpring","generatedDaySlots","transformedDaySlots","entries","forEach","key","cellsArray","Array","fill","slot","startIndex","endIndex","min","cellLength","assign","isActualSlot","rowIndex","i","addMinutesToTime","halfFill","isEmpty","id","initializeAndFillSlots","reduce","result","obj","lastObj","length","generateFallbackCell","filter","populateEmptyCells","focusableSlotsByDate","day","formattedDate","format","getCellsForDate","map","date","sort","a","b","handleDayHover","value","handleDayHoverClear","handleSlotClick","handleSlotButtonClick","event","stopPropagation","handleExpandCollapseClick","preventDefault","prevExpandValue","isDisabled","isWithinRange","dayjs","isDisabledDate","includes","prefix","toString","Date","getTime","clickable","styleAttributes","backgroundColor","Colour","getSlotAriaLabel","slotStartTime","slotEndTime","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","label","_","index","renderSlotCell","styleType","backgroundColor2","slotId","isCollapsedSlot","_jsx","TimeSlotComponent","$type","$variant","$bgColor","$bgColor2","$clickable","$height","onClick","children","VisuallyHidden","inert","inertValue","type","element","current","onKeyDown","currentSlot","sameColumnSlots","focusSlot","focus","currentIndex","findIndex","lastVisibleSlot","reverse","find","handleSlotKeyDown","_jsxs","Wrapper","GridWrapper","role","HeaderCellWeekColumn","onBlur","dayIndex","dayCellStyleProps","dateStartWithYear","disabled","isHoverEnabled","interactive","isHover","isSame","isSelected","labelType","circleLeft","circleRight","generateStyleProps","DayCell","tabIndex","handleDayClick","onHover","onHoverEnd","onFocus","HeaderCellWeek","CellWeekText","weight","$disabled","hasSetFirstAfternoonHour","formatTime","parsedTime","add","hour","minutes","amPm","formattedTime","TimeColumn","TimeColumnWrapper","TimeColumnText","renderTimeColumn","Expandable","style","ColumnWeekCell","TimeSlotWrapper","CollapseExpandAllWrapper","CollapseExpandAllButton","ChevronIcon","renderCollapseExpandAll"],"mappings":"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"}
+{"version":3,"file":"time-slot-bar-week-days.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isEmpty from \"lodash/isEmpty\";\nimport maxBy from \"lodash/maxBy\";\nimport minBy from \"lodash/minBy\";\nimport { useMemo, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../button\";\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { Typography } from \"../typography\";\nimport { DateHelper, useIsMounted } from \"../util\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { ROW_HEIGHT, SLOT_GAP } from \"./consts\";\nimport * as styles from \"./time-slot-bar-week-days.styles\";\nimport type { FocusableSlotMeta, TimeSlotCell } from \"./time-slot-cell\";\nimport { WeekTimeSlotCell } from \"./time-slot-cell\";\nimport type { TimeSlotCellsVariant } from \"./types\";\n\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots: { [date: string]: TimeSlot[] };\n    startTime?: string | undefined;\n    endTime?: string | undefined;\n    maxVisibleCellHeight?: number | undefined;\n    interval?: number | undefined;\n    variant?: TimeSlotCellsVariant | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nexport const TimeSlotBarWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    maxVisibleCellHeight,\n    slots: daySlots,\n    interval = 30,\n    variant = \"flexible\",\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dateFormat = \"YYYY-MM-DD\";\n    const [expandAll, setExpandAll] = useState<boolean>(false);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const isMounted = useIsMounted();\n    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n    const timeColumnRef = useRef<HTMLDivElement>(null);\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n\n    const flattenedSlots = Object.values(daySlots ?? {}).flat();\n    const minStartTime =\n        startTime ?? minBy(flattenedSlots, \"startTime\")?.startTime ?? \"00:00\";\n    const maxEndTime =\n        endTime ?? maxBy(flattenedSlots, \"endTime\")?.endTime ?? \"24:00\";\n    const numberOfCells = Math.ceil(\n        DateHelper.getTimeDiffInMinutes(minStartTime, maxEndTime) / interval\n    );\n\n    // React spring animation configuration\n    const { height: actualHeight = 0, ref: cellsRef } = useResizeDetector();\n    const hasCollapsedContent =\n        !!maxVisibleCellHeight && actualHeight > maxVisibleCellHeight;\n    const visibleRowCount =\n        maxVisibleCellHeight !== undefined\n            ? Math.max(\n                  1,\n                  Math.floor((maxVisibleCellHeight + SLOT_GAP) / ROW_HEIGHT)\n              )\n            : 0;\n    const collapsedHeight =\n        visibleRowCount > 0\n            ? visibleRowCount * ROW_HEIGHT - SLOT_GAP\n            : maxVisibleCellHeight;\n    const height = maxVisibleCellHeight\n        ? !hasCollapsedContent || expandAll\n            ? actualHeight\n            : collapsedHeight\n        : actualHeight;\n    const expandableStyles = useSpring({ height });\n\n    const generatedDaySlots = useMemo((): {\n        [date: string]: TimeSlotCell[];\n    } => {\n        if (daySlots) {\n            const transformedDaySlots: Record<string, TimeSlotCell[]> = {};\n            Object.entries(daySlots).forEach(([key, slots]) => {\n                const cellsArray = initializeAndFillSlots(slots);\n                transformedDaySlots[key] = populateEmptyCells(cellsArray);\n            });\n            return transformedDaySlots;\n        }\n        return {};\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [daySlots]);\n\n    const focusableSlotsByDate = useMemo(() => {\n        return currentCalendarWeek.reduce<Record<string, FocusableSlotMeta[]>>(\n            (result, day) => {\n                const formattedDate = day.format(dateFormat);\n\n                result[formattedDate] = getCellsForDate(formattedDate)\n                    .filter(\n                        (\n                            slot\n                        ): slot is TimeSlotCell & {\n                            isActualSlot: true;\n                            rowIndex: number;\n                        } => !!slot.isActualSlot && slot.rowIndex !== undefined\n                    )\n                    .map((slot) => ({\n                        key: `${formattedDate}-${slot.id}`,\n                        date: formattedDate,\n                        rowIndex: slot.rowIndex,\n                    }))\n                    .sort((a, b) => a.rowIndex - b.rowIndex);\n\n                return result;\n            },\n            {}\n        );\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [currentCalendarWeek, generatedDaySlots]);\n\n    useApplyStyle(timeColumnRef, {\n        [styles.tokens.timeColumn.height]: formatUnitValue(height, \"px\"),\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayHoverClear = () => {\n        setHoverDay(undefined);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleSlotButtonClick =\n        (date: string, slot: TimeSlot) =>\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n\n            handleSlotClick(date, slot);\n        };\n\n    const handleExpandCollapseClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        setExpandAll((prevExpandValue) => !prevExpandValue);\n    };\n\n    const handleSlotKeyDown = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        currentSlot: FocusableSlotMeta\n    ) => {\n        const sameColumnSlots = focusableSlotsByDate[currentSlot.date] ?? [];\n\n        const focusSlot = (slot?: FocusableSlotMeta) => {\n            if (!slot) return;\n            slotButtonRefs.current[slot.key]?.focus();\n        };\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex + 1]);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex - 1]);\n                break;\n            }\n            case \"Home\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"End\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            case \"PageUp\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"PageDown\": {\n                event.preventDefault();\n                if (hasCollapsedContent && !expandAll) {\n                    setExpandAll(true);\n                    const lastVisibleSlot = [...sameColumnSlots]\n                        .reverse()\n                        .find((slot) => slot.rowIndex < visibleRowCount);\n                    focusSlot(lastVisibleSlot ?? sameColumnSlots[0]);\n                    break;\n                }\n\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            }\n            default:\n                break;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            (disabledDates && disabledDates.includes(day.format(dateFormat))) ??\n            false;\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const dayCellStyleProps: CellStyleProps = {};\n        const isHoverEnabled = enableSelection && !disabled;\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n        }\n\n        dayCellStyleProps.interactive = enableSelection\n            ? isHoverEnabled\n            : false;\n\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    function generateFallbackCell(\n        prefix: string | number,\n        cellLength = 1\n    ): TimeSlotCell {\n        return {\n            id: `${prefix.toString()}-${new Date().getTime()}`,\n            startTime: \"\",\n            endTime: \"\",\n            clickable: false,\n            isActualSlot: false,\n            styleAttributes: {\n                backgroundColor: Colour[\"bg-stronger\"],\n            },\n            cellLength,\n        };\n    }\n\n    function getSlotAriaLabel(date: string, slot: TimeSlot) {\n        const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n        return StringHelper.joinNonEmptyStrings([\n            dayjs(date).format(\"D MMMM YYYY dddd\"),\n            slotStartTime && slotEndTime\n                ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)\n                : undefined,\n            slot.label,\n            slot.clickable ?? true ? \"Available\" : \"Unavailable\",\n        ]);\n    }\n\n    function initializeAndFillSlots(slots: TimeSlot[]): TimeSlotCell[] {\n        const cellsArray = Array(numberOfCells).fill({});\n\n        slots.forEach((slot) => {\n            const startIndex = Math.max(\n                0,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.startTime) /\n                    interval\n            );\n            const endIndex = Math.min(\n                numberOfCells,\n                DateHelper.getTimeDiffInMinutes(minStartTime, slot.endTime) /\n                    interval\n            );\n            const cellLength = Math.ceil(endIndex) - Math.floor(startIndex);\n\n            switch (variant) {\n                case \"fixed\":\n                    // Keep fixed slots as 1 long cell\n                    cellsArray[Math.floor(startIndex)] = {\n                        ...slot,\n                        isActualSlot: true,\n                        rowIndex: Math.floor(startIndex),\n                        cellLength: endIndex - startIndex,\n                    };\n                    break;\n                case \"flexible\":\n                    // Split long slot into multiple cells of length 1\n                    for (let i = 0; i < cellLength; i++) {\n                        const startTime = DateHelper.addMinutesToTime(\n                            minStartTime,\n                            Math.floor(startIndex + i) * interval\n                        );\n                        const endTime = DateHelper.addMinutesToTime(\n                            startTime,\n                            interval\n                        );\n\n                        let halfFill: \"default\" | \"top\" | \"bottom\";\n\n                        if (!isEmpty(cellsArray[Math.floor(startIndex + i)])) {\n                            // Previous cell extends into current cell, fill entire cell\n                            halfFill = \"default\";\n                        } else if (i === 0 && startIndex % 1 !== 0) {\n                            halfFill = \"top\";\n                        } else if (i === cellLength - 1 && endIndex % 1 !== 0) {\n                            halfFill = \"bottom\";\n                        } else {\n                            halfFill = \"default\";\n                        }\n\n                        cellsArray[Math.floor(startIndex + i)] = {\n                            ...slot,\n                            id: `${slot.id}-${i}`,\n                            startTime,\n                            endTime,\n                            isActualSlot: true,\n                            rowIndex: Math.floor(startIndex + i),\n                            cellLength: 1,\n                            halfFill,\n                        };\n                    }\n                    break;\n            }\n        });\n        return cellsArray;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function populateEmptyCells(cellsArray: any[]): TimeSlotCell[] {\n        let i = 0;\n        switch (variant) {\n            case \"fixed\":\n                // Truncate consecutive empty cells into 1 [{},{},{...},{},{}] -> [{},{...},{}]\n                cellsArray = cellsArray.reduce(\n                    (result, obj) => {\n                        const lastObj =\n                            result.length > 0\n                                ? result[result.length - 1]\n                                : result[0];\n                        if (isEmpty(obj) && isEmpty(lastObj)) {\n                            return result;\n                        }\n                        return [...result, obj];\n                    },\n                    [{}]\n                );\n\n                // Fill in empty cells with timings & corresponding cell lengths\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        const startTime =\n                            cellsArray[i - 1]?.endTime ?? minStartTime;\n                        const endTime =\n                            cellsArray[i + 1]?.startTime ?? maxEndTime;\n                        if (startTime !== endTime) {\n                            const cellLength =\n                                DateHelper.getTimeDiffInMinutes(\n                                    startTime,\n                                    endTime\n                                ) / interval;\n                            cellsArray[i] = {\n                                ...generateFallbackCell(i),\n                                startTime,\n                                endTime,\n                                cellLength,\n                            };\n                        }\n                    }\n                    i++;\n                }\n                break;\n            case \"flexible\":\n                // Fill in individual empty cell with interval timings\n                while (i < cellsArray.length) {\n                    if (isEmpty(cellsArray[i])) {\n                        cellsArray[i] = generateFallbackCell(i);\n                        i++;\n                    } else {\n                        i += cellsArray[i].cellLength;\n                    }\n                }\n                break;\n        }\n        return cellsArray.filter(\n            (slot) => !isEmpty(slot) && slot.cellLength > 0\n        );\n    }\n\n    function getCellsForDate(formattedDate: string) {\n        return (\n            generatedDaySlots[formattedDate] ??\n            Array(variant === \"flexible\" ? numberOfCells : 1)\n                .fill(undefined)\n                .map((_, index) =>\n                    generateFallbackCell(\n                        index,\n                        variant === \"fixed\" ? numberOfCells : undefined\n                    )\n                )\n        );\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderWeek = () => {\n        return (\n            <div className={styles.headerCellWeekColumn} role=\"row\">\n                {currentCalendarWeek.map((day, index) => (\n                    <div\n                        key={`week-day-${index}`}\n                        className={styles.headerCellWeek}\n                        role=\"gridcell\"\n                    >\n                        <Typography.BodyXS\n                            weight={\"semibold\"}\n                            className={clsx(\n                                isDisabled(day) && styles.cellWeekTextDisabled\n                            )}\n                        >\n                            {dayjs(day).format(\"ddd\")}\n                        </Typography.BodyXS>\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    const renderHeader = () => {\n        return (\n            <div\n                className={styles.headerCellWeekColumn}\n                role=\"row\"\n                onBlur={handleDayHoverClear}\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <DayCell\n                            key={`day-${dayIndex}`}\n                            date={day}\n                            calendarDate={dayjs(selectedDate)}\n                            role=\"columnheader\"\n                            tabIndex={dayCellStyleProps.interactive ? 0 : -1}\n                            onSelect={() => {\n                                handleDayClick(\n                                    day,\n                                    !dayCellStyleProps.interactive\n                                );\n                            }}\n                            onHover={handleDayHover}\n                            onHoverEnd={handleDayHoverClear}\n                            onFocus={handleDayHover}\n                            {...dayCellStyleProps}\n                        ></DayCell>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderTimeColumn = () => {\n        let hasSetFirstAfternoonHour = false;\n\n        const formatTime = (index: number) => {\n            const parsedTime = dayjs(minStartTime, \"HH:mm\").add(\n                index * 4 * interval,\n                \"minutes\"\n            );\n            const hour = parsedTime.format(\"h\");\n            const minutes = parsedTime.format(\"mm\");\n            const amPm = parsedTime.format(\"a\");\n\n            let formattedTime = `${hour}${\n                minutes !== \"00\" ? ` ${minutes}` : \"\"\n            }`;\n\n            if (\n                !hasSetFirstAfternoonHour &&\n                amPm === \"pm\" &&\n                minutes === \"00\"\n            ) {\n                formattedTime += ` ${amPm}`;\n                hasSetFirstAfternoonHour = true;\n            }\n\n            return formattedTime;\n        };\n\n        return (\n            <div className={styles.timeColumn} ref={timeColumnRef} aria-hidden>\n                {Array(Math.ceil(numberOfCells / 4))\n                    .fill(undefined)\n                    .map((_, index) => (\n                        <div\n                            key={`time-${index}`}\n                            className={styles.timeColumnWrapper}\n                        >\n                            <div className={styles.timeColumnText}>\n                                {formatTime(index)}\n                            </div>\n                        </div>\n                    ))}\n            </div>\n        );\n    };\n\n    const renderSlotCell = (formattedDate: string, slot: TimeSlotCell) => {\n        return (\n            <WeekTimeSlotCell\n                key={slot.id}\n                formattedDate={formattedDate}\n                slot={slot}\n                variant={variant}\n                hasCollapsedContent={hasCollapsedContent}\n                expandAll={expandAll}\n                visibleRowCount={visibleRowCount}\n                onSlotClick={handleSlotClick}\n                getSlotAriaLabel={getSlotAriaLabel}\n                onSlotKeyDown={handleSlotKeyDown}\n                onSlotButtonClick={handleSlotButtonClick}\n                slotButtonRefs={slotButtonRefs}\n            />\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <animated.div\n                className={styles.expandable}\n                style={isMounted ? expandableStyles : undefined}\n                role=\"row\"\n            >\n                <div\n                    className={styles.columnWeekCell}\n                    ref={cellsRef}\n                    key={`week-cell-${calendarDate.format(dateFormat)}`}\n                >\n                    {currentCalendarWeek.map((day, dayIndex) => {\n                        const formattedDate = day.format(dateFormat);\n                        const cellsArray = getCellsForDate(formattedDate);\n                        return (\n                            <div\n                                key={`wrapper-${dayIndex}`}\n                                className={styles.timeSlotWrapper}\n                                role=\"gridcell\"\n                            >\n                                {cellsArray.map((slot) =>\n                                    renderSlotCell(formattedDate, slot)\n                                )}\n                            </div>\n                        );\n                    })}\n                </div>\n            </animated.div>\n        );\n    };\n\n    const renderCollapseExpandAll = () => {\n        if (!maxVisibleCellHeight || !cellsRef.current) return;\n        return (\n            <div className={styles.collapseExpandAllWrapper}>\n                <Button\n                    data-testid=\"time-bar-expand-collapse-button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-expanded={expandAll}\n                    onClick={handleExpandCollapseClick}\n                    className={styles.collapseExpandAllButton}\n                >\n                    <span className={styles.collapseExpandAllButtonContent}>\n                        <ChevronUpIcon\n                            className={clsx(\n                                styles.chevronIcon,\n                                expandAll && styles.chevronIconExpanded\n                            )}\n                        />\n                        {`${expandAll ? \"Hide\" : \"Show\"} later times`}\n                    </span>\n                </Button>\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.wrapper}>\n            <div className={styles.gridWrapper} role=\"grid\">\n                {renderHeader()}\n                {renderWeek()}\n                {renderTimeColumn()}\n                {renderTimeSlotBarCells()}\n            </div>\n            {renderCollapseExpandAll()}\n        </div>\n    );\n};\n"],"names":["TimeSlotBarWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","startTime","endTime","maxVisibleCellHeight","slots","daySlots","interval","variant","enableSelection","onSlotClick","dateFormat","expandAll","setExpandAll","useState","hoverDay","setHoverDay","isMounted","useIsMounted","slotButtonRefs","useRef","timeColumnRef","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","flattenedSlots","Object","values","flat","minStartTime","_b","_a","minBy","maxEndTime","_d","_c","maxBy","numberOfCells","Math","ceil","DateHelper","getTimeDiffInMinutes","height","actualHeight","ref","cellsRef","useResizeDetector","hasCollapsedContent","visibleRowCount","undefined","max","floor","SLOT_GAP","ROW_HEIGHT","expandableStyles","useSpring","generatedDaySlots","transformedDaySlots","entries","forEach","key","cellsArray","Array","fill","slot","startIndex","endIndex","min","cellLength","assign","isActualSlot","rowIndex","i","addMinutesToTime","halfFill","isEmpty","id","initializeAndFillSlots","reduce","result","obj","lastObj","length","generateFallbackCell","filter","populateEmptyCells","focusableSlotsByDate","day","formattedDate","format","getCellsForDate","map","date","sort","a","b","useApplyStyle","styles.tokens","timeColumn","formatUnitValue","handleDayHover","value","handleDayHoverClear","handleSlotClick","handleSlotButtonClick","event","stopPropagation","handleExpandCollapseClick","preventDefault","prevExpandValue","handleSlotKeyDown","currentSlot","sameColumnSlots","focusSlot","current","focus","currentIndex","findIndex","lastVisibleSlot","reverse","find","isDisabled","isWithinRange","dayjs","isDisabledDate","includes","prefix","toString","Date","getTime","clickable","styleAttributes","backgroundColor","Colour","getSlotAriaLabel","slotStartTime","slotEndTime","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","label","_","index","_jsxs","className","styles.wrapper","children","styles.gridWrapper","role","_jsx","styles.headerCellWeekColumn","onBlur","dayIndex","dayCellStyleProps","dateStartWithYear","disabled","isHoverEnabled","interactive","isHover","isSame","isSelected","labelType","circleLeft","circleRight","generateStyleProps","DayCell","tabIndex","handleDayClick","onHover","onHoverEnd","onFocus","styles.headerCellWeek","Typography","BodyXS","weight","clsx","styles.cellWeekTextDisabled","hasSetFirstAfternoonHour","formatTime","parsedTime","add","hour","minutes","amPm","formattedTime","styles.timeColumn","styles.timeColumnWrapper","styles.timeColumnText","renderTimeColumn","animated","div","styles.expandable","style","styles.columnWeekCell","styles.timeSlotWrapper","WeekTimeSlotCell","onSlotKeyDown","onSlotButtonClick","renderSlotCell","styles.collapseExpandAllWrapper","Button","styleType","sizeType","onClick","styles.collapseExpandAllButton","styles.collapseExpandAllButtonContent","ChevronUpIcon","styles.chevronIcon","styles.chevronIconExpanded","renderCollapseExpandAll"],"mappings":"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"}

package/time-slot-bar-week/time-slot-bar-week-days.styles.d.ts

@@ -0,0 +1,25 @@
+export declare const tokens: {
+    timeColumn: {
+        height: string;
+    };
+    timeSlot: {
+        height: string;
+    };
+};
+export declare const headerCellWeek: import("@linaria/core").LinariaClassName;
+export declare const cellWeekTextDisabled: import("@linaria/core").LinariaClassName;
+export declare const headerCellWeekColumn: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const gridWrapper: import("@linaria/core").LinariaClassName;
+export declare const expandable: import("@linaria/core").LinariaClassName;
+export declare const columnWeekCell: import("@linaria/core").LinariaClassName;
+export declare const timeColumn: import("@linaria/core").LinariaClassName;
+export declare const timeColumnWrapper: import("@linaria/core").LinariaClassName;
+export declare const timeColumnText: import("@linaria/core").LinariaClassName;
+export declare const timeSlotWrapper: import("@linaria/core").LinariaClassName;
+export declare const collapseExpandAllWrapper: import("@linaria/core").LinariaClassName;
+export declare const collapseExpandAllButton: import("@linaria/core").LinariaClassName;
+export declare const collapseExpandAllButtonContent: import("@linaria/core").LinariaClassName;
+export declare const chevronIcon: import("@linaria/core").LinariaClassName;
+export declare const chevronIconExpanded: import("@linaria/core").LinariaClassName;
+export declare const timeSlotComponent: import("@linaria/core").LinariaClassName;

package/time-slot-bar-week/time-slot-bar-week-days.styles.js

@@ -0,0 +1,2 @@
+import"./time-slot-bar-week-days.styles_evdvs9.css";const t={timeColumn:{height:"--fds-internal-timeSlotBarWeek-timeColumn-height"},timeSlot:{height:"--fds-internal-timeSlotBarWeek-timeSlotComponent-height"}},e="h1pfybo4",i="cm1jktd",l="hfnrvvn",m="w10itm92",o="g1ijsvx5",n="eljtyj8",s="crbcp6c",c="t13lf4s5",h="t4v35lv",r="t1v9il5y",d="t1xo1xfl",v="cyddonb",f="c5f9kvb",a="c1hid59d",b="cfi87m2",g="ctpwme7",k="t1wrn5bg";export{i as cellWeekTextDisabled,b as chevronIcon,g as chevronIconExpanded,f as collapseExpandAllButton,a as collapseExpandAllButtonContent,v as collapseExpandAllWrapper,s as columnWeekCell,n as expandable,o as gridWrapper,e as headerCellWeek,l as headerCellWeekColumn,c as timeColumn,r as timeColumnText,h as timeColumnWrapper,k as timeSlotComponent,d as timeSlotWrapper,t as tokens,m as wrapper};
+//# sourceMappingURL=time-slot-bar-week-days.styles.js.map

package/time-slot-bar-week/time-slot-bar-week-days.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-bar-week-days.styles.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    timeColumn: {\n        height: \"--fds-internal-timeSlotBarWeek-timeColumn-height\",\n    },\n    timeSlot: {\n        height: \"--fds-internal-timeSlotBarWeek-timeSlotComponent-height\",\n    },\n};\n\nexport const headerCellWeek = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    user-select: none;\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    flex: 1;\n`;\n\nexport const cellWeekTextDisabled = css`\n    color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const headerCellWeekColumn = css`\n    grid-column: 2 / -1;\n    display: flex;\n`;\n\nexport const wrapper = css`\n    width: 100%;\n`;\n\nexport const gridWrapper = css`\n    width: 100%;\n    display: grid;\n    grid-template-columns: auto repeat(7, 1fr);\n    column-gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const expandable = css`\n    grid-column: 2 / -1;\n    overflow: hidden;\n`;\n\nexport const columnWeekCell = css`\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    overflow: hidden;\n`;\n\nexport const timeColumn = css`\n    ${tokens.timeColumn.height}: initial;\n    display: flex;\n    flex-direction: column;\n    grid-row: 3 / auto;\n    gap: ${Spacing[\"spacing-4\"]};\n    width: 1.375rem;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    overflow: hidden;\n    height: var(${tokens.timeColumn.height});\n`;\n\nexport const timeColumnWrapper = css`\n    min-height: 60px;\n\n    &:last-child {\n        min-height: 0;\n    }\n`;\n\nexport const timeColumnText = css`\n    ${Font[\"body-xs-bold\"]}\n    color: ${Colour[\"text-subtler\"]};\n    text-align: center;\n    line-height: 12px; // align with cell on the same row\n\n    &:first-line {\n        font-size: ${Font.Spec[\"body-size-sm\"]};\n    }\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const collapseExpandAllWrapper = css`\n    display: flex;\n    margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const collapseExpandAllButton = css`\n    width: 100%;\n    height: 2.5rem;\n`;\n\nexport const collapseExpandAllButtonContent = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const chevronIcon = css`\n    transform: rotate(180deg);\n    transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(0deg);\n`;\n\nexport const timeSlotComponent = css`\n    ${tokens.timeSlot.height}: initial;\n    flex-grow: 1;\n    max-width: 200px;\n    height: var(${tokens.timeSlot.height});\n    min-height: var(${tokens.timeSlot.height});\n    border-radius: ${Radius.xs};\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 1px;\n    }\n`;\n"],"names":["tokens","timeColumn","height","timeSlot","headerCellWeek","cellWeekTextDisabled","headerCellWeekColumn","wrapper","gridWrapper","expandable","columnWeekCell","timeColumnWrapper","timeColumnText","timeSlotWrapper","collapseExpandAllWrapper","collapseExpandAllButton","collapseExpandAllButtonContent","chevronIcon","chevronIconExpanded","timeSlotComponent"],"mappings":"sFAIO,MAAMA,EAAS,CAClBC,WAAY,CACRC,OAAQ,oDAEZC,SAAU,CACND,OAAQ,4DAIHE,EAAc,WAUdC,EAAoB,UAIpBC,EAAoB,UAKpBC,EAAO,WAIPC,EAAW,WAOXC,EAAU,UAKVC,EAAc,UAOdT,EAAU,WAYVU,EAAiB,UAQjBC,EAAc,WAWdC,EAAe,WAOfC,EAAwB,UAKxBC,EAAuB,UAKvBC,EAA8B,WAM9BC,EAAW,UAKXC,EAAmB,UAInBC,EAAiB"}

package/time-slot-bar-week/time-slot-bar-week-days.styles_evdvs9.css

@@ -0,0 +1,17 @@
+@layer fds{.h1pfybo4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:var(--fds-spacing-8);-webkit-flex:1;-ms-flex:1;flex:1;}
+.cm1jktd{color:var(--fds-colour-text-disabled-subtlest);}
+.hfnrvvn{-ms-grid-column:2/-1;grid-column:2/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.w10itm92{width:100%;}
+.g1ijsvx5{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:auto repeat(7, 1fr);grid-template-columns:auto repeat(7, 1fr);-webkit-column-gap:var(--fds-spacing-4);column-gap:var(--fds-spacing-4);}
+.eljtyj8{-ms-grid-column:2/-1;grid-column:2/-1;overflow:hidden;}
+.crbcp6c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);overflow:hidden;}
+.t13lf4s5{--fds-internal-timeSlotBarWeek-timeColumn-height:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-ms-grid-row:3/auto;grid-row:3/auto;gap:var(--fds-spacing-4);width:1.375rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);overflow:hidden;height:var(--fds-internal-timeSlotBarWeek-timeColumn-height);}
+.t4v35lv{min-height:60px;}.t4v35lv:last-child{min-height:0;}
+.t1v9il5y{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text-subtler);text-align:center;line-height:12px;}.t1v9il5y:first-line{font-size:var(--fds-font-body-size-sm);}
+.t1xo1xfl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;gap:var(--fds-spacing-4);}
+.cyddonb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:var(--fds-spacing-8);}
+.c5f9kvb{width:100%;height:2.5rem;}
+.c1hid59d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);}
+.cfi87m2{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);}
+.ctpwme7{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
+.t1wrn5bg{--fds-internal-timeSlotBarWeek-timeSlotComponent-height:initial;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:200px;height:var(--fds-internal-timeSlotBarWeek-timeSlotComponent-height);min-height:var(--fds-internal-timeSlotBarWeek-timeSlotComponent-height);border-radius:var(--fds-radius-xs);}.t1wrn5bg:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:1px;}}

package/time-slot-bar-week/time-slot-bar-week.d.ts

@@ -1,2 +1,11 @@
-import { TimeSlotBarWeekProps } from "./types";
+import type { TimeSlotBarWeekProps } from "./types";
+/**
+ * A week calendar grid with a time axis, rendering detailed slot bars within
+ * each day column.
+ *
+ * Use `TimeSlotBarWeek` for detailed time-of-day scheduling where each cell
+ * represents a configurable time interval. For a simpler day-level overview
+ * without a time axis, use `TimeSlotWeekView` instead.
+ * @keywords availability, calendar, scheduling, weekly
+ */
 export declare const TimeSlotBarWeek: ({ disabledDates, onWeekDisplayChange, onChange, value, minDate, maxDate, startTime, endTime, slots, interval, variant, maxVisibleCellHeight, showNavigationHeader, enableSelection, onSlotClick, currentCalendarDate, ...otherProps }: TimeSlotBarWeekProps) => import("react/jsx-runtime").JSX.Element;

package/time-slot-bar-week/time-slot-bar-week.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import t from"../external/dayjs/dayjs.min.js";import{useState as r,useRef as i,useEffect as n}from"react";import{CalendarManager as l}from"../shared/internal-calendar/calendar-manager.js";import"../util/calendar-helper.js";import{DateHelper as o}from"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeSlotBarWeekDays as s}from"./time-slot-bar-week-days.js";import{Wrapper as m}from"./time-slot-bar-week.style.js";const d="YYYY-MM-DD",c=c=>{var{disabledDates:D,onWeekDisplayChange:f,onChange:h,value:g,minDate:k,maxDate:p,startTime:u,endTime:w,slots:b,interval:j,variant:v,maxVisibleCellHeight:C,showNavigationHeader:y=!0,enableSelection:x,onSlotClick:H,currentCalendarDate:S}=c,Y=e(c,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[O,M]=r(g),T=i(null),A=i(void 0);n((()=>{M(g)}),[g]);const L=e=>{const a=e.format(d);M(a),null==h||h(a)},W=(e,a)=>{H&&H(e,a)},N=e=>{if(f){const a={week:{firstDayOfWeek:e.startOf("week").format(d),lastDayOfWeek:e.endOf("week").format(d)},month:e.month()+1,year:e.year()};f(a)}};return a(m,Object.assign({},Y,{children:a(l,{ref:T,dynamicHeight:!0,initialCalendarDate:o.toDayjs(O||S).endOf("week").format(d),selectedStartDate:O,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!k&&t(e).subtract(1,"week").isBefore(k,"week"),isRightArrowDisabled:e=>!!p&&t(e).add(1,"week").isAfter(p,"week"),onCalendarDateChange:e=>{A.current&&A.current.isSame(e,"week")||N(e),A.current=e},showNavigationHeader:y,minDate:k,maxDate:p,getMonthHeaderLabel:e=>t(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t(e).endOf("week").format("YYYY"),isFocusable:!0,children:({calendarDate:e})=>(e=>a(s,{calendarDate:e,disabledDates:D,selectedDate:O,minDate:k,maxDate:p,startTime:u,endTime:w,onSelect:L,slots:b,interval:j,variant:v,maxVisibleCellHeight:C,enableSelection:x,onSlotClick:W}))(e)})}))};export{c as TimeSlotBarWeek};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import t from"../external/dayjs/dayjs.min.js";import{useState as r,useRef as i,useEffect as n}from"react";import{CalendarManager as l}from"../shared/internal-calendar/calendar-manager.js";import"../util/calendar-helper.js";import{DateHelper as o}from"../util/date-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{wrapper as s}from"./time-slot-bar-week.styles.js";import{TimeSlotBarWeekDays as m}from"./time-slot-bar-week-days.js";const d="YYYY-MM-DD",c=c=>{var{disabledDates:D,onWeekDisplayChange:f,onChange:h,value:g,minDate:k,maxDate:w,startTime:b,endTime:u,slots:p,interval:v,variant:C,maxVisibleCellHeight:j,showNavigationHeader:y=!0,enableSelection:x,onSlotClick:H,currentCalendarDate:S}=c,Y=e(c,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[O,M]=r(g),T=i(null),A=i(void 0);n((()=>{M(g)}),[g]);const L=e=>{const a=e.format(d);M(a),null==h||h(a)},N=(e,a)=>{H&&H(e,a)},W=e=>{if(f){const a={week:{firstDayOfWeek:e.startOf("week").format(d),lastDayOfWeek:e.endOf("week").format(d)},month:e.month()+1,year:e.year()};f(a)}};return a("div",Object.assign({className:s},Y,{children:a(l,{ref:T,dynamicHeight:!0,initialCalendarDate:o.toDayjs(O||S).endOf("week").format(d),selectedStartDate:O,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!k&&t(e).subtract(1,"week").isBefore(k,"week"),isRightArrowDisabled:e=>!!w&&t(e).add(1,"week").isAfter(w,"week"),onCalendarDateChange:e=>{A.current&&A.current.isSame(e,"week")||W(e),A.current=e},showNavigationHeader:y,minDate:k,maxDate:w,getMonthHeaderLabel:e=>t(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t(e).endOf("week").format("YYYY"),isFocusable:!0,children:({calendarDate:e})=>(e=>a(m,{calendarDate:e,disabledDates:D,selectedDate:O,minDate:k,maxDate:w,startTime:b,endTime:u,onSelect:L,slots:p,interval:v,variant:C,maxVisibleCellHeight:j,enableSelection:x,onSlotClick:N}))(e)})}))};export{c as TimeSlotBarWeek};
 //# sourceMappingURL=time-slot-bar-week.js.map