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/timeline/timeline.style.d.ts CHANGED Viewed

@@ -6,18 +6,50 @@ interface TimelineWrapperStyleProps {
 interface VariantStyleProps {
     $variant: Variant;
 }
-export declare const CircleIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VariantStyleProps>> & string;
-export declare const LineIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VariantStyleProps>> & string;
-export declare const TimelineIndicators: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimelineWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimelineWrapperStyleProps>> & string;
-export declare const TimelineTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
-export declare const TimelineItemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
-export declare const TimelineItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimelineItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimelinePills: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const TimelinePill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").PillProps, never>> & string & Omit<({ type, colorType, children, icon, ...otherProps }: import("..").PillProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const CircleIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & VariantStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & VariantStyleProps, never>>> & string;
+export declare const LineIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & VariantStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$variant"> & VariantStyleProps, never>>> & string;
+export declare const TimelineIndicators: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TimelineWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimelineWrapperStyleProps> & TimelineWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TimelineWrapperStyleProps> & TimelineWrapperStyleProps, never>>> & string;
+export declare const TimelineTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const TimelineItemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const TimelineItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TimelineItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TimelinePills: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TimelinePill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").PillProps, never> & Partial<Pick<import("..").PillProps, never>>> & string & Omit<({ type, colorType, children, icon, className, ...otherProps }: import("..").PillProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

package/timepicker/timepicker.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { TimepickerProps } from "./types";
-export declare const Timepicker: ({ id, disabled, readOnly, error, value, placeholder, format, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timepicker: ({ id, disabled, readOnly, error, value, placeholder, format, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, className, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;

package/timepicker/timepicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as n}from"react";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as d}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as i}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as t}from"../util/time-helper.js";import{InputSelectorElement as s}from"./timepicker.styles.js";const p=p=>{var{id:m,disabled:c=!1,readOnly:u=!1,error:b,value:f,placeholder:w,format:y="24hr",onChange:v,onFocus:h,onBlur:g,alignment:j,dropdownZIndex:k,dropdownRootNode:O,"aria-labelledby":x,"aria-describedby":C}=p,D=e(p,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby"]);const[F,$]=o(!1),H=a(null),M=a(null),B=n((()=>"12hr"===y?"HH:MMam":"HH:MM"),[y]),I=()=>{var e;null===(e=M.current)||void 0===e||e.focus({preventScroll:!0})},N=()=>{c||u||$(!0)},R=()=>{$(!1),I()},Z=e=>{null==v||v(e),$(!1),I()},E=()=>{null==h||h()},T=e=>{var r;if(F)return;const o=e.relatedTarget;o&&(null===(r=H.current)||void 0===r?void 0:r.contains(o))||null==g||g()},_=e=>{c||u||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),N())};return r(l,{enabled:!u&&!c,isOpen:F,renderElement:()=>r(d,Object.assign({ref:H,role:"group",$readOnly:u,$disabled:c,$focused:F,$error:b},D,{children:r(s,{ref:M,readOnly:!0,placeholder:w||B(),value:t.formatDisplayValue(f,y),role:"combobox","aria-invalid":b||void 0,"aria-disabled":c||void 0,"aria-readonly":u||void 0,"aria-labelledby":x,"aria-describedby":C,"aria-expanded":!c&&!u&&F,"data-testid":m?`${m}-timepicker-selector`:"timepicker-selector",onFocus:E,onClick:N,onKeyDown:_,onBlur:T})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(i,{id:m,show:F,value:f,format:y,onCancel:R,onChange:Z})})),onOpen:N,onClose:()=>{$(!1),null==g||g()},onDismiss:R,offset:8,alignment:j,customZIndex:k,rootNode:O})};export{p as Timepicker};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as l}from"react";import{ElementWithDropdown as n}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as i,BasicInput as d}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as t}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as s}from"../util/time-helper.js";import{inputSelectorElement as p}from"./timepicker.styles.js";const m=m=>{var{id:c,disabled:u=!1,readOnly:b=!1,error:f,value:y,placeholder:v,format:w="24hr",onChange:h,onFocus:g,onBlur:k,alignment:j,dropdownZIndex:O,dropdownRootNode:x,className:N,"aria-labelledby":C,"aria-describedby":D}=m,F=e(m,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","aria-labelledby","aria-describedby"]);const[H,M]=o(!1),B=a(null),I=a(null),R=l((()=>"12hr"===w?"HH:MMam":"HH:MM"),[w]),Z=()=>{var e;null===(e=I.current)||void 0===e||e.focus({preventScroll:!0})},E=()=>{u||b||M(!0)},T=()=>{M(!1),Z()},_=e=>{null==h||h(e),M(!1),Z()},A=()=>{null==g||g()},K=e=>{var r;if(H)return;const o=e.relatedTarget;o&&(null===(r=B.current)||void 0===r?void 0:r.contains(o))||null==k||k()},P=e=>{u||b||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),E())};return r(n,{enabled:!b&&!u,isOpen:H,renderElement:()=>r(i,Object.assign({ref:B,role:"group",readOnly:b,disabled:u,focused:H,error:f,className:N},F,{children:r(d,{ref:I,readOnly:!0,placeholder:v||R(),value:s.formatDisplayValue(y,w),role:"combobox","aria-invalid":f||void 0,"aria-disabled":u||void 0,"aria-readonly":b||void 0,"aria-labelledby":C,"aria-describedby":D,"aria-expanded":!u&&!b&&H,"data-testid":c?`${c}-timepicker-selector`:"timepicker-selector",className:p,onFocus:A,onClick:E,onKeyDown:P,onBlur:K})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(t,{id:c,show:H,value:y,format:w,onCancel:T,onChange:_})})),onOpen:E,onClose:()=>{M(!1),null==k||k()},onDismiss:T,offset:8,alignment:j,customZIndex:O,rootNode:x})};export{m as Timepicker};
 //# sourceMappingURL=timepicker.js.map

package/timepicker/timepicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper~~/input-wrapper~~\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { ~~InputSelectorElement~~ } from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n id,\n disabled = false,\n readOnly = false,\n error,\n value,\n placeholder,\n format = \"24hr\",\n onChange,\n onFocus,\n onBlur,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: TimepickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getPlaceholderValue = useCallback(() => {\n switch (format) {\n case \"12hr\":\n return \"HH:MMam\";\n case \"24hr\":\n default:\n return \"HH:MM\";\n }\n }, [format]);\n\n const restoreFocusToSelector = () => {\n selectorRef.current?.focus({ preventScroll: true });\n };\n\n // =============================================================================\n // EVENT LISTENERS\n // =============================================================================\n const handleOpen = () => {\n if (disabled \|\| readOnly) return;\n setIsOpen(true);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n onBlur?.();\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleChange = (v: string) => {\n onChange?.(v);\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleFocus = () => {\n onFocus?.();\n };\n\n const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (isOpen) return;\n\n const next = e.relatedTarget as Node \| null;\n if (next && wrapperRef.current?.contains(next)) return;\n\n onBlur?.();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n if (e.key === \"Enter\" \|\| e.key === \" \" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n handleOpen();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderElement = () => (\n <InputWrapper\n ref={wrapperRef}\n role=\"group\"\n $readOnly={readOnly}\n $disabled={disabled}\n $focused={isOpen}\n $error={error}\n {...otherProps}\n >\n <~~InputSelectorElement~~\n ref={selectorRef}\n readOnly\n placeholder={placeholder \|\| getPlaceholderValue()}\n value={TimeHelper.formatDisplayValue(value, format)}\n role=\"combobox\"\n aria-invalid={error \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n aria-readonly={readOnly \|\| undefined}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n data-testid={\n id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n }\n onFocus={handleFocus}\n onClick={handleOpen}\n onKeyDown={handleKeyDown}\n onBlur={handleSelectorBlur}\n />\n </InputWrapper>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n aria-label=\"Time picker\"\n {...getFloatingProps()}\n >\n <TimepickerDropdown\n id={id}\n show={isOpen}\n value={value}\n format={format}\n onCancel={handleDismiss}\n onChange={handleChange}\n />\n </div>\n );\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","~~$readOnly","$disabled","$~~focused","~~$error","~~children","~~InputSelectorElement~~","TimeHelper","formatDisplayValue","undefined","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"~~ikBAUO~~,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EACA,kBAAmBC,EACnB,mBAAoBC,~~GAAef~~,~~EAChCgB,~~EAAUC,~~EAAAjB~~,~~EAhBU~~,~~wLAqBvB~~,~~MAAOkB~~,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,~~SADDlB~~,EAEO,UAGA,SAEhB,CAACA,~~IAEEmB~~,EAAyB,WACR,~~QAAnB1B~~,~~EAAAuB~~,EAAYI,eAAO,~~IAAA3B~~,GAAAA,~~EAAE4B~~,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,~~KACX5B~~,GAAYC,~~GAChBgB~~,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,~~IAClBzB~~,SAAAA,~~EAAWyB~~,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,~~KAChBzB~~,SAAAA,GAAW,~~EAGT0B~~,EAAsBC,UACxB,GAAIlB,EAAQ,OAEZ,MAAMmB,EAAOD,EAAEE,cACXD,IAA0B,~~QAAlBrC~~,~~EAAAqB~~,EAAWM,eAAO,~~IAAA3B~~,OAAA,EAAAA,~~EAAEuC~~,SAASF,~~KAEzC3B~~,SAAAA,GAAU,~~EAGR8B~~,EAAiBJ,~~IACflC~~,GAAYC,GAIF,~~UAAViC~~,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,~~EA8DJ~~,OACIa,EAACC,EAAmB,CAChBC,~~SAAU1C~~,IAAaD,~~EACvBgB~~,OAAQA,EACR4B,~~cA5Dc~~,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,~~QAAOC~~,~~UACDjD~~,~~EAAQkD~~,~~UACRnD~~,~~EAAQoD~~,~~SACTpC~~,~~EAAMqC~~,~~OACRnD~~,~~GACJY~~,EAAU,~~CAAAwC~~,~~SAEdb~~,~~EAACc~~,~~EAAoB~~,~~CACjBP~~,IAAK3B,~~EACLpB~~,~~UAAQ~~,~~EACRG,~~YAAaA,~~GAAekB~~,~~IAC5BnB~~,~~MAAOqD~~,EAAWC,~~mBAAmBtD~~,EAAOE,~~GAC5C4C~~,KAAK,WAAU,~~eACD/C~~,~~QAASwD~~,EAAS,~~gBACjB1D~~,~~QAAY0D~~,EAAS,~~gBACrBzD~~,~~QAAYyD~~,EAAS,~~kBACnB9C~~,EAAc,mBACbC,EAAe,~~iBACjBb~~,IAAaC,~~GAAWe~~,EAAc,~~cAElDjB~~,EAAK,GAAGA,wBAA2B,~~sBAEvCQ~~,~~QAASyB~~,~~EACT2B~~,~~QAAS/B~~,~~EACTgC~~,~~UAAWtB~~,~~EACX9B~~,~~OAAQyB~~,~~OAiCZ4B~~,eA5Be,EACnBC,SACAC,iBACAC,~~sBAEAvB~~,EAAA,MAAAK,OAAAC,OAAA,CACIC,~~IAAKe~~,EACLE,MAAOH,~~EACPb~~,KAAK,SAAQ,aACF,~~eACPe~~,IAAkB,~~CAAAV~~,~~SAEtBb~~,~~EAACyB~~,EAAkB,~~CACfnE~~,GAAIA,~~EACJoE~~,~~KAAMnD~~,~~EACNb~~,MAAOA,EACPE,OAAQA,~~EACR+D~~,~~SAAUvC~~,~~EACVvB~~,~~SAAUwB~~,~~OAWduC~~,~~OAAQzC~~,~~EACR0C~~,~~QA1GY~~,~~KAChBrD~~,GAAU,~~GACVT~~,SAAAA,GAAU,~~EAyGN+D~~,~~UAAW1C~~,~~EACX2C~~,OAAQ,~~EACR/D~~,UAAWA,~~EACXgE,aAAc/~~D,~~EACdgE~~,~~SAAU/~~D,GACZ"}
1	+ {"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n id,\n disabled = false,\n readOnly = false,\n error,\n value,\n placeholder,\n format = \"24hr\",\n onChange,\n onFocus,\n onBlur,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: TimepickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getPlaceholderValue = useCallback(() => {\n switch (format) {\n case \"12hr\":\n return \"HH:MMam\";\n case \"24hr\":\n default:\n return \"HH:MM\";\n }\n }, [format]);\n\n const restoreFocusToSelector = () => {\n selectorRef.current?.focus({ preventScroll: true });\n };\n\n // =============================================================================\n // EVENT LISTENERS\n // =============================================================================\n const handleOpen = () => {\n if (disabled \|\| readOnly) return;\n setIsOpen(true);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n onBlur?.();\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleChange = (v: string) => {\n onChange?.(v);\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleFocus = () => {\n onFocus?.();\n };\n\n const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (isOpen) return;\n\n const next = e.relatedTarget as Node \| null;\n if (next && wrapperRef.current?.contains(next)) return;\n\n onBlur?.();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n if (e.key === \"Enter\" \|\| e.key === \" \" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n handleOpen();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderElement = () => (\n <InputWrapper\n ref={wrapperRef}\n role=\"group\"\n readOnly={readOnly}\n disabled={disabled}\n focused={isOpen}\n error={error}\n className={className}\n {...otherProps}\n >\n <BasicInput\n ref={selectorRef}\n readOnly\n placeholder={placeholder \|\| getPlaceholderValue()}\n value={TimeHelper.formatDisplayValue(value, format)}\n role=\"combobox\"\n aria-invalid={error \|\| undefined}\n aria-disabled={disabled \|\| undefined}\n aria-readonly={readOnly \|\| undefined}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n data-testid={\n id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n }\n className={styles.inputSelectorElement}\n onFocus={handleFocus}\n onClick={handleOpen}\n onKeyDown={handleKeyDown}\n onBlur={handleSelectorBlur}\n />\n </InputWrapper>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n aria-label=\"Time picker\"\n {...getFloatingProps()}\n >\n <TimepickerDropdown\n id={id}\n show={isOpen}\n value={value}\n format={format}\n onCancel={handleDismiss}\n onChange={handleChange}\n />\n </div>\n );\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mhBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KAChB1B,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,EAAQ,OAEZ,MAAMmB,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,EAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAACuB,EAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,QA5GY,KAChBnD,GAAU,GACVV,SAAAA,GAAU,EA2GN8D,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}

package/timepicker/timepicker.styles.d.ts CHANGED Viewed

@@ -1,4 +1 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputSelectorElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, never>> & string;
+export declare const inputSelectorElement: import("@linaria/core").LinariaClassName;

package/timepicker/timepicker.styles.js CHANGED Viewed

@@ -1,6 +1,2 @@
-import o from"styled-components";import{BasicInput as r}from"../shared/input-wrapper/input-wrapper.js";o.div`
-    position: relative;
-`;const t=o(r)`
-    height: calc(3rem - 2px); // exclude top and bottom borders
-`;export{t as InputSelectorElement};
+import"./timepicker.styles_zmkhl8.css";const e="ixpxnsh";export{e as inputSelectorElement};
 //# sourceMappingURL=timepicker.styles.js.map

package/timepicker/timepicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.~~tsx~~"],"sourcesContent":["import ~~styled from \"styled-components\";\n\nimport~~ { ~~BasicInput~~ } from \"~~../shared~~/~~input-wrapper/input-wrapper~~\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ~~Wrapper~~ = ~~styled.div~~`\n ~~position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)`\n~~ height: calc(3rem - 2px); // exclude top and bottom borders\n`;\n"],"names":["~~styled~~"~~,"div","InputSelectorElement","BasicInput"~~],"mappings":"~~uGAOuBA~~,~~EAAOC~~,~~GAAG;;QAIpBC,EAAuBF,EAAOG,EAAW;;~~"}
1	+ {"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n"],"names":["inputSelectorElement"],"mappings":"iEAKO,MAAMA,EAAoB"}

package/timepicker/timepicker.styles_zmkhl8.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .ixpxnsh{height:calc(3rem - 2px);}

package/timetable/internal-types.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import type { TimeTableRowCellData } from "./types";
 export type InternalTimeTableRowCellData = TimeTableRowCellData & {
     roundedStartTime?: string;
     roundedEndTime?: string;
+    isFocusable?: boolean;
 };
 export interface RowBarColors {
     mainColor: RowBarMainColors;

package/timetable/timetable-header/timetable-header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as l}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import{NavigationHeaderWrapper as a,StyledDateNavigator as i,NavigationHeaderSubtitleWrapper as n,StyledResultText as s,StyledRefreshButton as c}from"./timetable-header.style.js";const d=d=>{var{selectedDate:m,loading:f,tableContainerRef:C,totalRecords:h,onPreviousDayClick:b,onNextDayClick:u,onRefresh:D,onCalendarDateSelect:g}=d,p=e(d,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const y=()=>{C.current&&(C.current.scrollTop=0)},k=()=>{D&&(y(),D())};return t(a,{children:[r(i,Object.assign({selectedDate:m,loading:f},p,{onRightArrowClick:e=>{y(),u(e)},onLeftArrowClick:e=>{y(),b(e)},onCalendarDateSelect:g})),void 0===h?r(l,{}):t(n,{children:[t(s,{"data-testid":"timetable-records-results",weight:"semibold",children:[h," results found"]}),D&&r(c,{"data-testid":"timetable-records-refresh-btn",styleType:"light",sizeType:"small",disabled:f,onClick:k,$loading:f,children:r(o,{})})]})]})};export{d as TimeTableHeader};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as l}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import{NavigationHeaderWrapper as a,StyledDateNavigator as i,NavigationHeaderSubtitleWrapper as n,StyledResultText as s,StyledRefreshButton as c}from"./timetable-header.style.js";const d=d=>{var{selectedDate:m,loading:f,tableContainerRef:b,totalRecords:C,onPreviousDayClick:h,onNextDayClick:u,onRefresh:D,onCalendarDateSelect:g}=d,p=e(d,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const y=()=>{b.current&&(b.current.scrollTop=0)},R=()=>{D&&(y(),D())};return t(a,{children:[r(i,Object.assign({selectedDate:m,loading:f},p,{onRightArrowClick:e=>{y(),u(e)},onLeftArrowClick:e=>{y(),h(e)},onCalendarDateSelect:g})),void 0===C?r(l,{}):t(n,{children:[t(s,{"data-testid":"timetable-records-results",weight:"semibold",children:[C," results found"]}),D&&r(c,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:f,onClick:R,$loading:f,icon:r(o,{})})]})]})};export{d as TimeTableHeader};
 //# sourceMappingURL=timetable-header.js.map

package/timetable/timetable-header/timetable-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timetable-header.js","sources":["../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport type { RefObject } from \"react\";\n\nimport {\n NavigationHeaderSubtitleWrapper,\n NavigationHeaderWrapper,\n StyledDateNavigator,\n StyledRefreshButton,\n StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n selectedDate: string;\n loading: boolean;\n tableContainerRef: RefObject<HTMLDivElement>;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n totalRecords?: number \| undefined;\n showDateAsShortForm?: boolean \| undefined;\n showCurrentDateAsToday?: boolean \| undefined;\n onPreviousDayClick: (currentDate: string) => void \| undefined;\n onNextDayClick: (currentDate: string) => void \| undefined;\n onRefresh?: (() => void) \| undefined;\n onCalendarDateSelect?: ((currentDate: string) => void) \| undefined;\n}\n\nexport const TimeTableHeader = ({\n selectedDate,\n loading,\n tableContainerRef,\n totalRecords,\n onPreviousDayClick,\n onNextDayClick,\n onRefresh,\n onCalendarDateSelect,\n ...otherProps\n}: TimeTableHeaderProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const scrollToTop = () => {\n if (tableContainerRef.current) {\n tableContainerRef.current.scrollTop = 0;\n }\n };\n\n const handleRefresh = () => {\n if (!onRefresh) return;\n scrollToTop();\n onRefresh();\n };\n\n const handleRightArrowClick = (date: string) => {\n scrollToTop();\n onNextDayClick(date);\n };\n\n const handleLeftArrowClick = (date: string) => {\n scrollToTop();\n onPreviousDayClick(date);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderRecordsSection = () => {\n if (totalRecords === undefined) return <></>;\n return (\n <NavigationHeaderSubtitleWrapper>\n <StyledResultText\n data-testid=\"timetable-records-results\"\n weight={\"semibold\"}\n >\n {totalRecords} results found\n </StyledResultText>\n {onRefresh && (\n <StyledRefreshButton\n data-testid=\"timetable-records-refresh-btn\"\n styleType=\"light\"\n sizeType=\"small\"\n disabled={loading}\n onClick={handleRefresh}\n $loading={loading}\n ~~>\n~~ <RefreshIcon ~~/>\~~n ~~</StyledRefreshButton>\~~n )}\n </NavigationHeaderSubtitleWrapper>\n );\n };\n\n return (\n <NavigationHeaderWrapper>\n <StyledDateNavigator\n selectedDate={selectedDate}\n loading={loading}\n {...otherProps}\n onRightArrowClick={handleRightArrowClick}\n onLeftArrowClick={handleLeftArrowClick}\n onCalendarDateSelect={onCalendarDateSelect}\n />\n {renderRecordsSection()}\n </NavigationHeaderWrapper>\n );\n};\n"],"names":["TimeTableHeader","_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","NavigationHeaderWrapper","children","_jsx","StyledDateNavigator","Object","assign","onRightArrowClick","date","onLeftArrowClick","undefined","NavigationHeaderSubtitleWrapper","StyledResultText","weight","StyledRefreshButton","styleType","sizeType","disabled","onClick","$loading","RefreshIcon"],"mappings":"uVA0BO,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,EAACC,EAAuB,CAAAC,SAAA,CACpBC,EAACC,EAAmBC,OAAAC,OAAA,CAChBpB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACda,kBA7CmBC,IAC3BZ,IACAL,EAAeiB,EAAK,EA4CZC,iBAzCkBD,IAC1BZ,IACAN,EAAmBkB,EAAK,EAwChBf,qBAAsBA,UAjCTiB,IAAjBrB,EAAmCc,QAEnCH,EAACW,EAA+B,CAAAT,SAAA,CAC5BF,EAACY,EAAgB,CAAA,cACD,4BACZC,OAAQ,~~WAAUX~~,~~SAAA~~,~~CAEjBb~~,~~sBAEJG,~~GACGW,EAACW,EAAmB,CAAA,cACJ,~~gCACZC~~,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,~~EAAOe~~,~~SAEjBC~~,~~EAACiB~~,~~aAkBS~~"}
1	+ {"version":3,"file":"timetable-header.js","sources":["../../../src/timetable/timetable-header/timetable-header.tsx"],"sourcesContent":["import { RefreshIcon } from \"@lifesg/react-icons\";\nimport type { RefObject } from \"react\";\n\nimport {\n NavigationHeaderSubtitleWrapper,\n NavigationHeaderWrapper,\n StyledDateNavigator,\n StyledRefreshButton,\n StyledResultText,\n} from \"./timetable-header.style\";\n\ninterface TimeTableHeaderProps {\n selectedDate: string;\n loading: boolean;\n tableContainerRef: RefObject<HTMLDivElement>;\n minDate?: string \| undefined;\n maxDate?: string \| undefined;\n totalRecords?: number \| undefined;\n showDateAsShortForm?: boolean \| undefined;\n showCurrentDateAsToday?: boolean \| undefined;\n onPreviousDayClick: (currentDate: string) => void \| undefined;\n onNextDayClick: (currentDate: string) => void \| undefined;\n onRefresh?: (() => void) \| undefined;\n onCalendarDateSelect?: ((currentDate: string) => void) \| undefined;\n}\n\nexport const TimeTableHeader = ({\n selectedDate,\n loading,\n tableContainerRef,\n totalRecords,\n onPreviousDayClick,\n onNextDayClick,\n onRefresh,\n onCalendarDateSelect,\n ...otherProps\n}: TimeTableHeaderProps) => {\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const scrollToTop = () => {\n if (tableContainerRef.current) {\n tableContainerRef.current.scrollTop = 0;\n }\n };\n\n const handleRefresh = () => {\n if (!onRefresh) return;\n scrollToTop();\n onRefresh();\n };\n\n const handleRightArrowClick = (date: string) => {\n scrollToTop();\n onNextDayClick(date);\n };\n\n const handleLeftArrowClick = (date: string) => {\n scrollToTop();\n onPreviousDayClick(date);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderRecordsSection = () => {\n if (totalRecords === undefined) return <></>;\n return (\n <NavigationHeaderSubtitleWrapper>\n <StyledResultText\n data-testid=\"timetable-records-results\"\n weight={\"semibold\"}\n >\n {totalRecords} results found\n </StyledResultText>\n {onRefresh && (\n <StyledRefreshButton\n data-testid=\"timetable-records-refresh-btn\"\n aria-label=\"Refresh timetable records\"\n styleType=\"light\"\n sizeType=\"small\"\n disabled={loading}\n onClick={handleRefresh}\n $loading={loading}\n icon={<RefreshIcon />}\n />\n )}\n </NavigationHeaderSubtitleWrapper>\n );\n };\n\n return (\n <NavigationHeaderWrapper>\n <StyledDateNavigator\n selectedDate={selectedDate}\n loading={loading}\n {...otherProps}\n onRightArrowClick={handleRightArrowClick}\n onLeftArrowClick={handleLeftArrowClick}\n onCalendarDateSelect={onCalendarDateSelect}\n />\n {renderRecordsSection()}\n </NavigationHeaderWrapper>\n );\n};\n"],"names":["TimeTableHeader","_a","selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect","otherProps","__rest","scrollToTop","current","scrollTop","handleRefresh","_jsxs","NavigationHeaderWrapper","children","_jsx","StyledDateNavigator","Object","assign","onRightArrowClick","date","onLeftArrowClick","undefined","NavigationHeaderSubtitleWrapper","StyledResultText","weight","StyledRefreshButton","styleType","sizeType","disabled","onClick","$loading","icon","RefreshIcon"],"mappings":"uVA0BO,MAAMA,EAAmBC,QAAAC,aAC5BA,EAAYC,QACZA,EAAOC,kBACPA,EAAiBC,aACjBA,EAAYC,mBACZA,EAAkBC,eAClBA,EAAcC,UACdA,EAASC,qBACTA,GAAoBR,EACjBS,EAAUC,EAAAV,EATe,wIAe5B,MAAMW,EAAc,KACZR,EAAkBS,UAClBT,EAAkBS,QAAQC,UAAY,EAC1C,EAGEC,EAAgB,KACbP,IACLI,IACAJ,IAAW,EA0Cf,OACIQ,EAACC,EAAuB,CAAAC,SAAA,CACpBC,EAACC,EAAmBC,OAAAC,OAAA,CAChBpB,aAAcA,EACdC,QAASA,GACLO,EAAU,CACda,kBA7CmBC,IAC3BZ,IACAL,EAAeiB,EAAK,EA4CZC,iBAzCkBD,IAC1BZ,IACAN,EAAmBkB,EAAK,EAwChBf,qBAAsBA,UAjCTiB,IAAjBrB,EAAmCc,QAEnCH,EAACW,EAA+B,CAAAT,SAAA,CAC5BF,EAACY,EAAgB,CAAA,cACD,4BACZC,OAAQ,qBAEPxB,EAAY,oBAEhBG,GACGW,EAACW,EAAmB,CAAA,cACJ,gCAA+B,aAChC,4BACXC,UAAU,QACVC,SAAS,QACTC,SAAU9B,EACV+B,QAASnB,EAAaoB,SACZhC,EACViC,KAAMjB,EAACkB,EAAW,WAkBR"}

package/timetable/timetable-header/timetable-header.style.d.ts CHANGED Viewed

@@ -1,9 +1,31 @@
-export declare const StyledRefreshButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, {
+export declare const StyledRefreshButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "$loading"> & {
     $loading: boolean;
-}>> & string & Omit<(props: import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const NavigationHeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NavigationHeaderSubtitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledResultText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const StyledDateNavigator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").DateNavigatorProps, never>> & string & Omit<({ selectedDate, minDate, maxDate, loading, showDateAsShortForm, showCurrentDateAsToday, view, onLeftArrowClick, onRightArrowClick, onCalendarDateSelect, dropdownRootNode, ...otherProps }: import("../..").DateNavigatorProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "$loading"> & {
+    $loading: boolean;
+}, never>>> & string & Omit<((props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    Default: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Small: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Large: (props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const NavigationHeaderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const NavigationHeaderSubtitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledResultText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const StyledDateNavigator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").DateNavigatorProps, never> & Partial<Pick<import("../..").DateNavigatorProps, never>>> & string & Omit<({ selectedDate, minDate, maxDate, loading, showDateAsShortForm, showCurrentDateAsToday, view, onLeftArrowClick, onRightArrowClick, onCalendarDateSelect, dropdownRootNode, className, ...otherProps }: import("../..").DateNavigatorProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/timetable/timetable-header/timetable-header.style.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import t,{keyframes as o,css as i}from"styled-components";import{DateNavigator as n}from"../../date-navigator/date-navigator.js";import{IconButton as e}from"../../icon-button/icon-button.js";import{Typography as r}from"../../typography/index.js";import{V3_Colour as a,V3_Spacing as s}from"../../v3_theme/index.js";const p=o`
+import t,{keyframes as o,css as e}from"styled-components";import{Button as i}from"../../button/button.js";import{DateNavigator as n}from"../../date-navigator/date-navigator.js";import{Typography as r}from"../../typography/index.js";import{V3_Colour as a,V3_Spacing as s}from"../../v3_theme/index.js";const p=o`
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
-`,m=t(e)`
+`,m=t(i)`
     color: ${a.icon};
     svg {
-        ${t=>{if(t.$loading)return i`
+        ${t=>{if(t.$loading)return e`
                     animation: ${p} 4s linear infinite;
                 `}}
     }
@@ -15,14 +15,14 @@ import t,{keyframes as o,css as i}from"styled-components";import{DateNavigator a
     padding-bottom: ${s["spacing-16"]};
     justify-content: space-between;
     gap: ${s["spacing-8"]};
-`,c=t.div`
+`,g=t.div`
     display: flex;
     align-items: center;
     justify-content: center;
     gap: ${s["spacing-8"]};
-`,g=t(r.BodySM)`
+`,c=t(r.BodySM)`
     color: ${a["text-subtler"]};
 `,f=t(n)`
     width: 400px;
-`;export{c as NavigationHeaderSubtitleWrapper,d as NavigationHeaderWrapper,f as StyledDateNavigator,m as StyledRefreshButton,g as StyledResultText};
+`;export{g as NavigationHeaderSubtitleWrapper,d as NavigationHeaderWrapper,f as StyledDateNavigator,m as StyledRefreshButton,c as StyledResultText};
 //# sourceMappingURL=timetable-header.style.js.map

package/timetable/timetable-header/timetable-header.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timetable-header.style.js","sources":["../../../src/timetable/timetable-header/timetable-header.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { ~~DateNavigator~~ } from \"../../~~date-navigator~~\";\nimport { ~~IconButton~~ } from \"../../~~icon~~-~~button~~\";\nimport { Typography } from \"../../typography\";\nimport { V3_Colour, V3_Spacing } from \"../../v3_theme\";\n\nconst spin = keyframes`\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledRefreshButton = styled(~~IconButton~~)<{ $loading: boolean }>`\n color: ${V3_Colour[\"icon\"]};\n svg {\n ${(props) => {\n if (props.$loading) {\n return css`\n animation: ${spin} 4s linear infinite;\n `;\n }\n }}\n }\n`;\n\nexport const NavigationHeaderWrapper = styled.div`\n display: flex;\n padding-bottom: ${V3_Spacing[\"spacing-16\"]};\n justify-content: space-between;\n gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const NavigationHeaderSubtitleWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const StyledResultText = styled(Typography.BodySM)`\n color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const StyledDateNavigator = styled(DateNavigator)`\n width: 400px;\n`;\n"],"names":["spin","keyframes","StyledRefreshButton","styled","~~IconButton~~","V3_Colour","props","$loading","css","NavigationHeaderWrapper","div","V3_Spacing","NavigationHeaderSubtitleWrapper","StyledResultText","Typography","BodySM","StyledDateNavigator","DateNavigator"],"mappings":"~~0TAOA~~,MAAMA,EAAOC,CAAS;;;;;EAOTC,EAAsBC,EAAOC,~~EAAkC~~;~~aAC/DC~~,EAAgB;;UAElBC,IACC,GAAIA,EAAMC,SACN,OAAOC,CAAG;iCACOR;iBAErB;;EAKCS,EAA0BN,EAAOO,GAAG;;sBAE3BC,EAAW;;WAEtBA,EAAW;EAGTC,EAAkCT,EAAOO,GAAG;;;;WAI9CC,EAAW;EAGTE,EAAmBV,EAAOW,EAAWC,OAAO;aAC5CV,EAAU;EAGVW,EAAsBb,EAAOc,EAAc;;"}
1	+ {"version":3,"file":"timetable-header.style.js","sources":["../../../src/timetable/timetable-header/timetable-header.style.tsx"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { DateNavigator } from \"../../date-navigator\";\nimport { Typography } from \"../../typography\";\nimport { V3_Colour, V3_Spacing } from \"../../v3_theme\";\n\nconst spin = keyframes`\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledRefreshButton = styled(Button)<{ $loading: boolean }>`\n color: ${V3_Colour[\"icon\"]};\n svg {\n ${(props) => {\n if (props.$loading) {\n return css`\n animation: ${spin} 4s linear infinite;\n `;\n }\n }}\n }\n`;\n\nexport const NavigationHeaderWrapper = styled.div`\n display: flex;\n padding-bottom: ${V3_Spacing[\"spacing-16\"]};\n justify-content: space-between;\n gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const NavigationHeaderSubtitleWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const StyledResultText = styled(Typography.BodySM)`\n color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const StyledDateNavigator = styled(DateNavigator)`\n width: 400px;\n`;\n"],"names":["spin","keyframes","StyledRefreshButton","styled","Button","V3_Colour","props","$loading","css","NavigationHeaderWrapper","div","V3_Spacing","NavigationHeaderSubtitleWrapper","StyledResultText","Typography","BodySM","StyledDateNavigator","DateNavigator"],"mappings":"4SAOA,MAAMA,EAAOC,CAAS;;;;;EAOTC,EAAsBC,EAAOC,EAA8B;aAC3DC,EAAgB;;UAElBC,IACC,GAAIA,EAAMC,SACN,OAAOC,CAAG;iCACOR;iBAErB;;EAKCS,EAA0BN,EAAOO,GAAG;;sBAE3BC,EAAW;;WAEtBA,EAAW;EAGTC,EAAkCT,EAAOO,GAAG;;;;WAI9CC,EAAW;EAGTE,EAAmBV,EAAOW,EAAWC,OAAO;aAC5CV,EAAU;EAGVW,EAAsBb,EAAOc,EAAc;;"}

package/timetable/timetable-row/row-bar.d.ts CHANGED Viewed

@@ -8,5 +8,5 @@ interface RowBarProps extends TimeTableRowData {
     containerRef: RefObject<HTMLDivElement>;
     rowBarColor: RowBarColors;
 }
-export declare const RowBar: ({ id, timetableMinTime, timetableMaxTime, rowMinTime, rowMaxTime, rowCells, rowBarColor, intervalWidth, containerRef, outOfRangeCellPopover, }: RowBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RowBar: ({ id, name, timetableMinTime, timetableMaxTime, rowMinTime, rowMaxTime, rowCells, rowBarColor, intervalWidth, containerRef, outOfRangeCellPopover, }: RowBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/timetable/timetable-row/row-bar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import e from"../../external/dayjs/dayjs.min.js";import{useMemo as r}from"react";import{TimeHelper as o}from"../../util/time-helper.js";import{ROW_INTERVAL as m}from"../const.js";import{RowCellContainer as s}from"./row-bar.style.js";import{RowCell as i}from"./row-cell.js";const a=({id:a,timetableMinTime:n,timetableMaxTime:d,rowMinTime:l,rowMaxTime:u,rowCells:H,rowBarColor:c,intervalWidth:T,containerRef:f,outOfRangeCellPopover:p})=>{const h=l?o.roundToNearestInterval(l,m):n,v=u?o.roundToNearestInterval(u,m,!0):d,b=r((()=>{const t=[];h&&e(n,"HH:mm").isBefore(e(h,"HH:mm"))&&t.push({id:a,startTime:n,endTime:h,status:"blocked",customPopover:p});const r=[...H].sort(((t,r)=>{const o=e(t.startTime,"HH:mm"),m=e(r.startTime,"HH:mm");return o.isBefore(m)?-1:o.isAfter(m)?1:0}));let s;return r.forEach(((r,i)=>{var n;const{startTime:d,endTime:l}=r;let u=o.roundToNearestInterval(d,m);s&&e(u,"HH:mm").isBefore(e(s,"HH:mm"))&&(u=o.roundToNearestInterval(d,m,!0));const c=o.roundToNearestInterval(l,m,!0);t.push(Object.assign(Object.assign({},r),{roundedStartTime:u,roundedEndTime:c}));const T=(null===(n=H[i+1])||void 0===n?void 0:n.startTime)||v,f=e(o.roundToNearestInterval(T,m),"HH:mm");let p=e(c,"HH:mm");for(;p.isBefore(f);)if(h=f,p.get("hour")!=h.get("hour")){const e=p.add(1,"hour").startOf("hour");t.push({id:a,startTime:p.format("HH:mm").toString(),endTime:e.format("HH:mm").toString(),status:"disabled"}),p=e}else t.push({id:a,startTime:p.format("HH:mm").toString(),endTime:f.format("HH:mm").toString(),status:"disabled"}),p=f;var h;s=p.format("HH:mm").toString()})),v&&e(d,"HH:mm").isAfter(e(v,"HH:mm"))&&t.push({id:a,startTime:v,endTime:d,status:"blocked",customPopover:p}),0!==r.length||l||u||t.push({id:a,startTime:n,endTime:d,status:"blocked",customPopover:p}),t}),[h,n,H,v,d,l,u,a,p]);return t(s,{"data-testid":"timetable-row",children:b.map(((e,r)=>t(i,Object.assign({},e,{intervalWidth:T,rowBarColor:c,containerRef:f}),`${r}-row-cell-key`)))})};export{a as RowBar};
+import{jsx as t}from"react/jsx-runtime";import e from"../../external/dayjs/dayjs.min.js";import{useMemo as r}from"react";import{TimeHelper as o}from"../../util/time-helper.js";import{ROW_INTERVAL as m}from"../const.js";import{RowCellContainer as i}from"./row-bar.style.js";import{RowCell as s}from"./row-cell.js";const a=({id:a,name:n,timetableMinTime:d,timetableMaxTime:l,rowMinTime:u,rowMaxTime:T,rowCells:H,rowBarColor:c,intervalWidth:f,containerRef:p,outOfRangeCellPopover:v})=>{const h=u?o.roundToNearestInterval(u,m):d,b=T?o.roundToNearestInterval(T,m,!0):l,g=r((()=>{const t=[];h&&e(d,"HH:mm").isBefore(e(h,"HH:mm"))&&t.push({id:a,startTime:d,endTime:h,status:"blocked",customPopover:v});const r=[...H].sort(((t,r)=>{const o=e(t.startTime,"HH:mm"),m=e(r.startTime,"HH:mm");return o.isBefore(m)?-1:o.isAfter(m)?1:0}));let i;return r.forEach(((r,s)=>{var n;const{startTime:d,endTime:l}=r;let u=o.roundToNearestInterval(d,m);i&&e(u,"HH:mm").isBefore(e(i,"HH:mm"))&&(u=o.roundToNearestInterval(d,m,!0));const T=o.roundToNearestInterval(l,m,!0);t.push(Object.assign(Object.assign({},r),{roundedStartTime:u,roundedEndTime:T,isFocusable:!0}));const c=(null===(n=H[s+1])||void 0===n?void 0:n.startTime)||b,f=e(o.roundToNearestInterval(c,m),"HH:mm");let p=e(T,"HH:mm");for(;p.isBefore(f);)if(v=f,p.get("hour")!=v.get("hour")){const e=p.add(1,"hour").startOf("hour");t.push({id:a,startTime:p.format("HH:mm").toString(),endTime:e.format("HH:mm").toString(),status:"disabled"}),p=e}else t.push({id:a,startTime:p.format("HH:mm").toString(),endTime:f.format("HH:mm").toString(),status:"disabled"}),p=f;var v;i=p.format("HH:mm").toString()})),b&&e(l,"HH:mm").isAfter(e(b,"HH:mm"))&&t.push({id:a,startTime:b,endTime:l,status:"blocked",customPopover:v}),0!==r.length||u||T||t.push({id:a,startTime:d,endTime:l,status:"blocked",customPopover:v}),t}),[h,d,H,b,l,u,T,a,v]);return t(i,{"data-testid":"timetable-row",role:"presentation",children:g.map(((e,r)=>{return t(s,Object.assign({},e,{ariaColIndex:(l=e.roundedStartTime||e.startTime,(o.timeToMinutes(l)-o.timeToMinutes(d))/m+2),ariaColSpan:(i=e.roundedStartTime||e.startTime,a=e.roundedEndTime||e.endTime,(o.timeToMinutes(a)-o.timeToMinutes(i))/m),rowName:n,intervalWidth:f,rowBarColor:c,containerRef:p}),`${r}-row-cell-key`);var i,a,l}))})};export{a as RowBar};
 //# sourceMappingURL=row-bar.js.map

package/timetable/timetable-row/row-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"row-bar.js","sources":["../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n InternalTimeTableRowCellData,\n RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport { RowCellContainer } from \"./row-bar.style\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n timetableMinTime: string;\n timetableMaxTime: string;\n intervalWidth: number;\n containerRef: RefObject<HTMLDivElement>;\n rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n id,\n timetableMinTime,\n timetableMaxTime,\n rowMinTime,\n rowMaxTime,\n rowCells,\n rowBarColor,\n intervalWidth,\n containerRef,\n outOfRangeCellPopover,\n}: RowBarProps) => {\n const roundedMinTime = rowMinTime\n ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n : timetableMinTime;\n const roundedMaxTime = rowMaxTime\n ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n : timetableMaxTime;\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isOnTheSameHour = (\n time1: dayjs.Dayjs,\n time2: dayjs.Dayjs\n ): boolean => {\n return time1.get(\"hour\") == time2.get(\"hour\");\n };\n\n const rowCellArray = useMemo(() => {\n const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n // Handle non-op before hours\n if (\n roundedMinTime &&\n dayjs(timetableMinTime, \"HH:mm\").isBefore(\n dayjs(roundedMinTime, \"HH:mm\")\n )\n ) {\n rowCellArray.push({\n id,\n startTime: timetableMinTime,\n endTime: roundedMinTime,\n status: \"blocked\",\n customPopover: outOfRangeCellPopover,\n });\n }\n\n const sortedRowCells = [...rowCells].sort((a, b) => {\n const timeA = dayjs(a.startTime, \"HH:mm\");\n const timeB = dayjs(b.startTime, \"HH:mm\");\n if (timeA.isBefore(timeB)) return -1;\n if (timeA.isAfter(timeB)) return 1;\n return 0;\n });\n let lastRoundedEndTime: string \| undefined;\n\n sortedRowCells.forEach((cell, index) => {\n const { startTime, endTime } = cell;\n let roundedStartTime = TimeHelper.roundToNearestInterval(\n startTime,\n ROW_INTERVAL\n );\n\n // NOTE - Prevent overlapping rounded start time and end time cells\n const isStartTimeBeforePreviousEndTime =\n lastRoundedEndTime &&\n dayjs(roundedStartTime, \"HH:mm\").isBefore(\n dayjs(lastRoundedEndTime, \"HH:mm\")\n );\n if (isStartTimeBeforePreviousEndTime) {\n roundedStartTime = TimeHelper.roundToNearestInterval(\n startTime,\n ROW_INTERVAL,\n true\n );\n }\n\n const roundedEndTime = TimeHelper.roundToNearestInterval(\n endTime,\n ROW_INTERVAL,\n true\n );\n rowCellArray.push({ ...cell, roundedStartTime, roundedEndTime });\n\n const nextSlotStartTime =\n rowCells[index + 1]?.startTime \|\| roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n const roundedNextSlotStartTime = dayjs(\n TimeHelper.roundToNearestInterval(\n nextSlotStartTime,\n ROW_INTERVAL\n ),\n \"HH:mm\"\n );\n const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n let curr = parsedEndTime;\n\n // Auto block slots between cell time gaps\n while (curr.isBefore(roundedNextSlotStartTime)) {\n if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n rowCellArray.push({\n id,\n startTime: curr.format(\"HH:mm\").toString(),\n endTime: nextHour.format(\"HH:mm\").toString(),\n status: \"disabled\",\n });\n curr = nextHour;\n } else {\n rowCellArray.push({\n id,\n startTime: curr.format(\"HH:mm\").toString(),\n endTime: roundedNextSlotStartTime\n .format(\"HH:mm\")\n .toString(),\n status: \"disabled\",\n });\n curr = roundedNextSlotStartTime;\n }\n }\n lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n });\n\n // Handle non-op after hours\n if (\n roundedMaxTime &&\n dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n dayjs(roundedMaxTime, \"HH:mm\")\n )\n ) {\n rowCellArray.push({\n id,\n startTime: roundedMaxTime,\n endTime: timetableMaxTime,\n status: \"blocked\",\n customPopover: outOfRangeCellPopover,\n });\n }\n\n // Handle empty row cells and no min/max time to block from timetable min to max\n if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n rowCellArray.push({\n id,\n startTime: timetableMinTime,\n endTime: timetableMaxTime,\n status: \"blocked\",\n customPopover: outOfRangeCellPopover,\n });\n }\n return rowCellArray;\n }, [\n roundedMinTime,\n timetableMinTime,\n rowCells,\n roundedMaxTime,\n timetableMaxTime,\n rowMinTime,\n rowMaxTime,\n id,\n outOfRangeCellPopover,\n ]);\n\n return (\n <RowCellContainer data-testid=\"timetable-row\">\n {rowCellArray.map((cell, index) => {\n return (\n <RowCell\n key={`${index}-row-cell-key`}\n {...cell}\n intervalWidth={intervalWidth}\n rowBarColor={rowBarColor}\n containerRef={containerRef}\n />\n );\n })}\n </RowCellContainer>\n );\n};\n"],"names":["RowBar","id","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","children","map","RowCell"],"mappings":"yTAsBO,MAAMA,EAAS,EAClBC,KACAC,mBACAC,mBACAC,aACAC,aACAC,WACAC,cACAC,gBACAC,eACAC,4BAEA,MAAMC,EAAiBP,EACjBQ,EAAWC,uBAAuBT,EAAYU,GAC9CZ,EACAa,EAAiBV,EACjBO,EAAWC,uBAAuBR,EAAYS,GAAc,GAC5DX,EAYAa,EAAeC,GAAQ,KACzB,MAAMD,EAA+C,GAIjDL,GACAO,EAAMhB,EAAkB,SAASiB,SAC7BD,EAAMP,EAAgB,WAG1BK,EAAaI,KAAK,CACdnB,KACAoB,UAAWnB,EACXoB,QAASX,EACTY,OAAQ,UACRC,cAAed,IAIvB,MAAMe,EAAiB,IAAInB,GAAUoB,MAAK,CAACC,EAAGC,KAC1C,MAAMC,EAAQX,EAAMS,EAAEN,UAAW,SAC3BS,EAAQZ,EAAMU,EAAEP,UAAW,SACjC,OAAIQ,EAAMV,SAASW,IAAe,EAC9BD,EAAME,QAAQD,GAAe,EAC1B,CAAC,IAEZ,IAAIE,EA+FJ,OA7FAP,EAAeQ,SAAQ,CAACC,EAAMC,WAC1B,MAAMd,UAAEA,EAASC,QAAEA,GAAYY,EAC/B,IAAIE,EAAmBxB,EAAWC,uBAC9BQ,EACAP,GAKAkB,GACAd,EAAMkB,EAAkB,SAASjB,SAC7BD,EAAMc,EAAoB,YAG9BI,EAAmBxB,EAAWC,uBAC1BQ,EACAP,GACA,IAIR,MAAMuB,EAAiBzB,EAAWC,uBAC9BS,EACAR,GACA,GAEJE,EAAaI,KAAIkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAML,IAAME,mBAAkBC,oBAE/C,MAAMG,WACFC,EAAAnC,EAAS6B,EAAQ,yBAAId,YAAaN,EAChC2B,EAA2BxB,EAC7BN,EAAWC,uBACP2B,EACA1B,GAEJ,SAIJ,IAAI6B,EAFkBzB,EAAMmB,EAAgB,SAK5C,KAAOM,EAAKxB,SAASuB,IACjB,GA5ERE,EA4EmCF,EAANC,EA1EhBE,IAAI,SAAWD,EAAMC,IAAI,QA0EwB,CAClD,MAAMC,EAAWH,EAAKI,IAAI,EAAG,QAAQC,QAAQ,QAC7ChC,EAAaI,KAAK,CACdnB,KACAoB,UAAWsB,EAAKM,OAAO,SAASC,WAChC5B,QAASwB,EAASG,OAAO,SAASC,WAClC3B,OAAQ,aAEZoB,EAAOG,CACX,MACI9B,EAAaI,KAAK,CACdnB,KACAoB,UAAWsB,EAAKM,OAAO,SAASC,WAChC5B,QAASoB,EACJO,OAAO,SACPC,WACL3B,OAAQ,aAEZoB,EAAOD,EAhGC,IAEpBE,EAiGIZ,EAAqBW,EAAKM,OAAO,SAASC,UAAU,IAKpDnC,GACAG,EAAMf,EAAkB,SAAS4B,QAC7Bb,EAAMH,EAAgB,WAG1BC,EAAaI,KAAK,CACdnB,KACAoB,UAAWN,EACXO,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAKO,IAA1Be,EAAe0B,QAAiB/C,GAAeC,GAC/CW,EAAaI,KAAK,CACdnB,KACAoB,UAAWnB,EACXoB,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAGhBM,CAAY,GACpB,CACCL,EACAT,EACAI,EACAS,EACAZ,EACAC,EACAC,EACAJ,EACAS,IAGJ,OACI0C,EAACC,EAAgB,CAAA,cAAa,gBAAeC,SACxCtC,EAAauC,KAAI,CAACrB,EAAMC,IAEjBiB,EAACI,EAAOlB,OAAAC,OAAA,GAEAL,EAAI,CACR1B,cAAeA,EACfD,YAAaA,EACbE,aAAcA,IAJT,GAAG0B,qBAQL"}
1	+ {"version":3,"file":"row-bar.js","sources":["../../../src/timetable/timetable-row/row-bar.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport { useMemo } from \"react\";\n\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_INTERVAL } from \"../const\";\nimport type {\n InternalTimeTableRowCellData,\n RowBarColors,\n} from \"../internal-types\";\nimport type { TimeTableRowData } from \"../types\";\nimport { RowCellContainer } from \"./row-bar.style\";\nimport { RowCell } from \"./row-cell\";\n\ninterface RowBarProps extends TimeTableRowData {\n timetableMinTime: string;\n timetableMaxTime: string;\n intervalWidth: number;\n containerRef: RefObject<HTMLDivElement>;\n rowBarColor: RowBarColors;\n}\n\nexport const RowBar = ({\n id,\n name,\n timetableMinTime,\n timetableMaxTime,\n rowMinTime,\n rowMaxTime,\n rowCells,\n rowBarColor,\n intervalWidth,\n containerRef,\n outOfRangeCellPopover,\n}: RowBarProps) => {\n const roundedMinTime = rowMinTime\n ? TimeHelper.roundToNearestInterval(rowMinTime, ROW_INTERVAL)\n : timetableMinTime;\n const roundedMaxTime = rowMaxTime\n ? TimeHelper.roundToNearestInterval(rowMaxTime, ROW_INTERVAL, true)\n : timetableMaxTime;\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isOnTheSameHour = (\n time1: dayjs.Dayjs,\n time2: dayjs.Dayjs\n ): boolean => {\n return time1.get(\"hour\") == time2.get(\"hour\");\n };\n\n const getAriaColIndex = (time: string) => {\n return (\n (TimeHelper.timeToMinutes(time) -\n TimeHelper.timeToMinutes(timetableMinTime)) /\n ROW_INTERVAL +\n 2\n );\n };\n\n const getAriaColSpan = (startTime: string, endTime: string) => {\n return (\n (TimeHelper.timeToMinutes(endTime) -\n TimeHelper.timeToMinutes(startTime)) /\n ROW_INTERVAL\n );\n };\n\n const rowCellArray = useMemo(() => {\n const rowCellArray: InternalTimeTableRowCellData[] = [];\n\n // Handle non-op before hours\n if (\n roundedMinTime &&\n dayjs(timetableMinTime, \"HH:mm\").isBefore(\n dayjs(roundedMinTime, \"HH:mm\")\n )\n ) {\n rowCellArray.push({\n id,\n startTime: timetableMinTime,\n endTime: roundedMinTime,\n status: \"blocked\",\n customPopover: outOfRangeCellPopover,\n });\n }\n\n const sortedRowCells = [...rowCells].sort((a, b) => {\n const timeA = dayjs(a.startTime, \"HH:mm\");\n const timeB = dayjs(b.startTime, \"HH:mm\");\n if (timeA.isBefore(timeB)) return -1;\n if (timeA.isAfter(timeB)) return 1;\n return 0;\n });\n let lastRoundedEndTime: string \| undefined;\n\n sortedRowCells.forEach((cell, index) => {\n const { startTime, endTime } = cell;\n let roundedStartTime = TimeHelper.roundToNearestInterval(\n startTime,\n ROW_INTERVAL\n );\n\n // NOTE - Prevent overlapping rounded start time and end time cells\n const isStartTimeBeforePreviousEndTime =\n lastRoundedEndTime &&\n dayjs(roundedStartTime, \"HH:mm\").isBefore(\n dayjs(lastRoundedEndTime, \"HH:mm\")\n );\n if (isStartTimeBeforePreviousEndTime) {\n roundedStartTime = TimeHelper.roundToNearestInterval(\n startTime,\n ROW_INTERVAL,\n true\n );\n }\n\n const roundedEndTime = TimeHelper.roundToNearestInterval(\n endTime,\n ROW_INTERVAL,\n true\n );\n rowCellArray.push({\n ...cell,\n roundedStartTime,\n roundedEndTime,\n isFocusable: true,\n });\n\n const nextSlotStartTime =\n rowCells[index + 1]?.startTime \|\| roundedMaxTime; // Get next cell start time, if next cell don't exist, use current row max time\n const roundedNextSlotStartTime = dayjs(\n TimeHelper.roundToNearestInterval(\n nextSlotStartTime,\n ROW_INTERVAL\n ),\n \"HH:mm\"\n );\n const parsedEndTime = dayjs(roundedEndTime, \"HH:mm\");\n\n let curr = parsedEndTime;\n\n // Auto block slots between cell time gaps\n while (curr.isBefore(roundedNextSlotStartTime)) {\n if (!isOnTheSameHour(curr, roundedNextSlotStartTime)) {\n const nextHour = curr.add(1, \"hour\").startOf(\"hour\"); // Round to the next hour\n rowCellArray.push({\n id,\n startTime: curr.format(\"HH:mm\").toString(),\n endTime: nextHour.format(\"HH:mm\").toString(),\n status: \"disabled\",\n });\n curr = nextHour;\n } else {\n rowCellArray.push({\n id,\n startTime: curr.format(\"HH:mm\").toString(),\n endTime: roundedNextSlotStartTime\n .format(\"HH:mm\")\n .toString(),\n status: \"disabled\",\n });\n curr = roundedNextSlotStartTime;\n }\n }\n lastRoundedEndTime = curr.format(\"HH:mm\").toString();\n });\n\n // Handle non-op after hours\n if (\n roundedMaxTime &&\n dayjs(timetableMaxTime, \"HH:mm\").isAfter(\n dayjs(roundedMaxTime, \"HH:mm\")\n )\n ) {\n rowCellArray.push({\n id,\n startTime: roundedMaxTime,\n endTime: timetableMaxTime,\n status: \"blocked\",\n customPopover: outOfRangeCellPopover,\n });\n }\n\n // Handle empty row cells and no min/max time to block from timetable min to max\n if (sortedRowCells.length === 0 && !rowMinTime && !rowMaxTime) {\n rowCellArray.push({\n id,\n startTime: timetableMinTime,\n endTime: timetableMaxTime,\n status: \"blocked\",\n customPopover: outOfRangeCellPopover,\n });\n }\n return rowCellArray;\n }, [\n roundedMinTime,\n timetableMinTime,\n rowCells,\n roundedMaxTime,\n timetableMaxTime,\n rowMinTime,\n rowMaxTime,\n id,\n outOfRangeCellPopover,\n ]);\n\n return (\n <RowCellContainer data-testid=\"timetable-row\" role=\"presentation\">\n {rowCellArray.map((cell, index) => {\n return (\n <RowCell\n key={`${index}-row-cell-key`}\n {...cell}\n ariaColIndex={getAriaColIndex(\n cell.roundedStartTime \|\| cell.startTime\n )}\n ariaColSpan={getAriaColSpan(\n cell.roundedStartTime \|\| cell.startTime,\n cell.roundedEndTime \|\| cell.endTime\n )}\n rowName={name}\n intervalWidth={intervalWidth}\n rowBarColor={rowBarColor}\n containerRef={containerRef}\n />\n );\n })}\n </RowCellContainer>\n );\n};\n"],"names":["RowBar","id","name","timetableMinTime","timetableMaxTime","rowMinTime","rowMaxTime","rowCells","rowBarColor","intervalWidth","containerRef","outOfRangeCellPopover","roundedMinTime","TimeHelper","roundToNearestInterval","ROW_INTERVAL","roundedMaxTime","rowCellArray","useMemo","dayjs","isBefore","push","startTime","endTime","status","customPopover","sortedRowCells","sort","a","b","timeA","timeB","isAfter","lastRoundedEndTime","forEach","cell","index","roundedStartTime","roundedEndTime","Object","assign","isFocusable","nextSlotStartTime","_a","roundedNextSlotStartTime","curr","time2","get","nextHour","add","startOf","format","toString","length","_jsx","RowCellContainer","role","map","RowCell","ariaColIndex","time","timeToMinutes","ariaColSpan","rowName"],"mappings":"yTAsBO,MAAMA,EAAS,EAClBC,KACAC,OACAC,mBACAC,mBACAC,aACAC,aACAC,WACAC,cACAC,gBACAC,eACAC,4BAEA,MAAMC,EAAiBP,EACjBQ,EAAWC,uBAAuBT,EAAYU,GAC9CZ,EACAa,EAAiBV,EACjBO,EAAWC,uBAAuBR,EAAYS,GAAc,GAC5DX,EA6BAa,EAAeC,GAAQ,KACzB,MAAMD,EAA+C,GAIjDL,GACAO,EAAMhB,EAAkB,SAASiB,SAC7BD,EAAMP,EAAgB,WAG1BK,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASX,EACTY,OAAQ,UACRC,cAAed,IAIvB,MAAMe,EAAiB,IAAInB,GAAUoB,MAAK,CAACC,EAAGC,KAC1C,MAAMC,EAAQX,EAAMS,EAAEN,UAAW,SAC3BS,EAAQZ,EAAMU,EAAEP,UAAW,SACjC,OAAIQ,EAAMV,SAASW,IAAe,EAC9BD,EAAME,QAAQD,GAAe,EAC1B,CAAC,IAEZ,IAAIE,EAoGJ,OAlGAP,EAAeQ,SAAQ,CAACC,EAAMC,WAC1B,MAAMd,UAAEA,EAASC,QAAEA,GAAYY,EAC/B,IAAIE,EAAmBxB,EAAWC,uBAC9BQ,EACAP,GAKAkB,GACAd,EAAMkB,EAAkB,SAASjB,SAC7BD,EAAMc,EAAoB,YAG9BI,EAAmBxB,EAAWC,uBAC1BQ,EACAP,GACA,IAIR,MAAMuB,EAAiBzB,EAAWC,uBAC9BS,EACAR,GACA,GAEJE,EAAaI,KAAIkB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVL,IACHE,mBACAC,iBACAG,aAAa,KAGjB,MAAMC,WACFC,EAAApC,EAAS6B,EAAQ,yBAAId,YAAaN,EAChC4B,EAA2BzB,EAC7BN,EAAWC,uBACP4B,EACA3B,GAEJ,SAIJ,IAAI8B,EAFkB1B,EAAMmB,EAAgB,SAK5C,KAAOO,EAAKzB,SAASwB,IACjB,GAlGRE,EAkGmCF,EAANC,EAhGhBE,IAAI,SAAWD,EAAMC,IAAI,QAgGwB,CAClD,MAAMC,EAAWH,EAAKI,IAAI,EAAG,QAAQC,QAAQ,QAC7CjC,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASyB,EAASG,OAAO,SAASC,WAClC5B,OAAQ,aAEZqB,EAAOG,CACX,MACI/B,EAAaI,KAAK,CACdpB,KACAqB,UAAWuB,EAAKM,OAAO,SAASC,WAChC7B,QAASqB,EACJO,OAAO,SACPC,WACL5B,OAAQ,aAEZqB,EAAOD,EAtHC,IAEpBE,EAuHIb,EAAqBY,EAAKM,OAAO,SAASC,UAAU,IAKpDpC,GACAG,EAAMf,EAAkB,SAAS4B,QAC7Bb,EAAMH,EAAgB,WAG1BC,EAAaI,KAAK,CACdpB,KACAqB,UAAWN,EACXO,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAKO,IAA1Be,EAAe2B,QAAiBhD,GAAeC,GAC/CW,EAAaI,KAAK,CACdpB,KACAqB,UAAWnB,EACXoB,QAASnB,EACToB,OAAQ,UACRC,cAAed,IAGhBM,CAAY,GACpB,CACCL,EACAT,EACAI,EACAS,EACAZ,EACAC,EACAC,EACAL,EACAU,IAGJ,OACI2C,EAACC,iBAA6B,gBAAgBC,KAAK,wBAC9CvC,EAAawC,KAAI,CAACtB,EAAMC,KACrB,OACIkB,EAACI,EAAOnB,OAAAC,OAAA,GAEAL,EAAI,CACRwB,cAnKKC,EAoKDzB,EAAKE,kBAAoBF,EAAKb,WAlK7CT,EAAWgD,cAAcD,GACtB/C,EAAWgD,cAAc1D,IACzBY,EACJ,GAiKY+C,aA7JIxC,EA8JAa,EAAKE,kBAAoBF,EAAKb,UA9JXC,EA+JnBY,EAAKG,gBAAkBH,EAAKZ,SA7J3CV,EAAWgD,cAActC,GACtBV,EAAWgD,cAAcvC,IAC7BP,GA6JYgD,QAAS7D,EACTO,cAAeA,EACfD,YAAaA,EACbE,aAAcA,IAZT,GAAG0B,kBAxJL,IAACd,EAAmBC,EATlBqC,CA8KP,KAGK"}

package/timetable/timetable-row/row-bar.style.d.ts CHANGED Viewed

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

package/timetable/timetable-row/row-cell.d.ts CHANGED Viewed

@@ -5,6 +5,9 @@ interface RowCellProps extends InternalTimeTableRowCellData {
     containerRef: RefObject<HTMLDivElement>;
     intervalWidth: number;
     rowBarColor: RowBarColors;
+    ariaColIndex: number;
+    ariaColSpan: number;
+    rowName: string;
 }
-export declare const RowCell: React.MemoExoticComponent<({ id, startTime, endTime, title, subtitle, status, intervalWidth, rowBarColor, containerRef, customPopover, cellStyleAttributes, roundedStartTime, roundedEndTime, onClick, }: RowCellProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const RowCell: React.MemoExoticComponent<({ id, startTime, endTime, title, subtitle, status, intervalWidth, rowBarColor, customPopover, cellStyleAttributes, isFocusable, roundedStartTime, roundedEndTime, ariaColIndex, ariaColSpan, rowName, onClick, }: RowCellProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/timetable/timetable-row/row-cell.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import r from"../../external/dayjs/dayjs.min.js";import e from"react";import"../../util/calendar-helper.js";import{DateHelper as i}from"../../util/date-helper.js";import"../../util/string-helper.js";import{ROW_INTERVAL as l,ROW_CELL_GAP as n}from"../const.js";import{BlockContainer as s,Wrapper as m,Block as a,BlockTitle as c,BlockDescription as d,Gap as u}from"./row-cell.style.js";import{WithOptionalPopover as p}from"./with-optional-popover.js";const h=e.memo((({id:e,startTime:h,endTime:C,title:v,subtitle:f,status:g,intervalWidth:k,rowBarColor:$,containerRef:j,customPopover:T,cellStyleAttributes:b,roundedStartTime:y=h,roundedEndTime:w=C,onClick:H})=>{const B=0===r(w,"HH:mm").get("minutes"),x=i.getTimeDiffInMinutes(y,w)/l*k-n,A=!!H||T&&"click"===T.trigger;return o(p,{containerRef:j,customPopover:T,children:o(s,{"data-testid":"block-container",$isOnTheHour:B,children:t(m,{children:[t(a,{$width:x,$status:g,$mainColor:$.mainColor,$altColor:$.alternateColor,$isClickable:A,$customMainColor:null==b?void 0:b.backgroundColor,$customAltColor:null==b?void 0:b.altBackgroundColor,$customHoverColor:null==b?void 0:b.hoverBackgroundColor,$customAltHoverColor:null==b?void 0:b.altHoverBackgroundColor,$styleType:null==b?void 0:b.styleType,onClick:o=>{H&&H({id:e,startTime:h,endTime:C,status:g,title:v,subtitle:f,customPopover:T},o)},children:[v&&o(c,{weight:"semibold",children:v}),f&&o(d,{weight:"bold",children:f})]}),o(u,{})]})},"block-container-key")})}));export{h as RowCell};
+import{jsx as o,jsxs as r}from"react/jsx-runtime";import e from"../../external/dayjs/dayjs.min.js";import i from"react";import{concatIds as t,VisuallyHidden as l}from"../../shared/accessibility/index.js";import"../../util/calendar-helper.js";import{DateHelper as a}from"../../util/date-helper.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as n}from"../../util/time-helper.js";import{ROW_INTERVAL as m,ROW_CELL_GAP as s}from"../const.js";import{BlockContainer as d,Wrapper as c,Block as u,BlockTitle as p,BlockDescription as h,Gap as C}from"./row-cell.style.js";import{WithOptionalPopover as v}from"./with-optional-popover.js";const g=i.memo((({id:i,startTime:g,endTime:j,title:$,subtitle:b,status:f,intervalWidth:k,rowBarColor:T,customPopover:y,cellStyleAttributes:w,isFocusable:x,roundedStartTime:H=g,roundedEndTime:B=j,ariaColIndex:A,ariaColSpan:I,rowName:P,onClick:S})=>{const M=0===e(B,"HH:mm").get("minutes"),D=a.getTimeDiffInMinutes(H,B)/m*k-s,E=!!S||y&&"click"===y.trigger,F=t(`${n.formatTimeRange(g,j)}`,P,$,b,`${f}`),N=o=>{S&&S({id:i,startTime:g,endTime:j,status:f,title:$,subtitle:b,customPopover:y},o)};return o(d,{"data-testid":"block-container",$isOnTheHour:M,role:"gridcell","aria-colindex":A,"aria-colspan":I,children:o(v,{customPopover:y,children:r(c,{children:[r(u,{$width:D,$status:f,$mainColor:T.mainColor,$altColor:T.alternateColor,$isClickable:E,$customMainColor:null==w?void 0:w.backgroundColor,$customAltColor:null==w?void 0:w.altBackgroundColor,$customHoverColor:null==w?void 0:w.hoverBackgroundColor,$customAltHoverColor:null==w?void 0:w.altHoverBackgroundColor,$styleType:null==w?void 0:w.styleType,tabIndex:x?0:void 0,onClick:N,children:[o(l,{children:F}),$&&o(p,{weight:"semibold","aria-hidden":!0,children:$}),b&&o(h,{weight:"bold","aria-hidden":!0,children:b})]}),o(C,{})]})})},"block-container-key")}));export{g as RowCell};
 //# sourceMappingURL=row-cell.js.map

package/timetable/timetable-row/row-cell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"row-cell.js","sources":["../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React from \"react\";\n\nimport { DateHelper } from \"../../util\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n InternalTimeTableRowCellData,\n RowBarColors,\n} from \"../internal-types\";\nimport {\n Block,\n BlockContainer,\n BlockDescription,\n BlockTitle,\n Gap,\n Wrapper,\n} from \"./row-cell.style\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n containerRef: RefObject<HTMLDivElement>;\n intervalWidth: number;\n rowBarColor: RowBarColors;\n}\n\nconst Component = ({\n id,\n startTime,\n endTime,\n title,\n subtitle,\n status,\n intervalWidth,\n rowBarColor,\n ~~containerRef~~,\n ~~customPopover~~,\n ~~cellStyleAttributes~~,\n roundedStartTime = startTime,\n roundedEndTime = endTime,\n onClick,\n}: RowCellProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n const numberOfIntervals =\n DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n ROW_INTERVAL;\n const totalCellWidth = numberOfIntervals * intervalWidth;\n const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n const isClickable =\n !!onClick \|\| (customPopover && customPopover.trigger === \"click\");\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleCellClick = (event: React.MouseEvent) => {\n if (onClick) {\n onClick(\n {\n id,\n startTime,\n endTime,\n status,\n title,\n subtitle,\n customPopover,\n },\n event\n );\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n ~~return~~ (\n <WithOptionalPopover~~\n containerRef={containerRef}\n~~ customPopover={customPopover}\n >\n <~~BlockContainer\n key={`block-container-key`}\n data-testid={`block-container`}\n $isOnTheHour={isOnTheHour}\n~~ >\n <~~Wrapper>\n <~~Block\n $width={adjustedCellWidth}\n $status={status}\n $mainColor={rowBarColor.mainColor}\n $altColor={rowBarColor.alternateColor}\n $isClickable={isClickable}\n $customMainColor={cellStyleAttributes?.backgroundColor}\n $customAltColor={\n cellStyleAttributes?.altBackgroundColor\n }\n $customHoverColor={\n cellStyleAttributes?.hoverBackgroundColor\n }\n $customAltHoverColor={\n cellStyleAttributes?.altHoverBackgroundColor\n }\n $styleType={cellStyleAttributes?.styleType}\n onClick={handleCellClick}\n >\n {title && (\n <BlockTitle weight={\"semibold\"}>{title}</BlockTitle>\n )}\n {subtitle && (\n <BlockDescription weight={\"bold\"}>\n {subtitle}\n </BlockDescription>\n )}\n </Block>\n <Gap />\n </Wrapper>\n </BlockContainer>\n </~~WithOptionalPopover~~>\n );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","~~containerRef~~","~~customPopover~~","~~cellStyleAttributes~~","roundedStartTime","roundedEndTime","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","~~_jsx~~","~~WithOptionalPopover~~","~~children~~","BlockContainer","$isOnTheHour","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","~~event~~","BlockTitle","weight","BlockDescription","Gap"],"mappings":"~~mfA0BA~~,~~MAiGaA~~,EAAUC,EAAMC,~~MAjGX~~,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,~~eACAC,~~gBACAC,sBACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,cAKA,MAAMC,EAAgE,IAAlDC,~~EAAMH~~,EAAgB,~~SAASI~~,IAAI,WAKjDC,EAHFC,EAAWC,~~qBAAqBR~~,EAAkBC,~~GAClDQ~~,~~EACuCd~~,~~EACAe~~,EACrCC,IACAT,~~GAAYJ~~,GAA2C,UAA1BA,~~EAAcc~~,~~QAyBjD~~,~~OACIC~~,~~EAACC~~,~~EAAmB~~,~~CAChBjB~~,~~aAAcA~~,~~EACdC~~,~~cAAeA~~,~~EAAaiB~~,~~SAE5BF~~,~~EAACG~~,EAAc,CAAA,cAEE,kBAAiBC,~~aAChBd~~,~~EAAWY~~,~~SAEzBG~~,EAACC,EAAO,~~CAAAJ~~,SAAA,~~CACJG~~,EAACE,EAAK,CAAAC,~~OACMf~~,~~EAAiBgB~~,~~QAChB5B~~,~~EAAM6B~~,~~WACH3B~~,~~EAAY4B~~,UAASC,~~UACtB7B~~,~~EAAY8B~~,eAAcC,~~aACvBhB~~,~~EAAWiB~~,~~iBACP7B~~,aAAmB,EAAnBA,~~EAAqB8B~~,gBAAeC,~~gBAElD/B~~,aAAmB,EAAnBA,~~EAAqBgC~~,mBAAkBC,~~kBAGvCjC~~,aAAmB,EAAnBA,~~EAAqBkC~~,qBAAoBC,~~qBAGzCnC~~,aAAmB,EAAnBA,~~EAAqBoC~~,wBAAuBC,~~WAEpCrC~~,aAAmB,EAAnBA,~~EAAqBsC~~,~~UACjCnC~~,~~QAhDKoC~~,~~IACjBpC~~,~~GACAA~~,~~EACI~~,~~CACIb~~,~~KACAC~~,~~YACAC~~,~~UACAG~~,~~SACAF~~,~~QACAC~~,~~WACAK~~,~~iBAEJwC~~,~~EAER~~,~~EAkCwCvB~~,~~SAAA~~,~~CAEvBvB,GACGqB,EAAC0B,~~EAAU,CAACC,OAAQ,~~WAAUzB~~,~~SAAGvB~~,~~IAEpCC~~,~~GACGoB~~,~~EAAC4B~~,EAAgB,CAACD,OAAQ,~~OAAMzB~~,~~SAC3BtB~~,~~OAIboB~~,~~EAAC6B~~,EAAG,~~QAjCH~~,~~wBAoCS~~"}
1	+ {"version":3,"file":"row-cell.js","sources":["../../../src/timetable/timetable-row/row-cell.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport type { RefObject } from \"react\";\nimport React from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DateHelper } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { ROW_CELL_GAP, ROW_INTERVAL } from \"../const\";\nimport type {\n InternalTimeTableRowCellData,\n RowBarColors,\n} from \"../internal-types\";\nimport {\n Block,\n BlockContainer,\n BlockDescription,\n BlockTitle,\n Gap,\n Wrapper,\n} from \"./row-cell.style\";\nimport { WithOptionalPopover } from \"./with-optional-popover\";\n\ninterface RowCellProps extends InternalTimeTableRowCellData {\n containerRef: RefObject<HTMLDivElement>;\n intervalWidth: number;\n rowBarColor: RowBarColors;\n ariaColIndex: number;\n ariaColSpan: number;\n rowName: string;\n}\n\nconst Component = ({\n id,\n startTime,\n endTime,\n title,\n subtitle,\n status,\n intervalWidth,\n rowBarColor,\n customPopover,\n cellStyleAttributes,\n isFocusable,\n roundedStartTime = startTime,\n roundedEndTime = endTime,\n ariaColIndex,\n ariaColSpan,\n rowName,\n onClick,\n}: RowCellProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const isOnTheHour = dayjs(roundedEndTime, \"HH:mm\").get(\"minutes\") === 0;\n const numberOfIntervals =\n DateHelper.getTimeDiffInMinutes(roundedStartTime, roundedEndTime) /\n ROW_INTERVAL;\n const totalCellWidth = numberOfIntervals * intervalWidth;\n const adjustedCellWidth = totalCellWidth - ROW_CELL_GAP;\n const isClickable =\n !!onClick \|\| (customPopover && customPopover.trigger === \"click\");\n const rowAriaLabel = concatIds(\n `${TimeHelper.formatTimeRange(startTime, endTime)}`,\n rowName,\n title,\n subtitle,\n `${status}`\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleCellClick = (event: React.MouseEvent) => {\n if (onClick) {\n onClick(\n {\n id,\n startTime,\n endTime,\n status,\n title,\n subtitle,\n customPopover,\n },\n event\n );\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderCellContent = () => (\n <WithOptionalPopover customPopover={customPopover}>\n <Wrapper>\n <Block\n $width={adjustedCellWidth}\n $status={status}\n $mainColor={rowBarColor.mainColor}\n $altColor={rowBarColor.alternateColor}\n $isClickable={isClickable}\n $customMainColor={cellStyleAttributes?.backgroundColor}\n $customAltColor={cellStyleAttributes?.altBackgroundColor}\n $customHoverColor={\n cellStyleAttributes?.hoverBackgroundColor\n }\n $customAltHoverColor={\n cellStyleAttributes?.altHoverBackgroundColor\n }\n $styleType={cellStyleAttributes?.styleType}\n tabIndex={isFocusable ? 0 : undefined}\n onClick={handleCellClick}\n >\n <VisuallyHidden>{rowAriaLabel}</VisuallyHidden>\n {title && (\n <BlockTitle weight={\"semibold\"} aria-hidden>\n {title}\n </BlockTitle>\n )}\n {subtitle && (\n <BlockDescription weight={\"bold\"} aria-hidden>\n {subtitle}\n </BlockDescription>\n )}\n </Block>\n <Gap />\n </Wrapper>\n </WithOptionalPopover>\n );\n\n return (\n <BlockContainer\n key={`block-container-key`}\n data-testid={`block-container`}\n $isOnTheHour={isOnTheHour}\n role=\"gridcell\"\n aria-colindex={ariaColIndex}\n aria-colspan={ariaColSpan}\n >\n {renderCellContent()}\n </BlockContainer>\n );\n};\n\nexport const RowCell = React.memo(Component);\n"],"names":["RowCell","React","memo","id","startTime","endTime","title","subtitle","status","intervalWidth","rowBarColor","customPopover","cellStyleAttributes","isFocusable","roundedStartTime","roundedEndTime","ariaColIndex","ariaColSpan","rowName","onClick","isOnTheHour","dayjs","get","adjustedCellWidth","DateHelper","getTimeDiffInMinutes","ROW_INTERVAL","ROW_CELL_GAP","isClickable","trigger","rowAriaLabel","concatIds","TimeHelper","formatTimeRange","handleCellClick","event","_jsx","BlockContainer","$isOnTheHour","role","children","WithOptionalPopover","_jsxs","Wrapper","Block","$width","$status","$mainColor","mainColor","$altColor","alternateColor","$isClickable","$customMainColor","backgroundColor","$customAltColor","altBackgroundColor","$customHoverColor","hoverBackgroundColor","$customAltHoverColor","altHoverBackgroundColor","$styleType","styleType","tabIndex","undefined","VisuallyHidden","BlockTitle","weight","BlockDescription","Gap"],"mappings":"2sBA+BA,MAiHaA,EAAUC,EAAMC,MAjHX,EACdC,KACAC,YACAC,UACAC,QACAC,WACAC,SACAC,gBACAC,cACAC,gBACAC,sBACAC,cACAC,mBAAmBV,EACnBW,iBAAiBV,EACjBW,eACAC,cACAC,UACAC,cAKA,MAAMC,EAAgE,IAAlDC,EAAMN,EAAgB,SAASO,IAAI,WAKjDC,EAHFC,EAAWC,qBAAqBX,EAAkBC,GAClDW,EACuCjB,EACAkB,EACrCC,IACAT,GAAYR,GAA2C,UAA1BA,EAAckB,QAC3CC,EAAeC,EACjB,GAAGC,EAAWC,gBAAgB7B,EAAWC,KACzCa,EACAZ,EACAC,EACA,GAAGC,KAMD0B,EAAmBC,IACjBhB,GACAA,EACI,CACIhB,KACAC,YACAC,UACAG,SACAF,QACAC,WACAI,iBAEJwB,EAER,EA4CJ,OACIC,EAACC,EAAc,CAAA,cAEE,kBAAiBC,aAChBlB,EACdmB,KAAK,2BACUvB,EAAY,eACbC,EAAWuB,SA5C7BJ,EAACK,EAAmB,CAAC9B,cAAeA,EAAa6B,SAC7CE,EAACC,EAAO,CAAAH,SAAA,CACJE,EAACE,EAAK,CAAAC,OACMtB,EAAiBuB,QAChBtC,EAAMuC,WACHrC,EAAYsC,UAASC,UACtBvC,EAAYwC,eAAcC,aACvBvB,EAAWwB,iBACPxC,aAAmB,EAAnBA,EAAqByC,gBAAeC,gBACrC1C,aAAmB,EAAnBA,EAAqB2C,mBAAkBC,kBAEpD5C,aAAmB,EAAnBA,EAAqB6C,qBAAoBC,qBAGzC9C,aAAmB,EAAnBA,EAAqB+C,wBAAuBC,WAEpChD,aAAmB,EAAnBA,EAAqBiD,UACjCC,SAAUjD,EAAc,OAAIkD,EAC5B5C,QAASe,EAAeM,SAAA,CAExBJ,EAAC4B,EAAc,CAAAxB,SAAEV,IAChBxB,GACG8B,EAAC6B,EAAU,CAACC,OAAQ,WAAU,eAAA,EAAA1B,SACzBlC,IAGRC,GACG6B,EAAC+B,EAAgB,CAACD,OAAQ,OAAM,eAAA,EAAA1B,SAC3BjC,OAIb6B,EAACgC,EAAG,CAAA,SAOH,sBAQQ"}

package/timetable/timetable-row/row-cell.style.d.ts CHANGED Viewed

@@ -15,14 +15,46 @@ interface BlockStyleProps {
 interface BlockContainerProps {
     $isOnTheHour: boolean;
 }
-export declare const BlockContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BlockContainerProps>> & string;
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Gap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Block: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BlockStyleProps>> & string;
-export declare const BlockTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const BlockDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
+export declare const BlockContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOnTheHour"> & BlockContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isOnTheHour"> & BlockContainerProps, never>>> & string;
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Gap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Block: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BlockStyleProps> & BlockStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BlockStyleProps> & BlockStyleProps, never>>> & string;
+export declare const BlockTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const BlockDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("../..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export {};