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/cjs/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":["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":["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/cjs/shared/internal-calendar/week/week-calendar-day-view.js CHANGED Viewed

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

package/cjs/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":["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":"qVAiBmC,EAC/BA,eACAC,gBACAC,oBACAC,WACAC,UACAC,UACAC,UACAC,yBACAC,sBAKA,MAAMC,EAAkBC,EAAAA,OAAsB,MAE9CC,EAAAA,WAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACb,IAKJ,MAAMe,EAAiBC,EAAAA,aAAY,IAM3Bd,GACAe,EAAAA,QAAMf,GAAmBgB,OAAOlB,EAAc,SAEvCiB,EAAAA,QAAMf,GAIbe,EAAAA,UAAQC,OAAOlB,EAAc,SAEtBiB,EAAAA,UAAQE,QAAQ,QAIvBd,GAAWL,EAAakB,OAAOD,EAAAA,QAAMZ,GAAU,SACxCY,EAAAA,QAAMZ,GAIVY,UAAMjB,GAAcmB,QAAQ,UACpC,CAACjB,EAAmBF,EAAcK,IAE/Be,EAAgBC,IAClB,MAAMC,EAAaL,EAAAA,QAAMI,GAEzB,GACIE,EAAAA,eAAeC,cACXF,EACAjB,EAAUY,EAAAA,QAAMZ,QAAWoB,EAC3BnB,EAAUW,EAAAA,QAAMX,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOlB,EAAc,SAGjC,OAFAQ,SAAAA,EAAkBa,QAClBZ,EAAgBG,QAAUS,GAG9BP,EAAcO,EAClB,GAMEK,EAAkBC,EAAAA,SACpB,IAAiBJ,EAAAA,eAAeK,aAAa5B,IAC7C,CAACA,IAEC6B,EAAcF,EAAAA,SAChB,IAAaZ,KACb,CAACA,KAGEe,EAAYhB,GAAiBiB,EAAAA,SAAiB,KAC9CC,EAAYC,GAAiBF,EAAAA,SAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAClC,GAAIA,IAAe5B,EAAwB,OAC3C,MAAM6B,EAAiBf,EAAMF,QAAQ,QAErChB,EAASiC,GAEHf,IAAUJ,EAAAA,QAAMI,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,EAAAA,KAACC,EAAAA,uBACe,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,EAAAA,IAACC,aAAU,CAAA,eAAA,EAAAL,SACN9B,UAAMgC,GAAKI,OAAO,QADN,YAAYH,OAO1BxB,EAAgBsB,KAAI,CAACM,EAAMC,IAE1BJ,EAAAA,IAACK,EAAAA,WAAU,CAEPC,aAAclB,EACdmB,KAAK,QAAOX,SAEXO,EAAKN,KAAI,CAACC,EAAKU,IAERR,EAAAA,IAACS,EAAAA,YAAW,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,EAAAA,QAAMgC,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":["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":"6RAiBmC,EAC/BA,eACAC,gBACAC,oBACAC,WACAC,UACAC,UACAC,UACAC,yBACAC,sBAKA,MAAMC,EAAkBC,EAAAA,OAAsB,MAE9CC,EAAAA,WAAU,KACN,GAAIF,EAAgBG,QAAS,CACzB,MAAMC,EAAOJ,EAAgBG,QAC7BH,EAAgBG,QAAU,KAC1BE,EAAcD,EAClB,IACD,CAACb,IAKJ,MAAMe,EAAiBC,EAAAA,aAAY,IAM3Bd,GACAe,EAAAA,QAAMf,GAAmBgB,OAAOlB,EAAc,SAEvCiB,EAAAA,QAAMf,GAIbe,EAAAA,UAAQC,OAAOlB,EAAc,SAEtBiB,EAAAA,UAAQE,QAAQ,QAIvBd,GAAWL,EAAakB,OAAOD,EAAAA,QAAMZ,GAAU,SACxCY,EAAAA,QAAMZ,GAIVY,UAAMjB,GAAcmB,QAAQ,UACpC,CAACjB,EAAmBF,EAAcK,IAE/Be,EAAgBC,IAClB,MAAMC,EAAaL,EAAAA,QAAMI,GAEzB,GACIE,EAAAA,eAAeC,cACXF,EACAjB,EAAUY,EAAAA,QAAMZ,QAAWoB,EAC3BnB,EAAUW,EAAAA,QAAMX,QAAWmB,GAEjC,CACE,IAAKH,EAAWJ,OAAOlB,EAAc,SAGjC,OAFAQ,SAAAA,EAAkBa,QAClBZ,EAAgBG,QAAUS,GAG9BP,EAAcO,EAClB,GAMEK,EAAkBC,EAAAA,SACpB,IAAiBJ,EAAAA,eAAeK,aAAa5B,IAC7C,CAACA,IAEC6B,EAAcF,EAAAA,SAChB,IAAaZ,KACb,CAACA,KAGEe,EAAYhB,GAAiBiB,EAAAA,SAAiB,KAC9CC,EAAYC,GAAiBF,EAAAA,SAAiB,IAK/CG,EAAiB,CAACb,EAAcc,KAClC,GAAIA,IAAe5B,EAAwB,OAC3C,MAAM6B,EAAiBf,EAAMF,QAAQ,QAErChB,EAASiC,GAEHf,IAAUJ,EAAAA,QAAMI,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,EAAAA,0BACgB,mBACZC,OApEcC,IACdA,EAAEC,cAAcC,SAASF,EAAEG,iBAK/B/B,EAAc,IACdmB,EAAc,IACd7B,EAAQ,IAAG,EA4Da,aACT,iBACX0C,UAAWC,EAAAA,QAAcC,SAAA,CAvDtBtB,EAAgB,GAAGuB,KAAI,CAACC,EAAKC,IAChCC,MAAA,MAAA,CAEIN,UAAWO,EAAAA,qCAGVpC,EAAAA,QAAMiC,GAAKI,OAAO,QAJd,YAAYH,OAUlBzB,EAAgBuB,KAAI,CAACM,EAAMC,IAE1BJ,EAAAA,IAAA,MAAA,CAEIK,aAAclB,EACdmB,KAAK,QACLZ,UAAWa,EAAAA,WAAiBX,SAE3BO,EAAKN,KAAI,CAACC,EAAKU,IAERR,EAAAA,IAACS,EAAAA,YAAW,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,EAAAA,QAAMiC,GAAKhC,OAAOW,EAAa,OACzB,GACA,GAjBL,OAAO+B,QARnBJ,OA4CX"}

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

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

package/cjs/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":["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":"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"}
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":["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":"wYA6B2B,EACvBA,OACAC,eACAC,eACAC,YACAC,YACAC,UACAC,UACAC,gBACAC,yBACAC,WACAC,UACAC,UACAC,eACAC,eAKA,MAAMC,EAAWC,EAAAA,eAAeC,cAC5BhB,EACAO,EACAF,EACAC,GAEEW,GAAeH,GAAYN,GACzBU,MAAOC,EAAeC,IAAKC,GAC/BN,EAAAA,eAAeO,gBAAgBC,EAAAA,WAAWC,QAAQtB,KAC9CgB,MAAOO,EAAYL,IAAKM,GAAaX,EAAAA,eAAeO,gBACxDC,EAAAA,WAAWC,QAAQrB,KAGfe,MAAOS,EAAWP,IAAKQ,GAC3Bb,EAAAA,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,EAAAA,QAAMV,GAAWW,OAAO,gBAAgBD,EAAAA,QAC1DT,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,EAAAA,QAAMjC,GACjBS,WACAuB,QAGAyB,YAAYhC,QAAmBiC,EAC/BC,KAAMlC,EAAmB,SAAW,QAGxC,OACImC,EAAAA,IAACC,UAAOC,OAAAC,OAAA,GAAK3B,EApCI,MACjB,MAAM4B,EAAwB,CAAA,EAQ9B,OANInE,EAAaoE,UAAYrE,EAAKqE,QAC9BD,EAAME,UAAY,cACXjC,EAAAA,UAAQP,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/cjs/shared/progress-bar/progress-bar.js CHANGED Viewed

@@ -1,33 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),e=require("styled-components"),r=require("../../v3_theme/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const s=o(e).default.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 s;return s=o&&"string"==typeof o?o:o?o(t):r.V3_Colour["icon-primary-subtle"](t),e.css`
-            border: ${r.V3_Border["width-010"]} ${r.V3_Border.solid}
-                ${s};
-            border-radius: ${r.V3_Radius.sm};
-            &:after {
-                content: "";
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                border-radius: inherit;
-                background: ${s};
-                width: ${100*t.$innerWidth}%;
-            }
-        `}}
-`;exports.ProgressBar=({className:e,progress:r,color:o,"data-testid":i})=>t.jsx(s,{className:e,$innerWidth:r,$color:o,"data-testid":i,children:t.jsx("progress",{value:100*r,max:100})});
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),s=require("react");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js");var t=require("../../theme/tokens/colour.js");require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js");var u=require("../../theme/utils/use-apply-styles.js"),o=require("./progress-bar.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(r);exports.ProgressBar=({className:r,progress:a,colour:l,"data-testid":n})=>{const d=null!=l?l:t.Colour["icon-primary-subtle"],m=s.useRef(null);return u.useApplyStyle(m,{[o.tokens.barColour]:d,[o.tokens.barWidth]:100*a+"%"}),e.jsx("div",{className:i.default(o.bar,r),"data-testid":n,ref:m,children:e.jsx("progress",{value:100*a,max:100})})};
 //# sourceMappingURL=progress-bar.js.map

package/cjs/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":["~~Bar~~","~~styled~~","~~div~~","~~props~~","~~$color~~","~~color~~","~~colorToUse~~","~~V3_Colour~~","~~css~~","~~V3_Border~~","~~V3_Radius~~","~~$innerWidth~~","~~className~~","~~progress~~","~~testId~~","~~_jsx~~","value","max"],"mappings":"~~kMA6CMA~~,~~OAAMC~~,~~QAAOC~~,~~GAAe;;;;;;;;;;;;;;;MAe3BC~~,~~IACC~~,~~MAAQC~~,~~OAAQC~~,~~GAAUF~~,~~EAC1B~~,~~IAAIG~~,~~EASJ~~,~~OAPIA~~,~~EADAD~~,~~GAA0B~~,~~iBAAVA~~,~~EACHA~~,~~EACNA~~,~~EACOA~~,~~EAA8BF~~,~~GAE/BI~~,EAAAA,~~UAAU~~,~~uBAAuBJ~~,~~GAG3CK~~,~~KAAG;sBACIC~~,EAAAA,~~UAAU~~,~~gBAAgBA~~,~~EAAAA~~,~~UAAiB;kBAC/CH;6BACWI~~,EAAAA,~~UAAc;;;;;;;;;8BASbJ;yBACe~~,~~IAApBH~~,~~EAAMQ;;SAEtB;sBApEkB~~,~~EACvBC~~,~~YACAC~~,~~WACAR~~,~~QACA~~,~~cAAeS~~,~~KAEfC~~,EAAAA,~~IAACf~~,~~EAAG~~,~~CACAY~~,~~UAAWA~~,~~cACEC~~,~~EAAQT~~,~~OACbC~~,~~EAAK~~,~~cACAS~~,~~WAEbC,~~EAAAA,IAAA,WAAA,~~CAAUC~~,MAAkB,~~IAAXH~~,~~EAAgBI~~,IAAK"}
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":["className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"kiBAe2B,EACvBA,YACAC,WAAQC,OACRA,EACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAAA,OAAO,uBAE/BC,EAASC,EAAAA,OAAuB,MAOtC,OALAC,EAAAA,cAAcF,EAAQ,CAClB,CAACG,EAAAA,OAAcC,WAAYN,EAC3B,CAACK,EAAAA,OAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAAA,IAAA,MAAA,CACIZ,UAAWa,EAAAA,QAAKC,EAAAA,IAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAAA,IAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}

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

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./progress-bar.styles_125ri7a.css");exports.bar="b1gldp2k",exports.tokens={barColour:"--fds-internal-progressBar-colour",barWidth:"--fds-internal-progressBar-width"};
2	+ //# sourceMappingURL=progress-bar.styles.js.map

package/cjs/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":["barColour","barWidth"],"mappings":"yGASgB,0BALM,CAClBA,UAAW,oCACXC,SAAU"}

package/cjs/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/cjs/shared/range-input-inner-container/range-input-inner-container.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("./range-input-inner-container.styles.js");exports.RangeInputInnerContainer=({children:n,currentActive:a,error:t,className:i,wrap:s})=>{const[c,o]=n;return r.jsxs(e.Wrapper,{className:i,$wrap:s,children:[r.jsx(e.ElementContainer,{"data-id":"range-container-elem1-container",children:c}),r.jsx(e.ArrowRight,{}),s&&r.jsx(e.Break,{}),r.jsx(e.ElementContainer,{"data-id":"range-container-elem2-container",children:o}),r.jsx(e.Indicator,{"data-id":"range-container-indicator",$position:a,$error:t,$wrap:s})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),a=require("clsx"),n=require("./range-input-inner-container.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=i(a);exports.RangeInputInnerContainer=({children:a,currentActive:i,error:s,className:c,wrap:d})=>{const[o,l]=a;return e.jsxs("div",{className:t.default(n.wrapper,d&&n.wrapperWrap,c),children:[e.jsx("div",{className:n.elementContainer,"data-id":"range-container-elem1-container",children:o}),e.jsx(r.ArrowRightIcon,{"aria-hidden":"true",className:n.arrowRight}),d&&e.jsx("div",{className:n.lineBreak}),e.jsx("div",{className:n.elementContainer,"data-id":"range-container-elem2-container",children:l}),e.jsx("div",{className:t.default(n.indicator,s&&n.indicatorError,d&&n.indicatorWrap),"data-id":"range-container-indicator","data-position":i})]})};
 //# sourceMappingURL=range-input-inner-container.js.map

package/cjs/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":["children","currentActive","error","className","wrap","elem1","elem2","_jsxs","~~Wrapper~~","~~$wrap~~","_jsx","~~ElementContainer~~","~~ArrowRight~~","~~Break~~","~~Indicator~~","~~$position~~","~~$error~~"],"mappings":"~~sIAawC~~,EACpCA,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,EAAAA,~~KAACC~~,~~UAAO~~,~~CAACL~~,~~UAAWA~~,~~EAASM~~,~~MAASL~~,~~EAAIJ~~,SAAA,~~CACtCU~~,~~MAACC~~,EAAAA,~~iBAAgB~~,~~CAAA~~,~~UAAS~~,~~2CACrBN~~,~~IAELK,~~EAAAA,IAACE,~~aAAU~~,CAAA,~~GACVR~~,~~GAAQM~~,EAAAA,~~IAACG~~,EAAAA,~~MAAK~~,~~IACfH~~,~~MAACC~~,EAAAA,~~4BAAyB~~,~~kCAAiCX~~,~~SACtDM~~,~~IAELI~~,~~MAACI~~,EAAAA,~~UAAS~~,~~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":["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":"4QAUwC,EACpCA,WACAC,gBACAC,QACAC,YACAC,WAKA,MAAOC,EAAOC,GAASN,EAKvB,OACIO,EAAAA,YACIJ,UAAWK,EAAAA,QACPC,EAAAA,QACAL,GAAQM,EAAAA,YACRP,GACHH,SAAA,CAEDW,EAAAA,WACIR,UAAWS,EAAAA,2BACH,kCAAiCZ,SAExCK,IAELM,EAAAA,IAACE,EAAAA,eAAc,CAAA,cAAa,OAAOV,UAAWW,EAAAA,aAC7CV,GAAQO,EAAAA,IAAA,MAAA,CAAKR,UAAWY,EAAAA,YACzBJ,EAAAA,IAAA,MAAA,CACIR,UAAWS,EAAAA,iBAAuB,UAC1B,2CAEPN,IAELK,EAAAA,IAAA,MAAA,CACIR,UAAWK,EAAAA,QACPQ,EAAAA,UACAd,GAASe,EAAAA,eACTb,GAAQc,EAAAA,eACX,UACO,4CACOjB,MAEjB"}

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

@@ -1,65 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons"),t=require("styled-components"),n=require("../../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(t);const o=a.default.div`
-    position: relative;
-    height: 100%;
-    display: flex;
-    flex: 1;
-    ${e=>{if(e.$wrap)return t.css`
-                /* Parent container need to provide space */
-                flex-wrap: wrap;
-                [data-id="range-container-elem1-container"],
-                [data-id="range-container-elem2-container"] {
-                    // 100% - Icon size - 2padding
-                    max-width: calc(
-                        100% - ${n.V3_Font.Spec["body-size-baseline"]} -
-                            ${n.V3_Spacing["spacing-16"]}
-                    );
-                    flex: unset;
-                }
-                [data-id="range-container-elem2-container"] {
-                    margin-top: ${n.V3_Spacing["spacing-8"]};
-                }
-            `}}
-`,r=a.default.div`
-    width: 100%; // Force next flex item to break to next line
-`,s=a.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-`,c=a.default(e.ArrowRightIcon)`
-    color: ${n.V3_Colour.icon};
-    width: ${n.V3_Font.Spec["body-size-baseline"]};
-    height: ${n.V3_Font.Spec["body-size-baseline"]};
-    flex-shrink: 0;
-    margin: 0 ${n.V3_Spacing["spacing-8"]};
-    align-self: center;
-`,d=a.default.div`
-    position: absolute;
-    background: ${e=>e.$error?n.V3_Colour["border-error-focus-strong"]:n.V3_Colour["border-focus-strong"]};
-    height: 2px;
-    // half - half padding - half icon width
-    width: calc(
-        50% - ${n.V3_Spacing["spacing-8"]} -
-            (${n.V3_Font.Spec["body-size-baseline"]} / 2)
-    );
-    transition: left ${n.V3_Motion["duration-350"]} ${n.V3_Motion["ease-standard"]},
-        opacity ${n.V3_Motion["duration-350"]} ${n.V3_Motion["ease-standard"]};
-    left: 0;
-    bottom: 0;
-    ${e=>{switch(e.$position){case"start":return t.css`
-                    opacity: 1;
-                `;case"end":return t.css`
-                    left: calc(50% + ${n.V3_Spacing["spacing-16"]});
-                    opacity: 1;
-                `;case"none":return t.css`
-                    opacity: 0;
-                `}}}
-    ${e=>{if(e.$wrap)return t.css`
-                display: none;
-            `}}
-`;exports.ArrowRight=c,exports.Break=r,exports.ElementContainer=s,exports.Indicator=d,exports.Wrapper=o;
+"use strict";require("./range-input-inner-container.styles_1v61utg.css");exports.arrowRight="a1uc2vum",exports.elementContainer="e13aheiu",exports.indicator="i1c4xw6e",exports.indicatorError="i1gifs7v",exports.indicatorWrap="i175ocg1",exports.lineBreak="lk3rj3g",exports.wrapper="w1i0lopf",exports.wrapperWrap="ws05n6a";
 //# sourceMappingURL=range-input-inner-container.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.styles.~~tsx~~"],"sourcesContent":["import { ~~ArrowRightIcon~~ } from \"@~~lifesg~~/~~react-icons~~\";\~~nimport styled, { css } from \"styled-components\";\~~n\nimport { ~~V3_Colour~~, ~~V3_Font~~, ~~V3_Motion~~, ~~V3_Spacing~~ } from \"../../~~v3_theme~~\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface GeneralStyleProps {\n $wrap?: boolean;\n}\n\ninterface IndicatorStyleProps extends GeneralStyleProps {\n $position: \"start\" \| \"end\" \| \"none\";\n $error: boolean \| undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const ~~Wrapper~~ = ~~styled.div<GeneralStyleProps>`\~~n position: relative;\n height: 100%;\n display: flex;\n flex: 1;\n\~~n ${(props)~~ => ~~{\n if~~ ~~(props.$wrap)~~ ~~{\n return~~ css`\n /* Parent container need to provide space */\n flex-wrap: wrap;\n\n [data-id=\"range-container-elem1-container\"],\n [data-id=\"range-container-elem2-container\"] {\n // 100% - Icon size - 2padding\n max-width: calc(\n 100% - ${~~V3_Font~~.Spec[\"body-size-baseline\"]} ~~-\n~~ ${~~V3_Spacing~~[\"spacing-16\"]}\n );\n flex: unset;\n }\n\n [data-id=\"range-container-elem2-container\"] {\n margin-top: ${~~V3_Spacing~~[\"spacing-8\"]};\n ~~}\n `;\n }\n~~ }}\n`;\n\nexport const ~~Break~~ = ~~styled.div~~`\n ~~width: 100%; // Force next flex item to break to next line\n`;\n\nexport const ElementContainer = styled.div`\n~~ display: flex;\n flex: 1;\n align-items: center;\n`;\n\nexport const ~~ArrowRight~~ = ~~styled(ArrowRightIcon)~~`\n color: ${~~V3_Colour~~[\"icon\"]};\n width: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n height: ${~~V3_Font~~.Spec[\"body-size-baseline\"]};\n flex-shrink: 0;\n margin: 0 ${~~V3_Spacing~~[\"spacing-8\"]};\n align-self: center;\n`;\n\nexport const ~~Indicator~~ = ~~styled.div<IndicatorStyleProps>`\~~n position: absolute;\n background: ${~~(props) =>\n props.$error\n ? V3_Colour~~[\"border-~~error-~~focus-strong\"]~~\n : V3_Colour[\"border-focus-strong\"]~~};\n height: 2px;\n // half - half padding - half icon width\n width: calc(\n 50% - ${~~V3_Spacing~~[\"spacing-8\"]} ~~-\n~~ (${~~V3_Font~~.Spec[\"body-size-baseline\"]} / 2)\n );\n transition: left ${~~V3_Motion~~[\"duration-350\"]} ${~~V3_Motion~~[\"ease-standard\"]},\n opacity ${~~V3_Motion~~[\"duration-350\"]} ${~~V3_Motion~~[\"ease-standard\"]};\n left: 0;\n bottom: 0;\n\n ~~${(props)~~ ~~=> {~~\n ~~switch (props.$~~position~~) {\n case \~~"start\"~~:\n return~~ ~~css`\~~n opacity: 1;\n ~~`;\~~n ~~case~~ \"end\"~~:\n return~~ ~~css`\~~n left: calc(50% + ${~~V3_Spacing~~[\"spacing-16\"]});\n opacity: 1;\n `;\n ~~case~~ \~~"none\":\n return~~ css`\n ~~opacity~~: 0;\n `;\n }\~~n }}\n\n ${(props)~~ => ~~{\n if~~ ~~(props.$wrap)~~ ~~{\n return~~ css`\n display: none;\n `;\n ~~}\n }}\n`;\n~~"],"names":[~~"Wrapper","styled","div","props","$wrap","css","V3_Font","Spec","V3_Spacing","Break","ElementContainer","ArrowRight","ArrowRightIcon","V3_Colour","Indicator","$error","V3_Motion","$position"~~],"mappings":"~~yMAqBO~~,~~MAAMA~~,~~EAAUC~~,~~EAAAA~~,~~QAAOC~~,~~GAAsB;;;;;;MAM7CC~~,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;;;;;;;;iCAQWC,EAAAA,QAAQC,KAAK;8BAChBC,EAAAA,WAAW;;;;;;kCAMPA,EAAAA,WAAW;;aAGrC;EAIKC,EAAQR,EAAAA,QAAOC,GAAG;;EAIlBQ,EAAmBT,EAAAA,QAAOC,GAAG;;;;EAM7BS,EAAaV,EAAAA,QAAOW,EAAAA,eAAe;aACnCC,EAAAA,UAAgB;aAChBP,EAAAA,QAAQC,KAAK;cACZD,EAAAA,QAAQC,KAAK;;gBAEXC,EAAAA,WAAW;;EAIdM,EAAYb,EAAAA,QAAOC,GAAwB;;kBAErCC,GACXA,EAAMY,OACAF,EAAAA,UAAU,6BACVA,EAAAA,UAAU;;;;gBAIRL,EAAAA,WAAW;eACZF,EAAAA,QAAQC,KAAK;;uBAELS,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;kBAC5CA,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;;;;MAIlDb,IACC,OAAQA,EAAMc,WACV,IAAK,QACD,OAAOZ,KAAG;;kBAGd,IAAK,MACD,OAAOA,KAAG;uCACaG,EAAAA,WAAW;;kBAGtC,IAAK,OACD,OAAOH,KAAG;;;;MAMnBF,IACC,GAAIA,EAAMC,MACN,OAAOC,KAAG;;aAGd;"}
1	+ {"version":3,"file":"range-input-inner-container.styles.js","sources":["../../../../src/shared/range-input-inner-container/range-input-inner-container.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../../theme\";\n\nexport const wrapper = css`\n position: relative;\n height: 100%;\n display: flex;\n flex: 1;\n`;\n\nexport const wrapperWrap = css`\n /* Parent container need to provide space */\n flex-wrap: wrap;\n\n [data-id=\"range-container-elem1-container\"],\n [data-id=\"range-container-elem2-container\"] {\n // 100% - Icon size - 2padding\n max-width: calc(\n 100% - ${Font.Spec[\"body-size-baseline\"]} - ${Spacing[\"spacing-16\"]}\n );\n flex: unset;\n }\n\n [data-id=\"range-container-elem2-container\"] {\n margin-top: ${Spacing[\"spacing-8\"]};\n }\n`;\n\nexport const elementContainer = css`\n display: flex;\n flex: 1;\n align-items: center;\n`;\n\nexport const arrowRight = css`\n color: ${Colour[\"icon\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n height: ${Font.Spec[\"body-size-baseline\"]};\n flex-shrink: 0;\n margin: 0 ${Spacing[\"spacing-8\"]};\n align-self: center;\n`;\n\nexport const lineBreak = css`\n width: 100%; // Force next flex item to break to next line\n`;\n\nexport const indicator = css`\n position: absolute;\n background: ${Colour[\"border-focus-strong\"]};\n height: 2px;\n // half - half padding - half icon width\n width: calc(\n 50% - ${Spacing[\"spacing-8\"]} - (${Font.Spec[\"body-size-baseline\"]} / 2)\n );\n transition: left ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]},\n opacity ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n left: 0;\n bottom: 0;\n opacity: 0;\n\n &[data-position=\"start\"] {\n opacity: 1;\n }\n\n &[data-position=\"end\"] {\n left: calc(50% + ${Spacing[\"spacing-16\"]});\n opacity: 1;\n }\n`;\n\nexport const indicatorError = css`\n background: ${Colour[\"border-error-focus-strong\"]};\n`;\n\nexport const indicatorWrap = css`\n display: none;\n`;\n"],"names":[],"mappings":"8IAmCuB,oCANM,6BAmBP,kCAwBK,iCAID,6BAhCJ,0BAxCF,+BAOI"}

package/cjs/shared/range-input-inner-container/range-input-inner-container.styles_1v61utg.css ADDED Viewed

@@ -0,0 +1,12 @@
+.w1i0lopf{position:relative;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;}
+.ws05n6a{-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}.ws05n6a [data-id="range-container-elem1-container"],.ws05n6a [data-id="range-container-elem2-container"]{max-width:calc(
+            100% - var(--fds-font-body-size-baseline) - var(--fds-spacing-16)
+        );-webkit-flex:unset;-ms-flex:unset;flex:unset;}.ws05n6a [data-id="range-container-elem2-container"]{margin-top:var(--fds-spacing-8);}
+.e13aheiu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.a1uc2vum{color:var(--fds-colour-icon);width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0 var(--fds-spacing-8);-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;}
+.lk3rj3g{width:100%;}
+.i1c4xw6e{position:absolute;background:var(--fds-colour-border-focus-strong);height:2px;width:calc(
+        50% - var(--fds-spacing-8) - (var(--fds-font-body-size-baseline) / 2)
+    );-webkit-transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:left var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard),opacity var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);left:0;bottom:0;opacity:0;}.i1c4xw6e[data-position="start"]{opacity:1;}.i1c4xw6e[data-position="end"]{left:calc(50% + var(--fds-spacing-16));opacity:1;}
+.i1gifs7v{background:var(--fds-colour-border-error-focus-strong);}
+.i175ocg1{display:none;}

package/cjs/shared/standalone-date-input/standalone-date-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var a=require("../../util/date-input-helper.js"),u=require("../../util/string-helper.js"),l=require("../../util/use-state-ref.js"),o=require("./standalone-date-input.style.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=i(r);t.default.extend(n.default);const c=({disabled:n,readOnly:i,names:s,value:c,focused:d,hoverValue:f,placeholder:p,label:v,onChange:h,onFocus:m,onBlur:g,hideInputKeyboard:y,inputLabels:x=["Date","Month","Year"]},j)=>{const b=y?"none":"numeric",[Y,D,I]=l.useStateRef(""),[M,$,S]=l.useStateRef(""),[C,q,R]=l.useStateRef(""),[k,w]=r.useState("none"),[B,F]=r.useState(!1),V=r.useRef(null),E=r.useRef(null),H=r.useRef(null),L=r.useRef(null),[O,K,P]=N(f);r.useEffect((()=>{var e;const[t="",n="",r=""]=N(c);D(t),$(n),q(r),t||n||r||!V.current||!V.current.contains(document.activeElement)||null===(e=E.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;d||w("none"),d&&(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))}),[d]),r.useImperativeHandle(j,(()=>({ref:V,resetPlaceholder(){F(!1)},resetInput(){const[e="",t="",n=""]=N(c);D(e),$(t),q(n)},focusYearRef(){var e;null===(e=L.current)||void 0===e||e.focus()}})),[D,$,q,c]);const z=e=>{var t;e.preventDefault(),null===(t=E.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;w(t)},A=e=>{const[n,r,a]=s,l={[n]:I.current,[r]:S.current,[a]:R.current},o=e.target.name,i=l[o],c=o!==a?u.StringHelper.padValue(i,!0):i;switch(o){case n:l[n]=c,D(c);break;case r:l[r]=c,$(c)}const d=`${l[a]}-${l[r]}-${l[n]}`,f=t.default(d,"YYYY-MM-DD",!0).isValid(),p=!l[n]&&!l[r]&&!l[a];f&&i!==c&&h(d),V.current&&!V.current.contains(e.relatedTarget)&&(w("none"),null==g||g(p||f))},G=e=>{var n,r;if(f)return;const a=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:Y,month:M,year:C};switch(a){case s[0]:l.day=u,D(u),2===u.length&&(null===(n=H.current)||void 0===n||n.focus());break;case s[1]:l.month=u,$(u),2===u.length&&(null===(r=L.current)||void 0===r||r.focus());break;case s[2]:l.year=u,q(u)}if(!l.day&&!l.month&&!l.year)return void h("");const o=`${l.year}-${l.month}-${l.day}`;t.default(o,"YYYY-MM-DD",!0).isValid()&&h(o)},J=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(k===s[1]&&0===M.length&&(null===(t=E.current)||void 0===t||t.focus()),k===s[2]&&0===C.length&&(null===(n=H.current)||void 0===n||n.focus()))};function N(e){if(e){const n=a.DateInputHelper.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const r=t.default(n,"YYYY-MM-DD",!0);return[u.StringHelper.padValue(r.date().toString()),u.StringHelper.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs(o.InputSection,{role:"group","aria-label":v,onClick:()=>{var e;n||i||(F(!0),V.current&&!V.current.contains(document.activeElement)&&(null===(e=E.current)||void 0===e||e.focus()))},onFocus:e=>{n||(F(!0),d||null==m||m(e))},children:[e.jsxs(o.InputContainer,{ref:V,$hover:!!f,children:[e.jsx(o.DayInput,{ref:E,name:s[0],maxLength:2,value:null!=O?O:Y,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[0]}-input`,"aria-label":x[0],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[0]||i?"DD":""}),e.jsx(o.Divider,{$inactive:0===Y.length,children:"/"}),e.jsx(o.MonthInput,{ref:H,name:s[1],maxLength:2,value:null!=K?K:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{2}","data-testid":`${s[1]}-input`,"aria-label":x[1],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[1]||i?"MM":""}),e.jsx(o.Divider,{$inactive:0===M.length,children:"/"}),e.jsx(o.YearInput,{ref:L,name:s[2],maxLength:4,value:null!=P?P:C,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:b,pattern:"[0-9]{4}","data-testid":`${s[2]}-input`,"aria-label":x[2],disabled:n,readOnly:i,tabIndex:i?-1:0,autoComplete:"off",placeholder:k!==s[2]||i?"YYYY":""})]}),(()=>{if(!c&&!i&&p)return e.jsx(o.Placeholder,{$hide:B,$disabled:n,onMouseDown:z,children:p})})()]})},d=s.default.forwardRef(c);exports.Component=c,exports.StandaloneDateInput=d;
+"use strict";var e=require("react/jsx-runtime"),t=require("clsx"),a=require("../../external/dayjs/dayjs.min.js"),n=require("../../external/dayjs/plugin/customParseFormat.js"),r=require("react");require("../../util/calendar-helper.js");var u=require("../../util/date-input-helper.js");require("../../util/simple-id-generator.js");var l=require("../../util/string-helper.js");require("@react-aria/live-announcer");var s=require("../../util/use-state-ref.js"),i=require("./standalone-date-input.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(t),c=o(r);a.default.extend(n.default);const p=({disabled:t,readOnly:n,names:o,value:c,focused:p,hoverValue:f,placeholder:v,label:m,onChange:h,onFocus:g,onBlur:x,hideInputKeyboard:y,inputLabels:b=["Date","Month","Year"]},j)=>{const I=y?"none":"numeric",[S,Y,D]=s.useStateRef(""),[M,q,H]=s.useStateRef(""),[N,C,B]=s.useStateRef(""),[R,$]=r.useState("none"),[k,z]=r.useState(!1),w=r.useRef(null),F=r.useRef(null),V=r.useRef(null),E=r.useRef(null),[L,O,K]=Q(f);r.useEffect((()=>{var e;const[t="",a="",n=""]=Q(c);Y(t),q(a),C(n),t||a||n||!w.current||!w.current.contains(document.activeElement)||null===(e=F.current)||void 0===e||e.focus()}),[c]),r.useEffect((()=>{var e;p||$("none"),p&&(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))}),[p]),r.useImperativeHandle(j,(()=>({ref:w,resetPlaceholder(){z(!1)},resetInput(){const[e="",t="",a=""]=Q(c);Y(e),q(t),C(a)},focusYearRef(){var e;null===(e=E.current)||void 0===e||e.focus()}})),[Y,q,C,c]);const P=e=>{var t;e.preventDefault(),null===(t=F.current)||void 0===t||t.focus()},T=e=>{e.target.select();const t=e.target.name;$(t)},A=e=>{const[t,n,r]=o,u={[t]:D.current,[n]:H.current,[r]:B.current},s=e.target.name,i=u[s],d=s!==r?l.StringHelper.padValue(i,!0):i;switch(s){case t:u[t]=d,Y(d);break;case n:u[n]=d,q(d)}const c=`${u[r]}-${u[n]}-${u[t]}`,p=a.default(c,"YYYY-MM-DD",!0).isValid(),f=!u[t]&&!u[n]&&!u[r];p&&i!==d&&h(c),w.current&&!w.current.contains(e.relatedTarget)&&($("none"),null==x||x(f||p))},G=e=>{var t,n;if(f)return;const r=e.target.name,u=e.target.value.replace(/[^0-9]/g,""),l={day:S,month:M,year:N};switch(r){case o[0]:l.day=u,Y(u),2===u.length&&(null===(t=V.current)||void 0===t||t.focus());break;case o[1]:l.month=u,q(u),2===u.length&&(null===(n=E.current)||void 0===n||n.focus());break;case o[2]:l.year=u,C(u)}if(!l.day&&!l.month&&!l.year)return void h("");const s=`${l.year}-${l.month}-${l.day}`;a.default(s,"YYYY-MM-DD",!0).isValid()&&h(s)},J=e=>{var t,a;"Backspace"!==e.code&&"Backspace"!==e.key||(R===o[1]&&0===M.length&&(null===(t=F.current)||void 0===t||t.focus()),R===o[2]&&0===N.length&&(null===(a=V.current)||void 0===a||a.focus()))};function Q(e){if(e){const t=u.DateInputHelper.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const n=a.default(t,"YYYY-MM-DD",!0);return[l.StringHelper.padValue(n.date().toString()),l.StringHelper.padValue((n.month()+1).toString()),n.year().toString()]}return[void 0,void 0,void 0]}return e.jsxs("div",{role:"group","aria-label":m,className:i.inputSection,onClick:()=>{var e;t||n||(z(!0),w.current&&!w.current.contains(document.activeElement)&&(null===(e=F.current)||void 0===e||e.focus()))},onFocus:e=>{t||(z(!0),p||null==g||g(e))},children:[e.jsxs("div",{ref:w,className:i.inputContainer,children:[e.jsx("span",{className:d.default(i.inputSizerBase,i.dayInputSizer),children:e.jsx("input",{ref:F,name:o[0],maxLength:2,value:null!=L?L:S,onFocus:T,onBlur:A,onChange:G,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${o[0]}-input`,"aria-label":b[0],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[0]||n?"DD":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})}),e.jsx("span",{className:d.default(i.divider,0===S.length&&i.dividerInactive,!!f&&i.dividerHover),children:"/"}),e.jsx("span",{className:d.default(i.inputSizerBase,i.monthInputSizer),children:e.jsx("input",{ref:V,name:o[1],maxLength:2,value:null!=O?O:M,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:I,pattern:"[0-9]{2}","data-testid":`${o[1]}-input`,"aria-label":b[1],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[1]||n?"MM":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})}),e.jsx("span",{className:d.default(i.divider,0===M.length&&i.dividerInactive,!!f&&i.dividerHover),children:"/"}),e.jsx("span",{className:d.default(i.inputSizerBase,i.yearInputSizer),children:e.jsx("input",{ref:E,name:o[2],maxLength:4,value:null!=K?K:N,onFocus:T,onBlur:A,onChange:G,onKeyDown:J,type:"text",inputMode:I,pattern:"[0-9]{4}","data-testid":`${o[2]}-input`,"aria-label":b[2],disabled:t,readOnly:n,tabIndex:n?-1:0,autoComplete:"off",placeholder:R!==o[2]||n?"YYYY":"",className:d.default(i.baseInput,!!f&&i.baseInputHover)})})]}),(()=>{if(!c&&!n&&v)return e.jsx("div",{className:d.default(i.placeholder,t&&i.placeholderDisabled,k&&i.placeholderHide),onMouseDown:P,children:v})})()]})},f=c.default.forwardRef(p);exports.Component=p,exports.StandaloneDateInput=f;
 //# sourceMappingURL=standalone-date-input.js.map