npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2348) hide show

package/shared/internal-calendar/single/single-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"single-cell.js","sources":["../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n selectedDate: string \| undefined;\n hoverDate: string \| undefined;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n showActiveMonthDaysOnly?: boolean \| undefined;\n onSelect: (value: Dayjs, disabled: boolean) => void;\n onHover: (value: string, disabled: boolean) => void;\n onFocus: (value: string) => void;\n setFocusCell: (value: string) => void;\n tabIndex: number;\n}\n\nexport const SingleCell = ({\n date,\n calendarDate,\n selectedDate,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onSelect,\n onHover,\n onFocus,\n setFocusCell,\n tabIndex,\n}: Props) => {\n // =========================================================================\n // CONSTS\n // =========================================================================\n const disabled = CalendarHelper.isDisabledDay(\n date,\n disabledDates,\n minDate,\n maxDate\n );\n const interactive = !disabled \|\| allowDisabledSelection;\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelect = () => {\n onSelect(date, !interactive);\n };\n\n const handleHover = () => {\n onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n };\n\n const handleFocus = () => {\n onFocus(date.format(\"YYYY-MM-DD\"));\n };\n\n const handleKeyNavigation = (event: React.KeyboardEvent) => {\n let newFocusSelection: Dayjs \| undefined;\n\n const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowLeft: () => date.subtract(1, \"day\"),\n ArrowRight: () => date.add(1, \"day\"),\n ArrowUp: () => date.subtract(7, \"day\"),\n ArrowDown: () => date.add(7, \"day\"),\n Home: () => date.startOf(\"week\"),\n End: () => date.endOf(\"week\"),\n PageUp: () => {\n return event.shiftKey\n ? date.subtract(1, \"year\")\n : date.subtract(1, \"month\");\n },\n PageDown: () => {\n return event.shiftKey\n ? date.add(1, \"year\")\n : date.add(1, \"month\");\n },\n };\n\n const action = keyActions[event.key];\n if (action) {\n event.preventDefault();\n newFocusSelection = action();\n setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n const selectedKey = keyboardEvent.key;\n\n if (selectedKey === \"Enter\" \|\| selectedKey === \" \") {\n event.preventDefault();\n if (interactive) {\n handleSelect();\n }\n return;\n }\n\n handleKeyNavigation(event);\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = showActiveMonthDaysOnly\n ? \"hidden\"\n : \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n }\n\n const isSelected = date.isSame(selectedDate, \"day\");\n const isHover = date.isSame(hoverDate, \"day\");\n\n if (isSelected && isHover) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover-outline\";\n props.circleRight = \"selected-hover-outline\";\n } else if (isSelected) {\n props.labelType = \"selected\";\n props.circleLeft = \"selected-outline\";\n props.circleRight = \"selected-outline\";\n } else if (isHover) {\n props.labelType = \"hover\";\n props.circleLeft = \"hover-subtle\";\n props.circleRight = \"hover-subtle\";\n }\n\n return props;\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const commonProps: DayCellProps = {\n date,\n calendarDate,\n disabled,\n interactive,\n currentDateIndicator: true,\n onSelect: handleSelect,\n onHover: handleHover,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n role: \"gridcell\",\n focusDate: dayjs(focusDate),\n tabIndex,\n };\n\n return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["SingleCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"~~qQAyBO~~,MAAMA,EAAa,EACtBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAMzC,GACjBU,YAGJ,OAAOgC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,IAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,EAAatD,EAAKqD,OAAOnD,EAAc,OACvCqD,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}
1	+ {"version":3,"file":"single-cell.js","sources":["../../../../src/shared/internal-calendar/single/single-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n selectedDate: string \| undefined;\n hoverDate: string \| undefined;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n showActiveMonthDaysOnly?: boolean \| undefined;\n onSelect: (value: Dayjs, disabled: boolean) => void;\n onHover: (value: string, disabled: boolean) => void;\n onFocus: (value: string) => void;\n setFocusCell: (value: string) => void;\n tabIndex: number;\n}\n\nexport const SingleCell = ({\n date,\n calendarDate,\n selectedDate,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n onSelect,\n onHover,\n onFocus,\n setFocusCell,\n tabIndex,\n}: Props) => {\n // =========================================================================\n // CONSTS\n // =========================================================================\n const disabled = CalendarHelper.isDisabledDay(\n date,\n disabledDates,\n minDate,\n maxDate\n );\n const interactive = !disabled \|\| allowDisabledSelection;\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelect = () => {\n onSelect(date, !interactive);\n };\n\n const handleHover = () => {\n onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n };\n\n const handleFocus = () => {\n onFocus(date.format(\"YYYY-MM-DD\"));\n };\n\n const handleKeyNavigation = (event: React.KeyboardEvent) => {\n let newFocusSelection: Dayjs \| undefined;\n\n const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowLeft: () => date.subtract(1, \"day\"),\n ArrowRight: () => date.add(1, \"day\"),\n ArrowUp: () => date.subtract(7, \"day\"),\n ArrowDown: () => date.add(7, \"day\"),\n Home: () => date.startOf(\"week\"),\n End: () => date.endOf(\"week\"),\n PageUp: () => {\n return event.shiftKey\n ? date.subtract(1, \"year\")\n : date.subtract(1, \"month\");\n },\n PageDown: () => {\n return event.shiftKey\n ? date.add(1, \"year\")\n : date.add(1, \"month\");\n },\n };\n\n const action = keyActions[event.key];\n if (action) {\n event.preventDefault();\n newFocusSelection = action();\n setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n const selectedKey = keyboardEvent.key;\n\n if (selectedKey === \"Enter\" \|\| selectedKey === \" \") {\n event.preventDefault();\n if (interactive) {\n handleSelect();\n }\n return;\n }\n\n handleKeyNavigation(event);\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = showActiveMonthDaysOnly\n ? \"hidden\"\n : \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n }\n\n const isSelected = date.isSame(selectedDate, \"day\");\n const isHover = date.isSame(hoverDate, \"day\");\n\n if (isSelected && isHover) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover-outline\";\n props.circleRight = \"selected-hover-outline\";\n } else if (isSelected) {\n props.labelType = \"selected\";\n props.circleLeft = \"selected-outline\";\n props.circleRight = \"selected-outline\";\n } else if (isHover) {\n props.labelType = \"hover\";\n props.circleLeft = \"hover-subtle\";\n props.circleRight = \"hover-subtle\";\n }\n\n return props;\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const commonProps: DayCellProps = {\n date,\n calendarDate,\n disabled,\n interactive,\n currentDateIndicator: true,\n onSelect: handleSelect,\n onHover: handleHover,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n role: \"gridcell\",\n focusDate: dayjs(focusDate),\n tabIndex,\n };\n\n return <DayCell {...commonProps} {...getCellStyle()} />;\n};\n"],"names":["SingleCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","dayjs","_jsx","DayCell","Object","assign","props","month","labelType","isSame","isSelected","isHover","circleLeft","circleRight","getCellStyle"],"mappings":"qVAyBO,MAAMA,EAAa,EACtBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,0BACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BjB,EACAO,EACAF,EACAC,GAEEY,GAAeH,GAAYP,EAK3BW,EAAe,KACjBT,EAASV,GAAOkB,EAAY,EA8F1BE,EAA4B,CAC9BpB,OACAC,eACAc,WACAG,cACAG,sBAAsB,EACtBX,SAAUS,EACVR,QAlGgB,KAChBA,EAAQX,EAAKsB,OAAO,eAAgBJ,EAAY,EAkGhDN,QA/FgB,KAChBA,EAAQZ,EAAKsB,OAAO,cAAc,EA+FlCC,UA9DmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACFT,GACAC,KArCgB,CAACK,IACzB,IAAII,EAEJ,MAmBMC,EAnBgD,CAClDC,UAAW,IAAM9B,EAAK+B,SAAS,EAAG,OAClCC,WAAY,IAAMhC,EAAKiC,IAAI,EAAG,OAC9BC,QAAS,IAAMlC,EAAK+B,SAAS,EAAG,OAChCI,UAAW,IAAMnC,EAAKiC,IAAI,EAAG,OAC7BG,KAAM,IAAMpC,EAAKqC,QAAQ,QACzBC,IAAK,IAAMtC,EAAKuC,MAAM,QACtBC,OAAQ,IACGhB,EAAMiB,SACPzC,EAAK+B,SAAS,EAAG,QACjB/B,EAAK+B,SAAS,EAAG,SAE3BW,SAAU,IACClB,EAAMiB,SACPzC,EAAKiC,IAAI,EAAG,QACZjC,EAAKiC,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBhB,EAAae,EAAkBN,OAAO,eAC1C,EAeAqB,CAAoBnB,EAAM,EAmD1BoB,KAAM,WACNxC,UAAWyC,EAAMzC,GACjBU,YAGJ,OAAOgC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAK7B,EAlDC,MACjB,MAAM8B,EAAwB,CAAA,EAE1BjD,EAAakD,UAAYnD,EAAKmD,QAC9BD,EAAME,UAAY3C,EACZ,SACA,cACCoC,IAAQQ,OAAOrD,EAAM,SAAWe,IACvCmC,EAAME,UAAY,WAGtB,MAAME,EAAatD,EAAKqD,OAAOnD,EAAc,OACvCqD,EAAUvD,EAAKqD,OAAOlD,EAAW,OAgBvC,OAdImD,GAAcC,GACdL,EAAME,UAAY,iBAClBF,EAAMM,WAAa,yBACnBN,EAAMO,YAAc,0BACbH,GACPJ,EAAME,UAAY,WAClBF,EAAMM,WAAa,mBACnBN,EAAMO,YAAc,oBACbF,IACPL,EAAME,UAAY,QAClBF,EAAMM,WAAa,eACnBN,EAAMO,YAAc,gBAGjBP,CAAK,EAsBqBQ,IAAkB"}

package/shared/internal-calendar/standard/index.d.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from "./standard-calendar-day-view";
2	- export * from "./standard-calendar-day-view.style";

package/shared/internal-calendar/standard/standard-calendar-day-view.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import type { Dayjs } from "dayjs";
 import type { CommonCalendarProps, FocusType } from "../types";
-export type DayVariant = "default" | "other-month" | "today";
 interface CalendarDayViewProps extends CommonCalendarProps {
     selectedStartDate: string | undefined;
     selectedEndDate: string | undefined;

package/shared/internal-calendar/standard/standard-calendar-day-view.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import a from"../../../external/dayjs/dayjs.min.js";import r from"../../../external/dayjs/plugin/isBetween.js";import{useRef as n,useEffect as o,useCallback as i,useMemo as s,useState as l}from"react";import{CalendarHelper as d}from"../../../util/calendar-helper.js";import{Wrapper as c,HeaderCell as m,RowDayCell as u}from"./standard-calendar-day-view.style.js";import{StandardCell as D}from"./standard-cell.js";a.extend(r);const h=({calendarDate:r,currentFocus:h,disabledDates:f,selectedStartDate:p,selectedEndDate:y,onSelect:S,onHover:v,isNewSelection:w,minDate:j,maxDate:x,allowDisabledSelection:b,showActiveMonthDaysOnly:g,setCalendarDate:F})=>{const M=n(null);o((()=>{if(M.current){const e=M.current;M.current=null,C(e)}}),[r]);const O=i((()=>p&&a(p).isSame(r,"month")?a(p):y&&a(y).isSame(r,"month")?a(y):a().isSame(r,"month")?a():j&&r.isSame(a(j),"month")?a(j):a(r).startOf("month")),[p,r,y,j]),$=e=>{const t=a(e);if(d.isWithinRange(t,j?a(j):void 0,x?a(x):void 0)){if(!t.isSame(r,"month"))return null==F||F(e),void(M.current=e);C(e)}},k=s((()=>d.generateDays(r)),[r]),A=s((()=>O()),[O]),[B,C]=l(""),[H,N]=l(""),T=(e,t)=>{t&&!b||S(e)},W=(e,t)=>{t&&!b||(N(e),v(e))},E=e=>{N(e),v(e)},I=()=>{N(""),v("")};return e(c,{role:"grid","aria-label":"Date grid","data-testid":"calendar-content",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(C(""),N(""),v(""))},children:[k[0].map(((e,r)=>t(m,{"aria-hidden":!0,children:a(e).format("ddd")},`week-day-${r}`))),k.map(((e,a)=>t(u,{role:"row","aria-label":`Week ${a+1}`,onMouseLeave:I,children:e.map(((e,a)=>t(D,{date:e,calendarDate:r,startDate:p,endDate:y,hoverDate:H,focusDate:B,currentFocus:h,minDate:j,maxDate:x,disabledDates:f,allowDisabledSelection:b,isNewSelection:w,showActiveMonthDaysOnly:g,onSelect:T,onHover:W,onFocus:E,setFocusCell:$,tabIndex:e.isSame(A,"day")?0:-1},`day-${a}`)))},a)))]})};export{h as StandardCalendarDayView};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import r from"../../../external/dayjs/plugin/isBetween.js";import{useRef as n,useEffect as o,useCallback as s,useMemo as i,useState as l}from"react";import{CalendarHelper as d}from"../../../util/calendar-helper.js";import{wrapper as c,headerCell as m,rowDayCell as u}from"./standard-calendar-day-view.styles.js";import{StandardCell as D}from"./standard-cell.js";t.extend(r);const h=({calendarDate:r,currentFocus:h,disabledDates:f,selectedStartDate:p,selectedEndDate:v,onSelect:y,onHover:S,isNewSelection:w,minDate:j,maxDate:x,allowDisabledSelection:b,showActiveMonthDaysOnly:g,setCalendarDate:N})=>{const F=n(null);o((()=>{if(F.current){const e=F.current;F.current=null,B(e)}}),[r]);const M=s((()=>p&&t(p).isSame(r,"month")?t(p):v&&t(v).isSame(r,"month")?t(v):t().isSame(r,"month")?t():j&&r.isSame(t(j),"month")?t(j):t(r).startOf("month")),[p,r,v,j]),O=e=>{const a=t(e);if(d.isWithinRange(a,j?t(j):void 0,x?t(x):void 0)){if(!a.isSame(r,"month"))return null==N||N(e),void(F.current=e);B(e)}},$=i((()=>d.generateDays(r)),[r]),k=i((()=>M()),[M]),[A,B]=l(""),[C,H]=l(""),T=(e,a)=>{a&&!b||y(e)},W=(e,a)=>{a&&!b||(H(e),S(e))},E=e=>{H(e),S(e)},I=()=>{H(""),S("")};return e("div",{role:"grid","aria-label":"Date grid","data-testid":"calendar-content",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(B(""),H(""),S(""))},className:c,children:[$[0].map(((e,r)=>a("div",{className:m,"aria-hidden":!0,children:t(e).format("ddd")},`week-day-${r}`))),$.map(((e,t)=>a("div",{role:"row","aria-label":`Week ${t+1}`,onMouseLeave:I,className:u,children:e.map(((e,t)=>a(D,{date:e,calendarDate:r,startDate:p,endDate:v,hoverDate:C,focusDate:A,currentFocus:h,minDate:j,maxDate:x,disabledDates:f,allowDisabledSelection:b,isNewSelection:w,showActiveMonthDaysOnly:g,onSelect:T,onHover:W,onFocus:E,setFocusCell:O,tabIndex:e.isSame(k,"day")?0:-1},`day-${t}`)))},t)))]})};export{h as StandardCalendarDayView};
 //# sourceMappingURL=standard-calendar-day-view.js.map

package/shared/internal-calendar/standard/standard-calendar-day-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"standard-calendar-day-view.js","sources":["../../../../src/shared/internal-calendar/standard/standard-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport type { CommonCalendarProps, FocusType } from \"../types\";\nimport {\n HeaderCell,\n RowDayCell,\n Wrapper,\n} from \"./standard-calendar-day-view.style\";\nimport { StandardCell } from \"./standard-cell\";\n\ndayjs.extend(isBetween);\n\n// TODO: to remove after all references have been cleaned up\nexport type DayVariant = \"default\" \| \"other-month\" \| \"today\";\n\ninterface CalendarDayViewProps extends CommonCalendarProps {\n selectedStartDate: string \| undefined;\n selectedEndDate: string \| undefined;\n calendarDate: Dayjs;\n currentFocus?: FocusType \| undefined;\n isNewSelection: boolean;\n onSelect: (value: Dayjs) => void;\n onHover: (value: string) => void;\n setCalendarDate?: ((date: string \| undefined) => void) \| undefined;\n}\n\nexport const StandardCalendarDayView = ({\n calendarDate,\n currentFocus,\n disabledDates,\n selectedStartDate,\n selectedEndDate,\n onSelect,\n onHover,\n isNewSelection,\n minDate,\n maxDate,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n setCalendarDate,\n}: CalendarDayViewProps) => {\n // =============================================================================\n // REFS, EFFECTS\n // =============================================================================\n const pendingFocusRef = useRef<string \| null>(null);\n\n useEffect(() => {\n if (pendingFocusRef.current) {\n const next = pendingFocusRef.current;\n pendingFocusRef.current = null;\n setFocusValue(next);\n }\n }, [calendarDate]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDateToFocus = useCallback(() => {\n // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n // This function determines which date should be focused based on the state of the calendar.\n\n // Selected start date is in the current month\n if (\n selectedStartDate &&\n dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n ) {\n return dayjs(selectedStartDate);\n }\n // Selected end date is in the current month\n if (\n selectedEndDate &&\n dayjs(selectedEndDate).isSame(calendarDate, \"month\")\n ) {\n return dayjs(selectedEndDate);\n }\n\n // Today is in the current month\n if (dayjs().isSame(calendarDate, \"month\")) {\n return dayjs();\n }\n\n // Choose min date if it is in the current month\n if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n return dayjs(minDate);\n }\n\n // Otherwise, return the first day of the month\n return dayjs(calendarDate).startOf(\"month\");\n }, [selectedStartDate, calendarDate, selectedEndDate, minDate]);\n\n const setFocusCell = (value: string) => {\n const valueDayjs = dayjs(value);\n\n if (\n CalendarHelper.isWithinRange(\n valueDayjs,\n minDate ? dayjs(minDate) : undefined,\n maxDate ? dayjs(maxDate) : undefined\n )\n ) {\n if (!valueDayjs.isSame(calendarDate, \"month\")) {\n setCalendarDate?.(value);\n pendingFocusRef.current = value;\n return;\n }\n setFocusValue(value);\n }\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const weeksOfTheMonth = useMemo(\n (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n [calendarDate]\n );\n\n const dateToFocus = useMemo(\n (): Dayjs => getDateToFocus(),\n [getDateToFocus]\n );\n\n const [focusValue, setFocusValue] = useState<string>(\"\");\n const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n\n onSelect(value);\n };\n\n const handleHoverCell = (value: string, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n\n setHoverValue(value);\n onHover(value);\n };\n\n const handleFocusCell = (value: string) => {\n // Always hover the cell when it is focused\n setHoverValue(value);\n onHover(value);\n };\n\n const handleMouseLeaveCell = () => {\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n // Reset focus date when the component loses focus\n setFocusValue(\"\");\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeader = () => {\n return weeksOfTheMonth[0].map((day, index) => (\n <HeaderCell key={`week-day-${index}`} aria-hidden>\n {dayjs(day).format(\"ddd\")}\n </HeaderCell>\n ));\n };\n\n const renderDayCells = () => {\n return weeksOfTheMonth.map((week, weekIndex) => {\n return (\n <RowDayCell\n role=\"row\"\n aria-label={`Week ${weekIndex + 1}`}\n key={weekIndex}\n onMouseLeave={handleMouseLeaveCell}\n >\n {week.map((day, dayIndex) => {\n return (\n <StandardCell\n key={`day-${dayIndex}`}\n date={day}\n calendarDate={calendarDate}\n startDate={selectedStartDate}\n endDate={selectedEndDate}\n hoverDate={hoverValue}\n focusDate={focusValue}\n currentFocus={currentFocus}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n isNewSelection={isNewSelection}\n showActiveMonthDaysOnly={\n showActiveMonthDaysOnly\n }\n onSelect={handleDayClick}\n onHover={handleHoverCell}\n onFocus={handleFocusCell}\n setFocusCell={setFocusCell}\n tabIndex={\n day.isSame(dateToFocus, \"day\") ? 0 : -1\n }\n />\n );\n })}\n </RowDayCell>\n );\n });\n };\n\n return (\n <Wrapper\n role=\"grid\"\n aria-label=\"Date grid\"\n data-testid=\"calendar-content\"\n onBlur={handleOnBlur}\n >\n {renderHeader()}\n {renderDayCells()}\n </Wrapper>\n );\n};\n"],"names":["dayjs","extend","isBetween","StandardCalendarDayView","calendarDate","currentFocus","disabledDates","selectedStartDate","selectedEndDate","onSelect","onHover","isNewSelection","minDate","maxDate","allowDisabledSelection","showActiveMonthDaysOnly","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","Wrapper","role","onBlur","e","currentTarget","contains","relatedTarget","children","map","day","index","_jsx","HeaderCell","format","week","weekIndex","RowDayCell","onMouseLeave","dayIndex","StandardCell","date","startDate","endDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"+cAcAA,EAAMC,OAAOC,GAgBN,MAAMC,EAA0B,EACnCC,eACAC,eACAC,gBACAC,oBACAC,kBACAC,WACAC,UACAC,iBACAC,UACAC,UACAC,yBACAC,0BACAC,sBAKA,MAAMC,EAAkBC,EAAsB,MAE9CC,GAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACjB,IAKJ,MAAMmB,EAAiBC,GAAY,IAM3BjB,GACAP,EAAMO,GAAmBkB,OAAOrB,EAAc,SAEvCJ,EAAMO,GAIbC,GACAR,EAAMQ,GAAiBiB,OAAOrB,EAAc,SAErCJ,EAAMQ,GAIbR,IAAQyB,OAAOrB,EAAc,SACtBJ,IAIPY,GAAWR,EAAaqB,OAAOzB,EAAMY,GAAU,SACxCZ,EAAMY,GAIVZ,EAAMI,GAAcsB,QAAQ,UACpC,CAACnB,EAAmBH,EAAcI,EAAiBI,IAEhDe,EAAgBC,IAClB,MAAMC,EAAa7B,EAAM4B,GAEzB,GACIE,EAAeC,cACXF,EACAjB,EAAUZ,EAAMY,QAAWoB,EAC3BnB,EAAUb,EAAMa,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOrB,EAAc,SAGjC,OAFAY,SAAAA,EAAkBY,QAClBX,EAAgBG,QAAUQ,GAG9BN,EAAcM,EAClB,GAMEK,EAAkBC,GACpB,IAAiBJ,EAAeK,aAAa/B,IAC7C,CAACA,IAGCgC,EAAcF,GAChB,IAAaX,KACb,CAACA,KAGEc,EAAYf,GAAiBgB,EAAiB,KAC9CC,EAAYC,GAAiBF,EAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAC9BA,IAAe5B,GAEnBL,EAASmB,EAAM,EAGbe,EAAkB,CAACf,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdlB,EAAQkB,GAAM,EAGZgB,EAAmBhB,IAErBY,EAAcZ,GACdlB,EAAQkB,EAAM,EAGZiB,EAAuB,KACzBL,EAAc,IACd9B,EAAQ,GAAG,EAoEf,OACIoC,EAACC,EAAO,CACJC,KAAK,OAAM,aACA,YAAW,cACV,mBACZC,OAtEcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/B/B,EAAc,IACdkB,EAAc,IACd9B,EAAQ,IAAG,EA8Da4C,SAAA,CAvDjBrB,EAAgB,GAAGsB,KAAI,CAACC,EAAKC,IAChCC,EAACC,EAAU,CAAA,eAAA,EAAAL,SACNtD,EAAMwD,GAAKI,OAAO,QADN,YAAYH,OAO1BxB,EAAgBsB,KAAI,CAACM,EAAMC,IAE1BJ,EAACK,EAAU,CACPf,KAAK,MAAK,aACE,QAAQc,EAAY,IAEhCE,aAAcnB,EAAoBS,SAEjCO,EAAKN,KAAI,CAACC,EAAKS,IAERP,EAACQ,EAAY,CAETC,KAAMX,EACNpD,aAAcA,EACdgE,UAAW7D,EACX8D,QAAS7D,EACT8D,UAAW/B,EACXgC,UAAWlC,EACXhC,aAAcA,EACdO,QAASA,EACTC,QAASA,EACTP,cAAeA,EACfQ,uBAAwBA,EACxBH,eAAgBA,EAChBI,wBACIA,EAEJN,SAAUgC,EACV/B,QAASiC,EACT6B,QAAS5B,EACTjB,aAAcA,EACd8C,SACIjB,EAAI/B,OAAOW,EAAa,OAAS,GAAI,GArBpC,OAAO6B,QANnBH,OA8CP"}
1	+ {"version":3,"file":"standard-calendar-day-view.js","sources":["../../../../src/shared/internal-calendar/standard/standard-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport type { CommonCalendarProps, FocusType } from \"../types\";\nimport * as styles from \"./standard-calendar-day-view.styles\";\nimport { StandardCell } from \"./standard-cell\";\n\ndayjs.extend(isBetween);\n\ninterface CalendarDayViewProps extends CommonCalendarProps {\n selectedStartDate: string \| undefined;\n selectedEndDate: string \| undefined;\n calendarDate: Dayjs;\n currentFocus?: FocusType \| undefined;\n isNewSelection: boolean;\n onSelect: (value: Dayjs) => void;\n onHover: (value: string) => void;\n setCalendarDate?: ((date: string \| undefined) => void) \| undefined;\n}\n\nexport const StandardCalendarDayView = ({\n calendarDate,\n currentFocus,\n disabledDates,\n selectedStartDate,\n selectedEndDate,\n onSelect,\n onHover,\n isNewSelection,\n minDate,\n maxDate,\n allowDisabledSelection,\n showActiveMonthDaysOnly,\n setCalendarDate,\n}: CalendarDayViewProps) => {\n // =============================================================================\n // REFS, EFFECTS\n // =============================================================================\n const pendingFocusRef = useRef<string \| null>(null);\n\n useEffect(() => {\n if (pendingFocusRef.current) {\n const next = pendingFocusRef.current;\n pendingFocusRef.current = null;\n setFocusValue(next);\n }\n }, [calendarDate]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDateToFocus = useCallback(() => {\n // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n // This function determines which date should be focused based on the state of the calendar.\n\n // Selected start date is in the current month\n if (\n selectedStartDate &&\n dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n ) {\n return dayjs(selectedStartDate);\n }\n // Selected end date is in the current month\n if (\n selectedEndDate &&\n dayjs(selectedEndDate).isSame(calendarDate, \"month\")\n ) {\n return dayjs(selectedEndDate);\n }\n\n // Today is in the current month\n if (dayjs().isSame(calendarDate, \"month\")) {\n return dayjs();\n }\n\n // Choose min date if it is in the current month\n if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n return dayjs(minDate);\n }\n\n // Otherwise, return the first day of the month\n return dayjs(calendarDate).startOf(\"month\");\n }, [selectedStartDate, calendarDate, selectedEndDate, minDate]);\n\n const setFocusCell = (value: string) => {\n const valueDayjs = dayjs(value);\n\n if (\n CalendarHelper.isWithinRange(\n valueDayjs,\n minDate ? dayjs(minDate) : undefined,\n maxDate ? dayjs(maxDate) : undefined\n )\n ) {\n if (!valueDayjs.isSame(calendarDate, \"month\")) {\n setCalendarDate?.(value);\n pendingFocusRef.current = value;\n return;\n }\n setFocusValue(value);\n }\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const weeksOfTheMonth = useMemo(\n (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n [calendarDate]\n );\n\n const dateToFocus = useMemo(\n (): Dayjs => getDateToFocus(),\n [getDateToFocus]\n );\n\n const [focusValue, setFocusValue] = useState<string>(\"\");\n const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n\n onSelect(value);\n };\n\n const handleHoverCell = (value: string, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n\n setHoverValue(value);\n onHover(value);\n };\n\n const handleFocusCell = (value: string) => {\n // Always hover the cell when it is focused\n setHoverValue(value);\n onHover(value);\n };\n\n const handleMouseLeaveCell = () => {\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n // Reset focus date when the component loses focus\n setFocusValue(\"\");\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeader = () => {\n return weeksOfTheMonth[0].map((day, index) => (\n <div\n key={`week-day-${index}`}\n className={styles.headerCell}\n aria-hidden\n >\n {dayjs(day).format(\"ddd\")}\n </div>\n ));\n };\n\n const renderDayCells = () => {\n return weeksOfTheMonth.map((week, weekIndex) => {\n return (\n <div\n role=\"row\"\n aria-label={`Week ${weekIndex + 1}`}\n key={weekIndex}\n onMouseLeave={handleMouseLeaveCell}\n className={styles.rowDayCell}\n >\n {week.map((day, dayIndex) => {\n return (\n <StandardCell\n key={`day-${dayIndex}`}\n date={day}\n calendarDate={calendarDate}\n startDate={selectedStartDate}\n endDate={selectedEndDate}\n hoverDate={hoverValue}\n focusDate={focusValue}\n currentFocus={currentFocus}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n isNewSelection={isNewSelection}\n showActiveMonthDaysOnly={\n showActiveMonthDaysOnly\n }\n onSelect={handleDayClick}\n onHover={handleHoverCell}\n onFocus={handleFocusCell}\n setFocusCell={setFocusCell}\n tabIndex={\n day.isSame(dateToFocus, \"day\") ? 0 : -1\n }\n />\n );\n })}\n </div>\n );\n });\n };\n\n return (\n <div\n role=\"grid\"\n aria-label=\"Date grid\"\n data-testid=\"calendar-content\"\n onBlur={handleOnBlur}\n className={styles.wrapper}\n >\n {renderHeader()}\n {renderDayCells()}\n </div>\n );\n};\n"],"names":["dayjs","extend","isBetween","StandardCalendarDayView","calendarDate","currentFocus","disabledDates","selectedStartDate","selectedEndDate","onSelect","onHover","isNewSelection","minDate","maxDate","allowDisabledSelection","showActiveMonthDaysOnly","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","role","onBlur","e","currentTarget","contains","relatedTarget","className","styles.wrapper","children","map","day","index","_jsx","styles.headerCell","format","week","weekIndex","onMouseLeave","styles.rowDayCell","dayIndex","StandardCell","date","startDate","endDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"gdAUAA,EAAMC,OAAOC,GAaN,MAAMC,EAA0B,EACnCC,eACAC,eACAC,gBACAC,oBACAC,kBACAC,WACAC,UACAC,iBACAC,UACAC,UACAC,yBACAC,0BACAC,sBAKA,MAAMC,EAAkBC,EAAsB,MAE9CC,GAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACjB,IAKJ,MAAMmB,EAAiBC,GAAY,IAM3BjB,GACAP,EAAMO,GAAmBkB,OAAOrB,EAAc,SAEvCJ,EAAMO,GAIbC,GACAR,EAAMQ,GAAiBiB,OAAOrB,EAAc,SAErCJ,EAAMQ,GAIbR,IAAQyB,OAAOrB,EAAc,SACtBJ,IAIPY,GAAWR,EAAaqB,OAAOzB,EAAMY,GAAU,SACxCZ,EAAMY,GAIVZ,EAAMI,GAAcsB,QAAQ,UACpC,CAACnB,EAAmBH,EAAcI,EAAiBI,IAEhDe,EAAgBC,IAClB,MAAMC,EAAa7B,EAAM4B,GAEzB,GACIE,EAAeC,cACXF,EACAjB,EAAUZ,EAAMY,QAAWoB,EAC3BnB,EAAUb,EAAMa,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOrB,EAAc,SAGjC,OAFAY,SAAAA,EAAkBY,QAClBX,EAAgBG,QAAUQ,GAG9BN,EAAcM,EAClB,GAMEK,EAAkBC,GACpB,IAAiBJ,EAAeK,aAAa/B,IAC7C,CAACA,IAGCgC,EAAcF,GAChB,IAAaX,KACb,CAACA,KAGEc,EAAYf,GAAiBgB,EAAiB,KAC9CC,EAAYC,GAAiBF,EAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAC9BA,IAAe5B,GAEnBL,EAASmB,EAAM,EAGbe,EAAkB,CAACf,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdlB,EAAQkB,GAAM,EAGZgB,EAAmBhB,IAErBY,EAAcZ,GACdlB,EAAQkB,EAAM,EAGZiB,EAAuB,KACzBL,EAAc,IACd9B,EAAQ,GAAG,EAyEf,OACIoC,EAAA,MAAA,CACIC,KAAK,OAAM,aACA,YAAW,cACV,mBACZC,OA3EcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/B9B,EAAc,IACdkB,EAAc,IACd9B,EAAQ,IAAG,EAoEP2C,UAAWC,EAAcC,SAAA,CA7DtBtB,EAAgB,GAAGuB,KAAI,CAACC,EAAKC,IAChCC,EAAA,MAAA,CAEIN,UAAWO,4BAGV5D,EAAMyD,GAAKI,OAAO,QAJd,YAAYH,OAUlBzB,EAAgBuB,KAAI,CAACM,EAAMC,IAE1BJ,EAAA,MAAA,CACIZ,KAAK,MAAK,aACE,QAAQgB,EAAY,IAEhCC,aAAcnB,EACdQ,UAAWY,WAEVH,EAAKN,KAAI,CAACC,EAAKS,IAERP,EAACQ,EAAY,CAETC,KAAMX,EACNrD,aAAcA,EACdiE,UAAW9D,EACX+D,QAAS9D,EACT+D,UAAWhC,EACXiC,UAAWnC,EACXhC,aAAcA,EACdO,QAASA,EACTC,QAASA,EACTP,cAAeA,EACfQ,uBAAwBA,EACxBH,eAAgBA,EAChBI,wBACIA,EAEJN,SAAUgC,EACV/B,QAASiC,EACT8B,QAAS7B,EACTjB,aAAcA,EACd+C,SACIjB,EAAIhC,OAAOW,EAAa,OAAS,GAAI,GArBpC,OAAO8B,QAPnBH,OAgDX"}

package/shared/internal-calendar/standard/standard-calendar-day-view.styles.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const headerCell: import("@linaria/core").LinariaClassName;
+export declare const rowDayCell: import("@linaria/core").LinariaClassName;

package/shared/internal-calendar/standard/standard-calendar-day-view.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./standard-calendar-day-view.styles_1dbvup3.css";const a="w1fb9dn4",d="hd5h60i",r="r7m17b5";export{d as headerCell,r as rowDayCell,a as wrapper};
2	+ //# sourceMappingURL=standard-calendar-day-view.styles.js.map

package/shared/internal-calendar/standard/standard-calendar-day-view.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"standard-calendar-day-view.styles.js","sources":["../../../../src/shared/internal-calendar/standard/standard-calendar-day-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../../theme\";\n\nexport const wrapper = css`\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n row-gap: 0.25rem;\n`;\n\nexport const headerCell = css`\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.5rem;\n pointer-events: none;\n user-select: none;\n\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text\"]};\n`;\n\nexport const rowDayCell = css`\n grid-column: 1 / -1;\n display: flex;\n`;\n"],"names":["wrapper","headerCell","rowDayCell"],"mappings":"yGAIO,MAAMA,EAAO,WAOPC,EAAU,UAYVC,EAAU"}

package/shared/internal-calendar/standard/standard-calendar-day-view.styles_1dbvup3.css ADDED Viewed

@@ -0,0 +1,3 @@
+.w1fb9dn4{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);row-gap:0.25rem;}
+.hd5h60i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:2.5rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text);}
+.r7m17b5{-ms-grid-column:1/-1;grid-column:1/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

package/shared/internal-calendar/standard/standard-cell.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as r}from"../../../util/calendar-helper.js";import"react";import"../../../util/string-helper.js";import{DayCell as a}from"../day-cell/day-cell.js";const l=({date:l,calendarDate:o,startDate:n,endDate:i,currentFocus:s,hoverDate:d,focusDate:c,minDate:y,maxDate:h,disabledDates:u,allowDisabledSelection:f,isNewSelection:m,showActiveMonthDaysOnly:v,onSelect:b,onHover:p,onFocus:D,setFocusCell:g,tabIndex:S})=>{const w=r.isDisabledDay(l,u,y,h),Y=!w||f,T=()=>{b(l,!Y)},j=()=>{const e=t(d),r=e.isBefore(i,"day"),a=e.isAfter(n,"day");let l,o,c,y;return"start"===s&&i&&r&&(n&&a?(c=d,y=i):(l=d,o=n||i)),"end"===s&&n&&a&&(i&&r?(c=n,y=d):(l=i||n,o=d)),{hoverStart:l,hoverEnd:o,overlapStart:c,overlapEnd:y}},A={date:l,calendarDate:o,disabled:w,interactive:Y,currentDateIndicator:!0,onSelect:T,onHover:()=>{p(l.format("YYYY-MM-DD"),!Y)},onFocus:()=>{D(l.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&T());(e=>{let t;const r={ArrowLeft:()=>l.subtract(1,"day"),ArrowRight:()=>l.add(1,"day"),ArrowUp:()=>l.subtract(7,"day"),ArrowDown:()=>l.add(7,"day"),Home:()=>l.startOf("week"),End:()=>l.endOf("week"),PageUp:()=>e.shiftKey?l.subtract(1,"year"):l.subtract(1,"month"),PageDown:()=>e.shiftKey?l.add(1,"year"):l.add(1,"month")}[e.key];r&&(e.preventDefault(),t=r(),g(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t(c),tabIndex:S};return e(a,Object.assign({},A,(()=>{const e={};if(o.month()!==l.month())e.labelType=v?"hidden":"unavailable";else if(t().isSame(l,"day")&&!w)e.labelType="current";else if(m){const t="end"===s&&n&&l.isBefore(n),r="start"===s&&i&&l.isAfter(i);(t||r)&&(e.labelType="unavailable")}return e})(),(()=>{const e={},t=l.isSame(n,"day"),r=l.isSame(i,"day");return v&&o.month()!==l.month()?(e.labelType="hidden",e):((n&&t||i&&r)&&(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"),n&&i&&l.isBetween(n,i,"day","[]")&&(e.labelType="selected",t||(e.bgLeft="selected-outline-subtle"),r||(e.bgRight="selected-outline-subtle")),e)})(),(()=>{if(!d)return{};const e={},t=l.isSame(d,"day"),{hoverStart:r,hoverEnd:a,overlapStart:o,overlapEnd:s}=j();if(t){const t=l.isSame(n,"day"),r=l.isSame(i,"day");t||r?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):(e.labelType="hover",e.circleLeft="hover",e.circleRight="hover")}if(r&&a){if(l.isBetween(r,a,"day","[]")){const t=l.isSame(r,"day"),o=l.isSame(a,"day");t||(e.labelType="hover",e.bgLeft="hover-outline"),o||(e.labelType="hover",e.bgRight="hover-outline")}return e}return o&&s?(l.isBetween(o,s,"day","[]")&&t&&(e.labelType="selected-hover",e.circleLeft="selected-hover",e.circleRight="selected-hover"),e):e})()))};export{l as StandardCell};
+import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as r}from"../../../util/calendar-helper.js";import"react";import"../../../util/simple-id-generator.js";import"../../../util/string-helper.js";import"@react-aria/live-announcer";import{DayCell as a}from"../day-cell/day-cell.js";const o=({date:o,calendarDate:l,startDate:i,endDate:n,currentFocus:s,hoverDate:d,focusDate:c,minDate:y,maxDate:u,disabledDates:h,allowDisabledSelection:m,isNewSelection:f,showActiveMonthDaysOnly:v,onSelect:p,onHover:b,onFocus:D,setFocusCell:g,tabIndex:S})=>{const w=r.isDisabledDay(o,h,y,u),Y=!w||m,T=()=>{p(o,!Y)},j=()=>{const e=t(d),r=e.isBefore(n,"day"),a=e.isAfter(i,"day");let o,l,c,y;return"start"===s&&n&&r&&(i&&a?(c=d,y=n):(o=d,l=i||n)),"end"===s&&i&&a&&(n&&r?(c=i,y=d):(o=n||i,l=d)),{hoverStart:o,hoverEnd:l,overlapStart:c,overlapEnd:y}},A={date:o,calendarDate:l,disabled:w,interactive:Y,currentDateIndicator:!0,onSelect:T,onHover:()=>{b(o.format("YYYY-MM-DD"),!Y)},onFocus:()=>{D(o.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(Y&&T());(e=>{let t;const r={ArrowLeft:()=>o.subtract(1,"day"),ArrowRight:()=>o.add(1,"day"),ArrowUp:()=>o.subtract(7,"day"),ArrowDown:()=>o.add(7,"day"),Home:()=>o.startOf("week"),End:()=>o.endOf("week"),PageUp:()=>e.shiftKey?o.subtract(1,"year"):o.subtract(1,"month"),PageDown:()=>e.shiftKey?o.add(1,"year"):o.add(1,"month")}[e.key];r&&(e.preventDefault(),t=r(),g(t.format("YYYY-MM-DD")))})(e)},role:"gridcell",focusDate:t(c),tabIndex:S};return e(a,Object.assign({},A,(()=>{const e={};if(l.month()!==o.month())e.labelType=v?"hidden":"unavailable";else if(t().isSame(o,"day")&&!w)e.labelType="current";else if(f){const t="end"===s&&i&&o.isBefore(i),r="start"===s&&n&&o.isAfter(n);(t||r)&&(e.labelType="unavailable")}return e})(),(()=>{const e={},t=o.isSame(i,"day"),r=o.isSame(n,"day");return v&&l.month()!==o.month()?(e.labelType="hidden",e):((i&&t||n&&r)&&(e.labelType="selected",e.circleLeft="selected-outline",e.circleRight="selected-outline"),i&&n&&o.isBetween(i,n,"day","[]")&&(e.labelType="selected",t||(e.bgLeft="selected-outline-subtle"),r||(e.bgRight="selected-outline-subtle")),e)})(),(()=>{if(!d)return{};const e={},t=o.isSame(d,"day"),{hoverStart:r,hoverEnd:a,overlapStart:l,overlapEnd:s}=j();if(t){const t=o.isSame(i,"day"),r=o.isSame(n,"day");t||r?(e.labelType="selected-hover",e.circleLeft="selected-hover-outline",e.circleRight="selected-hover-outline"):(e.labelType="hover",e.circleLeft="hover",e.circleRight="hover")}if(r&&a){if(o.isBetween(r,a,"day","[]")){const t=o.isSame(r,"day"),l=o.isSame(a,"day");t||(e.labelType="hover",e.bgLeft="hover-outline"),l||(e.labelType="hover",e.bgRight="hover-outline")}return e}return l&&s?(o.isBetween(l,s,"day","[]")&&t&&(e.labelType="selected-hover",e.circleLeft="selected-hover",e.circleRight="selected-hover"),e):e})()))};export{o as StandardCell};
 //# sourceMappingURL=standard-cell.js.map

package/shared/internal-calendar/standard/standard-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"standard-cell.js","sources":["../../../../src/shared/internal-calendar/standard/standard-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport { DayCell } from \"../day-cell/day-cell\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell/types\";\nimport type { FocusType } from \"../types\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n startDate: string \| undefined;\n endDate: string \| undefined;\n hoverDate: string;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n isNewSelection?: boolean \| undefined;\n currentFocus?: FocusType \| undefined;\n showActiveMonthDaysOnly?: boolean \| undefined;\n onSelect: (value: Dayjs, disabled: boolean) => void;\n onHover: (value: string, disabled: boolean) => void;\n onFocus: (value: string) => void;\n setFocusCell: (value: string) => void;\n tabIndex: number;\n}\n\nexport const StandardCell = ({\n date,\n calendarDate,\n startDate,\n endDate,\n currentFocus,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n isNewSelection,\n showActiveMonthDaysOnly,\n onSelect,\n onHover,\n onFocus,\n setFocusCell,\n tabIndex,\n}: Props) => {\n // =========================================================================\n // CONSTS\n // =========================================================================\n const disabled = CalendarHelper.isDisabledDay(\n date,\n disabledDates,\n minDate,\n maxDate\n );\n const interactive = !disabled \|\| allowDisabledSelection;\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelect = () => {\n onSelect(date, !interactive);\n };\n\n const handleHover = () => {\n onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n };\n\n const handleFocus = () => {\n onFocus(date.format(\"YYYY-MM-DD\"));\n };\n\n const handleKeyNavigation = (event: React.KeyboardEvent) => {\n let newFocusSelection: Dayjs \| undefined;\n\n const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowLeft: () => date.subtract(1, \"day\"),\n ArrowRight: () => date.add(1, \"day\"),\n ArrowUp: () => date.subtract(7, \"day\"),\n ArrowDown: () => date.add(7, \"day\"),\n Home: () => date.startOf(\"week\"),\n End: () => date.endOf(\"week\"),\n PageUp: () => {\n return event.shiftKey\n ? date.subtract(1, \"year\")\n : date.subtract(1, \"month\");\n },\n PageDown: () => {\n return event.shiftKey\n ? date.add(1, \"year\")\n : date.add(1, \"month\");\n },\n };\n\n const action = keyActions[event.key];\n if (action) {\n event.preventDefault();\n newFocusSelection = action();\n setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n const selectedKey = keyboardEvent.key;\n\n if (selectedKey === \"Enter\" \|\| selectedKey === \" \") {\n event.preventDefault();\n if (interactive) {\n handleSelect();\n }\n return;\n }\n\n handleKeyNavigation(event);\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = showActiveMonthDaysOnly\n ? \"hidden\"\n : \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n } else if (isNewSelection) {\n const beforeStart =\n currentFocus === \"end\" && startDate && date.isBefore(startDate);\n const afterEnd =\n currentFocus === \"start\" && endDate && date.isAfter(endDate);\n\n if (beforeStart \|\| afterEnd) {\n props.labelType = \"unavailable\";\n }\n }\n\n return props;\n };\n\n const getSelectedStyle = (): CellStyleProps => {\n const props: CellStyleProps = {};\n\n const isStart = date.isSame(startDate, \"day\");\n const isEnd = date.isSame(endDate, \"day\");\n\n if (showActiveMonthDaysOnly && calendarDate.month() !== date.month()) {\n props.labelType = \"hidden\";\n return props;\n }\n\n if ((startDate && isStart) \|\| (endDate && isEnd)) {\n props.labelType = \"selected\";\n props.circleLeft = \"selected-outline\";\n props.circleRight = \"selected-outline\";\n }\n\n if (\n startDate &&\n endDate &&\n date.isBetween(startDate, endDate, \"day\", \"[]\")\n ) {\n props.labelType = \"selected\";\n\n if (!isStart) {\n props.bgLeft = \"selected-outline-subtle\";\n }\n if (!isEnd) {\n props.bgRight = \"selected-outline-subtle\";\n }\n }\n\n return props;\n };\n\n const getHoverStyle = (): CellStyleProps => {\n if (!hoverDate) {\n return {};\n }\n\n const props: CellStyleProps = {};\n\n const isHover = date.isSame(hoverDate, \"day\");\n\n const { hoverStart, hoverEnd, overlapStart, overlapEnd } =\n getHoverRange();\n\n if (isHover) {\n const isStart = date.isSame(startDate, \"day\");\n const isEnd = date.isSame(endDate, \"day\");\n if (isStart \|\| isEnd) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover-outline\";\n props.circleRight = \"selected-hover-outline\";\n } else {\n props.labelType = \"hover\";\n props.circleLeft = \"hover\";\n props.circleRight = \"hover\";\n }\n }\n\n if (hoverStart && hoverEnd) {\n if (date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\")) {\n const isStart = date.isSame(hoverStart, \"day\");\n const isEnd = date.isSame(hoverEnd, \"day\");\n\n if (!isStart) {\n props.labelType = \"hover\";\n props.bgLeft = \"hover-outline\";\n }\n if (!isEnd) {\n props.labelType = \"hover\";\n props.bgRight = \"hover-outline\";\n }\n }\n\n return props;\n }\n\n if (overlapStart && overlapEnd) {\n if (date.isBetween(overlapStart, overlapEnd, \"day\", \"[]\")) {\n if (isHover) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover\";\n props.circleRight = \"selected-hover\";\n }\n }\n\n return props;\n }\n\n return props;\n };\n\n const getHoverRange = () => {\n const hoverDay = dayjs(hoverDate);\n const isBeforeEnd = hoverDay.isBefore(endDate, \"day\");\n const isAfterStart = hoverDay.isAfter(startDate, \"day\");\n\n let hoverStart: string \| undefined, hoverEnd: string \| undefined;\n let overlapStart: string \| undefined, overlapEnd: string \| undefined;\n\n // [s h e] => overlap\n // [h s e] => hover\n // [h e] => hover\n if (currentFocus === \"start\" && endDate && isBeforeEnd) {\n if (startDate && isAfterStart) {\n overlapStart = hoverDate;\n overlapEnd = endDate;\n } else {\n hoverStart = hoverDate;\n hoverEnd = startDate \|\| endDate;\n }\n }\n\n // [s h e] => overlap\n // [s e h] => hover\n // [s h] => hover\n if (currentFocus === \"end\" && startDate && isAfterStart) {\n if (endDate && isBeforeEnd) {\n overlapStart = startDate;\n overlapEnd = hoverDate;\n } else {\n hoverStart = endDate \|\| startDate;\n hoverEnd = hoverDate;\n }\n }\n\n return {\n hoverStart,\n hoverEnd,\n overlapStart,\n overlapEnd,\n };\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const commonProps: DayCellProps = {\n date,\n calendarDate,\n disabled,\n interactive,\n currentDateIndicator: true,\n onSelect: handleSelect,\n onHover: handleHover,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n role: \"gridcell\",\n focusDate: dayjs(focusDate),\n tabIndex,\n };\n\n return (\n <DayCell\n {...commonProps}\n {...getCellStyle()}\n {...getSelectedStyle()}\n {...getHoverStyle()}\n />\n );\n};\n"],"names":["StandardCell","date","calendarDate","startDate","endDate","currentFocus","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","isNewSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","getHoverRange","hoverDay","dayjs","isBeforeEnd","isBefore","isAfterStart","isAfter","hoverStart","hoverEnd","overlapStart","overlapEnd","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","_jsx","DayCell","Object","assign","props","month","labelType","isSame","beforeStart","afterEnd","getCellStyle","isStart","isEnd","circleLeft","circleRight","isBetween","bgLeft","bgRight","getSelectedStyle","isHover","getHoverStyle"],"mappings":"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"}
1	+ {"version":3,"file":"standard-cell.js","sources":["../../../../src/shared/internal-calendar/standard/standard-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper } from \"../../../util\";\nimport { DayCell } from \"../day-cell/day-cell\";\nimport type { CellStyleProps, DayCellProps } from \"../day-cell/types\";\nimport type { FocusType } from \"../types\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n startDate: string \| undefined;\n endDate: string \| undefined;\n hoverDate: string;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n isNewSelection?: boolean \| undefined;\n currentFocus?: FocusType \| undefined;\n showActiveMonthDaysOnly?: boolean \| undefined;\n onSelect: (value: Dayjs, disabled: boolean) => void;\n onHover: (value: string, disabled: boolean) => void;\n onFocus: (value: string) => void;\n setFocusCell: (value: string) => void;\n tabIndex: number;\n}\n\nexport const StandardCell = ({\n date,\n calendarDate,\n startDate,\n endDate,\n currentFocus,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n isNewSelection,\n showActiveMonthDaysOnly,\n onSelect,\n onHover,\n onFocus,\n setFocusCell,\n tabIndex,\n}: Props) => {\n // =========================================================================\n // CONSTS\n // =========================================================================\n const disabled = CalendarHelper.isDisabledDay(\n date,\n disabledDates,\n minDate,\n maxDate\n );\n const interactive = !disabled \|\| allowDisabledSelection;\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelect = () => {\n onSelect(date, !interactive);\n };\n\n const handleHover = () => {\n onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n };\n\n const handleFocus = () => {\n onFocus(date.format(\"YYYY-MM-DD\"));\n };\n\n const handleKeyNavigation = (event: React.KeyboardEvent) => {\n let newFocusSelection: Dayjs \| undefined;\n\n const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowLeft: () => date.subtract(1, \"day\"),\n ArrowRight: () => date.add(1, \"day\"),\n ArrowUp: () => date.subtract(7, \"day\"),\n ArrowDown: () => date.add(7, \"day\"),\n Home: () => date.startOf(\"week\"),\n End: () => date.endOf(\"week\"),\n PageUp: () => {\n return event.shiftKey\n ? date.subtract(1, \"year\")\n : date.subtract(1, \"month\");\n },\n PageDown: () => {\n return event.shiftKey\n ? date.add(1, \"year\")\n : date.add(1, \"month\");\n },\n };\n\n const action = keyActions[event.key];\n if (action) {\n event.preventDefault();\n newFocusSelection = action();\n setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n const selectedKey = keyboardEvent.key;\n\n if (selectedKey === \"Enter\" \|\| selectedKey === \" \") {\n event.preventDefault();\n if (interactive) {\n handleSelect();\n }\n return;\n }\n\n handleKeyNavigation(event);\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = showActiveMonthDaysOnly\n ? \"hidden\"\n : \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n } else if (isNewSelection) {\n const beforeStart =\n currentFocus === \"end\" && startDate && date.isBefore(startDate);\n const afterEnd =\n currentFocus === \"start\" && endDate && date.isAfter(endDate);\n\n if (beforeStart \|\| afterEnd) {\n props.labelType = \"unavailable\";\n }\n }\n\n return props;\n };\n\n const getSelectedStyle = (): CellStyleProps => {\n const props: CellStyleProps = {};\n\n const isStart = date.isSame(startDate, \"day\");\n const isEnd = date.isSame(endDate, \"day\");\n\n if (showActiveMonthDaysOnly && calendarDate.month() !== date.month()) {\n props.labelType = \"hidden\";\n return props;\n }\n\n if ((startDate && isStart) \|\| (endDate && isEnd)) {\n props.labelType = \"selected\";\n props.circleLeft = \"selected-outline\";\n props.circleRight = \"selected-outline\";\n }\n\n if (\n startDate &&\n endDate &&\n date.isBetween(startDate, endDate, \"day\", \"[]\")\n ) {\n props.labelType = \"selected\";\n\n if (!isStart) {\n props.bgLeft = \"selected-outline-subtle\";\n }\n if (!isEnd) {\n props.bgRight = \"selected-outline-subtle\";\n }\n }\n\n return props;\n };\n\n const getHoverStyle = (): CellStyleProps => {\n if (!hoverDate) {\n return {};\n }\n\n const props: CellStyleProps = {};\n\n const isHover = date.isSame(hoverDate, \"day\");\n\n const { hoverStart, hoverEnd, overlapStart, overlapEnd } =\n getHoverRange();\n\n if (isHover) {\n const isStart = date.isSame(startDate, \"day\");\n const isEnd = date.isSame(endDate, \"day\");\n if (isStart \|\| isEnd) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover-outline\";\n props.circleRight = \"selected-hover-outline\";\n } else {\n props.labelType = \"hover\";\n props.circleLeft = \"hover\";\n props.circleRight = \"hover\";\n }\n }\n\n if (hoverStart && hoverEnd) {\n if (date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\")) {\n const isStart = date.isSame(hoverStart, \"day\");\n const isEnd = date.isSame(hoverEnd, \"day\");\n\n if (!isStart) {\n props.labelType = \"hover\";\n props.bgLeft = \"hover-outline\";\n }\n if (!isEnd) {\n props.labelType = \"hover\";\n props.bgRight = \"hover-outline\";\n }\n }\n\n return props;\n }\n\n if (overlapStart && overlapEnd) {\n if (date.isBetween(overlapStart, overlapEnd, \"day\", \"[]\")) {\n if (isHover) {\n props.labelType = \"selected-hover\";\n props.circleLeft = \"selected-hover\";\n props.circleRight = \"selected-hover\";\n }\n }\n\n return props;\n }\n\n return props;\n };\n\n const getHoverRange = () => {\n const hoverDay = dayjs(hoverDate);\n const isBeforeEnd = hoverDay.isBefore(endDate, \"day\");\n const isAfterStart = hoverDay.isAfter(startDate, \"day\");\n\n let hoverStart: string \| undefined, hoverEnd: string \| undefined;\n let overlapStart: string \| undefined, overlapEnd: string \| undefined;\n\n // [s h e] => overlap\n // [h s e] => hover\n // [h e] => hover\n if (currentFocus === \"start\" && endDate && isBeforeEnd) {\n if (startDate && isAfterStart) {\n overlapStart = hoverDate;\n overlapEnd = endDate;\n } else {\n hoverStart = hoverDate;\n hoverEnd = startDate \|\| endDate;\n }\n }\n\n // [s h e] => overlap\n // [s e h] => hover\n // [s h] => hover\n if (currentFocus === \"end\" && startDate && isAfterStart) {\n if (endDate && isBeforeEnd) {\n overlapStart = startDate;\n overlapEnd = hoverDate;\n } else {\n hoverStart = endDate \|\| startDate;\n hoverEnd = hoverDate;\n }\n }\n\n return {\n hoverStart,\n hoverEnd,\n overlapStart,\n overlapEnd,\n };\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const commonProps: DayCellProps = {\n date,\n calendarDate,\n disabled,\n interactive,\n currentDateIndicator: true,\n onSelect: handleSelect,\n onHover: handleHover,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n role: \"gridcell\",\n focusDate: dayjs(focusDate),\n tabIndex,\n };\n\n return (\n <DayCell\n {...commonProps}\n {...getCellStyle()}\n {...getSelectedStyle()}\n {...getHoverStyle()}\n />\n );\n};\n"],"names":["StandardCell","date","calendarDate","startDate","endDate","currentFocus","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","isNewSelection","showActiveMonthDaysOnly","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","handleSelect","getHoverRange","hoverDay","dayjs","isBeforeEnd","isBefore","isAfterStart","isAfter","hoverStart","hoverEnd","overlapStart","overlapEnd","commonProps","currentDateIndicator","format","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowLeft","subtract","ArrowRight","add","ArrowUp","ArrowDown","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","role","_jsx","DayCell","Object","assign","props","month","labelType","isSame","beforeStart","afterEnd","getCellStyle","isStart","isEnd","circleLeft","circleRight","isBetween","bgLeft","bgRight","getSelectedStyle","isHover","getHoverStyle"],"mappings":"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"}

package/shared/internal-calendar/types.d.ts CHANGED Viewed

@@ -20,6 +20,12 @@ export interface InternalCalendarProps extends CommonCalendarProps {
     value?: string | undefined;
     /** Selected end date in `YYYY-MM-DD` format */
     endValue?: string | undefined;
+    /** Selected dates in `YYYY-MM-DD` format, used with variant="multi" */
+    values?: string[] | undefined;
+    /** Minimum number of dates that must be selected before the selection is valid, used with variant="multi" */
+    minSelectable?: number | undefined;
+    /** Maximum number of dates that can be selected at once, used with variant="multi" */
+    maxSelectable?: number | undefined;
     /** Specifies if done/cancel buttons are visible */
     withButton?: boolean | undefined;
     /** Indicate current focus in the date-input component. */
@@ -36,6 +42,8 @@ export interface InternalCalendarProps extends CommonCalendarProps {
     onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
     /** Called when date is selected, returns value in `YYYY-MM-DD` format */
     onSelect?: ((value: string) => void) | undefined;
+    /** Called when multi-select changes, returns all selected dates */
+    onChange?: ((values: string[]) => void) | undefined;
     /** Called when day cell is hovered, returns value in `YYYY-MM-DD` */
     onHover?: ((value: string) => void) | undefined;
     /** Indicate the number of days used in fixed-range variant */
@@ -47,7 +55,7 @@ export interface CalendarDropdownProps extends InternalCalendarProps {
     width: number;
 }
 export type CalendarAction = "reset" | "confirmed";
-export type Variant = "single" | "range" | "week" | "fixed-range";
+export type Variant = "single" | "range" | "week" | "fixed-range" | "multi";
 export type FocusType = "start" | "end" | "none";
 export type View = "default" | "month-options" | "year-options";
 export interface YearMonthDisplay {

package/shared/internal-calendar/week/week-calendar-day-view.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{useRef as r,useEffect as n,useCallback as o,useMemo as d,useState as s}from"react";import{CalendarHelper as i}from"../../../util/calendar-helper.js";import"../standard/standard-calendar-day-view.js";import{Wrapper as l,HeaderCell as c,RowDayCell as m}from"../standard/standard-calendar-day-view.style.js";import{WeekDayCell as u}from"./week-day-cell.js";const D=({calendarDate:D,disabledDates:f,selectedStartDate:h,onSelect:p,onHover:S,minDate:y,maxDate:v,allowDisabledSelection:j,setCalendarDate:w})=>{const b=r(null);n((()=>{if(b.current){const e=b.current;b.current=null,F(e)}}),[D]);const x=o((()=>h&&t(h).isSame(D,"month")?t(h):t().isSame(D,"month")?t().startOf("week"):y&&D.isSame(t(y),"month")?t(y):t(D).startOf("month")),[h,D,y]),g=e=>{const a=t(e);if(i.isWithinRange(a,y?t(y):void 0,v?t(v):void 0)){if(!a.isSame(D,"month"))return null==w||w(e),void(b.current=e);F(e)}},k=d((()=>i.generateDays(D)),[D]),O=d((()=>x()),[x]),[C,F]=s(""),[H,T]=s(""),W=(e,a)=>{if(a&&!j)return;const r=e.startOf("week");p(r),e&&!t(e).isSame(r,"month")&&T("")},$=(e,a)=>{a&&!j||(T(e),S(e))},B=e=>{T(e),S(e)},I=()=>{T(""),S("")};return e(l,{"data-testid":"calendar-content",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(F(""),T(""),S(""))},"aria-label":"Week selection",children:[k[0].map(((e,r)=>a(c,{"aria-hidden":!0,children:t(e).format("ddd")},`week-day-${r}`))),k.map(((e,r)=>a(m,{onMouseLeave:I,role:"group",children:e.map(((e,r)=>a(u,{date:e,calendarDate:D,selectedDate:h,hoverDate:H,focusDate:C,minDate:y,maxDate:v,disabledDates:f,allowDisabledSelection:j,onSelect:W,onHover:$,onFocus:B,setFocusCell:g,tabIndex:t(e).isSame(O,"day")?0:-1},`day-${r}`)))},r)))]})};export{D as WeekCalendarDayView};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{useRef as r,useEffect as n,useCallback as o,useMemo as s,useState as i}from"react";import{CalendarHelper as l}from"../../../util/calendar-helper.js";import{wrapper as d,headerCell as c,rowDayCell as m}from"../standard/standard-calendar-day-view.styles.js";import{WeekDayCell as u}from"./week-day-cell.js";const D=({calendarDate:D,disabledDates:f,selectedStartDate:h,onSelect:p,onHover:v,minDate:S,maxDate:y,allowDisabledSelection:j,setCalendarDate:w})=>{const b=r(null);n((()=>{if(b.current){const e=b.current;b.current=null,C(e)}}),[D]);const x=o((()=>h&&t(h).isSame(D,"month")?t(h):t().isSame(D,"month")?t().startOf("week"):S&&D.isSame(t(S),"month")?t(S):t(D).startOf("month")),[h,D,S]),g=e=>{const a=t(e);if(l.isWithinRange(a,S?t(S):void 0,y?t(y):void 0)){if(!a.isSame(D,"month"))return null==w||w(e),void(b.current=e);C(e)}},k=s((()=>l.generateDays(D)),[D]),N=s((()=>x()),[x]),[O,C]=i(""),[F,H]=i(""),T=(e,a)=>{if(a&&!j)return;const r=e.startOf("week");p(r),e&&!t(e).isSame(r,"month")&&H("")},W=(e,a)=>{a&&!j||(H(e),v(e))},$=e=>{H(e),v(e)},B=()=>{H(""),v("")};return e("div",{"data-testid":"calendar-content",onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(C(""),H(""),v(""))},"aria-label":"Week selection",className:d,children:[k[0].map(((e,r)=>a("div",{className:c,"aria-hidden":!0,children:t(e).format("ddd")},`week-day-${r}`))),k.map(((e,r)=>a("div",{onMouseLeave:B,role:"group",className:m,children:e.map(((e,r)=>a(u,{date:e,calendarDate:D,selectedDate:h,hoverDate:F,focusDate:O,minDate:S,maxDate:y,disabledDates:f,allowDisabledSelection:j,onSelect:T,onHover:W,onFocus:$,setFocusCell:g,tabIndex:t(e).isSame(N,"day")?0:-1},`day-${r}`)))},r)))]})};export{D as WeekCalendarDayView};
 //# sourceMappingURL=week-calendar-day-view.js.map

package/shared/internal-calendar/week/week-calendar-day-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"week-calendar-day-view.js","sources":["../../../../src/shared/internal-calendar/week/week-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport { HeaderCell, RowDayCell, Wrapper } from \"../standard\";\nimport type { CommonCalendarProps } from \"../types\";\nimport { WeekDayCell } from \"./week-day-cell\";\n\ninterface WeekCalendarDayViewProps extends CommonCalendarProps {\n selectedStartDate: string \| undefined;\n calendarDate: Dayjs;\n onSelect: (value: Dayjs) => void;\n onHover: (value: string) => void;\n setCalendarDate?: ((date: string \| undefined) => void) \| undefined;\n}\n\nexport const WeekCalendarDayView = ({\n calendarDate,\n disabledDates,\n selectedStartDate,\n onSelect,\n onHover,\n minDate,\n maxDate,\n allowDisabledSelection,\n setCalendarDate,\n}: WeekCalendarDayViewProps) => {\n // =============================================================================\n // REFS, EFFECTS\n // =============================================================================\n const pendingFocusRef = useRef<string \| null>(null);\n\n useEffect(() => {\n if (pendingFocusRef.current) {\n const next = pendingFocusRef.current;\n pendingFocusRef.current = null;\n setFocusValue(next);\n }\n }, [calendarDate]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDateToFocus = useCallback(() => {\n // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n // This function determines which date should be focused based on the state of the calendar.\n\n // Selected start date is in the current month\n if (\n selectedStartDate &&\n dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n ) {\n return dayjs(selectedStartDate);\n }\n\n // Today is in the current month\n if (dayjs().isSame(calendarDate, \"month\")) {\n // Choose first day of the week of today\n return dayjs().startOf(\"week\");\n }\n\n // Choose min date if it is in the current month\n if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n return dayjs(minDate);\n }\n\n // Otherwise, return the first day of the month\n return dayjs(calendarDate).startOf(\"month\");\n }, [selectedStartDate, calendarDate, minDate]);\n\n const setFocusCell = (value: string) => {\n const valueDayjs = dayjs(value);\n\n if (\n CalendarHelper.isWithinRange(\n valueDayjs,\n minDate ? dayjs(minDate) : undefined,\n maxDate ? dayjs(maxDate) : undefined\n )\n ) {\n if (!valueDayjs.isSame(calendarDate, \"month\")) {\n setCalendarDate?.(value);\n pendingFocusRef.current = value;\n return;\n }\n setFocusValue(value);\n }\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const weeksOfTheMonth = useMemo(\n (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n [calendarDate]\n );\n const dateToFocus = useMemo(\n (): Dayjs => getDateToFocus(),\n [getDateToFocus]\n );\n\n const [focusValue, setFocusValue] = useState<string>(\"\");\n const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n const firstDayOfWeek = value.startOf(\"week\");\n\n onSelect(firstDayOfWeek);\n\n if (!!value && !dayjs(value).isSame(firstDayOfWeek, \"month\")) {\n setHoverValue(\"\");\n }\n };\n\n const handleHoverCell = (value: string, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n\n setHoverValue(value);\n onHover(value);\n };\n\n const handleFocusCell = (value: string) => {\n // Always hover the cell when it is focused\n setHoverValue(value);\n onHover(value);\n };\n\n const handleMouseLeaveCell = () => {\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n // Reset focus date when the component loses focus\n setFocusValue(\"\");\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeader = () => {\n return weeksOfTheMonth[0].map((day, index) => (\n <HeaderCell key={`week-day-${index}`} aria-hidden>\n {dayjs(day).format(\"ddd\")}\n </HeaderCell>\n ));\n };\n\n const renderDayCells = () => {\n return weeksOfTheMonth.map((week, weekIndex) => {\n return (\n <RowDayCell\n key={weekIndex}\n onMouseLeave={handleMouseLeaveCell}\n role=\"group\"\n >\n {week.map((day, dayIndex) => {\n return (\n <WeekDayCell\n key={`day-${dayIndex}`}\n date={day}\n calendarDate={calendarDate}\n selectedDate={selectedStartDate}\n hoverDate={hoverValue}\n focusDate={focusValue}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n onSelect={handleDayClick}\n onHover={handleHoverCell}\n onFocus={handleFocusCell}\n setFocusCell={setFocusCell}\n tabIndex={\n dayjs(day).isSame(dateToFocus, \"day\")\n ? 0\n : -1\n }\n />\n );\n })}\n </RowDayCell>\n );\n });\n };\n\n return (\n <Wrapper\n data-testid=\"calendar-content\"\n onBlur={handleOnBlur}\n aria-label=\"Week selection\"\n >\n {renderHeader()}\n {renderDayCells()}\n </Wrapper>\n );\n};\n"],"names":["WeekCalendarDayView","calendarDate","disabledDates","selectedStartDate","onSelect","onHover","minDate","maxDate","allowDisabledSelection","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","dayjs","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","firstDayOfWeek","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","Wrapper","onBlur","e","currentTarget","contains","relatedTarget","children","map","day","index","_jsx","HeaderCell","format","week","weekIndex","RowDayCell","onMouseLeave","role","dayIndex","WeekDayCell","date","selectedDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"+cAiBO,MAAMA,EAAsB,EAC/BC,eACAC,gBACAC,oBACAC,WACAC,UACAC,UACAC,UACAC,yBACAC,sBAKA,MAAMC,EAAkBC,EAAsB,MAE9CC,GAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACb,IAKJ,MAAMe,EAAiBC,GAAY,IAM3Bd,GACAe,EAAMf,GAAmBgB,OAAOlB,EAAc,SAEvCiB,EAAMf,GAIbe,IAAQC,OAAOlB,EAAc,SAEtBiB,IAAQE,QAAQ,QAIvBd,GAAWL,EAAakB,OAAOD,EAAMZ,GAAU,SACxCY,EAAMZ,GAIVY,EAAMjB,GAAcmB,QAAQ,UACpC,CAACjB,EAAmBF,EAAcK,IAE/Be,EAAgBC,IAClB,MAAMC,EAAaL,EAAMI,GAEzB,GACIE,EAAeC,cACXF,EACAjB,EAAUY,EAAMZ,QAAWoB,EAC3BnB,EAAUW,EAAMX,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOlB,EAAc,SAGjC,OAFAQ,SAAAA,EAAkBa,QAClBZ,EAAgBG,QAAUS,GAG9BP,EAAcO,EAClB,GAMEK,EAAkBC,GACpB,IAAiBJ,EAAeK,aAAa5B,IAC7C,CAACA,IAEC6B,EAAcF,GAChB,IAAaZ,KACb,CAACA,KAGEe,EAAYhB,GAAiBiB,EAAiB,KAC9CC,EAAYC,GAAiBF,EAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAClC,GAAIA,IAAe5B,EAAwB,OAC3C,MAAM6B,EAAiBf,EAAMF,QAAQ,QAErChB,EAASiC,GAEHf,IAAUJ,EAAMI,GAAOH,OAAOkB,EAAgB,UAChDH,EAAc,GAClB,EAGEI,EAAkB,CAAChB,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdjB,EAAQiB,GAAM,EAGZiB,EAAmBjB,IAErBY,EAAcZ,GACdjB,EAAQiB,EAAM,EAGZkB,EAAuB,KACzBN,EAAc,IACd7B,EAAQ,GAAG,EA+Df,OACIoC,EAACC,iBACe,mBACZC,OA/DcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/BhC,EAAc,IACdmB,EAAc,IACd7B,EAAQ,IAAG,eAwDI,iBAAgB2C,SAAA,CAjDxBrB,EAAgB,GAAGsB,KAAI,CAACC,EAAKC,IAChCC,EAACC,EAAU,CAAA,eAAA,EAAAL,SACN9B,EAAMgC,GAAKI,OAAO,QADN,YAAYH,OAO1BxB,EAAgBsB,KAAI,CAACM,EAAMC,IAE1BJ,EAACK,EAAU,CAEPC,aAAclB,EACdmB,KAAK,QAAOX,SAEXO,EAAKN,KAAI,CAACC,EAAKU,IAERR,EAACS,EAAW,CAERC,KAAMZ,EACNjD,aAAcA,EACd8D,aAAc5D,EACd6D,UAAW/B,EACXgC,UAAWlC,EACXzB,QAASA,EACTC,QAASA,EACTL,cAAeA,EACfM,uBAAwBA,EACxBJ,SAAU+B,EACV9B,QAASiC,EACT4B,QAAS3B,EACTlB,aAAcA,EACd8C,SACIjD,EAAMgC,GAAK/B,OAAOW,EAAa,OACzB,GACA,GAjBL,OAAO8B,QAPnBJ,OA0CP"}
1	+ {"version":3,"file":"week-calendar-day-view.js","sources":["../../../../src/shared/internal-calendar/week/week-calendar-day-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { CalendarHelper } from \"../../../util/calendar-helper\";\nimport * as styles from \"../standard/standard-calendar-day-view.styles\";\nimport type { CommonCalendarProps } from \"../types\";\nimport { WeekDayCell } from \"./week-day-cell\";\n\ninterface WeekCalendarDayViewProps extends CommonCalendarProps {\n selectedStartDate: string \| undefined;\n calendarDate: Dayjs;\n onSelect: (value: Dayjs) => void;\n onHover: (value: string) => void;\n setCalendarDate?: ((date: string \| undefined) => void) \| undefined;\n}\n\nexport const WeekCalendarDayView = ({\n calendarDate,\n disabledDates,\n selectedStartDate,\n onSelect,\n onHover,\n minDate,\n maxDate,\n allowDisabledSelection,\n setCalendarDate,\n}: WeekCalendarDayViewProps) => {\n // =============================================================================\n // REFS, EFFECTS\n // =============================================================================\n const pendingFocusRef = useRef<string \| null>(null);\n\n useEffect(() => {\n if (pendingFocusRef.current) {\n const next = pendingFocusRef.current;\n pendingFocusRef.current = null;\n setFocusValue(next);\n }\n }, [calendarDate]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getDateToFocus = useCallback(() => {\n // As specified in the Grid Pattern, only one element in the calendar grid is in the Tab sequence.\n // This function determines which date should be focused based on the state of the calendar.\n\n // Selected start date is in the current month\n if (\n selectedStartDate &&\n dayjs(selectedStartDate).isSame(calendarDate, \"month\")\n ) {\n return dayjs(selectedStartDate);\n }\n\n // Today is in the current month\n if (dayjs().isSame(calendarDate, \"month\")) {\n // Choose first day of the week of today\n return dayjs().startOf(\"week\");\n }\n\n // Choose min date if it is in the current month\n if (minDate && calendarDate.isSame(dayjs(minDate), \"month\")) {\n return dayjs(minDate);\n }\n\n // Otherwise, return the first day of the month\n return dayjs(calendarDate).startOf(\"month\");\n }, [selectedStartDate, calendarDate, minDate]);\n\n const setFocusCell = (value: string) => {\n const valueDayjs = dayjs(value);\n\n if (\n CalendarHelper.isWithinRange(\n valueDayjs,\n minDate ? dayjs(minDate) : undefined,\n maxDate ? dayjs(maxDate) : undefined\n )\n ) {\n if (!valueDayjs.isSame(calendarDate, \"month\")) {\n setCalendarDate?.(value);\n pendingFocusRef.current = value;\n return;\n }\n setFocusValue(value);\n }\n };\n\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const weeksOfTheMonth = useMemo(\n (): Dayjs[][] => CalendarHelper.generateDays(calendarDate),\n [calendarDate]\n );\n const dateToFocus = useMemo(\n (): Dayjs => getDateToFocus(),\n [getDateToFocus]\n );\n\n const [focusValue, setFocusValue] = useState<string>(\"\");\n const [hoverValue, setHoverValue] = useState<string>(\"\");\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n const firstDayOfWeek = value.startOf(\"week\");\n\n onSelect(firstDayOfWeek);\n\n if (!!value && !dayjs(value).isSame(firstDayOfWeek, \"month\")) {\n setHoverValue(\"\");\n }\n };\n\n const handleHoverCell = (value: string, isDisabled: boolean) => {\n if (isDisabled && !allowDisabledSelection) return;\n\n setHoverValue(value);\n onHover(value);\n };\n\n const handleFocusCell = (value: string) => {\n // Always hover the cell when it is focused\n setHoverValue(value);\n onHover(value);\n };\n\n const handleMouseLeaveCell = () => {\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n const handleOnBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n if (e.currentTarget.contains(e.relatedTarget as Node)) {\n return;\n }\n\n // Reset focus date when the component loses focus\n setFocusValue(\"\");\n setHoverValue(\"\");\n onHover(\"\");\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeader = () => {\n return weeksOfTheMonth[0].map((day, index) => (\n <div\n key={`week-day-${index}`}\n className={styles.headerCell}\n aria-hidden\n >\n {dayjs(day).format(\"ddd\")}\n </div>\n ));\n };\n\n const renderDayCells = () => {\n return weeksOfTheMonth.map((week, weekIndex) => {\n return (\n <div\n key={weekIndex}\n onMouseLeave={handleMouseLeaveCell}\n role=\"group\"\n className={styles.rowDayCell}\n >\n {week.map((day, dayIndex) => {\n return (\n <WeekDayCell\n key={`day-${dayIndex}`}\n date={day}\n calendarDate={calendarDate}\n selectedDate={selectedStartDate}\n hoverDate={hoverValue}\n focusDate={focusValue}\n minDate={minDate}\n maxDate={maxDate}\n disabledDates={disabledDates}\n allowDisabledSelection={allowDisabledSelection}\n onSelect={handleDayClick}\n onHover={handleHoverCell}\n onFocus={handleFocusCell}\n setFocusCell={setFocusCell}\n tabIndex={\n dayjs(day).isSame(dateToFocus, \"day\")\n ? 0\n : -1\n }\n />\n );\n })}\n </div>\n );\n });\n };\n\n return (\n <div\n data-testid=\"calendar-content\"\n onBlur={handleOnBlur}\n aria-label=\"Week selection\"\n className={styles.wrapper}\n >\n {renderHeader()}\n {renderDayCells()}\n </div>\n );\n};\n"],"names":["WeekCalendarDayView","calendarDate","disabledDates","selectedStartDate","onSelect","onHover","minDate","maxDate","allowDisabledSelection","setCalendarDate","pendingFocusRef","useRef","useEffect","current","next","setFocusValue","getDateToFocus","useCallback","dayjs","isSame","startOf","setFocusCell","value","valueDayjs","CalendarHelper","isWithinRange","undefined","weeksOfTheMonth","useMemo","generateDays","dateToFocus","focusValue","useState","hoverValue","setHoverValue","handleDayClick","isDisabled","firstDayOfWeek","handleHoverCell","handleFocusCell","handleMouseLeaveCell","_jsxs","onBlur","e","currentTarget","contains","relatedTarget","className","styles.wrapper","children","map","day","index","_jsx","styles.headerCell","format","week","weekIndex","onMouseLeave","role","styles.rowDayCell","dayIndex","WeekDayCell","date","selectedDate","hoverDate","focusDate","onFocus","tabIndex"],"mappings":"8ZAiBO,MAAMA,EAAsB,EAC/BC,eACAC,gBACAC,oBACAC,WACAC,UACAC,UACAC,UACAC,yBACAC,sBAKA,MAAMC,EAAkBC,EAAsB,MAE9CC,GAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACb,IAKJ,MAAMe,EAAiBC,GAAY,IAM3Bd,GACAe,EAAMf,GAAmBgB,OAAOlB,EAAc,SAEvCiB,EAAMf,GAIbe,IAAQC,OAAOlB,EAAc,SAEtBiB,IAAQE,QAAQ,QAIvBd,GAAWL,EAAakB,OAAOD,EAAMZ,GAAU,SACxCY,EAAMZ,GAIVY,EAAMjB,GAAcmB,QAAQ,UACpC,CAACjB,EAAmBF,EAAcK,IAE/Be,EAAgBC,IAClB,MAAMC,EAAaL,EAAMI,GAEzB,GACIE,EAAeC,cACXF,EACAjB,EAAUY,EAAMZ,QAAWoB,EAC3BnB,EAAUW,EAAMX,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOlB,EAAc,SAGjC,OAFAQ,SAAAA,EAAkBa,QAClBZ,EAAgBG,QAAUS,GAG9BP,EAAcO,EAClB,GAMEK,EAAkBC,GACpB,IAAiBJ,EAAeK,aAAa5B,IAC7C,CAACA,IAEC6B,EAAcF,GAChB,IAAaZ,KACb,CAACA,KAGEe,EAAYhB,GAAiBiB,EAAiB,KAC9CC,EAAYC,GAAiBF,EAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAClC,GAAIA,IAAe5B,EAAwB,OAC3C,MAAM6B,EAAiBf,EAAMF,QAAQ,QAErChB,EAASiC,GAEHf,IAAUJ,EAAMI,GAAOH,OAAOkB,EAAgB,UAChDH,EAAc,GAClB,EAGEI,EAAkB,CAAChB,EAAec,KAChCA,IAAe5B,IAEnB0B,EAAcZ,GACdjB,EAAQiB,GAAM,EAGZiB,EAAmBjB,IAErBY,EAAcZ,GACdjB,EAAQiB,EAAM,EAGZkB,EAAuB,KACzBN,EAAc,IACd7B,EAAQ,GAAG,EAoEf,OACIoC,uBACgB,mBACZC,OApEcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/B/B,EAAc,IACdmB,EAAc,IACd7B,EAAQ,IAAG,EA4Da,aACT,iBACX0C,UAAWC,EAAcC,SAAA,CAvDtBtB,EAAgB,GAAGuB,KAAI,CAACC,EAAKC,IAChCC,EAAA,MAAA,CAEIN,UAAWO,4BAGVpC,EAAMiC,GAAKI,OAAO,QAJd,YAAYH,OAUlBzB,EAAgBuB,KAAI,CAACM,EAAMC,IAE1BJ,EAAA,MAAA,CAEIK,aAAclB,EACdmB,KAAK,QACLZ,UAAWa,EAAiBX,SAE3BO,EAAKN,KAAI,CAACC,EAAKU,IAERR,EAACS,EAAW,CAERC,KAAMZ,EACNlD,aAAcA,EACd+D,aAAc7D,EACd8D,UAAWhC,EACXiC,UAAWnC,EACXzB,QAASA,EACTC,QAASA,EACTL,cAAeA,EACfM,uBAAwBA,EACxBJ,SAAU+B,EACV9B,QAASiC,EACT6B,QAAS5B,EACTlB,aAAcA,EACd+C,SACIlD,EAAMiC,GAAKhC,OAAOW,EAAa,OACzB,GACA,GAjBL,OAAO+B,QARnBJ,OA4CX"}

package/shared/internal-calendar/week/week-day-cell.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as a}from"../../../util/calendar-helper.js";import{DateHelper as r}from"../../../util/date-helper.js";import"react";import"../../../util/string-helper.js";import{DayCell as o}from"../day-cell/day-cell.js";const n=({date:n,calendarDate:l,selectedDate:s,hoverDate:d,focusDate:i,minDate:c,maxDate:m,disabledDates:D,allowDisabledSelection:u,onSelect:y,onHover:f,onFocus:b,setFocusCell:p,tabIndex:h})=>{const v=a.isDisabledDay(n,D,c,m),M=!v||u,{start:S,end:Y}=a.getWeekStartEnd(r.toDayjs(s)),{start:g,end:j}=a.getWeekStartEnd(r.toDayjs(d)),{start:w,end:k}=a.getWeekStartEnd(n),x=n.isSame(w,"day"),E=s&&n.isBetween(S,Y,"day","[]"),F=d&&n.isBetween(g,j,"day","[]"),H=E&&n.isSame(S)||F&&n.isSame(g),A=E&&n.isSame(Y)||F&&n.isSame(j),I=`From ${t(w).format("D MMMM")} to ${t(k).format("D MMMM")}, ${v?"Unavailable":"Available"}`,K=()=>{y(n,!M)},O={date:n,calendarDate:l,disabled:v,interactive:M,currentDateIndicator:!0,onSelect:K,onHover:()=>{f(n.format("YYYY-MM-DD"),!M)},onFocus:()=>{b(n.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(M&&K());(e=>{let t;const a={ArrowUp:()=>n.subtract(7,"day"),ArrowDown:()=>n.add(7,"day"),Home:()=>n.startOf("week"),End:()=>n.endOf("week"),PageUp:()=>e.shiftKey?n.subtract(1,"year"):n.subtract(1,"month"),PageDown:()=>e.shiftKey?n.add(1,"year"):n.add(1,"month")}[e.key];a&&(e.preventDefault(),t=a(),p(t.format("YYYY-MM-DD")))})(e)},focusDate:t(i),tabIndex:h,label:I,ariaHidden:!x||void 0,role:x?"button":"none"};return e(o,Object.assign({},O,(()=>{const e={};return l.month()!==n.month()?e.labelType="unavailable":t().isSame(n,"day")&&!v&&(e.labelType="current"),e})(),(()=>{const e={};let t,a;return E&&F?(t="selected-hover-outline",a="selected-hover"):E?(t="selected-outline",a="selected"):F&&(t="hover",a="hover"),t&&(e.labelType=a,H?e.circleLeft=t:e.bgLeft=t,A?e.circleRight=t:e.bgRight=t),e})()))};export{n as WeekDayCell};
+import{jsx as e}from"react/jsx-runtime";import t from"../../../external/dayjs/dayjs.min.js";import{CalendarHelper as a}from"../../../util/calendar-helper.js";import{DateHelper as r}from"../../../util/date-helper.js";import"react";import"../../../util/simple-id-generator.js";import"../../../util/string-helper.js";import"@react-aria/live-announcer";import{DayCell as o}from"../day-cell/day-cell.js";const n=({date:n,calendarDate:l,selectedDate:i,hoverDate:s,focusDate:d,minDate:c,maxDate:m,disabledDates:D,allowDisabledSelection:u,onSelect:y,onHover:f,onFocus:p,setFocusCell:b,tabIndex:h})=>{const v=a.isDisabledDay(n,D,c,m),M=!v||u,{start:g,end:j}=a.getWeekStartEnd(r.toDayjs(i)),{start:S,end:Y}=a.getWeekStartEnd(r.toDayjs(s)),{start:w,end:k}=a.getWeekStartEnd(n),x=n.isSame(w,"day"),E=i&&n.isBetween(g,j,"day","[]"),F=s&&n.isBetween(S,Y,"day","[]"),H=E&&n.isSame(g)||F&&n.isSame(S),A=E&&n.isSame(j)||F&&n.isSame(Y),I=`From ${t(w).format("D MMMM")} to ${t(k).format("D MMMM")}, ${v?"Unavailable":"Available"}`,K=()=>{y(n,!M)},O={date:n,calendarDate:l,disabled:v,interactive:M,currentDateIndicator:!0,onSelect:K,onHover:()=>{f(n.format("YYYY-MM-DD"),!M)},onFocus:()=>{p(n.format("YYYY-MM-DD"))},onKeyDown:e=>{const t=e.key;if("Enter"===t||" "===t)return e.preventDefault(),void(M&&K());(e=>{let t;const a={ArrowUp:()=>n.subtract(7,"day"),ArrowDown:()=>n.add(7,"day"),Home:()=>n.startOf("week"),End:()=>n.endOf("week"),PageUp:()=>e.shiftKey?n.subtract(1,"year"):n.subtract(1,"month"),PageDown:()=>e.shiftKey?n.add(1,"year"):n.add(1,"month")}[e.key];a&&(e.preventDefault(),t=a(),b(t.format("YYYY-MM-DD")))})(e)},focusDate:t(d),tabIndex:h,label:I,ariaHidden:!x||void 0,role:x?"button":"none"};return e(o,Object.assign({},O,(()=>{const e={};return l.month()!==n.month()?e.labelType="unavailable":t().isSame(n,"day")&&!v&&(e.labelType="current"),e})(),(()=>{const e={};let t,a;return E&&F?(t="selected-hover-outline",a="selected-hover"):E?(t="selected-outline",a="selected"):F&&(t="hover",a="hover"),t&&(e.labelType=a,H?e.circleLeft=t:e.bgLeft=t,A?e.circleRight=t:e.bgRight=t),e})()))};export{n as WeekDayCell};
 //# sourceMappingURL=week-day-cell.js.map

package/shared/internal-calendar/week/week-day-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"week-day-cell.js","sources":["../../../../src/shared/internal-calendar/week/week-day-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper, DateHelper } from \"../../../util\";\nimport type {\n CellStyleProps,\n CellType,\n DayCellProps,\n LabelType,\n} from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n selectedDate: string \| undefined;\n hoverDate: string;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n onSelect: (value: Dayjs, disabled: boolean) => void;\n onHover: (value: string, disabled: boolean) => void;\n onFocus: (value: string) => void;\n setFocusCell: (value: string) => void;\n tabIndex: number;\n}\n\nexport const WeekDayCell = ({\n date,\n calendarDate,\n selectedDate,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n onSelect,\n onHover,\n onFocus,\n setFocusCell,\n tabIndex,\n}: Props) => {\n // =========================================================================\n // CONSTS\n // =========================================================================\n const disabled = CalendarHelper.isDisabledDay(\n date,\n disabledDates,\n minDate,\n maxDate\n );\n const interactive = !disabled \|\| allowDisabledSelection;\n const { start: selectedStart, end: selectedEnd } =\n CalendarHelper.getWeekStartEnd(DateHelper.toDayjs(selectedDate));\n const { start: hoverStart, end: hoverEnd } = CalendarHelper.getWeekStartEnd(\n DateHelper.toDayjs(hoverDate)\n );\n\n const { start: weekStart, end: weekEnd } =\n CalendarHelper.getWeekStartEnd(date);\n const isFirstDayOfWeek = date.isSame(weekStart, \"day\");\n\n const isSelected =\n selectedDate && date.isBetween(selectedStart, selectedEnd, \"day\", \"[]\");\n const isHover =\n hoverDate && date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\");\n const isStart =\n (isSelected && date.isSame(selectedStart)) \|\|\n (isHover && date.isSame(hoverStart));\n const isEnd =\n (isSelected && date.isSame(selectedEnd)) \|\|\n (isHover && date.isSame(hoverEnd));\n\n // For accessible label\n const label = `From ${dayjs(weekStart).format(\"D MMMM\")} to ${dayjs(\n weekEnd\n ).format(\"D MMMM\")}, ${disabled ? \"Unavailable\" : \"Available\"}`;\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelect = () => {\n onSelect(date, !interactive);\n };\n\n const handleHover = () => {\n onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n };\n\n const handleFocus = () => {\n onFocus(date.format(\"YYYY-MM-DD\"));\n };\n\n const handleKeyNavigation = (event: React.KeyboardEvent) => {\n let newFocusSelection: Dayjs \| undefined;\n\n // No left and right arrow keys for week view\n const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowUp: () => date.subtract(7, \"day\"),\n ArrowDown: () => date.add(7, \"day\"),\n Home: () => date.startOf(\"week\"),\n End: () => date.endOf(\"week\"),\n PageUp: () => {\n return event.shiftKey\n ? date.subtract(1, \"year\")\n : date.subtract(1, \"month\");\n },\n PageDown: () => {\n return event.shiftKey\n ? date.add(1, \"year\")\n : date.add(1, \"month\");\n },\n };\n\n const action = keyActions[event.key];\n if (action) {\n event.preventDefault();\n newFocusSelection = action();\n setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n const selectedKey = keyboardEvent.key;\n\n if (selectedKey === \"Enter\" \|\| selectedKey === \" \") {\n event.preventDefault();\n if (interactive) {\n handleSelect();\n }\n return;\n }\n\n handleKeyNavigation(event);\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const getRangeStyle = (): CellStyleProps => {\n const props: CellStyleProps = {};\n\n let type: CellType \| undefined = undefined;\n let labelType: LabelType \| undefined = undefined;\n if (isSelected && isHover) {\n type = \"selected-hover-outline\";\n labelType = \"selected-hover\";\n } else if (isSelected) {\n type = \"selected-outline\";\n labelType = \"selected\";\n } else if (isHover) {\n type = \"hover\";\n labelType = \"hover\";\n }\n\n if (type) {\n props.labelType = labelType;\n\n if (isStart) {\n props.circleLeft = type;\n } else {\n props.bgLeft = type;\n }\n\n if (isEnd) {\n props.circleRight = type;\n } else {\n props.bgRight = type;\n }\n }\n\n return props;\n };\n\n const getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n }\n\n return props;\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const commonProps: DayCellProps = {\n date,\n calendarDate,\n disabled,\n interactive,\n currentDateIndicator: true,\n onSelect: handleSelect,\n onHover: handleHover,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n focusDate: dayjs(focusDate),\n tabIndex,\n label,\n // Aria hidden for all but the first day of the week\n // To ensure the same labels dont show in accessibility tree\n ariaHidden: isFirstDayOfWeek ? undefined : true,\n role: isFirstDayOfWeek ? \"button\" : \"none\",\n };\n\n return (\n <DayCell {...commonProps} {...getCellStyle()} {...getRangeStyle()} />\n );\n};\n"],"names":["WeekDayCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","start","selectedStart","end","selectedEnd","getWeekStartEnd","DateHelper","toDayjs","hoverStart","hoverEnd","weekStart","weekEnd","isFirstDayOfWeek","isSame","isSelected","isBetween","isHover","isStart","isEnd","label","dayjs","format","handleSelect","commonProps","currentDateIndicator","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowUp","subtract","ArrowDown","add","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","ariaHidden","undefined","role","_jsx","DayCell","Object","assign","props","month","labelType","getCellStyle","type","circleLeft","bgLeft","circleRight","bgRight","getRangeStyle"],"mappings":"+TA6BO,MAAMA,EAAc,EACvBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BhB,EACAO,EACAF,EACAC,GAEEW,GAAeH,GAAYN,GACzBU,MAAOC,EAAeC,IAAKC,GAC/BN,EAAeO,gBAAgBC,EAAWC,QAAQtB,KAC9CgB,MAAOO,EAAYL,IAAKM,GAAaX,EAAeO,gBACxDC,EAAWC,QAAQrB,KAGfe,MAAOS,EAAWP,IAAKQ,GAC3Bb,EAAeO,gBAAgBtB,GAC7B6B,EAAmB7B,EAAK8B,OAAOH,EAAW,OAE1CI,EACF7B,GAAgBF,EAAKgC,UAAUb,EAAeE,EAAa,MAAO,MAChEY,EACF9B,GAAaH,EAAKgC,UAAUP,EAAYC,EAAU,MAAO,MACvDQ,EACDH,GAAc/B,EAAK8B,OAAOX,IAC1Bc,GAAWjC,EAAK8B,OAAOL,GACtBU,EACDJ,GAAc/B,EAAK8B,OAAOT,IAC1BY,GAAWjC,EAAK8B,OAAOJ,GAGtBU,EAAQ,QAAQC,EAAMV,GAAWW,OAAO,gBAAgBD,EAC1DT,GACFU,OAAO,cAAcxB,EAAW,cAAgB,cAK5CyB,EAAe,KACjB9B,EAAST,GAAOiB,EAAY,EA6G1BuB,EAA4B,CAC9BxC,OACAC,eACAa,WACAG,cACAwB,sBAAsB,EACtBhC,SAAU8B,EACV7B,QAjHgB,KAChBA,EAAQV,EAAKsC,OAAO,eAAgBrB,EAAY,EAiHhDN,QA9GgB,KAChBA,EAAQX,EAAKsC,OAAO,cAAc,EA8GlCI,UA9EmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACF7B,GACAsB,KApCgB,CAACI,IACzB,IAAII,EAGJ,MAiBMC,EAjBgD,CAClDC,QAAS,IAAMjD,EAAKkD,SAAS,EAAG,OAChCC,UAAW,IAAMnD,EAAKoD,IAAI,EAAG,OAC7BC,KAAM,IAAMrD,EAAKsD,QAAQ,QACzBC,IAAK,IAAMvD,EAAKwD,MAAM,QACtBC,OAAQ,IACGd,EAAMe,SACP1D,EAAKkD,SAAS,EAAG,QACjBlD,EAAKkD,SAAS,EAAG,SAE3BS,SAAU,IACChB,EAAMe,SACP1D,EAAKoD,IAAI,EAAG,QACZpD,EAAKoD,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBpC,EAAamC,EAAkBT,OAAO,eAC1C,EAeAsB,CAAoBjB,EAAM,EAmE1BvC,UAAWiC,EAAMjC,GACjBS,WACAuB,QAGAyB,YAAYhC,QAAmBiC,EAC/BC,KAAMlC,EAAmB,SAAW,QAGxC,OACImC,EAACC,EAAOC,OAAAC,OAAA,GAAK3B,EApCI,MACjB,MAAM4B,EAAwB,CAAA,EAQ9B,OANInE,EAAaoE,UAAYrE,EAAKqE,QAC9BD,EAAME,UAAY,cACXjC,IAAQP,OAAO9B,EAAM,SAAWc,IACvCsD,EAAME,UAAY,WAGfF,CAAK,EA2BkBG,GAvEZ,MAClB,MAAMH,EAAwB,CAAA,EAE9B,IAAII,EACAF,EA4BJ,OA3BIvC,GAAcE,GACduC,EAAO,yBACPF,EAAY,kBACLvC,GACPyC,EAAO,mBACPF,EAAY,YACLrC,IACPuC,EAAO,QACPF,EAAY,SAGZE,IACAJ,EAAME,UAAYA,EAEdpC,EACAkC,EAAMK,WAAaD,EAEnBJ,EAAMM,OAASF,EAGfrC,EACAiC,EAAMO,YAAcH,EAEpBJ,EAAMQ,QAAUJ,GAIjBJ,CAAK,EAuCsCS,IAAmB"}
1	+ {"version":3,"file":"week-day-cell.js","sources":["../../../../src/shared/internal-calendar/week/week-day-cell.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\n\nimport { CalendarHelper, DateHelper } from \"../../../util\";\nimport type {\n CellStyleProps,\n CellType,\n DayCellProps,\n LabelType,\n} from \"../day-cell\";\nimport { DayCell } from \"../day-cell\";\n\ninterface Props {\n date: Dayjs;\n calendarDate: Dayjs;\n selectedDate: string \| undefined;\n hoverDate: string;\n focusDate: string;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n disabledDates?: string[] \| undefined;\n allowDisabledSelection?: boolean \| undefined;\n onSelect: (value: Dayjs, disabled: boolean) => void;\n onHover: (value: string, disabled: boolean) => void;\n onFocus: (value: string) => void;\n setFocusCell: (value: string) => void;\n tabIndex: number;\n}\n\nexport const WeekDayCell = ({\n date,\n calendarDate,\n selectedDate,\n hoverDate,\n focusDate,\n minDate,\n maxDate,\n disabledDates,\n allowDisabledSelection,\n onSelect,\n onHover,\n onFocus,\n setFocusCell,\n tabIndex,\n}: Props) => {\n // =========================================================================\n // CONSTS\n // =========================================================================\n const disabled = CalendarHelper.isDisabledDay(\n date,\n disabledDates,\n minDate,\n maxDate\n );\n const interactive = !disabled \|\| allowDisabledSelection;\n const { start: selectedStart, end: selectedEnd } =\n CalendarHelper.getWeekStartEnd(DateHelper.toDayjs(selectedDate));\n const { start: hoverStart, end: hoverEnd } = CalendarHelper.getWeekStartEnd(\n DateHelper.toDayjs(hoverDate)\n );\n\n const { start: weekStart, end: weekEnd } =\n CalendarHelper.getWeekStartEnd(date);\n const isFirstDayOfWeek = date.isSame(weekStart, \"day\");\n\n const isSelected =\n selectedDate && date.isBetween(selectedStart, selectedEnd, \"day\", \"[]\");\n const isHover =\n hoverDate && date.isBetween(hoverStart, hoverEnd, \"day\", \"[]\");\n const isStart =\n (isSelected && date.isSame(selectedStart)) \|\|\n (isHover && date.isSame(hoverStart));\n const isEnd =\n (isSelected && date.isSame(selectedEnd)) \|\|\n (isHover && date.isSame(hoverEnd));\n\n // For accessible label\n const label = `From ${dayjs(weekStart).format(\"D MMMM\")} to ${dayjs(\n weekEnd\n ).format(\"D MMMM\")}, ${disabled ? \"Unavailable\" : \"Available\"}`;\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelect = () => {\n onSelect(date, !interactive);\n };\n\n const handleHover = () => {\n onHover(date.format(\"YYYY-MM-DD\"), !interactive);\n };\n\n const handleFocus = () => {\n onFocus(date.format(\"YYYY-MM-DD\"));\n };\n\n const handleKeyNavigation = (event: React.KeyboardEvent) => {\n let newFocusSelection: Dayjs \| undefined;\n\n // No left and right arrow keys for week view\n const keyActions: Record<string, () => dayjs.Dayjs> = {\n ArrowUp: () => date.subtract(7, \"day\"),\n ArrowDown: () => date.add(7, \"day\"),\n Home: () => date.startOf(\"week\"),\n End: () => date.endOf(\"week\"),\n PageUp: () => {\n return event.shiftKey\n ? date.subtract(1, \"year\")\n : date.subtract(1, \"month\");\n },\n PageDown: () => {\n return event.shiftKey\n ? date.add(1, \"year\")\n : date.add(1, \"month\");\n },\n };\n\n const action = keyActions[event.key];\n if (action) {\n event.preventDefault();\n newFocusSelection = action();\n setFocusCell(newFocusSelection.format(\"YYYY-MM-DD\"));\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n const keyboardEvent = event as React.KeyboardEvent<HTMLInputElement>;\n const selectedKey = keyboardEvent.key;\n\n if (selectedKey === \"Enter\" \|\| selectedKey === \" \") {\n event.preventDefault();\n if (interactive) {\n handleSelect();\n }\n return;\n }\n\n handleKeyNavigation(event);\n };\n\n // =========================================================================\n // HELPERS\n // =========================================================================\n const getRangeStyle = (): CellStyleProps => {\n const props: CellStyleProps = {};\n\n let type: CellType \| undefined = undefined;\n let labelType: LabelType \| undefined = undefined;\n if (isSelected && isHover) {\n type = \"selected-hover-outline\";\n labelType = \"selected-hover\";\n } else if (isSelected) {\n type = \"selected-outline\";\n labelType = \"selected\";\n } else if (isHover) {\n type = \"hover\";\n labelType = \"hover\";\n }\n\n if (type) {\n props.labelType = labelType;\n\n if (isStart) {\n props.circleLeft = type;\n } else {\n props.bgLeft = type;\n }\n\n if (isEnd) {\n props.circleRight = type;\n } else {\n props.bgRight = type;\n }\n }\n\n return props;\n };\n\n const getCellStyle = () => {\n const props: CellStyleProps = {};\n\n if (calendarDate.month() !== date.month()) {\n props.labelType = \"unavailable\";\n } else if (dayjs().isSame(date, \"day\") && !disabled) {\n props.labelType = \"current\";\n }\n\n return props;\n };\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const commonProps: DayCellProps = {\n date,\n calendarDate,\n disabled,\n interactive,\n currentDateIndicator: true,\n onSelect: handleSelect,\n onHover: handleHover,\n onFocus: handleFocus,\n onKeyDown: handleKeyDown,\n focusDate: dayjs(focusDate),\n tabIndex,\n label,\n // Aria hidden for all but the first day of the week\n // To ensure the same labels dont show in accessibility tree\n ariaHidden: isFirstDayOfWeek ? undefined : true,\n role: isFirstDayOfWeek ? \"button\" : \"none\",\n };\n\n return (\n <DayCell {...commonProps} {...getCellStyle()} {...getRangeStyle()} />\n );\n};\n"],"names":["WeekDayCell","date","calendarDate","selectedDate","hoverDate","focusDate","minDate","maxDate","disabledDates","allowDisabledSelection","onSelect","onHover","onFocus","setFocusCell","tabIndex","disabled","CalendarHelper","isDisabledDay","interactive","start","selectedStart","end","selectedEnd","getWeekStartEnd","DateHelper","toDayjs","hoverStart","hoverEnd","weekStart","weekEnd","isFirstDayOfWeek","isSame","isSelected","isBetween","isHover","isStart","isEnd","label","dayjs","format","handleSelect","commonProps","currentDateIndicator","onKeyDown","event","selectedKey","key","preventDefault","newFocusSelection","action","ArrowUp","subtract","ArrowDown","add","Home","startOf","End","endOf","PageUp","shiftKey","PageDown","handleKeyNavigation","ariaHidden","undefined","role","_jsx","DayCell","Object","assign","props","month","labelType","getCellStyle","type","circleLeft","bgLeft","circleRight","bgRight","getRangeStyle"],"mappings":"+YA6BO,MAAMA,EAAc,EACvBC,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAeC,cAC5BhB,EACAO,EACAF,EACAC,GAEEW,GAAeH,GAAYN,GACzBU,MAAOC,EAAeC,IAAKC,GAC/BN,EAAeO,gBAAgBC,EAAWC,QAAQtB,KAC9CgB,MAAOO,EAAYL,IAAKM,GAAaX,EAAeO,gBACxDC,EAAWC,QAAQrB,KAGfe,MAAOS,EAAWP,IAAKQ,GAC3Bb,EAAeO,gBAAgBtB,GAC7B6B,EAAmB7B,EAAK8B,OAAOH,EAAW,OAE1CI,EACF7B,GAAgBF,EAAKgC,UAAUb,EAAeE,EAAa,MAAO,MAChEY,EACF9B,GAAaH,EAAKgC,UAAUP,EAAYC,EAAU,MAAO,MACvDQ,EACDH,GAAc/B,EAAK8B,OAAOX,IAC1Bc,GAAWjC,EAAK8B,OAAOL,GACtBU,EACDJ,GAAc/B,EAAK8B,OAAOT,IAC1BY,GAAWjC,EAAK8B,OAAOJ,GAGtBU,EAAQ,QAAQC,EAAMV,GAAWW,OAAO,gBAAgBD,EAC1DT,GACFU,OAAO,cAAcxB,EAAW,cAAgB,cAK5CyB,EAAe,KACjB9B,EAAST,GAAOiB,EAAY,EA6G1BuB,EAA4B,CAC9BxC,OACAC,eACAa,WACAG,cACAwB,sBAAsB,EACtBhC,SAAU8B,EACV7B,QAjHgB,KAChBA,EAAQV,EAAKsC,OAAO,eAAgBrB,EAAY,EAiHhDN,QA9GgB,KAChBA,EAAQX,EAAKsC,OAAO,cAAc,EA8GlCI,UA9EmBC,IACnB,MACMC,EADgBD,EACYE,IAElC,GAAoB,UAAhBD,GAA2C,MAAhBA,EAK3B,OAJAD,EAAMG,sBACF7B,GACAsB,KApCgB,CAACI,IACzB,IAAII,EAGJ,MAiBMC,EAjBgD,CAClDC,QAAS,IAAMjD,EAAKkD,SAAS,EAAG,OAChCC,UAAW,IAAMnD,EAAKoD,IAAI,EAAG,OAC7BC,KAAM,IAAMrD,EAAKsD,QAAQ,QACzBC,IAAK,IAAMvD,EAAKwD,MAAM,QACtBC,OAAQ,IACGd,EAAMe,SACP1D,EAAKkD,SAAS,EAAG,QACjBlD,EAAKkD,SAAS,EAAG,SAE3BS,SAAU,IACChB,EAAMe,SACP1D,EAAKoD,IAAI,EAAG,QACZpD,EAAKoD,IAAI,EAAG,UAIAT,EAAME,KAC5BG,IACAL,EAAMG,iBACNC,EAAoBC,IACpBpC,EAAamC,EAAkBT,OAAO,eAC1C,EAeAsB,CAAoBjB,EAAM,EAmE1BvC,UAAWiC,EAAMjC,GACjBS,WACAuB,QAGAyB,YAAYhC,QAAmBiC,EAC/BC,KAAMlC,EAAmB,SAAW,QAGxC,OACImC,EAACC,EAAOC,OAAAC,OAAA,GAAK3B,EApCI,MACjB,MAAM4B,EAAwB,CAAA,EAQ9B,OANInE,EAAaoE,UAAYrE,EAAKqE,QAC9BD,EAAME,UAAY,cACXjC,IAAQP,OAAO9B,EAAM,SAAWc,IACvCsD,EAAME,UAAY,WAGfF,CAAK,EA2BkBG,GAvEZ,MAClB,MAAMH,EAAwB,CAAA,EAE9B,IAAII,EACAF,EA4BJ,OA3BIvC,GAAcE,GACduC,EAAO,yBACPF,EAAY,kBACLvC,GACPyC,EAAO,mBACPF,EAAY,YACLrC,IACPuC,EAAO,QACPF,EAAY,SAGZE,IACAJ,EAAME,UAAYA,EAEdpC,EACAkC,EAAMK,WAAaD,EAEnBJ,EAAMM,OAASF,EAGfrC,EACAiC,EAAMO,YAAcH,EAEpBJ,EAAMQ,QAAUJ,GAIjBJ,CAAK,EAuCsCS,IAAmB"}

package/shared/progress-bar/progress-bar.d.ts CHANGED Viewed

@@ -1,12 +1,10 @@
-import type { getPrimitiveColour } from "../../v3_theme/colour-primitive/theme-helper";
-import type { getSemanticColour } from "../../v3_theme/colour-semantic/theme-helper";
-type ThemeColorFunctions = ReturnType<typeof getSemanticColour | typeof getPrimitiveColour>;
+import type { ColourCSSVariableString } from "../../theme";
 interface Props {
     className?: string | undefined;
     /** Progress from 0 to 1 */
     progress: number;
-    color?: string | ThemeColorFunctions | undefined;
+    colour?: string | ColourCSSVariableString | undefined;
     "data-testid"?: string | undefined;
 }
-export declare const ProgressBar: ({ className, progress, color, "data-testid": testId, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressBar: ({ className, progress, colour, "data-testid": testId, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/shared/progress-bar/progress-bar.js CHANGED Viewed

@@ -1,33 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import o,{css as r}from"styled-components";import{V3_Colour as e,V3_Border as i,V3_Radius as s}from"../../v3_theme/index.js";const n=({className:o,progress:r,color:e,"data-testid":i})=>t(a,{className:o,$innerWidth:r,$color:e,"data-testid":i,children:t("progress",{value:100*r,max:100})}),a=o.div`
-    position: relative;
-    width: 100%;
-    height: 8px;
-    background: transparent;
-    progress {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-    }
-    ${t=>{const{$color:o}=t;let n;return n=o&&"string"==typeof o?o:o?o(t):e["icon-primary-subtle"](t),r`
-            border: ${i["width-010"]} ${i.solid}
-                ${n};
-            border-radius: ${s.sm};
-            &:after {
-                content: "";
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                border-radius: inherit;
-                background: ${n};
-                width: ${100*t.$innerWidth}%;
-            }
-        `}}
-`;export{n as ProgressBar};
+import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{useRef as t}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as o}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as s}from"../../theme/utils/use-apply-styles.js";import{tokens as m,bar as i}from"./progress-bar.styles.js";const p=({className:p,progress:a,colour:l,"data-testid":n})=>{const c=null!=l?l:o["icon-primary-subtle"],d=t(null);return s(d,{[m.barColour]:c,[m.barWidth]:100*a+"%"}),e("div",{className:r(i,p),"data-testid":n,ref:d,children:e("progress",{value:100*a,max:100})})};export{p as ProgressBar};
 //# sourceMappingURL=progress-bar.js.map

package/shared/progress-bar/progress-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.js","sources":["../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import ~~styled,~~ ~~{ css }~~ from \"~~styled-components~~\";\n\nimport { ~~V3_Border,~~ ~~V3_Colour, V3_Radius~~ } from \"~~../../v3_theme~~\";\nimport type { ~~getPrimitiveColour~~ } from \"../../~~v3_theme/colour-primitive/~~theme~~-helper~~\";\nimport ~~type~~ { ~~getSemanticColour~~ } from \"../../~~v3_theme/colour-semantic/~~theme~~-helper~~\";\~~n\ntype~~ ~~ThemeColorFunctions~~ = ~~ReturnType<\n typeof~~ ~~getSemanticColour~~ ~~\| typeof getPrimitiveColour~~\n~~>;\n~~\ninterface Props {\n className?: string \| undefined;\n /** Progress from 0 to 1 /\n progress: number;\n ~~color~~?: string \| ~~ThemeColorFunctions~~ \| undefined;\n \"data-testid\"?: string \| undefined;\n}\n\nexport const ProgressBar = ({\n className,\n progress,\n ~~color~~,\n \"data-testid\": testId,\n}: Props) => ~~(\n <Bar\n className=~~{~~className}~~\n ~~$innerWidth={progress}\n $color={color}\n data-testid={testId}\n~~ ~~>\n <progress~~ ~~value={progress~~ 100} max=~~{100}~~ ~~/>\n </Bar>\n);\n\n//~~ ~~=============================================================================\n//~~ ~~STYLE INTERFACE~~\~~n// =============================================================================\ninterface StyleProps {~~\~~n $color?: string \| ThemeColorFunctions \| undefined~~;\n ~~$innerWidth: number;\n}~~\n~~\n//~~ ~~=============================================================================\n//~~ ~~STYLING\n// =============================================================================\nconst Bar~~ = ~~styled.div~~<~~StyleProps>`\n position: relative~~;\n ~~width: 100%;\n height: 8px;\n background: transparent;\n~~\n ~~progress~~ {\n ~~position~~: ~~absolute;\~~n ~~top~~: ~~0;\n left:~~ ~~0;\n width:~~ 100~~%;\~~n ~~height: 100%;\n opacity: 0;\n~~ }\n\n ${(~~props) => {~~\n ~~const { $color: color } = props;\n let colorToUse: string;\n if (color && typeof color ===~~ \~~"string\") {\~~n ~~colorToUse~~ = ~~color;\n } else if (color)~~ {~~\n colorToUse =~~ (~~color~~ ~~as ThemeColorFunctions~~)~~(props);\n~~ } ~~else {~~\n ~~colorToUse~~ = ~~V3_Colour[\"icon-primary-subtle\"](props);\n~~ }\n~~\n return css`\n~~ ~~border: $~~{~~V3_Border[\"width-010\"]~~} ~~${V3_Border[~~\~~"solid\"]}\~~n ~~${colorToUse};\~~n ~~border-radius:~~ ${~~V3_Radius[\"sm\"]};\n\n &:after~~ ~~{\n content:~~ \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n border-radius: inherit;\n background: ${colorToUse}~~;\n width:~~ ${props.$innerWidth * 100}~~%;\~~n ~~}\n~~ ~~`;\~~n }}\n~~`;\n~~"],"names":["ProgressBar","className","progress","~~color~~","testId","~~_jsx~~","~~Bar~~","~~$color~~","~~value~~","~~max~~","~~styled~~","~~div~~","~~props~~","~~colorToUse~~","~~V3_Colour~~","~~css~~","~~V3_Border~~","~~V3_Radius~~","~~$innerWidth~~"],"mappings":"~~2KAkBaA~~,EAAc,EACvBC,YACAC,WACAC,~~QACA~~,cAAeC,~~KAEfC~~,~~EAACC~~,~~EAAG~~,~~CACAL~~,~~UAAWA~~,~~cACEC~~,~~EAAQK~~,~~OACbJ~~,~~EAAK~~,~~cACAC~~,~~WAEbC~~,~~EAAA~~,~~WAAA~~,~~CAAUG~~,~~MAAkB~~,~~IAAXN~~,~~EAAgBO~~,~~IAAK~~,~~QAexCH~~,~~EAAMI~~,~~EAAOC~~,~~GAAe;;;;;;;;;;;;;;;MAe3BC~~,~~IACC~~,~~MAAQL~~,~~OAAQJ~~,~~GAAUS~~,~~EAC1B~~,~~IAAIC~~,~~EASJ~~,~~OAPIA~~,~~EADAV~~,~~GAA0B~~,~~iBAAVA~~,~~EACHA~~,~~EACNA~~,~~EACOA~~,~~EAA8BS~~,~~GAE/BE~~,~~EAAU~~,~~uBAAuBF~~,~~GAG3CG~~,~~CAAG;sBACIC~~,~~EAAU~~,~~gBAAgBA,EAAiB;kBAC/CH;6BACWI,EAAc;;;;;;;;;8BASbJ;yBACe,IAApBD,EAAMM;;SAEtB;~~"}
1	+ {"version":3,"file":"progress-bar.js","sources":["../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { ColourCSSVariableString } from \"../../theme\";\nimport { Colour, useApplyStyle } from \"../../theme\";\nimport * as styles from \"./progress-bar.styles\";\n\ninterface Props {\n className?: string \| undefined;\n /** Progress from 0 to 1 /\n progress: number;\n colour?: string \| ColourCSSVariableString \| undefined;\n \"data-testid\"?: string \| undefined;\n}\n\nexport const ProgressBar = ({\n className,\n progress,\n colour,\n \"data-testid\": testId,\n}: Props) => {\n const colourToUse = colour ?? Colour[\"icon-primary-subtle\"];\n\n const barRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(barRef, {\n [styles.tokens.barColour]: colourToUse,\n [styles.tokens.barWidth]: `${progress 100}%`,\n });\n\n return (\n <div\n className={clsx(styles.bar, className)}\n data-testid={testId}\n ref={barRef}\n >\n <progress value={progress * 100} max={100} />\n </div>\n );\n};\n"],"names":["ProgressBar","className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"8dAeO,MAAMA,EAAc,EACvBC,YACAC,WACAC,SACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAO,uBAE/BC,EAASC,EAAuB,MAOtC,OALAC,EAAcF,EAAQ,CAClB,CAACG,EAAcC,WAAYN,EAC3B,CAACK,EAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAA,MAAA,CACIZ,UAAWa,EAAKC,EAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}

package/shared/progress-bar/progress-bar.styles.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const tokens: {
+    barColour: string;
+    barWidth: string;
+};
+export declare const bar: import("@linaria/core").LinariaClassName;

package/shared/progress-bar/progress-bar.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./progress-bar.styles_125ri7a.css";const r={barColour:"--fds-internal-progressBar-colour",barWidth:"--fds-internal-progressBar-width"},s="b1gldp2k";export{s as bar,r as tokens};
2	+ //# sourceMappingURL=progress-bar.styles.js.map

package/shared/progress-bar/progress-bar.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"progress-bar.styles.js","sources":["../../../src/shared/progress-bar/progress-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Radius } from \"../../theme\";\n\nexport const tokens = {\n barColour: \"--fds-internal-progressBar-colour\",\n barWidth: \"--fds-internal-progressBar-width\",\n};\n\nexport const bar = css`\n position: relative;\n width: 100%;\n height: 8px;\n background: transparent;\n\n border-style: ${Border[\"solid\"]};\n border-width: ${Border[\"width-010\"]};\n border-radius: ${Radius[\"sm\"]};\n border-color: var(${tokens.barColour});\n\n progress {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n\n &:after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n border-radius: inherit;\n background: var(${tokens.barColour});\n width: var(${tokens.barWidth});\n }\n`;\n"],"names":["tokens","barColour","barWidth","bar"],"mappings":"6EAIO,MAAMA,EAAS,CAClBC,UAAW,oCACXC,SAAU,oCAGDC,EAAG"}

package/shared/progress-bar/progress-bar.styles_125ri7a.css ADDED Viewed

@@ -0,0 +1 @@

+ .b1gldp2k{position:relative;width:100%;height:8px;background:transparent;border-style:var(--fds-border-style-solid);border-width:var(--fds-border-width-010);border-radius:var(--fds-radius-sm);border-color:var(--fds-internal-progressBar-colour);}.b1gldp2k progress{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}.b1gldp2k:after{content:"";position:absolute;top:0;bottom:0;left:0;border-radius:inherit;background:var(--fds-internal-progressBar-colour);width:var(--fds-internal-progressBar-width);}

package/shared/range-input-inner-container/range-input-inner-container.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import{Wrapper as n,ElementContainer as a,ArrowRight as i,Break as t,Indicator as c}from"./range-input-inner-container.styles.js";const o=({children:o,currentActive:d,error:s,className:l,wrap:m})=>{const[p,g]=o;return r(n,{className:l,$wrap:m,children:[e(a,{"data-id":"range-container-elem1-container",children:p}),e(i,{}),m&&e(t,{}),e(a,{"data-id":"range-container-elem2-container",children:g}),e(c,{"data-id":"range-container-indicator",$position:d,$error:s,$wrap:m})]})};export{o as RangeInputInnerContainer};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{ArrowRightIcon as r}from"@lifesg/react-icons";import i from"clsx";import{elementContainer as n,arrowRight as t,lineBreak as c,indicator as s,indicatorError as o,indicatorWrap as d,wrapper as m,wrapperWrap as l}from"./range-input-inner-container.styles.js";const p=({children:p,currentActive:N,error:v,className:f,wrap:g})=>{const[h,u]=p;return a("div",{className:i(m,g&&l,f),children:[e("div",{className:n,"data-id":"range-container-elem1-container",children:h}),e(r,{"aria-hidden":"true",className:t}),g&&e("div",{className:c}),e("div",{className:n,"data-id":"range-container-elem2-container",children:u}),e("div",{className:i(s,v&&o,g&&d),"data-id":"range-container-indicator","data-position":N})]})};export{p as RangeInputInnerContainer};
 //# sourceMappingURL=range-input-inner-container.js.map

package/shared/range-input-inner-container/range-input-inner-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"range-input-inner-container.js","sources":["../../../src/shared/range-input-inner-container/range-input-inner-container.tsx"],"sourcesContent":["import {\n ~~ArrowRight,\n Break,\n ElementContainer,\n Indicator,\n Wrapper,\n}~~ from \"./range-input-inner-container.styles\";\nimport type { RangeInputInnerContainerProps } from \"./types\";\n\n/*\n This component allows for input fields to be added within the containers\n * and renders the slider based on the focused element.\n */\nexport const RangeInputInnerContainer = ({\n children,\n currentActive,\n error,\n className,\n wrap,\n}: RangeInputInnerContainerProps) => {\n // =========================================================================\n // CONST, STATE\n // =========================================================================\n const [elem1, elem2] = children;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <~~Wrapper~~ className={className} ~~$wrap~~={~~wrap~~}>\n ~~<ElementContainer~~ data-id=\"range-container-elem1-container\">\n {elem1}\n </~~ElementContainer~~>\n <~~ArrowRight~~ />\n {wrap && <~~Break~~ />}\n <~~ElementContainer~~ data-id=\"range-container-elem2-container\">\n {elem2}\n </~~ElementContainer~~>\n <~~Indicator~~\n data-id=\"range-container-indicator\"\n $position={currentActive}\n ~~$error={error}\n $wrap={wrap}\n~~ />\n </~~Wrapper~~>\n );\n};\n"],"names":["RangeInputInnerContainer","children","currentActive","error","className","wrap","elem1","elem2","_jsxs","~~Wrapper~~","~~$wrap~~","_jsx","~~ElementContainer~~","~~ArrowRight~~","~~Break~~","~~Indicator~~","~~$position~~","~~$error~~"],"mappings":"~~oLAaO~~,MAAMA,EAA2B,EACpCC,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,~~EAACC~~,~~EAAO~~,~~CAACL~~,~~UAAWA~~,~~EAASM~~,~~MAASL~~,~~EAAIJ~~,SAAA,~~CACtCU~~,~~EAACC~~,~~EAAgB~~,~~CAAA~~,~~UAAS~~,~~2CACrBN~~,~~IAELK~~,EAACE,~~EAAU~~,CAAA,~~GACVR~~,~~GAAQM~~,~~EAACG~~,~~EAAK~~,~~IACfH~~,~~EAACC~~,~~aAAyB~~,~~kCAAiCX~~,~~SACtDM~~,~~IAELI~~,~~EAACI~~,~~EAAS~~,~~CAAA~~,~~UACE~~,~~4BAA2BC~~,~~UACxBd~~,~~EAAae~~,~~OAChBd~~,~~QACDE~~,~~MAEL~~"}
1	+ {"version":3,"file":"range-input-inner-container.js","sources":["../../../src/shared/range-input-inner-container/range-input-inner-container.tsx"],"sourcesContent":["import { ArrowRightIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./range-input-inner-container.styles\";\nimport type { RangeInputInnerContainerProps } from \"./types\";\n\n/*\n This component allows for input fields to be added within the containers\n * and renders the slider based on the focused element.\n */\nexport const RangeInputInnerContainer = ({\n children,\n currentActive,\n error,\n className,\n wrap,\n}: RangeInputInnerContainerProps) => {\n // =========================================================================\n // CONST, STATE\n // =========================================================================\n const [elem1, elem2] = children;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <div\n className={clsx(\n styles.wrapper,\n wrap && styles.wrapperWrap,\n className\n )}\n >\n <div\n className={styles.elementContainer}\n data-id=\"range-container-elem1-container\"\n >\n {elem1}\n </div>\n <ArrowRightIcon aria-hidden=\"true\" className={styles.arrowRight} />\n {wrap && <div className={styles.lineBreak} />}\n <div\n className={styles.elementContainer}\n data-id=\"range-container-elem2-container\"\n >\n {elem2}\n </div>\n <div\n className={clsx(\n styles.indicator,\n error && styles.indicatorError,\n wrap && styles.indicatorWrap\n )}\n data-id=\"range-container-indicator\"\n data-position={currentActive}\n />\n </div>\n );\n};\n"],"names":["RangeInputInnerContainer","children","currentActive","error","className","wrap","elem1","elem2","_jsxs","clsx","styles.wrapper","styles.wrapperWrap","_jsx","styles.elementContainer","ArrowRightIcon","styles.arrowRight","styles.lineBreak","styles.indicator","styles.indicatorError","styles.indicatorWrap"],"mappings":"yTAUO,MAAMA,EAA2B,EACpCC,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,SACIJ,UAAWK,EACPC,EACAL,GAAQM,EACRP,GACHH,SAAA,CAEDW,SACIR,UAAWS,YACH,kCAAiCZ,SAExCK,IAELM,EAACE,EAAc,CAAA,cAAa,OAAOV,UAAWW,IAC7CV,GAAQO,EAAA,MAAA,CAAKR,UAAWY,IACzBJ,EAAA,MAAA,CACIR,UAAWS,EAAuB,UAC1B,2CAEPN,IAELK,EAAA,MAAA,CACIR,UAAWK,EACPQ,EACAd,GAASe,EACTb,GAAQc,GACX,UACO,4CACOjB,MAEjB"}