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

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 r}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`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -7,21 +7,23 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@r
     margin-bottom: ${s["spacing-8"]};
     flex: 1;
 `,m=t(l.BodyXS)`
-    ${e=>e.$disabled&&r`
+    ${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;
+`,C=t.div`
     display: flex;
     margin-top: ${s["spacing-8"]};
-`,C=t(o.Small)`
+`,j=t(r.Small)`
     width: 100%;
     height: 2.5rem;
     span {
@@ -67,12 +67,13 @@ 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`
+`,k=t(n)`
+    ${e=>{if("vertical"===e.$type)return o`
+                position: relative;
                 max-width: 200px;
                 height: ${e.$height}px;
                 min-height: ${e.$height}px;
@@ -80,7 +81,12 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@r
                 border-radius: ${p.xs};
             `}}
 
-    ${e=>e.$halfFill?r`
+    &:focus-within {
+        outline: 2px solid ${a["focus-ring"]};
+        outline-offset: -2px;
+    }
+
+    ${e=>e.$halfFill?o`
                 background: linear-gradient(
                         to ${e.$halfFill},
                         ${"stripes"===e.$styleType?"transparent":e.$bgColor}
@@ -88,8 +94,8 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons";import{animated as i}from"@r
                         ${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`
+            `: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{m as CellWeekText,S as ChevronIcon,j as CollapseExpandAllButton,C as CollapseExpandAllWrapper,u as ColumnWeekCell,x as Expandable,c as GridWrapper,$ 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 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`;\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    ${(props) => {\n        if (props.$type === \"vertical\") {\n            return css`\n                position: relative;\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    &: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                            ${\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","GridWrapper","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;;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;MAC7D1B,IACC,GAAoB,aAAhBA,EAAM2B,MACN,OAAOzB,CAAG;;;0BAGIF,EAAMY;8BACFZ,EAAMY;;iCAEHgB,EAAc;aAEvC;;;6BAIqBzB,EAAU;;;;MAIhCH,GACMA,EAAM6B,UAKA3B,CAAG;;6BAEOF,EAAM6B;0BACY,YAArB7B,EAAM8B,WACE,cACA9B,EAAM+B;;0BAEd5B,EAAU;;sBAEO,YAArBH,EAAM8B,YACR,kGAEU9B,EAAMgC,WAAa7B,EAAU,qDAE3BH,EAAMgC,WAAa7B,EAAU,sDAE/BH,EAAM+B,UAAY5B,EAAU,qDAC5BH,EAAM+B,UAAY5B,EAAU;cArBvCD,CAAG;oCACcF,EAAM+B;;"}

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 l from"../external/dayjs/plugin/isBetween.js";import{useMemo as a,useState as o,useRef as n}from"react";import{VisuallyHidden as i,concatIds as c}from"../shared/accessibility/index.js";import{DayCell as d}from"../shared/internal-calendar/day-cell/day-cell.js";import{CalendarHelper as s}from"../util/calendar-helper.js";import{TimeHelper as u}from"../util/time-helper.js";import{V3_Colour as m}from"../v3_theme/index.js";import{Wrapper as p,HeaderRow as b,HeaderCellWeek as v,DayLabel as y,ColumnWeekCell as h,TimeSlotWrapper as f,TimeSlotComponent as k,TimeSlotText as g}from"./time-slot-week-days.style.js";t.extend(l);const D="YYYY-MM-DD",T={id:"1",startTime:"",endTime:"",clickable:!1,styleAttributes:{color:"",styleType:"stripes",backgroundColor:m["bg-stronger"],backgroundColor2:m["bg-strongest"]}},w=({calendarDate:l,disabledDates:m,selectedDate:w,onSelect:$,minDate:j,maxDate:x,slots:C,enableSelection:Y=!0,onSlotClick:A})=>{const M=a((()=>s.generateDaysForCurrentWeek(l)),[l]),[R,H]=o(),S=n({}),F=(e,r)=>{null==A||A(e,r)},I=(e,r)=>t=>{var l;t.stopPropagation(),(null===(l=r.clickable)||void 0===l||l)&&F(e,r)},L=e=>{H(e)},P=()=>{H(void 0)},U=e=>{const r=e.format(D),l=(e=>{const r=s.isWithinRange(e,j?t(j):void 0,x?t(x):void 0),l=!!m&&m.includes(e.format(D));return!r||l})(e),a=Y&&!l,o=a&&R&&e.isSame(R,"day"),n=[w].includes(r),i={labelType:"available",interactive:!!Y&&a};return l&&(i.disabled=!0,i.labelType="unavailable"),n&&o?(i.labelType="selected-hover",i.circleLeft="selected-hover-outline",i.circleRight="selected-hover-outline"):n?(i.labelType="selected",i.circleLeft="selected-outline",i.circleRight="selected-outline"):o&&(i.labelType="hover",i.circleLeft="hover-subtle",i.circleRight="hover-subtle"),i},B=(e,r)=>{const t=(l=r.date,(null!==(a=null==C?void 0:C[l])&&void 0!==a?a:[]).map(((e,r)=>({key:`${l}-${e.id}`,date:l,rowIndex:r}))));var l,a;const o=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 l=t.findIndex((e=>e.key===r.key));o(t[l+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const l=t.findIndex((e=>e.key===r.key));o(t[l-1]);break}case"Home":case"PageUp":e.preventDefault(),o(t[0]);break;case"End":case"PageDown":e.preventDefault(),o(t[t.length-1])}},E=(e,r)=>{var l;const{startTime:a,endTime:o}=r;return c(t(e).format("D MMMM YYYY dddd"),a&&o?u.formatTimeRange(a,o):void 0,r.label,null===(l=r.clickable)||void 0===l||l?"Available":"Unavailable")};return e(p,{role:"grid",children:[r(b,{role:"row",onBlur:P,children:M.map(((l,a)=>{const o=U(l);return e(v,{role:"presentation",children:[r(d,Object.assign({date:l,calendarDate:t(w),onSelect:()=>{((e,r)=>{!r&&Y&&$(e)})(l,!o.interactive)},onHover:L,onHoverEnd:P,onFocus:L,role:"columnheader",tabIndex:o.interactive?0:-1},o),`day-${a}`),r(y,{"aria-hidden":!0,$disabled:o.disabled,children:t(l).format("ddd")})]},`week-day-${a}`)}))}),r(h,{role:"row",children:M.map(((t,l)=>{var a;const o=t.format(D),n=null!==(a=null==C?void 0:C[o])&&void 0!==a?a:[T];return r(f,{role:"gridcell",children:n&&n.map(((t,l)=>{const{id:a,startTime:n,endTime:c,clickable:d=!0,styleAttributes:u}=t,{color:m,styleType:p="default",backgroundColor:b,backgroundColor2:v}=u,y=`${o}-${a}`,h=t!==T;return e(k,{$type:"vertical",$variant:"default",$styleType:p,$bgColor:b,$bgColor2:v,$clickable:d,onClick:()=>d&&F(o,t),children:[e(g,{style:{color:m},children:[r("span",{children:s.convertTo12HourFormat(n)}),c&&n&&r("span",{children:"-"}),r("span",{children:s.convertTo12HourFormat(c)})]}),h&&r(i,{children:r("button",{type:"button",ref:e=>{S.current[y]=e},"aria-disabled":!d,"aria-label":E(o,t),onKeyDown:e=>B(e,{key:y,date:o}),onClick:I(o,t)})})]},a)}))},`wrapper-${l}`)}))},`week-cell-${l.format(D)}`)]})};export{w 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 type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { V3_Colour } from \"../v3_theme\";\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: 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    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                                            $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                                            {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","V3_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","$type","$variant","$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,22 @@
 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<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps> & import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps> & import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps> & import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps> & import("../time-slot-bar/time-slot-bar.styles").TimeSlotStyleProps, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, 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> & 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,53 @@
-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"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as i}from"../theme/tokens/colour.js";import{Font as r}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{TimeSlot as o}from"../time-slot-bar/time-slot-bar.styles.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`
+    ${r["body-xs-semibold"]}
+    color:${i.text};
 
-    ${e=>e.$disabled&&i`
-            color: ${l["text-disabled-subtlest"]};
+    ${e=>e.$disabled&&t`
+            color: ${i["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`
+    ${r["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: ${i.text};
     span {
         display: block;
     }
-`,s=e.div`
+`,a=e(o)`
+    position: relative;
+
+    &:focus-within {
+        outline: 2px solid ${i["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 { Colour, Font } from \"../theme\";\nimport { TimeSlot } from \"../time-slot-bar/time-slot-bar.styles\";\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    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":"ijBAeO,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;;;;6BAIpBR,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;