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

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

@@ -1,4 +1,4 @@
-import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@react-spring/web";import t,{css as r}from"styled-components";import{Button as o}from"../button/button.js";import{TimeSlot as n}from"../time-slot-bar/time-slot-bar.styles.js";import{Typography as l}from"../typography/index.js";import{V3_Spacing as s,V3_Colour as a,V3_Motion as d,V3_Font as g,V3_Radius as p}from"../v3_theme/index.js";const $=t.div`
+import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@react-spring/web";import t,{css as o}from"styled-components";import{Button as n}from"../button/button.js";import{TimeSlot as r}from"../shared/time-slot/time-slot.js";import{Typography as l}from"../typography/index.js";import{V3_Spacing as s,V3_Colour as a,V3_Motion as d,V3_Font as g,V3_Radius as p}from"../v3_theme/index.js";const m=t.div`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -6,22 +6,24 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@r
     user-select: none;
     margin-bottom: ${s["spacing-8"]};
     flex: 1;
-`,m=t(l.BodyXS)`
-    ${e=>e.$disabled&&r`
+`,$=t(l.BodyXS)`
+    ${e=>e.$disabled&&o`
             color: ${a["text-disabled-subtlest"]};
         `}
-`,c=t.div`
+`,f=t.div`
     grid-column: 2 / -1;
     display: flex;
 `,h=t.div`
     width: 100%;
+`,c=t.div`
+    width: 100%;
     display: grid;
     grid-template-columns: auto repeat(7, 1fr);
     column-gap: ${s["spacing-4"]};
-`,f=i(t.div`
+`,x=i(t.div`
     grid-column: 2 / -1;
     overflow: hidden;
-`),x=t.div`
+`),u=t.div`
     display: flex;
     gap: ${s["spacing-4"]};
     transition: all ${d["duration-250"]} ${d["ease-default"]};
@@ -36,12 +38,12 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@r
     overflow: hidden;
 
     ${e=>e.$height&&`height: ${e.$height}px;`}
-`,u=t.div`
-    min-height: 3.75rem;
+`,y=t.div`
+    min-height: 60px;
     &:last-child {
         min-height: 0;
     }
-`,y=t.div`
+`,v=t.div`
     ${g["body-xs-bold"]}
     color: ${a["text-subtler"]};
     text-align: center;
@@ -49,17 +51,15 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@r
     &:first-line {
         font-size: ${g.Spec["body-size-sm"]};
     }
-`,v=t.div`
+`,w=t.div`
     display: flex;
     flex-direction: column;
     flex: 1;
     gap: ${s["spacing-4"]};
-`,w=t.div`
-    grid-row: 4;
-    grid-column: 1 / -1;
+`,j=t.div`
     display: flex;
     margin-top: ${s["spacing-8"]};
-`,C=t(o.Small)`
+`,C=t(n.Small)`
     width: 100%;
     height: 2.5rem;
     span {
@@ -67,29 +67,38 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@r
         align-items: center;
         gap: ${s["spacing-8"]};
     }
-`,j=t(e)`
+`,S=t(e)`
     transform: rotate(${e=>e.$isExpanded?0:180}deg);
     transition: transform ${d["duration-250"]}
         ${d["ease-default"]};
-`,S=t(n)`
-    ${e=>{if("vertical"===e.$type)return r`
-                max-width: 200px;
-                height: ${e.$height}px;
-                min-height: ${e.$height}px;
-                margin: 0;
-                border-radius: ${p.xs};
-            `}}
+`,k=t(r)`
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+    max-width: 200px;
+    height: ${e=>e.$height}px;
+    min-height: ${e=>e.$height}px;
+    margin: 0;
+    border-radius: ${p.xs};
+
+    &:focus-within {
+        outline: 2px solid ${a["focus-ring"]};
+        outline-offset: -2px;
+    }
 
-    ${e=>e.$halfFill?r`
+    ${e=>e.$halfFill?o`
                 background: linear-gradient(
                         to ${e.$halfFill},
-                        ${"stripes"===e.$styleType?"transparent":e.$bgColor}
+                        ${"stripes"===e.styleType?"transparent":e.bgColor}
                             50%,
                         ${a["bg-strongest"]} 0%
                     )
-                    ${"stripes"===e.$styleType&&`, repeating-linear-gradient(\n                            135deg,\n                            ${e.$bgColor2||a["bg-strongest"]} 0px,\n                            ${e.$bgColor2||a["bg-strongest"]} 10px,\n                            ${e.$bgColor||a["bg-stronger"]} 10px,\n                            ${e.$bgColor||a["bg-stronger"]} 20px\n                        )`};
-            `:r`
-                background-color: ${e.$bgColor};
+                    ${"stripes"===e.styleType&&`, repeating-linear-gradient(\n                            135deg,\n                            ${e.bgColor2||a["bg-strongest"]} 0px,\n                            ${e.bgColor2||a["bg-strongest"]} 10px,\n                            ${e.bgColor||a["bg-stronger"]} 10px,\n                            ${e.bgColor||a["bg-stronger"]} 20px\n                        )`};
+            `:o`
+                background-color: ${e.bgColor};
             `}
-`;export{m as CellWeekText,j as ChevronIcon,C as CollapseExpandAllButton,w as CollapseExpandAllWrapper,x as ColumnWeekCell,f as Expandable,$ as HeaderCellWeek,c as HeaderCellWeekColumn,b as TimeColumn,y as TimeColumnText,u as TimeColumnWrapper,S as TimeSlotComponent,v as TimeSlotWrapper,h as Wrapper};
+`;export{$ as CellWeekText,S as ChevronIcon,C as CollapseExpandAllButton,j as CollapseExpandAllWrapper,u as ColumnWeekCell,x as Expandable,c as GridWrapper,m as HeaderCellWeek,f as HeaderCellWeekColumn,b as TimeColumn,v as TimeColumnText,y as TimeColumnWrapper,k as TimeSlotComponent,w as TimeSlotWrapper,h as Wrapper};
 //# sourceMappingURL=time-slot-bar-week-days.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar-week-days.style.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.style.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport type { TimeSlotStyleProps } from \"../time-slot-bar/time-slot-bar.styles\";\nimport { TimeSlot } from \"../time-slot-bar/time-slot-bar.styles\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\ninterface TimeSlotCellProps extends TimeSlotStyleProps {\n    $height: number;\n    $halfFill?: \"top\" | \"bottom\";\n}\n\ninterface TimeColumnStyleProps {\n    $height?: number;\n}\n\ninterface CellWeekTextStyleProps {\n    $disabled?: boolean;\n}\n\ninterface ChevronIconStyleProps {\n    $isExpanded?: boolean;\n}\n\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    user-select: none;\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n    flex: 1;\n`;\n\nexport const CellWeekText = styled(Typography.BodyXS)<CellWeekTextStyleProps>`\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${V3_Colour[\"text-disabled-subtlest\"]};\n        `}\n`;\n\nexport const HeaderCellWeekColumn = styled.div`\n    grid-column: 2 / -1;\n    display: flex;\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: auto repeat(7, 1fr);\n    column-gap: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const Expandable = animated(styled.div`\n    grid-column: 2 / -1;\n    overflow: hidden;\n`);\n\nexport const ColumnWeekCell = styled.div`\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    overflow: hidden;\n`;\n\nexport const TimeColumn = styled.div<TimeColumnStyleProps>`\n    display: flex;\n    flex-direction: column;\n    grid-row: 3 / auto;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    width: 1.375rem;\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    overflow: hidden;\n\n    ${(props) => props.$height && `height: ${props.$height}px;`}\n`;\n\nexport const TimeColumnWrapper = styled.div`\n    min-height: 3.75rem;\n    &:last-child {\n        min-height: 0;\n    }\n`;\n\nexport const TimeColumnText = styled.div`\n    ${V3_Font[\"body-xs-bold\"]}\n    color: ${V3_Colour[\"text-subtler\"]};\n    text-align: center;\n    line-height: 12px; // align with cell on the same row\n    &:first-line {\n        font-size: ${V3_Font.Spec[\"body-size-sm\"]};\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const CollapseExpandAllWrapper = styled.div`\n    grid-row: 4;\n    grid-column: 1 / -1;\n    display: flex;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const CollapseExpandAllButton = styled(Button.Small)`\n    width: 100%;\n    height: 2.5rem;\n    span {\n        display: flex;\n        align-items: center;\n        gap: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<ChevronIconStyleProps>`\n    transform: rotate(${(props) => (props.$isExpanded ? 0 : 180)}deg);\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)<TimeSlotCellProps>`\n    ${(props) => {\n        if (props.$type === \"vertical\") {\n            return css`\n                max-width: 200px;\n                height: ${props.$height}px;\n                min-height: ${props.$height}px;\n                margin: 0;\n                border-radius: ${V3_Radius[\"xs\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$halfFill) {\n            return css`\n                background-color: ${props.$bgColor};\n            `;\n        } else {\n            return css`\n                background: linear-gradient(\n                        to ${props.$halfFill},\n                        ${props.$styleType === \"stripes\"\n                                ? \"transparent\"\n                                : props.$bgColor}\n                            50%,\n                        ${V3_Colour[\"bg-strongest\"]} 0%\n                    )\n                    ${props.$styleType === \"stripes\" &&\n                    `, repeating-linear-gradient(\n                            135deg,\n                            ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 0px,\n                            ${\n                                props.$bgColor2 || V3_Colour[\"bg-strongest\"]\n                            } 10px,\n                            ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 10px,\n                            ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 20px\n                        )`};\n            `;\n        }\n    }}\n`;\n"],"names":["HeaderCellWeek","styled","div","V3_Spacing","CellWeekText","Typography","BodyXS","props","$disabled","css","V3_Colour","HeaderCellWeekColumn","Wrapper","Expandable","animated","ColumnWeekCell","V3_Motion","TimeColumn","$height","TimeColumnWrapper","TimeColumnText","V3_Font","Spec","TimeSlotWrapper","CollapseExpandAllWrapper","CollapseExpandAllButton","Button","Small","ChevronIcon","ChevronUpIcon","$isExpanded","TimeSlotComponent","TimeSlot","$type","V3_Radius","$halfFill","$styleType","$bgColor","$bgColor2"],"mappings":"6ZAiCO,MAAMA,EAAiBC,EAAOC,GAAG;;;;;;qBAMnBC,EAAW;;EAInBC,EAAeH,EAAOI,EAAWC,OAA+B;MACtEC,GACCA,EAAMC,WACNC,CAAG;qBACUC,EAAU;;EAIlBC,EAAuBV,EAAOC,GAAG;;;EAKjCU,EAAUX,EAAOC,GAAG;;;;kBAIfC,EAAW;EAGhBU,EAAaC,EAASb,EAAOC,GAAG;;;GAKhCa,EAAiBd,EAAOC,GAAG;;WAE7BC,EAAW;sBACAa,EAAU,mBAAmBA,EAAU;;EAIhDC,EAAahB,EAAOC,GAAyB;;;;WAI/CC,EAAW;;sBAEAa,EAAU,mBAAmBA,EAAU;;;MAGtDT,GAAUA,EAAMW,SAAW,WAAWX,EAAMW;EAGtCC,EAAoBlB,EAAOC,GAAG;;;;;EAO9BkB,EAAiBnB,EAAOC,GAAG;MAClCmB,EAAQ;aACDX,EAAU;;;;qBAIFW,EAAQC,KAAK;;EAIrBC,EAAkBtB,EAAOC,GAAG;;;;WAI9BC,EAAW;EAGTqB,EAA2BvB,EAAOC,GAAG;;;;kBAIhCC,EAAW;EAGhBsB,EAA0BxB,EAAOyB,EAAOC,MAAM;;;;;;eAM5CxB,EAAW;;EAIbyB,EAAc3B,EAAO4B,EAAqC;wBAC9CtB,GAAWA,EAAMuB,YAAc,EAAI;4BAChCd,EAAU;UAC5BA,EAAU;EAGPe,EAAoB9B,EAAO+B,EAA4B;MAC7DzB,IACC,GAAoB,aAAhBA,EAAM0B,MACN,OAAOxB,CAAG;;0BAEIF,EAAMW;8BACFX,EAAMW;;iCAEHgB,EAAc;aAEvC;;MAGD3B,GACMA,EAAM4B,UAKA1B,CAAG;;6BAEOF,EAAM4B;0BACY,YAArB5B,EAAM6B,WACE,cACA7B,EAAM8B;;0BAEd3B,EAAU;;sBAEO,YAArBH,EAAM6B,YACR,kGAEU7B,EAAM+B,WAAa5B,EAAU,qDAE3BH,EAAM+B,WAAa5B,EAAU,sDAE/BH,EAAM8B,UAAY3B,EAAU,qDAC5BH,EAAM8B,UAAY3B,EAAU;cArBvCD,CAAG;oCACcF,EAAM8B;;"}
+{"version":3,"file":"time-slot-bar-week-days.style.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.style.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Colour,\n    V3_Font,\n    V3_Motion,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\ninterface TimeSlotCellProps {\n    $height: number;\n    $halfFill?: \"top\" | \"bottom\";\n}\n\ninterface TimeColumnStyleProps {\n    $height?: number;\n}\n\ninterface CellWeekTextStyleProps {\n    $disabled?: boolean;\n}\n\ninterface ChevronIconStyleProps {\n    $isExpanded?: boolean;\n}\n\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    user-select: none;\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n    flex: 1;\n`;\n\nexport const CellWeekText = styled(Typography.BodyXS)<CellWeekTextStyleProps>`\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${V3_Colour[\"text-disabled-subtlest\"]};\n        `}\n`;\n\nexport const HeaderCellWeekColumn = styled.div`\n    grid-column: 2 / -1;\n    display: flex;\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n`;\n\nexport const GridWrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: auto repeat(7, 1fr);\n    column-gap: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const Expandable = animated(styled.div`\n    grid-column: 2 / -1;\n    overflow: hidden;\n`);\n\nexport const ColumnWeekCell = styled.div`\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    overflow: hidden;\n`;\n\nexport const TimeColumn = styled.div<TimeColumnStyleProps>`\n    display: flex;\n    flex-direction: column;\n    grid-row: 3 / auto;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n    width: 1.375rem;\n    transition: all ${V3_Motion[\"duration-250\"]} ${V3_Motion[\"ease-default\"]};\n    overflow: hidden;\n\n    ${(props) => props.$height && `height: ${props.$height}px;`}\n`;\n\nexport const TimeColumnWrapper = styled.div`\n    min-height: 60px;\n    &:last-child {\n        min-height: 0;\n    }\n`;\n\nexport const TimeColumnText = styled.div`\n    ${V3_Font[\"body-xs-bold\"]}\n    color: ${V3_Colour[\"text-subtler\"]};\n    text-align: center;\n    line-height: 12px; // align with cell on the same row\n    &:first-line {\n        font-size: ${V3_Font.Spec[\"body-size-sm\"]};\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const CollapseExpandAllWrapper = styled.div`\n    display: flex;\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const CollapseExpandAllButton = styled(Button.Small)`\n    width: 100%;\n    height: 2.5rem;\n    span {\n        display: flex;\n        align-items: center;\n        gap: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<ChevronIconStyleProps>`\n    transform: rotate(${(props) => (props.$isExpanded ? 0 : 180)}deg);\n    transition: transform ${V3_Motion[\"duration-250\"]}\n        ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)<TimeSlotCellProps>`\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    position: relative;\n    max-width: 200px;\n    height: ${(props) => props.$height}px;\n    min-height: ${(props) => props.$height}px;\n    margin: 0;\n    border-radius: ${V3_Radius[\"xs\"]};\n\n    &:focus-within {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n    }\n\n    ${(props) => {\n        if (!props.$halfFill) {\n            return css`\n                background-color: ${props.bgColor};\n            `;\n        } else {\n            return css`\n                background: linear-gradient(\n                        to ${props.$halfFill},\n                        ${props.styleType === \"stripes\"\n                                ? \"transparent\"\n                                : props.bgColor}\n                            50%,\n                        ${V3_Colour[\"bg-strongest\"]} 0%\n                    )\n                    ${props.styleType === \"stripes\" &&\n                    `, repeating-linear-gradient(\n                            135deg,\n                            ${props.bgColor2 || V3_Colour[\"bg-strongest\"]} 0px,\n                            ${props.bgColor2 || V3_Colour[\"bg-strongest\"]} 10px,\n                            ${props.bgColor || V3_Colour[\"bg-stronger\"]} 10px,\n                            ${props.bgColor || V3_Colour[\"bg-stronger\"]} 20px\n                        )`};\n            `;\n        }\n    }}\n`;\n"],"names":["HeaderCellWeek","styled","div","V3_Spacing","CellWeekText","Typography","BodyXS","props","$disabled","css","V3_Colour","HeaderCellWeekColumn","Wrapper","GridWrapper","Expandable","animated","ColumnWeekCell","V3_Motion","TimeColumn","$height","TimeColumnWrapper","TimeColumnText","V3_Font","Spec","TimeSlotWrapper","CollapseExpandAllWrapper","CollapseExpandAllButton","Button","Small","ChevronIcon","ChevronUpIcon","$isExpanded","TimeSlotComponent","TimeSlot","V3_Radius","$halfFill","styleType","bgColor","bgColor2"],"mappings":"qZAgCO,MAAMA,EAAiBC,EAAOC,GAAG;;;;;;qBAMnBC,EAAW;;EAInBC,EAAeH,EAAOI,EAAWC,OAA+B;MACtEC,GACCA,EAAMC,WACNC,CAAG;qBACUC,EAAU;;EAIlBC,EAAuBV,EAAOC,GAAG;;;EAKjCU,EAAUX,EAAOC,GAAG;;EAIpBW,EAAcZ,EAAOC,GAAG;;;;kBAInBC,EAAW;EAGhBW,EAAaC,EAASd,EAAOC,GAAG;;;GAKhCc,EAAiBf,EAAOC,GAAG;;WAE7BC,EAAW;sBACAc,EAAU,mBAAmBA,EAAU;;EAIhDC,EAAajB,EAAOC,GAAyB;;;;WAI/CC,EAAW;;sBAEAc,EAAU,mBAAmBA,EAAU;;;MAGtDV,GAAUA,EAAMY,SAAW,WAAWZ,EAAMY;EAGtCC,EAAoBnB,EAAOC,GAAG;;;;;EAO9BmB,EAAiBpB,EAAOC,GAAG;MAClCoB,EAAQ;aACDZ,EAAU;;;;qBAIFY,EAAQC,KAAK;;EAIrBC,EAAkBvB,EAAOC,GAAG;;;;WAI9BC,EAAW;EAGTsB,EAA2BxB,EAAOC,GAAG;;kBAEhCC,EAAW;EAGhBuB,EAA0BzB,EAAO0B,EAAOC,MAAM;;;;;;eAM5CzB,EAAW;;EAIb0B,EAAc5B,EAAO6B,EAAqC;wBAC9CvB,GAAWA,EAAMwB,YAAc,EAAI;4BAChCd,EAAU;UAC5BA,EAAU;EAGPe,EAAoB/B,EAAOgC,EAA4B;;;;;;;;cAQrD1B,GAAUA,EAAMY;kBACZZ,GAAUA,EAAMY;;qBAEde,EAAc;;;6BAGNxB,EAAU;;;;MAIhCH,GACMA,EAAM4B,UAKA1B,CAAG;;6BAEOF,EAAM4B;0BACW,YAApB5B,EAAM6B,UACE,cACA7B,EAAM8B;;0BAEd3B,EAAU;;sBAEM,YAApBH,EAAM6B,WACR,kGAEU7B,EAAM+B,UAAY5B,EAAU,qDAC5BH,EAAM+B,UAAY5B,EAAU,sDAC5BH,EAAM8B,SAAW3B,EAAU,qDAC3BH,EAAM8B,SAAW3B,EAAU;cAnBtCD,CAAG;oCACcF,EAAM8B;;"}

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/string-helper.js";import{Wrapper as s}from"./time-slot-bar-week.style.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:k,minDate:w,maxDate:g,startTime:b,endTime:u,slots:p,interval:C,variant:v,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(k),T=i(null),A=i(void 0);n((()=>{M(k)}),[k]);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(s,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=>!!w&&t(e).subtract(1,"week").isBefore(w,"week"),isRightArrowDisabled:e=>!!g&&t(e).add(1,"week").isAfter(g,"week"),onCalendarDateChange:e=>{A.current&&A.current.isSame(e,"week")||N(e),A.current=e},showNavigationHeader:y,minDate:w,maxDate:g,getMonthHeaderLabel:e=>t(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t(e).endOf("week").format("YYYY"),children:({calendarDate:e})=>(e=>a(m,{calendarDate:e,disabledDates:D,selectedDate:O,minDate:w,maxDate:g,startTime:b,endTime:u,onSelect:L,slots:p,interval:C,variant:v,maxVisibleCellHeight:j,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.style.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)},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(s,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=>!!w&&t(e).add(1,"week").isAfter(w,"week"),onCalendarDateChange:e=>{A.current&&A.current.isSame(e,"week")||N(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:W}))(e)})}))};export{c as TimeSlotBarWeek};
 //# sourceMappingURL=time-slot-bar-week.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar-week.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { Wrapper } from \"./time-slot-bar-week.style\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n            >\n                {({ calendarDate }) => {\n                    return renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotBarWeek","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"sgBAYA,MAAMA,EAAc,aAEPC,EAAmBC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,EAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAA6BjB,GAC/DkB,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO/B,GACjCsB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO/B,GAC7CwC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO/B,IAE9C0C,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAACC,EAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAACK,EAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAlCDC,EAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO/B,GAiCJuD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBvD,GACFwD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASzD,EAAS,QAE3B0D,qBAAuBH,KACjBtD,GACFuD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ1D,EAAS,QAExD2D,qBA9EwB7D,IAE3BoB,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO/D,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB0C,QAAU9D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT8D,oBAAsBR,GAClBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAAOiB,SAGnD,EAAGc,kBAnDe,CAACA,GAExBlB,EAAC4B,EAAmB,CAChBV,aAAcA,EACd3D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACT+D,SAAU5C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAoCF0C,CAAuBZ,OAGhC"}
+{"version":3,"file":"time-slot-bar-week.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { Wrapper } from \"./time-slot-bar-week.style\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotBarWeek","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"glBAYA,MAAMA,EAAc,aAEPC,EAAmBC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,EAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAA6BjB,GAC/DkB,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO/B,GACjCsB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO/B,GAC7CwC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO/B,IAE9C0C,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAACC,EAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAACK,EAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAlCDC,EAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO/B,GAiCJuD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBvD,GACFwD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASzD,EAAS,QAE3B0D,qBAAuBH,KACjBtD,GACFuD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ1D,EAAS,QAExD2D,qBA9EwB7D,IAE3BoB,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO/D,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB0C,QAAU9D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT8D,oBAAsBR,GAClBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAE7CyC,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBlB,EAAC6B,EAAmB,CAChBX,aAAcA,EACd3D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTgE,SAAU7C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAqCF2C,CAAuBb,OAGhC"}

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

@@ -1 +1 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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

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

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"../external/dayjs/dayjs.min.js";import l from"../external/dayjs/plugin/isBetween.js";import{useMemo as o,useState as a}from"react";import{DayCell as i}from"../shared/internal-calendar/day-cell/day-cell.js";import{TimeSlot as n}from"../time-slot-bar/time-slot-bar.styles.js";import{CalendarHelper as c}from"../util/calendar-helper.js";import{V3_Colour as s}from"../v3_theme/index.js";import{Wrapper as d,HeaderCellWeek as m,DayLabel as u,ColumnWeekCell as b,TimeSlotWrapper as p,TimeSlotText as y}from"./time-slot-week-days.style.js";r.extend(l);const h="YYYY-MM-DD",v={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:s["bg-stronger"],backgroundColor2:s["bg-strongest"]}},f=({calendarDate:l,disabledDates:s,selectedDate:f,onSelect:g,minDate:T,maxDate:k,slots:j,enableSelection:$=!0,onSlotClick:C})=>{const D=o((()=>c.generateDaysForCurrentWeek(l)),[l]),[x,w]=a(),S=e=>{w(e)},H=()=>{w(void 0)},R=e=>{const t=e.format(h),l=(e=>{const t=c.isWithinRange(e,T?r(T):void 0,k?r(k):void 0),l=!!s&&s.includes(e.format(h));return!t||l})(e),o=$&&!l,a=o&&x&&e.isSame(x,"day"),i=[f].includes(t),n={labelType:"available",interactive:$?o:null};return l&&(n.disabled=!0,n.labelType="unavailable"),i&&a?(n.labelType="selected-hover",n.circleLeft="selected-hover-outline",n.circleRight="selected-hover-outline"):i?(n.labelType="selected",n.circleLeft="selected-outline",n.circleRight="selected-outline"):a&&(n.labelType="hover",n.circleLeft="hover-subtle",n.circleRight="hover-subtle"),n};return e(d,{children:[D.map(((l,o)=>{const a=R(l);return e(m,{children:[t(i,Object.assign({date:l,calendarDate:r(f),onSelect:()=>{((e,t)=>{!t&&$&&g(e)})(l,!a.interactive)},onHover:S,onHoverEnd:H},a),`day-${o}`),t(u,{$disabled:a.disabled,children:r(l).format("ddd")})]},`week-day-${o}`)})),t(b,{children:D.map(((r,l)=>{const o=r.format(h),a=j&&(j[o]?j[o]:[v]);return t(p,{children:a&&a.map((r=>{const{id:l,startTime:a,endTime:i,clickable:s=!0,styleAttributes:d}=r,{color:m,styleType:u="default",backgroundColor:b,backgroundColor2:p}=d;return t(n,{$type:"vertical",$variant:"default",$styleType:u,$bgColor:b,$bgColor2:p,$clickable:s,onClick:()=>s&&((e,t)=>{null==C||C(e,t)})(o,r),children:e(y,{style:{color:m},children:[t("span",{children:c.convertTo12HourFormat(a)}),i&&a&&t("span",{children:"-"}),t("span",{children:c.convertTo12HourFormat(i)})]})},l)}))},`wrapper-${l}`)}))},`week-cell-${l.format(h)}`)]})};export{f as TimeSlotWeekDays};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t from"../external/dayjs/dayjs.min.js";import o from"../external/dayjs/plugin/isBetween.js";import{useMemo as l,useState as a,useRef as i}from"react";import{VisuallyHidden as n,concatIds as c}from"../shared/accessibility/index.js";import{DayCell as s}from"../shared/internal-calendar/day-cell/day-cell.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as d}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{CalendarHelper as m}from"../util/calendar-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{TimeHelper as u}from"../util/time-helper.js";import{Wrapper as p,HeaderRow as b,HeaderCellWeek as h,DayLabel as v,ColumnWeekCell as y,TimeSlotWrapper as f,TimeSlotComponent as k,TimeSlotText as g}from"./time-slot-week-days.style.js";t.extend(o);const j="YYYY-MM-DD",D={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:d["bg-stronger"],backgroundColor2:d["bg-strongest"]}},T=({calendarDate:o,disabledDates:d,selectedDate:T,onSelect:w,minDate:x,maxDate:C,slots:$,enableSelection:Y=!0,onSlotClick:A})=>{const M=l((()=>m.generateDaysForCurrentWeek(o)),[o]),[R,H]=a(),S=i({}),F=(e,r)=>{null==A||A(e,r)},I=(e,r)=>t=>{var o;t.stopPropagation(),(null===(o=r.clickable)||void 0===o||o)&&F(e,r)},L=e=>{H(e)},P=()=>{H(void 0)},U=e=>{const r=e.format(j),o=(e=>{const r=m.isWithinRange(e,x?t(x):void 0,C?t(C):void 0),o=!!d&&d.includes(e.format(j));return!r||o})(e),l=Y&&!o,a=l&&R&&e.isSame(R,"day"),i=[T].includes(r),n={labelType:"available",interactive:!!Y&&l};return o&&(n.disabled=!0,n.labelType="unavailable"),i&&a?(n.labelType="selected-hover",n.circleLeft="selected-hover-outline",n.circleRight="selected-hover-outline"):i?(n.labelType="selected",n.circleLeft="selected-outline",n.circleRight="selected-outline"):a&&(n.labelType="hover",n.circleLeft="hover-subtle",n.circleRight="hover-subtle"),n},q=(e,r)=>{const t=(o=r.date,(null!==(l=null==$?void 0:$[o])&&void 0!==l?l:[]).map(((e,r)=>({key:`${o}-${e.id}`,date:o,rowIndex:r}))));var o,l;const a=e=>{var r;e&&(null===(r=S.current[e.key])||void 0===r||r.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const o=t.findIndex((e=>e.key===r.key));a(t[o+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const o=t.findIndex((e=>e.key===r.key));a(t[o-1]);break}case"Home":case"PageUp":e.preventDefault(),a(t[0]);break;case"End":case"PageDown":e.preventDefault(),a(t[t.length-1])}},B=(e,r)=>{var o;const{startTime:l,endTime:a}=r;return c(t(e).format("D MMMM YYYY dddd"),l&&a?u.formatTimeRange(l,a):void 0,r.label,null===(o=r.clickable)||void 0===o||o?"Available":"Unavailable")};return e(p,{role:"grid",children:[r(b,{role:"row",onBlur:P,children:M.map(((o,l)=>{const a=U(o);return e(h,{role:"presentation",children:[r(s,Object.assign({date:o,calendarDate:t(T),onSelect:()=>{((e,r)=>{!r&&Y&&w(e)})(o,!a.interactive)},onHover:L,onHoverEnd:P,onFocus:L,role:"columnheader",tabIndex:a.interactive?0:-1},a),`day-${l}`),r(v,{"aria-hidden":!0,$disabled:a.disabled,children:t(o).format("ddd")})]},`week-day-${l}`)}))}),r(y,{role:"row",children:M.map(((t,o)=>{var l;const a=t.format(j),i=null!==(l=null==$?void 0:$[a])&&void 0!==l?l:[D];return r(f,{role:"gridcell",children:i&&i.map(((t,o)=>{const{id:l,startTime:i,endTime:c,clickable:s=!0,styleAttributes:d}=t,{color:u,styleType:p="default",backgroundColor:b,backgroundColor2:h}=d,v=`${a}-${l}`,y=t!==D;return e(k,{styleType:p,bgColor:b,bgColor2:h,clickable:s,onClick:()=>s&&F(a,t),children:[e(g,{style:{color:u},children:[r("span",{children:m.convertTo12HourFormat(i)}),c&&i&&r("span",{children:"-"}),r("span",{children:m.convertTo12HourFormat(c)})]}),y&&r(n,{children:r("button",{type:"button",ref:e=>{S.current[v]=e},"aria-disabled":!s,"aria-label":B(a,t),onKeyDown:e=>q(e,{key:v,date:a}),onClick:I(a,t)})})]},l)}))},`wrapper-${o}`)}))},`week-cell-${o.format(j)}`)]})};export{T as TimeSlotWeekDays};
 //# sourceMappingURL=time-slot-week-days.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.js","sources":["../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useMemo, useState } from \"react\";\n\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 { TimeSlot as TimeSlotComponent } from \"../time-slot-bar/time-slot-bar.styles\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    ColumnWeekCell,\n    DayLabel,\n    HeaderCellWeek,\n    TimeSlotText,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-week-days.style\";\n\ndayjs.extend(isBetween);\n\nexport type DayVariant = \"default\" | \"other-month\" | \"today\";\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[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: V3_Colour[\"bg-stronger\"],\n        backgroundColor2: V3_Colour[\"bg-strongest\"],\n    },\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\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 handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayMouseout = () => {\n        setHoverDay(undefined);\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\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: !enableSelection ? null : isHoverEnabled,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\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    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return currentCalendarWeek.map((day, index) => {\n            const dayCellStyleProps = generateStyleProps(day);\n\n            return (\n                <HeaderCellWeek key={`week-day-${index}`}>\n                    <DayCell\n                        key={`day-${index}`}\n                        date={day}\n                        calendarDate={dayjs(selectedDate)}\n                        onSelect={() => {\n                            handleDayClick(day, !dayCellStyleProps.interactive);\n                        }}\n                        onHover={handleDayHover}\n                        onHoverEnd={handleDayMouseout}\n                        {...dayCellStyleProps}\n                    />\n                    <DayLabel $disabled={dayCellStyleProps.disabled}>\n                        {dayjs(day).format(\"ddd\")}\n                    </DayLabel>\n                </HeaderCellWeek>\n            );\n        });\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <ColumnWeekCell\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots =\n                        daySlots &&\n                        (daySlots[formattedDate]\n                            ? daySlots[formattedDate]\n                            : [fallbackSlot]);\n\n                    return (\n                        <TimeSlotWrapper key={`wrapper-${dayIndex}`}>\n                            {slots &&\n                                slots.map((slot) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    return (\n                                        <TimeSlotComponent\n                                            $type=\"vertical\"\n                                            $variant=\"default\"\n                                            key={id}\n                                            $styleType={styleType}\n                                            $bgColor={backgroundColor}\n                                            $bgColor2={backgroundColor2}\n                                            $clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotText\n                                                style={{ color: color }}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotText>\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </TimeSlotWrapper>\n                    );\n                })}\n            </ColumnWeekCell>\n        );\n    };\n\n    return (\n        <Wrapper>\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </Wrapper>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","V3_Colour","backgroundColor2","TimeSlotWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","handleDayHover","value","handleDayMouseout","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","_jsxs","Wrapper","children","map","index","HeaderCellWeek","_jsx","DayCell","Object","assign","date","handleDayClick","onHover","onHoverEnd","DayLabel","$disabled","ColumnWeekCell","dayIndex","formattedDate","TimeSlotWrapper","slot","slotStartTime","slotEndTime","TimeSlotComponent","$type","$variant","$bgColor","$bgColor2","onClick","handleSlotClick","TimeSlotText","style","convertTo12HourFormat"],"mappings":"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"}
+{"version":3,"file":"time-slot-week-days.js","sources":["../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport type React from \"react\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\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 } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n    ColumnWeekCell,\n    DayLabel,\n    HeaderCellWeek,\n    HeaderRow,\n    TimeSlotComponent,\n    TimeSlotText,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-week-days.style\";\n\ndayjs.extend(isBetween);\n\ninterface FocusableSlotMeta {\n    key: string;\n    date: string;\n    rowIndex: number;\n}\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[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: Colour[\"bg-stronger\"],\n        backgroundColor2: Colour[\"bg-strongest\"],\n    },\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n        onSelect(value);\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            if (slot.clickable ?? true) {\n                handleSlotClick(date, slot);\n            }\n        };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayHoverClear = () => {\n        setHoverDay(undefined);\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\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: enableSelection ? isHoverEnabled : false,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\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    const getFocusableSlotsForDate = (\n        formattedDate: string\n    ): FocusableSlotMeta[] => {\n        return (daySlots?.[formattedDate] ?? []).map((slot, index) => ({\n            key: `${formattedDate}-${slot.id}`,\n            date: formattedDate,\n            rowIndex: index,\n        }));\n    };\n\n    const handleSlotKeyDown = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        currentSlot: FocusableSlotMeta\n    ) => {\n        const sameColumnSlots = getFocusableSlotsForDate(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            case \"PageUp\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"End\":\n            case \"PageDown\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getSlotAriaLabel = (date: string, slot: TimeSlot) => {\n        const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n        return concatIds(\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    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <HeaderRow role=\"row\" onBlur={handleDayHoverClear}>\n                {currentCalendarWeek.map((day, index) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <HeaderCellWeek\n                            key={`week-day-${index}`}\n                            role=\"presentation\"\n                        >\n                            <DayCell\n                                key={`day-${index}`}\n                                date={day}\n                                calendarDate={dayjs(selectedDate)}\n                                onSelect={() => {\n                                    handleDayClick(\n                                        day,\n                                        !dayCellStyleProps.interactive\n                                    );\n                                }}\n                                onHover={handleDayHover}\n                                onHoverEnd={handleDayHoverClear}\n                                onFocus={handleDayHover}\n                                role=\"columnheader\"\n                                tabIndex={\n                                    dayCellStyleProps.interactive ? 0 : -1\n                                }\n                                {...dayCellStyleProps}\n                            />\n                            <DayLabel\n                                aria-hidden\n                                $disabled={dayCellStyleProps.disabled}\n                            >\n                                {dayjs(day).format(\"ddd\")}\n                            </DayLabel>\n                        </HeaderCellWeek>\n                    );\n                })}\n            </HeaderRow>\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <ColumnWeekCell\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n                role=\"row\"\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots = daySlots?.[formattedDate] ?? [fallbackSlot];\n\n                    return (\n                        <TimeSlotWrapper\n                            key={`wrapper-${dayIndex}`}\n                            role=\"gridcell\"\n                        >\n                            {slots &&\n                                slots.map((slot, rowIndex) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    const slotKey = `${formattedDate}-${id}`;\n                                    const isActualSlot = slot !== fallbackSlot;\n\n                                    return (\n                                        <TimeSlotComponent\n                                            key={id}\n                                            styleType={styleType}\n                                            bgColor={backgroundColor}\n                                            bgColor2={backgroundColor2}\n                                            clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotText\n                                                style={{ color: color }}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotText>\n                                            {isActualSlot && (\n                                                <VisuallyHidden>\n                                                    <button\n                                                        type=\"button\"\n                                                        ref={(element) => {\n                                                            slotButtonRefs.current[\n                                                                slotKey\n                                                            ] = element;\n                                                        }}\n                                                        aria-disabled={\n                                                            !clickable\n                                                        }\n                                                        aria-label={getSlotAriaLabel(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                        onKeyDown={(event) =>\n                                                            handleSlotKeyDown(\n                                                                event,\n                                                                {\n                                                                    key: slotKey,\n                                                                    date: formattedDate,\n                                                                    rowIndex,\n                                                                }\n                                                            )\n                                                        }\n                                                        onClick={handleSlotButtonClick(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                    />\n                                                </VisuallyHidden>\n                                            )}\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </TimeSlotWrapper>\n                    );\n                })}\n            </ColumnWeekCell>\n        );\n    };\n\n    return (\n        <Wrapper role=\"grid\">\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </Wrapper>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","Colour","backgroundColor2","TimeSlotWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","slotButtonRefs","useRef","handleSlotClick","date","slot","handleSlotButtonClick","event","stopPropagation","_a","handleDayHover","value","handleDayHoverClear","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","handleSlotKeyDown","currentSlot","sameColumnSlots","formattedDate","map","index","key","rowIndex","focusSlot","current","focus","preventDefault","currentIndex","findIndex","length","getSlotAriaLabel","slotStartTime","slotEndTime","concatIds","TimeHelper","formatTimeRange","label","_jsxs","Wrapper","role","children","_jsx","HeaderRow","onBlur","HeaderCellWeek","DayCell","Object","assign","handleDayClick","onHover","onHoverEnd","onFocus","tabIndex","DayLabel","$disabled","ColumnWeekCell","dayIndex","TimeSlotWrapper","slotKey","isActualSlot","TimeSlotComponent","bgColor","bgColor2","onClick","TimeSlotText","style","convertTo12HourFormat","VisuallyHidden","type","ref","element","onKeyDown"],"mappings":"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"}

package/time-slot-week-view/time-slot-week-days.style.d.ts

@@ -1,10 +1,12 @@
 interface LabelStyleProps {
     $disabled: boolean | undefined;
 }
-export declare const HeaderCellWeek: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DayLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LabelStyleProps>> & string;
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ColumnWeekCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeSlotText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimeSlotWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HeaderCellWeek: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const HeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const DayLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & LabelStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & LabelStyleProps, never>>> & string;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ColumnWeekCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TimeSlotText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TimeSlotComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/time-slot").TimeSlotProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("../shared/time-slot").TimeSlotProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("../shared/time-slot").TimeSlotProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const TimeSlotWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/time-slot-week-view/time-slot-week-days.style.js

@@ -1,41 +1,59 @@
-import e,{css as i}from"styled-components";import{V3_Font as t,V3_Colour as l}from"../v3_theme/index.js";const o=e.div`
+import e,{css as t}from"styled-components";import{TimeSlot as i}from"../shared/time-slot/time-slot.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as r}from"../theme/tokens/colour.js";import{Font as o}from"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";const m=e.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     user-select: none;
     margin-bottom: 0.188rem;
-`,d=e.div`
-    ${t["body-xs-semibold"]}
-    color:${l.text};
+`,l=e.div`
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+`,s=e.div`
+    ${o["body-xs-semibold"]}
+    color:${r.text};
 
-    ${e=>e.$disabled&&i`
-            color: ${l["text-disabled-subtlest"]};
+    ${e=>e.$disabled&&t`
+            color: ${r["text-disabled-subtlest"]};
         `};
-`,r=e.div`
+`,n=e.div`
     width: 100%;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-`,n=e.div`
+`,d=e.div`
     grid-column: 1 / -1;
     display: flex;
     min-height: 7.625rem;
-`,m=e.div`
-    ${t["body-xs-semibold"]}
+`,p=e.div`
+    ${o["body-xs-semibold"]}
     margin: 1rem 0rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     max-width: 2.5rem;
-    color: ${l.text};
+    color: ${r.text};
     span {
         display: block;
     }
-`,s=e.div`
+`,a=e(i)`
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 1px 0px;
+    position: relative;
+
+    &:focus-within {
+        outline: 2px solid ${r["focus-ring"]};
+        outline-offset: 2px;
+        z-index: 1;
+    }
+`,c=e.div`
     display: flex;
     flex-direction: column;
     flex: 1;
     margin: 1px;
-`;export{n as ColumnWeekCell,d as DayLabel,o as HeaderCellWeek,m as TimeSlotText,s as TimeSlotWrapper,r as Wrapper};
+`;export{d as ColumnWeekCell,s as DayLabel,m as HeaderCellWeek,l as HeaderRow,a as TimeSlotComponent,p as TimeSlotText,c as TimeSlotWrapper,n as Wrapper};
 //# sourceMappingURL=time-slot-week-days.style.js.map

package/time-slot-week-view/time-slot-week-days.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.style.js","sources":["../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Font } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${V3_Font[\"body-xs-semibold\"]}\n    color:${V3_Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${V3_Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${V3_Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${V3_Colour.text};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","DayLabel","V3_Font","V3_Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","text","TimeSlotWrapper"],"mappings":"yGAcO,MAAMA,EAAiBC,EAAOC,GAAG;;;;;;;EAS3BC,EAAWF,EAAOC,GAAoB;MAC7CE,EAAQ;YACFC,EAAgB;;MAErBC,GACCA,EAAMC,WACNC,CAAG;qBACUH,EAAU;;EAIlBI,EAAUR,EAAOC,GAAG;;;;EAMpBQ,EAAiBT,EAAOC,GAAG;;;;EAM3BS,EAAeV,EAAOC,GAAG;MAChCE,EAAQ;;;;;;;aAODC,EAAUO;;;;EAMVC,EAAkBZ,EAAOC,GAAG;;;;;"}
+{"version":3,"file":"time-slot-week-days.style.js","sources":["../../src/time-slot-week-view/time-slot-week-days.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { TimeSlot } from \"../shared/time-slot\";\nimport { Colour, Font } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface LabelStyleProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HeaderCellWeek = styled.div`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const HeaderRow = styled.div`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const DayLabel = styled.div<LabelStyleProps>`\n    ${Font[\"body-xs-semibold\"]}\n    color:${Colour[\"text\"]};\n\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-disabled-subtlest\"]};\n        `};\n`;\n\nexport const Wrapper = styled.div`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const ColumnWeekCell = styled.div`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const TimeSlotText = styled.div`\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: ${Colour[\"text\"]};\n    span {\n        display: block;\n    }\n`;\n\nexport const TimeSlotComponent = styled(TimeSlot)`\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    margin: 1px 0px;\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["HeaderCellWeek","styled","div","HeaderRow","DayLabel","Font","Colour","props","$disabled","css","Wrapper","ColumnWeekCell","TimeSlotText","TimeSlotComponent","TimeSlot","TimeSlotWrapper"],"mappings":"mlBAeO,MAAMA,EAAiBC,EAAOC,GAAG;;;;;;;EAS3BC,EAAYF,EAAOC,GAAG;;;;EAMtBE,EAAWH,EAAOC,GAAoB;MAC7CG,EAAK;YACCC,EAAa;;MAElBC,GACCA,EAAMC,WACNC,CAAG;qBACUH,EAAO;;EAIfI,EAAUT,EAAOC,GAAG;;;;EAMpBS,EAAiBV,EAAOC,GAAG;;;;EAM3BU,EAAeX,EAAOC,GAAG;MAChCG,EAAK;;;;;;;aAOEC,EAAa;;;;EAMbO,EAAoBZ,EAAOa,EAAS;;;;;;;;;;6BAUpBR,EAAO;;;;EAMvBS,EAAkBd,EAAOC,GAAG;;;;;"}

package/time-slot-week-view/time-slot-week-view.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 n,useEffect as o}from"react";import{CalendarManager as i}from"../shared/internal-calendar/calendar-manager.js";import"../util/calendar-helper.js";import{DateHelper as l}from"../util/date-helper.js";import"../util/string-helper.js";import{TimeSlotWeekDays as s}from"./time-slot-week-days.js";import{Wrapper as d}from"./time-slot-week-view.styles.js";const m="YYYY-MM-DD",c=c=>{var{disabledDates:D,onWeekDisplayChange:f,onChange:w,value:k,minDate:h,maxDate:g,slots:u,showNavigationHeader:p=!0,enableSelection:b,onSlotClick:j,currentCalendarDate:y}=c,C=e(c,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[v,S]=r(k),Y=n(null),O=n(void 0);o((()=>{S(k)}),[k]);const x=e=>{const a=e.format(m);S(a),null==w||w(a)},H=(e,a)=>{j&&j(e,a)},M=e=>{if(f){const a={week:{firstDayOfWeek:e.startOf("week").format(m),lastDayOfWeek:e.endOf("week").format(m)},month:e.month()+1,year:e.year()};f(a)}};return a(d,Object.assign({},C,{children:a(i,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.toDayjs(v||y).endOf("week").format(m),selectedStartDate:v,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!h&&t(e).subtract(1,"week").isBefore(h,"week"),isRightArrowDisabled:e=>!!g&&t(e).add(1,"week").isAfter(g,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||M(e),O.current=e},showNavigationHeader:p,minDate:h,maxDate:g,getMonthHeaderLabel:e=>t(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t(e).endOf("week").format("YYYY"),children:({calendarDate:e})=>a(s,{calendarDate:e,disabledDates:D,selectedDate:v,minDate:h,maxDate:g,onSelect:x,slots:u,enableSelection:b,onSlotClick:H})})}))};export{c as TimeSlotWeekView};
+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 n,useEffect as i}from"react";import{CalendarManager as o}from"../shared/internal-calendar/calendar-manager.js";import"../util/calendar-helper.js";import{DateHelper as l}from"../util/date-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeSlotWeekDays as s}from"./time-slot-week-days.js";import{Wrapper as m}from"./time-slot-week-view.styles.js";const d="YYYY-MM-DD",c=c=>{var{disabledDates:D,onWeekDisplayChange:f,onChange:w,value:k,minDate:h,maxDate:u,slots:g,showNavigationHeader:p=!0,enableSelection:b,onSlotClick:j,currentCalendarDate:y}=c,C=e(c,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[v,S]=r(k),Y=n(null),O=n(void 0);i((()=>{S(k)}),[k]);const x=e=>{const a=e.format(d);S(a),null==w||w(a)},H=(e,a)=>{j&&j(e,a)},M=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({},C,{children:a(o,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.toDayjs(v||y).endOf("week").format(d),selectedStartDate:v,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!h&&t(e).subtract(1,"week").isBefore(h,"week"),isRightArrowDisabled:e=>!!u&&t(e).add(1,"week").isAfter(u,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||M(e),O.current=e},showNavigationHeader:p,minDate:h,maxDate:u,getMonthHeaderLabel:e=>t(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t(e).endOf("week").format("YYYY"),isFocusable:!0,children:({calendarDate:e})=>a(s,{calendarDate:e,disabledDates:D,selectedDate:v,minDate:h,maxDate:u,onSelect:x,slots:g,enableSelection:b,onSlotClick:H})})}))};export{c as TimeSlotWeekView};
 //# sourceMappingURL=time-slot-week-view.js.map

package/time-slot-week-view/time-slot-week-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-view.js","sources":["../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport { Wrapper } from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotWeekView","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","TimeSlotWeekDays","onSelect"],"mappings":"igBAYA,MAAMA,EAAc,aAEPC,EAAoBC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAA6BZ,GAC/Da,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAO1B,GACjCiB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAO1B,GAC7CmC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAO1B,IAE9CqC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAACC,EAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAACK,EAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAdDC,EAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO1B,GAaJkD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBlD,GACFmD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASpD,EAAS,QAE3BqD,qBAAuBH,KACjBjD,GACFkD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQrD,EAAS,QAExDsD,qBA1DwBxD,IAE3Be,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO1D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB0C,QAAUzD,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACTyD,oBAAsBR,GAClBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAAOiB,SAGnD,EAAGc,kBAEIlB,EAAC4B,GACGV,aAAcA,EACdtD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT4D,SAAU5C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAKvB"}
+{"version":3,"file":"time-slot-week-view.js","sources":["../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport { Wrapper } from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotWeekView","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotWeekDays","onSelect"],"mappings":"2kBAYA,MAAMA,EAAc,aAEPC,EAAoBC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAA6BZ,GAC/Da,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAO1B,GACjCiB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAO1B,GAC7CmC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAO1B,IAE9CqC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAACC,EAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAACK,EAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAdDC,EAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO1B,GAaJkD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBlD,GACFmD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASpD,EAAS,QAE3BqD,qBAAuBH,KACjBjD,GACFkD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQrD,EAAS,QAExDsD,qBA1DwBxD,IAE3Be,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO1D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB0C,QAAUzD,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACTyD,oBAAsBR,GAClBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAE7CyC,aAAa,EAAIxB,SAEhB,EAAGc,kBAEIlB,EAAC6B,GACGX,aAAcA,EACdtD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT6D,SAAU7C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAKvB"}

package/time-slot-week-view/time-slot-week-view.styles.d.ts

@@ -1 +1 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/timeline/timeline.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"react";import{jsxs as t,jsx as i,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{Typography as s}from"../typography/index.js";import{TimelineWrapper as l,TimelineTitle as d,TimelineItem as o,TimelineIndicators as m,CircleIndicator as p,LineIndicator as u,TimelineItemContent as h,TimelinePills as f,TimelineItemTitle as v,TimelinePill as g}from"./timeline.style.js";const y=({items:y,className:$,id:b,title:w,startCol:N,colSpan:j,"data-base-indicator-testid":x,"data-testid":C="timeline",headingLevel:S=2,counterOffset:A=0})=>{const O=e=>"string"==typeof e?i(s.BodyMD,{className:"timeline-item-content-text",children:e}):i(r,{children:e}),U=(e,t)=>"string"==typeof e?i(v,{forwardedAs:"h3","aria-level":t,weight:"semibold",className:"timeline-item-title",children:e}):i(r,{children:e}),_=t=>t.slice(0,2).map(((t,i)=>e(g,Object.assign({},t,{type:t.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),t.children))),k=(e,t)=>{switch(e){case"completed":return i(n,{"aria-hidden":!0});case"error":return i(a,{"aria-hidden":!0});case"numeric":return i("span",{"aria-hidden":!0,children:t+1+A});default:return null}},q=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+A}`;default:return""}};return t(l,{className:$,id:b,"data-testid":C,$startCol:N,$colSpan:j,children:[i(d,{forwardedAs:"h2","aria-level":S,"data-testid":"timeline-title",weight:"bold",children:w}),i("div",{role:"list",children:y.map(((e,r)=>{const{title:a,content:n,statuses:s,variant:l}=e,d=l||(0===r?"current":"upcoming-active");return t(o,{role:"listitem",children:[t(m,{children:[t(p,{"data-testid":x?`circleindicator${r+1}_div_${x}`:"circleindicator",$variant:d,children:[i(c,{children:q(d,r)}),k(d,r)]}),i(u,{$variant:d})]}),t(h,{className:"timeline-item-content",children:[U(a,S+1),s&&i(f,{children:_(s)}),O(n)]})]},`timeline-item-${r}`)}))})]})};export{y as Timeline};
+import{useRef as e,createElement as t}from"react";import{jsxs as i,jsx as r,Fragment as s}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import l from"clsx";import{Pill as c}from"../pill/pill.js";import{VisuallyHidden as m}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as d}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as o}from"../typography/index.js";import{tokens as p,timelineTitle as u,timelineWrapper as h,timelineItem as v,timelineIndicators as f,circleIndicator as g,lineIndicator as j,timelinePills as y,timelineItemContent as N,timelineItemTitle as b}from"./timeline.styles.js";const x=({items:x,className:w,id:k,title:C,startCol:S,colSpan:$,"data-base-indicator-testid":q,"data-testid":H="timeline",headingLevel:M=2,counterOffset:O=0})=>{const U=e(null);d(U,{[p.wrapper.startCol]:S,[p.wrapper.colSpan]:$});const _=e=>"string"==typeof e?r(o.BodyMD,{className:"timeline-item-content-text",children:e}):r(s,{children:e}),B=(e,t)=>"string"==typeof e?r(o.HeadingXS,{as:"h3","aria-level":t,weight:"semibold",className:l(b,"timeline-item-title"),children:e}):r(s,{children:e}),D=e=>e.slice(0,2).map(((e,i)=>t(c,Object.assign({},e,{type:e.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),e.children))),I=(e,t)=>{switch(e){case"completed":return r(n,{"aria-hidden":!0});case"error":return r(a,{"aria-hidden":!0});case"numeric":return r("span",{"aria-hidden":!0,children:t+1+O});default:return null}},L=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+O}`;default:return""}};return i("div",{ref:U,className:l(h,w),id:k,"data-testid":H,children:[r(o.HeadingSM,{as:"h2","aria-level":M,"data-testid":"timeline-title",weight:"bold",className:u,children:C}),r("div",{role:"list",children:x.map(((e,t)=>{const{title:s,content:a,statuses:n,variant:c}=e,d=c||(0===t?"current":"upcoming-active");return i("div",{role:"listitem",className:v,children:[i("div",{className:f,children:[i("div",{"data-testid":q?`circleindicator${t+1}_div_${q}`:"circleindicator",className:g,"data-variant":d,children:[r(m,{children:L(d,t)}),I(d,t)]}),r("div",{className:j,"data-variant":d})]}),i("div",{className:l(N,"timeline-item-content"),children:[B(s,M+1),n&&r("div",{className:y,children:D(n)}),_(a)]})]},`timeline-item-${t}`)}))})]})};export{x as Timeline};
 //# sourceMappingURL=timeline.js.map