npm - @lifesg/react-design-system - Versions diffs - 3.4.0-canary.5 → 3.4.0-canary.7 - Mend

@lifesg/react-design-system 3.4.0-canary.5 → 3.4.0-canary.7

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 (131) hide show

package/filter/filter-sidebar.styles.js CHANGED Viewed

@@ -1,23 +1,29 @@
-import o from"styled-components";import{Button as i}from"../button/button.js";import{Colour as r,Border as d,Radius as n,Font as e,Spacing as t}from"../theme/index.js";const a=o.div`
-    background-color: ${r.bg};
-    border: ${d["width-010"]} ${d.solid} ${r.border};
-    border-radius: ${n.md};
+import i from"styled-components";import{Button as o}from"../button/button.js";import{Colour as t,Border as r,Radius as e,Spacing as n,Font as d}from"../theme/index.js";const a=i.div`
+    background-color: ${t.bg};
+    border: ${r["width-010"]} ${r.solid} ${t.border};
+    border-radius: ${e.md};
     overflow: hidden;
     width: 100%;
-`,g=o.div`
+`,s=i.div`
     display: flex;
     align-items: center;
-    background-color: ${r.bg};
-`,s=o.h2`
-    ${e["heading-xs-semibold"]}
+    background-color: ${t.bg};
+    color: ${t.text};
+`,g=i.div`
     flex: 1;
-    margin: ${t["spacing-24"]} 0 ${t["spacing-24"]}
-        ${t["spacing-20"]};
-`,c=o(i.Small)`
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: ${n["spacing-8"]};
+    margin: ${n["spacing-24"]} 0 ${n["spacing-24"]}
+        ${n["spacing-20"]};
+`,l=i.h2`
+    ${d["heading-xs-semibold"]}
+`,c=i(o.Small)`
     background-color: transparent;
-    padding-right: ${t["spacing-20"]};
-    padding-left: ${t["spacing-20"]};
+    padding-right: ${n["spacing-20"]};
+    padding-left: ${n["spacing-20"]};
     height: 100%;
-`;export{a as DesktopContainer,c as FilterClearButton,g as FilterHeader,s as FilterTitle};
+`;export{a as DesktopContainer,c as FilterClearButton,s as FilterHeader,l as FilterTitle,g as FilterTitleGroup};
 //# sourceMappingURL=filter-sidebar.styles.js.map

package/filter/filter-sidebar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n background-color: ${Colour[\"bg\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"md\"]};\n overflow: hidden;\n width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const ~~FilterTitle~~ = styled.h2`\n ${~~Font~~[\"~~heading~~-~~xs-semibold~~\"]}~~\n flex: 1~~;\n margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n background-color: transparent;\n padding-right: ${Spacing[\"spacing-20\"]};\n padding-left: ${Spacing[\"spacing-20\"]};\n height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitle","h2","Font","~~Spacing","~~FilterClearButton","Button","Small"],"mappings":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;~~EAGtBI~~,~~EAAcN~~,~~EAAOO~~,~~EAAE;MAC9BC~~,~~EAAK;;cAEGC~~,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,~~EAAoBV~~,~~EAAOW~~,EAAOC,MAAM;;~~qBAEhCH~~,EAAQ;oBACTA,EAAQ;;"}
1	+ {"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n background-color: ${Colour[\"bg\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"md\"]};\n overflow: hidden;\n width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n color: ${Colour[\"text\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: ${Spacing[\"spacing-8\"]};\n margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n background-color: transparent;\n padding-right: ${Spacing[\"spacing-20\"]};\n padding-left: ${Spacing[\"spacing-20\"]};\n height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;aACtBA,EAAa;EAGbI,EAAmBN,EAAOC,GAAG;;;;;WAK/BM,EAAQ;cACLA,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;EAGEC,EAAoBX,EAAOY,EAAOC,MAAM;;qBAEhCN,EAAQ;oBACTA,EAAQ;;"}

package/filter/filter.d.ts CHANGED Viewed

@@ -2,11 +2,11 @@ import { FilterProps } from "./types";
 export declare const Filter: {
     ({ children, className, style, onDismiss, onDone, onModalOpen, toggleFilterButtonStyle, insets, id, "data-testid": testId, ...props }: FilterProps): import("react/jsx-runtime").JSX.Element;
     Sidebar: {
-        ({ customLabels, onClear, clearButtonDisabled, children, headerTitle: _headerTitle, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, clearButtonDisabled, count, children, headerTitle: _headerTitle, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Modal: {
-        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, count, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Item: {

package/filter/filter.styles.js CHANGED Viewed

@@ -1,11 +1,12 @@
-import o from"styled-components";import{Button as t}from"../button/button.js";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{Spacing as r,Colour as e,Border as n}from"../theme/index.js";const d=o.div`
+import o from"styled-components";import{Button as t}from"../button/button.js";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{Colour as r,Spacing as e,Border as n}from"../theme/index.js";const c=o.div`
     flex: 1;
     width: 100%;
     overflow-y: auto;
-`,c=o(i)`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
+    color: ${r.text};
+`,d=o(i)`
+    padding: ${e["spacing-24"]} ${e["spacing-20"]};
     margin-right: auto;
-    color: ${e.icon};
+    color: ${r.icon};
     svg {
         height: 1.5rem;
@@ -13,14 +14,14 @@ import o from"styled-components";import{Button as t}from"../button/button.js";im
     }
     &:hover {
-        color: ${e["icon-hover"]};
+        color: ${r["icon-hover"]};
     }
 `,m=o.div`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
-    background-color: ${e.bg};
-    border-top: ${n["width-010"]} ${n.solid} ${e.border};
+    padding: ${e["spacing-24"]} ${e["spacing-20"]};
+    background-color: ${r.bg};
+    border-top: ${n["width-010"]} ${n.solid} ${r.border};
     ${o=>o.$insetBottom&&`padding-bottom: ${o.$insetBottom}px;`}
 `,a=o(t.Default)`
     width: 100%;
-`;export{d as FilterBody,a as FilterDoneButton,m as FilterFooter,c as FilterHeaderButton};
+`;export{c as FilterBody,a as FilterDoneButton,m as FilterFooter,d as FilterHeaderButton};
 //# sourceMappingURL=filter.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"filter.styles.js","sources":["../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n $insetBottom?: number \| undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n flex: 1;\n width: 100%;\n overflow-y: auto;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n margin-right: auto;\n color: ${Colour[\"icon\"]};\n\n svg {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n ${(props) =>\n props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n width: 100%;\n`;\n"],"names":["FilterBody","styled","div","FilterHeaderButton","ClickableIcon","Spacing","~~Colour","~~FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"6NAiBO,MAAMA,EAAaC,EAAOC,GAAG;;;;~~EAUvBC~~,~~EAAqBF~~,~~EAAOG~~,EAAc;eACxCC,EAAQ,iBAAiBA,EAAQ;;~~aAEnCC~~,EAAa;;;;;;;;iBAQTA,EAAO;;~~EAQXC~~,EAAeN,EAAOC,GAAsB;~~eAC1CG~~,EAAQ,iBAAiBA,EAAQ;~~wBACxBC~~,EAAW;~~kBACjBE~~,EAAO,gBAAgBA,EAAc,~~SAAKF~~,EAAe;~~MACpEG~~,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAOW,EAAOC,QAAQ;;"}
1	+ {"version":3,"file":"filter.styles.js","sources":["../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Border, Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n $insetBottom?: number \| undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n flex: 1;\n width: 100%;\n overflow-y: auto;\n color: ${Colour[\"text\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n margin-right: auto;\n color: ${Colour[\"icon\"]};\n\n svg {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n ${(props) =>\n props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n width: 100%;\n`;\n"],"names":["FilterBody","styled","div","Colour","FilterHeaderButton","ClickableIcon","Spacing","FilterFooter","Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"6NAiBO,MAAMA,EAAaC,EAAOC,GAAG;;;;aAIvBC,EAAa;EAObC,EAAqBH,EAAOI,EAAc;eACxCC,EAAQ,iBAAiBA,EAAQ;;aAEnCH,EAAa;;;;;;;;iBAQTA,EAAO;;EAQXI,EAAeN,EAAOC,GAAsB;eAC1CI,EAAQ,iBAAiBA,EAAQ;wBACxBH,EAAW;kBACjBK,EAAO,gBAAgBA,EAAc,SAAKL,EAAe;MACpEM,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAOW,EAAOC,QAAQ;;"}

package/filter/types.d.ts CHANGED Viewed

@@ -18,6 +18,7 @@ export interface FilterBaseProps {
     "data-testid"?: string | undefined;
     className?: string | undefined;
     style?: CSSProperties | undefined;
+    count?: number | undefined;
     clearButtonDisabled?: boolean | undefined;
     /** Called when clear button is pressed */
     onClear?: (() => void) | undefined;

package/form/form-wrapper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{Children as r,cloneElement as t}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormLabel as i}from"./form-label.js";import{ErrorMessageContainer as o,ErrorIcon as a,ErrorMessage as d}from"./form-label.style.js";import{Container as n,ColDivContainer as m,V2_ColDivContainer as b}from"./form-wrapper.style.js";const p=({label:p,errorMessage:c,id:u,disabled:C,children:f,layoutType:g,mobileCols:x,tabletCols:h,desktopCols:j,xxsCols:v,xsCols:y,smCols:$,mdCols:w,lgCols:k,xlCols:F,xxlCols:O,"data-testid":B,"data-error-testid":I})=>{const M=!g&&(x||h||j)?"v2-grid":!g&&(v||y||$||w||k||F||O)?"grid":g||"flex",T="string"==typeof c?c.trim():c,q=s(),z=`${null!=u?u:q}-label`,A=`${null!=u?u:q}-label-subtitle`,D=`${null!=u?u:q}-error-message`;const E=(e=>{switch(e){case"v2-grid":return b;case"grid":return m;case"flex":return n}})(M);return e(E,Object.assign({"data-testid":B},(e=>{switch(e){case"v2-grid":return{mobileCols:x,tabletCols:h,desktopCols:j};case"grid":return{xxsCols:v,xsCols:y,smCols:$,mdCols:w,lgCols:k,xlCols:F,xxlCols:O};case"flex":return}})(M),{children:[p&&l(i,"string"==typeof p?{htmlFor:`${u}-base`,"data-testid":u?`${u}-label`:"form-label",id:z,disabled:C,children:p}:Object.assign({htmlFor:`${u}-base`,"data-testid":u?`${u}-label`:"form-label",id:z,disabled:C},p)),(()=>{const e={"aria-invalid":!!c,"aria-describedby":[T?D:void 0,"object"==typeof p&&(null==p?void 0:p.subtitle)?A:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":p?z:void 0};return r.map(f,(l=>t(l,e)))})(),T&&e(o,{children:[l(a,{"aria-hidden":!0}),l(d,{id:D,tabIndex:0,"data-testid":null!=I?I:u?`${u}-error-message`:"error-message",children:T})]})]}))};export{p as FormWrapper};
+import{jsxs as e,jsx as l}from"react/jsx-runtime";import{Children as r,isValidElement as t,Fragment as s,cloneElement as i}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as o}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormLabel as a}from"./form-label.js";import{ErrorMessageContainer as d,ErrorIcon as n,ErrorMessage as m}from"./form-label.style.js";import{Container as b,ColDivContainer as p,V2_ColDivContainer as c}from"./form-wrapper.style.js";const u=({label:u,errorMessage:C,id:f,disabled:g,children:x,layoutType:h,mobileCols:j,tabletCols:v,desktopCols:y,xxsCols:$,xsCols:w,smCols:k,mdCols:F,lgCols:O,xlCols:B,xxlCols:I,"data-testid":M,"data-error-testid":T})=>{const q=!h&&(j||v||y)?"v2-grid":!h&&($||w||k||F||O||B||I)?"grid":h||"flex",z="string"==typeof C?C.trim():C,A=o(),D=`${null!=f?f:A}-label`,E=`${null!=f?f:A}-label-subtitle`,G=`${null!=f?f:A}-error-message`;const H=(e=>{switch(e){case"v2-grid":return c;case"grid":return p;case"flex":return b}})(q);return e(H,Object.assign({"data-testid":M},(e=>{switch(e){case"v2-grid":return{mobileCols:j,tabletCols:v,desktopCols:y};case"grid":return{xxsCols:$,xsCols:w,smCols:k,mdCols:F,lgCols:O,xlCols:B,xxlCols:I};case"flex":return}})(q),{children:[u&&l(a,"string"==typeof u?{htmlFor:`${f}-base`,"data-testid":f?`${f}-label`:"form-label",id:D,disabled:g,children:u}:Object.assign({htmlFor:`${f}-base`,"data-testid":f?`${f}-label`:"form-label",id:D,disabled:g},u)),(()=>{const e={"aria-invalid":!!C,"aria-describedby":[z?G:void 0,"object"==typeof u&&(null==u?void 0:u.subtitle)?E:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":u?D:void 0};return r.map(x,(l=>t(l)&&l.type===s?i(l):i(l,e)))})(),z&&e(d,{children:[l(n,{"aria-hidden":!0}),l(m,{id:G,tabIndex:0,"data-testid":null!=T?T:f?`${f}-error-message`:"error-message",children:z})]})]}))};export{u as FormWrapper};
 //# sourceMappingURL=form-wrapper.js.map

package/form/form-wrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-wrapper.js","sources":["../../src/form/form-wrapper.tsx"],"sourcesContent":["/*\n This is a SUPPORTING component\n * (Do not include in the main export)\n \n /\n\nimport { Children, ComponentType, cloneElement } from \"react\";\nimport { useId } from \"../util\";\nimport { FormLabel } from \"./form-label\";\nimport {\n ErrorIcon,\n ErrorMessage,\n ErrorMessageContainer,\n} from \"./form-label.style\";\nimport {\n ColDivContainer,\n Container,\n V2_ColDivContainer,\n} from \"./form-wrapper.style\";\nimport { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n label,\n errorMessage: eRaw,\n id,\n disabled,\n children,\n layoutType,\n mobileCols,\n tabletCols,\n desktopCols,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n \"data-testid\": testId,\n \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const updatedLayoutType = getLayoutType();\n const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n const internalId = useId();\n const labelId = `${id ?? internalId}-label`; // matches FormLabel\n const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n const errorMessageId = `${id ?? internalId}-error-message`;\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const isInvalidState = (): boolean => {\n return !!eRaw;\n };\n\n const hasSubtitleLabel = (): boolean => {\n return typeof label === \"object\" && !!label?.subtitle;\n };\n\n const getAriaDescribedBy = (): string \| undefined => {\n return (\n [\n errorMessage ? errorMessageId : undefined,\n hasSubtitleLabel() ? subtitleId : undefined,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined\n );\n };\n\n function getLayoutType(): FormElementLayoutType {\n if (!layoutType && (mobileCols \|\| tabletCols \|\| desktopCols)) {\n return \"v2-grid\";\n } else if (\n !layoutType &&\n (xxsCols \|\|\n xsCols \|\|\n smCols \|\|\n mdCols \|\|\n lgCols \|\|\n xlCols \|\|\n xxlCols)\n ) {\n return \"grid\";\n } else if (!layoutType) {\n return \"flex\";\n } else {\n return layoutType;\n }\n }\n\n const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n switch (layoutType) {\n case \"v2-grid\":\n return {\n mobileCols,\n tabletCols,\n desktopCols,\n };\n case \"grid\":\n return {\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n };\n case \"flex\":\n return undefined;\n }\n };\n\n const getContainerComponent = (\n layoutType: FormElementLayoutType\n ): ComponentType => {\n switch (layoutType) {\n case \"v2-grid\":\n return V2_ColDivContainer;\n case \"grid\":\n return ColDivContainer;\n case \"flex\":\n return Container;\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderFormLabel = (): JSX.Element => {\n if (typeof label === \"string\") {\n return (\n <FormLabel\n htmlFor={`${id}-base`}\n // FIXME: kept for backwards-compatibility\n // in most cases data-testid should be separate from id\n data-testid={id ? `${id}-label` : \"form-label\"}\n id={labelId}\n disabled={disabled}\n >\n {label}\n </FormLabel>\n );\n }\n return (\n <FormLabel\n htmlFor={`${id}-base`}\n data-testid={id ? `${id}-label` : \"form-label\"}\n id={labelId}\n disabled={disabled}\n {...label}\n />\n );\n };\n\n const renderChildren = (): JSX.Element \| JSX.Element[] => {\n const ariaState = {\n \"aria-invalid\": isInvalidState(),\n \"aria-describedby\": getAriaDescribedBy(),\n \"aria-labelledby\": label ? labelId : undefined,\n };\n return Children.map(children, (child) ~~=>\~~n cloneElement(child, ariaState)\n );\n };\n\n const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n return (\n <ContainerComponent\n data-testid={testId}\n {...getContainerLayoutProps(updatedLayoutType)}\n >\n {label && renderFormLabel()}\n {renderChildren()}\n {errorMessage && (\n <ErrorMessageContainer>\n <ErrorIcon aria-hidden />\n <ErrorMessage\n id={errorMessageId}\n tabIndex={0}\n data-testid={\n errorTestId ??\n // FIXME: kept for backwards-compatibility\n // in most cases data-testid should be separate from id\n (id ? `${id}-error-message` : \"error-message\")\n }\n >\n {errorMessage}\n </ErrorMessage>\n </ErrorMessageContainer>\n )}\n </ContainerComponent>\n );\n};\n"],"names":["FormWrapper","label","errorMessage","eRaw","id","disabled","children","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","V2_ColDivContainer","ColDivContainer","Container","getContainerComponent","_jsxs","Object","assign","getContainerLayoutProps","_jsx","FormLabel","htmlFor","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","cloneElement","renderChildren","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"~~yjBAqBaA~~,EAAc,EACvBC,QACAC,aAAcC,EACdC,KACAC,WACAC,WACAC,aACAC,aACAC,aACAC,cACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GA+BGb,IAAeC,GAAcC,GAAcC,GACrC,WAENH,IACAI,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCV,GACD,OA5CTL,EAA+B,iBAATC,EAAoBA,EAAKkB,OAASlB,EACxDmB,EAAaC,IACbC,EAAU,GAAGpB,QAAAA,EAAMkB,UACnBG,EAAa,GAAGrB,QAAAA,EAAMkB,mBACtBI,EAAiB,GAAGtB,QAAAA,EAAMkB,kBA8ChC,~~MA6EMK~~,~~EAtDwB~~,CAC1BpB,IAEA,OAAQA,GACJ,IAAK,UACD,OAAOqB,EACX,IAAK,OACD,OAAOC,EACX,IAAK,OACD,OAAOC,~~IA6CQC~~,CAAsBX,GAEjD,OACIY,EAACL,EAAkBM,OAAAC,OAAA,CAAA,cACFhB,~~GAjFW~~,CAACX,IAC7B,OAAQA,GACJ,IAAK,UACD,MAAO,CACHC,aACAC,aACAC,eAER,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,~~SA+DAkB~~,CAAwBf,cAE3BnB,~~GAzCGmC~~,EAACC,EAFY,iBAAVpC,EAEO,CACNqC,QAAS,GAAGlC,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,EAAQC,SAEjBL,GAKCgC,OAAAC,OAAA,CACNI,QAAS,GAAGlC,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,GACNJ,IAKO,MACnB,MAAMsC,EAAY,CACd,iBA3GKpC,EA4GL,mBAnGA,CACID,EAAewB,OAAiBc,EANhB,iBAAVvC,IAAwBA,aAAK,EAALA,EAAOwC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EA+FlB,kBAAmBvC,EAAQuB,OAAUgB,GAEzC,OAAOK,EAASC,IAAIxC,GAAWyC,~~GAC3BC~~,~~EAAaD~~,EAAOR,~~IACvB~~,~~EAWIU~~,~~GACA/C~~,GACG8B,~~EAACkB~~,EAAqB,~~CAAA5C~~,SAAA,CAClB8B,~~EAACe~~,EAAS,CAAA,eAAA,~~IACVf~~,~~EAACgB~~,~~GACGhD~~,GAAIsB,~~EACJ2B~~,SAAU,EAAC,~~cAEPlC~~,QAAAA,EAGCf,EAAK,GAAGA,kBAAqB,yBAGjCF,UAII"}
1	+ {"version":3,"file":"form-wrapper.js","sources":["../../src/form/form-wrapper.tsx"],"sourcesContent":["/*\n This is a SUPPORTING component\n * (Do not include in the main export)\n \n /\n\nimport {\n Children,\n ComponentType,\n Fragment,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { useId } from \"../util\";\nimport { FormLabel } from \"./form-label\";\nimport {\n ErrorIcon,\n ErrorMessage,\n ErrorMessageContainer,\n} from \"./form-label.style\";\nimport {\n ColDivContainer,\n Container,\n V2_ColDivContainer,\n} from \"./form-wrapper.style\";\nimport { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n label,\n errorMessage: eRaw,\n id,\n disabled,\n children,\n layoutType,\n mobileCols,\n tabletCols,\n desktopCols,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n \"data-testid\": testId,\n \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const updatedLayoutType = getLayoutType();\n const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n const internalId = useId();\n const labelId = `${id ?? internalId}-label`; // matches FormLabel\n const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n const errorMessageId = `${id ?? internalId}-error-message`;\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const isInvalidState = (): boolean => {\n return !!eRaw;\n };\n\n const hasSubtitleLabel = (): boolean => {\n return typeof label === \"object\" && !!label?.subtitle;\n };\n\n const getAriaDescribedBy = (): string \| undefined => {\n return (\n [\n errorMessage ? errorMessageId : undefined,\n hasSubtitleLabel() ? subtitleId : undefined,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined\n );\n };\n\n function getLayoutType(): FormElementLayoutType {\n if (!layoutType && (mobileCols \|\| tabletCols \|\| desktopCols)) {\n return \"v2-grid\";\n } else if (\n !layoutType &&\n (xxsCols \|\|\n xsCols \|\|\n smCols \|\|\n mdCols \|\|\n lgCols \|\|\n xlCols \|\|\n xxlCols)\n ) {\n return \"grid\";\n } else if (!layoutType) {\n return \"flex\";\n } else {\n return layoutType;\n }\n }\n\n const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n switch (layoutType) {\n case \"v2-grid\":\n return {\n mobileCols,\n tabletCols,\n desktopCols,\n };\n case \"grid\":\n return {\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n };\n case \"flex\":\n return undefined;\n }\n };\n\n const getContainerComponent = (\n layoutType: FormElementLayoutType\n ): ComponentType => {\n switch (layoutType) {\n case \"v2-grid\":\n return V2_ColDivContainer;\n case \"grid\":\n return ColDivContainer;\n case \"flex\":\n return Container;\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderFormLabel = (): JSX.Element => {\n if (typeof label === \"string\") {\n return (\n <FormLabel\n htmlFor={`${id}-base`}\n // FIXME: kept for backwards-compatibility\n // in most cases data-testid should be separate from id\n data-testid={id ? `${id}-label` : \"form-label\"}\n id={labelId}\n disabled={disabled}\n >\n {label}\n </FormLabel>\n );\n }\n return (\n <FormLabel\n htmlFor={`${id}-base`}\n data-testid={id ? `${id}-label` : \"form-label\"}\n id={labelId}\n disabled={disabled}\n {...label}\n />\n );\n };\n\n const renderChildren = (): JSX.Element \| JSX.Element[] => {\n const ariaState = {\n \"aria-invalid\": isInvalidState(),\n \"aria-describedby\": getAriaDescribedBy(),\n \"aria-labelledby\": label ? labelId : undefined,\n };\n return Children.map(children, (child) => {\n if (isValidElement(child) && child.type === Fragment) {\n return cloneElement(child);\n }\n return cloneElement(child, ariaState);\n });\n };\n\n const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n return (\n <ContainerComponent\n data-testid={testId}\n {...getContainerLayoutProps(updatedLayoutType)}\n >\n {label && renderFormLabel()}\n {renderChildren()}\n {errorMessage && (\n <ErrorMessageContainer>\n <ErrorIcon aria-hidden />\n <ErrorMessage\n id={errorMessageId}\n tabIndex={0}\n data-testid={\n errorTestId ??\n // FIXME: kept for backwards-compatibility\n // in most cases data-testid should be separate from id\n (id ? `${id}-error-message` : \"error-message\")\n }\n >\n {errorMessage}\n </ErrorMessage>\n </ErrorMessageContainer>\n )}\n </ContainerComponent>\n );\n};\n"],"names":["FormWrapper","label","errorMessage","eRaw","id","disabled","children","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","V2_ColDivContainer","ColDivContainer","Container","getContainerComponent","_jsxs","Object","assign","getContainerLayoutProps","_jsx","FormLabel","htmlFor","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","isValidElement","type","Fragment","cloneElement","renderChildren","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"2lBA2BaA,EAAc,EACvBC,QACAC,aAAcC,EACdC,KACAC,WACAC,WACAC,aACAC,aACAC,aACAC,cACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GA+BGb,IAAeC,GAAcC,GAAcC,GACrC,WAENH,IACAI,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCV,GACD,OA5CTL,EAA+B,iBAATC,EAAoBA,EAAKkB,OAASlB,EACxDmB,EAAaC,IACbC,EAAU,GAAGpB,QAAAA,EAAMkB,UACnBG,EAAa,GAAGrB,QAAAA,EAAMkB,mBACtBI,EAAiB,GAAGtB,QAAAA,EAAMkB,kBA8ChC,MAgFMK,EAzDwB,CAC1BpB,IAEA,OAAQA,GACJ,IAAK,UACD,OAAOqB,EACX,IAAK,OACD,OAAOC,EACX,IAAK,OACD,OAAOC,IAgDQC,CAAsBX,GAEjD,OACIY,EAACL,EAAkBM,OAAAC,OAAA,CAAA,cACFhB,GApFW,CAACX,IAC7B,OAAQA,GACJ,IAAK,UACD,MAAO,CACHC,aACAC,aACAC,eAER,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,SAkEAkB,CAAwBf,cAE3BnB,GA5CGmC,EAACC,EAFY,iBAAVpC,EAEO,CACNqC,QAAS,GAAGlC,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,EAAQC,SAEjBL,GAKCgC,OAAAC,OAAA,CACNI,QAAS,GAAGlC,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,GACNJ,IAKO,MACnB,MAAMsC,EAAY,CACd,iBA3GKpC,EA4GL,mBAnGA,CACID,EAAewB,OAAiBc,EANhB,iBAAVvC,IAAwBA,aAAK,EAALA,EAAOwC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EA+FlB,kBAAmBvC,EAAQuB,OAAUgB,GAEzC,OAAOK,EAASC,IAAIxC,GAAWyC,GACvBC,EAAeD,IAAUA,EAAME,OAASC,EACjCC,EAAaJ,GAEjBI,EAAaJ,EAAOR,IAC7B,EAWGa,GACAlD,GACG8B,EAACqB,EAAqB,CAAA/C,SAAA,CAClB8B,EAACkB,EAAS,CAAA,eAAA,IACVlB,EAACmB,GACGnD,GAAIsB,EACJ8B,SAAU,EAAC,cAEPrC,QAAAA,EAGCf,EAAK,GAAGA,kBAAqB,yBAGjCF,UAII"}

package/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{ButtonWithIcon}from"./button-with-icon/button-with-icon.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{IconButton}from"./icon-button/icon-button.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{withPopover}from"./popover/popover-hoc.js";export{Popover}from"./popover/popover.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{A11yPlaygroundTheme,BookingSGTheme,Border,Breakpoint,CCubeTheme,Colour,Font,IMDATheme,LifeSGTheme,MediaQuery,Motion,MyLegacyTheme,OneServiceTheme,PATheme,RBSTheme,Radius,SGWDigitalLobbyTheme,SGWDigitalLobbyThemeBase,SMGSTheme,SPFTheme,Shadow,Spacing,SupportGoWhereTheme,SupportGoWhereThemeBase,ThemeComponent}from"./theme/index.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/typography.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{V2_Text}from"./v2_text/text.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{DSThemeProvider}from"./theme/ds-theme-provider.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./theme/use-theme-mode.js";
+export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{ButtonWithIcon}from"./button-with-icon/button-with-icon.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{IconButton}from"./icon-button/icon-button.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{withPopover}from"./popover/popover-hoc.js";export{Popover}from"./popover/popover.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{A11yPlaygroundTheme,BookingSGTheme,Border,Breakpoint,CCubeTheme,CareerCompassTheme,Colour,Font,IMDATheme,LifeSGTheme,MediaQuery,Motion,MyLegacyTheme,OneServiceTheme,PATheme,RBSTheme,Radius,SGWDigitalLobbyTheme,SGWDigitalLobbyThemeBase,SMGSTheme,SPFTheme,Shadow,Spacing,SupportGoWhereTheme,SupportGoWhereThemeBase,ThemeComponent}from"./theme/index.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/typography.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{V2_Text}from"./v2_text/text.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{DSThemeProvider}from"./theme/ds-theme-provider.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./theme/use-theme-mode.js";
 //# sourceMappingURL=index.js.map

package/package.json CHANGED Viewed

@@ -1,7 +1,23 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.4.0-canary.5",
+  "version": "3.4.0-canary.7",
   "description": "A component design system for LifeSG web apps",
+  "keywords": [
+    "design-system"
+  ],
+  "homepage": "https://github.com/LifeSG/react-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/LifeSG/react-design-system/issues"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LifeSG/react-design-system.git"
+  },
+  "engines": {
+    "npm": ">=11.10.0",
+    "node": ">=22.0.0"
+  },
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js CHANGED Viewed

@@ -1,25 +1,26 @@
-import e,{css as t}from"styled-components";import{Colour as i,Font as r}from"../../theme/index.js";import{lineClampCss as l}from"../styles/index.js";const o=e.div`
+import e,{css as t}from"styled-components";import{Colour as r,Font as i}from"../../theme/index.js";import{lineClampCss as l}from"../styles/index.js";const o=e.div`
     position: relative;
     width: 100%;
-    ${e=>{const i="small"===e.$variant?2.5:3;return t`
-            min-height: ${i}rem;
-            height: ${i}rem; // Need this to persist the height when expanding or collapsing list
+    ${e=>{const r="small"===e.$variant?2.5:3;return t`
+            min-height: ${r}rem;
+            height: ${r}rem; // Need this to persist the height when expanding or collapsing list
         `}}
 `,d=e.div`
     display: flex;
     flex: 1;
     word-break: break-all;
     ${e=>{if(e.$disabled)return t`
-                color: ${i["text-disabled"]};
+                color: ${r["text-disabled"]};
             `}}
 `,n=e.div`
-    ${e=>"small"===e.$variant?r["body-md-regular"]:r["body-baseline-regular"]}
+    ${e=>"small"===e.$variant?i["body-md-regular"]:i["body-baseline-regular"]}
+    color: ${r.text};
     text-align: left;
     ${e=>{if("middle"!==e.$truncateType)return t`
                     ${l(1)}
                 `}}
     overflow: hidden;
 `,s=e(n)`
-    color: ${i["text-subtler"]};
+    color: ${r["text-subtler"]};
 `;export{d as LabelContainer,s as PlaceholderLabel,n as ValueLabel,o as Wrapper};
 //# sourceMappingURL=dropdown-wrapper.styles.js.map

package/shared/dropdown-wrapper/dropdown-wrapper.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n $disabled?: boolean;\n $readOnly?: boolean;\n $error?: boolean;\n $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n $truncateType?: TruncateType;\n $variant?: DropdownVariantType \| undefined;\n}\n\nexport interface SelectorStyleProps {\n $variant?: DropdownVariantType \| undefined;\n}\n\nexport interface LabelContainerStyleProps {\n $disabled?: boolean \| undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType \| undefined) => {\n return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n position: relative;\n width: 100%;\n ${(props) => {\n const height = getHeight(props.$variant);\n return css`\n min-height: ${height}rem;\n height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n `;\n }}\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n display: flex;\n flex: 1;\n word-break: break-all;\n ${(props) => {\n if (props.$disabled) {\n return css`\n color: ${Colour[\"text-disabled\"]};\n `;\n }\n }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n ${(props) =>\n props.$variant === \"small\"\n ? Font[\"body-md-regular\"]\n : Font[\"body-baseline-regular\"]}\n text-align: left;\n ${(props) => {\n switch (props.$truncateType) {\n case \"middle\":\n break;\n case \"end\":\n default:\n return css`\n ${lineClampCss(1)}\n `;\n }\n }}\n overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Wrapper","styled","div","props","height","$variant","css","LabelContainer","$disabled","Colour","ValueLabel","Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"qJA+BA,MAIaA,EAAUC,EAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,CAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,CAAG;yBACGG,EAAO;aAExB;EAIKC,EAAaT,EAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAK,mBACLA,EAAK;;~~MAEZR~~,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,CAAG;sBACJO,EAAa;;;EAOtBC,EAAmBb,EAAOS,EAAW;aACrCD,EAAO;"}
1	+ {"version":3,"file":"dropdown-wrapper.styles.js","sources":["../../../src/shared/dropdown-wrapper/dropdown-wrapper.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colour, Font } from \"../../theme\";\nimport { DropdownVariantType, TruncateType } from \"../dropdown-list/types\";\nimport { lineClampCss } from \"../styles\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\nexport interface DropdownWrapperStyleProps {\n $disabled?: boolean;\n $readOnly?: boolean;\n $error?: boolean;\n $expanded?: boolean;\n}\n\nexport interface ValueLabelStyleProps {\n $truncateType?: TruncateType;\n $variant?: DropdownVariantType \| undefined;\n}\n\nexport interface SelectorStyleProps {\n $variant?: DropdownVariantType \| undefined;\n}\n\nexport interface LabelContainerStyleProps {\n $disabled?: boolean \| undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getHeight = (variant?: DropdownVariantType \| undefined) => {\n return variant === \"small\" ? 2.5 : 3;\n};\n\nexport const Wrapper = styled.div<SelectorStyleProps>`\n position: relative;\n width: 100%;\n ${(props) => {\n const height = getHeight(props.$variant);\n return css`\n min-height: ${height}rem;\n height: ${height}rem; // Need this to persist the height when expanding or collapsing list\n `;\n }}\n`;\n\nexport const LabelContainer = styled.div<LabelContainerStyleProps>`\n display: flex;\n flex: 1;\n word-break: break-all;\n ${(props) => {\n if (props.$disabled) {\n return css`\n color: ${Colour[\"text-disabled\"]};\n `;\n }\n }}\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n ${(props) =>\n props.$variant === \"small\"\n ? Font[\"body-md-regular\"]\n : Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n text-align: left;\n ${(props) => {\n switch (props.$truncateType) {\n case \"middle\":\n break;\n case \"end\":\n default:\n return css`\n ${lineClampCss(1)}\n `;\n }\n }}\n overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["Wrapper","styled","div","props","height","$variant","css","LabelContainer","$disabled","Colour","ValueLabel","Font","$truncateType","lineClampCss","PlaceholderLabel"],"mappings":"qJA+BA,MAIaA,EAAUC,EAAOC,GAAuB;;;MAG9CC,IACC,MAAMC,EAPS,UAOUD,EAAME,SAPN,IAAM,EAQ/B,OAAOC,CAAG;0BACQF;sBACJA;SACb;EAIIG,EAAiBN,EAAOC,GAA6B;;;;MAI3DC,IACC,GAAIA,EAAMK,UACN,OAAOF,CAAG;yBACGG,EAAO;aAExB;EAIKC,EAAaT,EAAOC,GAAyB;MACnDC,GACoB,UAAnBA,EAAME,SACAM,EAAK,mBACLA,EAAK;aACNF,EAAa;;MAEnBN,IACC,GACS,WADDA,EAAMS,cAKN,OAAON,CAAG;sBACJO,EAAa;;;EAOtBC,EAAmBb,EAAOS,EAAW;aACrCD,EAAO;"}

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n DayInput,\n DayInputSizer,\n Divider,\n InputContainer,\n InputSection,\n MonthInput,\n MonthInputSizer,\n Placeholder,\n YearInput,\n YearInputSizer,\n} from \"./standalone-date-input.style\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n \| StartInputNames[number]\n \| EndInputNames[number]\n \| \"none\";\n\ninterface Props {\n disabled?: boolean \| undefined;\n readOnly?: boolean \| undefined;\n hideInputKeyboard?: boolean \| undefined;\n names: StartInputNames \| EndInputNames;\n value: string \| undefined;\n hoverValue?: string \| undefined;\n focused: boolean;\n placeholder?: string \| undefined;\n label?: string \| undefined;\n inputLabels?: string[] \| undefined;\n onChange: (value: string) => void;\n onFocus?: ((event: React.FocusEvent) => void) \| undefined;\n onBlur?: ((valid: boolean) => void) \| undefined;\n}\n\nexport interface StandaloneDateInputRef {\n ref: React.RefObject<HTMLDivElement>;\n resetPlaceholder: () => void;\n resetInput: () => void;\n focusYearRef: () => void;\n}\n\nexport const Component = (\n {\n disabled,\n readOnly,\n names,\n value,\n focused,\n hoverValue,\n placeholder,\n label,\n onChange,\n onFocus,\n onBlur,\n hideInputKeyboard,\n inputLabels = [\"Date\", \"Month\", \"Year\"],\n }: Props,\n ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const dayInputRef = useRef<HTMLInputElement>(null);\n const monthInputRef = useRef<HTMLInputElement>(null);\n const yearInputRef = useRef<HTMLInputElement>(null);\n\n const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n parseToInputValues(hoverValue);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n\n // re-focus on day input if all 3 inputs get cleared while typing\n if (\n !day &&\n !month &&\n !year &&\n nodeRef.current &&\n nodeRef.current.contains(document.activeElement)\n )\n dayInputRef.current?.focus();\n }, [value]);\n\n useEffect(() => {\n // clear internal focus state\n if (!focused) {\n setCurrentFocus(\"none\");\n }\n\n // ensure at least one input is focused\n if (focused) {\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n }\n }, [focused]);\n\n useImperativeHandle(\n ref,\n () => ({\n ref: nodeRef,\n resetPlaceholder() {\n setHidePlaceholder(false);\n },\n resetInput() {\n const [day = \"\", month = \"\", year = \"\"] =\n parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n },\n focusYearRef() {\n yearInputRef.current?.focus();\n },\n }),\n [setDayValue, setMonthValue, setYearValue, value]\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSectionClick = () => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n };\n\n const handleSectionFocus = (event: React.FocusEvent) => {\n if (disabled) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (!focused) {\n onFocus?.(event);\n }\n };\n\n const handlePlaceholderClick = (event: React.MouseEvent) => {\n event.preventDefault();\n dayInputRef.current?.focus();\n };\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n const targetName = event.target.name as FieldType;\n setCurrentFocus(targetName);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const [dayName, monthName, yearName] = names;\n const date = {\n [dayName]: dayValueRef.current,\n [monthName]: monthValueRef.current,\n [yearName]: yearValueRef.current,\n };\n\n const targetName = event.target.name as FieldType;\n const targetValue = date[targetName];\n\n // pad single digits for day and month inputs\n\n const paddedValue =\n targetName !== yearName\n ? StringHelper.padValue(targetValue, true)\n : targetValue;\n\n switch (targetName) {\n case dayName:\n date[dayName] = paddedValue;\n setDayValue(paddedValue);\n break;\n case monthName:\n date[monthName] = paddedValue;\n setMonthValue(paddedValue);\n break;\n case yearName:\n default:\n break;\n }\n\n const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n const isPadded = targetValue !== paddedValue;\n\n if (isValid && isPadded) {\n onChange(value);\n }\n\n if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n // entire field was blurred\n setCurrentFocus(\"none\");\n onBlur?.(isEmpty \|\| isValid);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (hoverValue) {\n // do not modify inputs when selecting date from another source\n return;\n }\n\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n const date = {\n day: dayValue,\n month: monthValue,\n year: yearValue,\n };\n\n switch (targetName) {\n case names[0]:\n date.day = targetValue;\n setDayValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n monthInputRef.current?.focus();\n }\n break;\n case names[1]:\n date.month = targetValue;\n setMonthValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n yearInputRef.current?.focus();\n }\n break;\n case names[2]:\n date.year = targetValue;\n setYearValue(targetValue);\n break;\n default:\n break;\n }\n\n if (!date.day && !date.month && !date.year) {\n onChange(\"\");\n return;\n }\n\n const value = `${date.year}-${date.month}-${date.day}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n if (isValid) {\n onChange(value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /*\n Allow going to the field before if user presses Backspace\n * on an empty field\n */\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === names[1] && monthValue.length === 0) {\n dayInputRef.current?.focus();\n }\n\n if (currentFocus === names[2] && yearValue.length === 0) {\n monthInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n function parseToInputValues(stringVal: string \| undefined) {\n if (!stringVal) {\n return [undefined, undefined, undefined];\n } else {\n const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n if (!sanitized) {\n return [undefined, undefined, undefined];\n }\n\n const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n return [\n StringHelper.padValue(day.date().toString()),\n StringHelper.padValue((day.month() + 1).toString()),\n day.year().toString(),\n ];\n }\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderPlaceholder = () => {\n if (value \|\| readOnly \|\| !placeholder) {\n return;\n }\n\n return (\n <Placeholder\n $hide={hidePlaceholder}\n $disabled={disabled}\n onMouseDown={handlePlaceholderClick}\n >\n {placeholder}\n </Placeholder>\n );\n };\n\n return (\n <InputSection\n role=\"group\"\n aria-label={label}\n onClick={handleSectionClick}\n onFocus={handleSectionFocus}\n >\n <InputContainer ref={nodeRef} $hover={!!hoverValue}>\n <DayInputSizer>\n <DayInput\n ref={dayInputRef}\n name={names[0]}\n maxLength={2}\n value={hoverDayValue ?? dayValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[0]}-input`}\n aria-label={inputLabels[0]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n }\n />\n </DayInputSizer>\n <Divider $inactive={dayValue.length === 0}>/</Divider>\n <MonthInputSizer>\n <MonthInput\n ref={monthInputRef}\n name={names[1]}\n maxLength={2}\n value={hoverMonthValue ?? monthValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[1]}-input`}\n aria-label={inputLabels[1]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n }\n />\n </MonthInputSizer>\n <Divider $inactive={monthValue.length === 0}>/</Divider>\n <YearInputSizer>\n <YearInput\n ref={yearInputRef}\n name={names[2]}\n maxLength={4}\n value={hoverYearValue ?? yearValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{4}\"\n data-testid={`${names[2]}-input`}\n aria-label={inputLabels[2]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n }\n />\n </YearInputSizer>\n </InputContainer>\n {renderPlaceholder()}\n </InputSection>\n );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","InputSection","role","onClick","children","InputContainer","$hover","_jsx","DayInputSizer","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$inactive","MonthInputSizer","MonthInput","onKeyDown","YearInputSizer","YearInput","Placeholder","$hide","$disabled","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport {\n DayInput,\n DayInputSizer,\n Divider,\n InputContainer,\n InputSection,\n MonthInput,\n MonthInputSizer,\n Placeholder,\n YearInput,\n YearInputSizer,\n} from \"./standalone-date-input.style\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n \| StartInputNames[number]\n \| EndInputNames[number]\n \| \"none\";\n\ninterface Props {\n disabled?: boolean \| undefined;\n readOnly?: boolean \| undefined;\n hideInputKeyboard?: boolean \| undefined;\n names: StartInputNames \| EndInputNames;\n value: string \| undefined;\n hoverValue?: string \| undefined;\n focused: boolean;\n placeholder?: string \| undefined;\n label?: string \| undefined;\n inputLabels?: string[] \| undefined;\n onChange: (value: string) => void;\n onFocus?: ((event: React.FocusEvent) => void) \| undefined;\n onBlur?: ((valid: boolean) => void) \| undefined;\n}\n\nexport interface StandaloneDateInputRef {\n ref: React.RefObject<HTMLDivElement>;\n resetPlaceholder: () => void;\n resetInput: () => void;\n focusYearRef: () => void;\n}\n\nexport const Component = (\n {\n disabled,\n readOnly,\n names,\n value,\n focused,\n hoverValue,\n placeholder,\n label,\n onChange,\n onFocus,\n onBlur,\n hideInputKeyboard,\n inputLabels = [\"Date\", \"Month\", \"Year\"],\n }: Props,\n ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const dayInputRef = useRef<HTMLInputElement>(null);\n const monthInputRef = useRef<HTMLInputElement>(null);\n const yearInputRef = useRef<HTMLInputElement>(null);\n\n const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n parseToInputValues(hoverValue);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n\n // re-focus on day input if all 3 inputs get cleared while typing\n if (\n !day &&\n !month &&\n !year &&\n nodeRef.current &&\n nodeRef.current.contains(document.activeElement)\n )\n dayInputRef.current?.focus();\n }, [value]);\n\n useEffect(() => {\n // clear internal focus state\n if (!focused) {\n setCurrentFocus(\"none\");\n }\n\n // ensure at least one input is focused\n if (focused) {\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n }\n }, [focused]);\n\n useImperativeHandle(\n ref,\n () => ({\n ref: nodeRef,\n resetPlaceholder() {\n setHidePlaceholder(false);\n },\n resetInput() {\n const [day = \"\", month = \"\", year = \"\"] =\n parseToInputValues(value);\n setDayValue(day);\n setMonthValue(month);\n setYearValue(year);\n },\n focusYearRef() {\n yearInputRef.current?.focus();\n },\n }),\n [setDayValue, setMonthValue, setYearValue, value]\n );\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSectionClick = () => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (\n nodeRef.current &&\n !nodeRef.current.contains(document.activeElement)\n ) {\n dayInputRef.current?.focus();\n }\n };\n\n const handleSectionFocus = (event: React.FocusEvent) => {\n if (disabled) {\n return;\n }\n\n setHidePlaceholder(true);\n\n if (!focused) {\n onFocus?.(event);\n }\n };\n\n const handlePlaceholderClick = (event: React.MouseEvent) => {\n event.preventDefault();\n dayInputRef.current?.focus();\n };\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n event.target.select();\n const targetName = event.target.name as FieldType;\n setCurrentFocus(targetName);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const [dayName, monthName, yearName] = names;\n const date = {\n [dayName]: dayValueRef.current,\n [monthName]: monthValueRef.current,\n [yearName]: yearValueRef.current,\n };\n\n const targetName = event.target.name as FieldType;\n const targetValue = date[targetName];\n\n // pad single digits for day and month inputs\n\n const paddedValue =\n targetName !== yearName\n ? StringHelper.padValue(targetValue, true)\n : targetValue;\n\n switch (targetName) {\n case dayName:\n date[dayName] = paddedValue;\n setDayValue(paddedValue);\n break;\n case monthName:\n date[monthName] = paddedValue;\n setMonthValue(paddedValue);\n break;\n case yearName:\n default:\n break;\n }\n\n const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n const isPadded = targetValue !== paddedValue;\n\n if (isValid && isPadded) {\n onChange(value);\n }\n\n if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n // entire field was blurred\n setCurrentFocus(\"none\");\n onBlur?.(isEmpty \|\| isValid);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (hoverValue) {\n // do not modify inputs when selecting date from another source\n return;\n }\n\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n const date = {\n day: dayValue,\n month: monthValue,\n year: yearValue,\n };\n\n switch (targetName) {\n case names[0]:\n date.day = targetValue;\n setDayValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n monthInputRef.current?.focus();\n }\n break;\n case names[1]:\n date.month = targetValue;\n setMonthValue(targetValue);\n // auto focus the next input once filled in\n if (targetValue.length === 2) {\n yearInputRef.current?.focus();\n }\n break;\n case names[2]:\n date.year = targetValue;\n setYearValue(targetValue);\n break;\n default:\n break;\n }\n\n if (!date.day && !date.month && !date.year) {\n onChange(\"\");\n return;\n }\n\n const value = `${date.year}-${date.month}-${date.day}`;\n const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n if (isValid) {\n onChange(value);\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /*\n Allow going to the field before if user presses Backspace\n * on an empty field\n */\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === names[1] && monthValue.length === 0) {\n dayInputRef.current?.focus();\n }\n\n if (currentFocus === names[2] && yearValue.length === 0) {\n monthInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n function parseToInputValues(stringVal: string \| undefined) {\n if (!stringVal) {\n return [undefined, undefined, undefined];\n } else {\n const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n if (!sanitized) {\n return [undefined, undefined, undefined];\n }\n\n const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n return [\n StringHelper.padValue(day.date().toString()),\n StringHelper.padValue((day.month() + 1).toString()),\n day.year().toString(),\n ];\n }\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderPlaceholder = () => {\n if (value \|\| readOnly \|\| !placeholder) {\n return;\n }\n\n return (\n <Placeholder\n $hide={hidePlaceholder}\n $disabled={disabled}\n onMouseDown={handlePlaceholderClick}\n >\n {placeholder}\n </Placeholder>\n );\n };\n\n return (\n <InputSection\n role=\"group\"\n aria-label={label}\n onClick={handleSectionClick}\n onFocus={handleSectionFocus}\n >\n <InputContainer ref={nodeRef} $hover={!!hoverValue}>\n <DayInputSizer>\n <DayInput\n ref={dayInputRef}\n name={names[0]}\n maxLength={2}\n value={hoverDayValue ?? dayValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[0]}-input`}\n aria-label={inputLabels[0]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n }\n />\n </DayInputSizer>\n <Divider $inactive={dayValue.length === 0} $disabled={disabled}>\n /\n </Divider>\n <MonthInputSizer>\n <MonthInput\n ref={monthInputRef}\n name={names[1]}\n maxLength={2}\n value={hoverMonthValue ?? monthValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{2}\"\n data-testid={`${names[1]}-input`}\n aria-label={inputLabels[1]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n }\n />\n </MonthInputSizer>\n <Divider\n $inactive={monthValue.length === 0}\n $disabled={disabled}\n >\n /\n </Divider>\n <YearInputSizer>\n <YearInput\n ref={yearInputRef}\n name={names[2]}\n maxLength={4}\n value={hoverYearValue ?? yearValue}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n type=\"text\"\n inputMode={inputMode}\n pattern=\"[0-9]{4}\"\n data-testid={`${names[2]}-input`}\n aria-label={inputLabels[2]}\n disabled={disabled}\n readOnly={readOnly}\n tabIndex={readOnly ? -1 : 0}\n autoComplete=\"off\"\n placeholder={\n currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n }\n />\n </YearInputSizer>\n </InputContainer>\n {renderPlaceholder()}\n </InputSection>\n );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","InputSection","role","onClick","children","InputContainer","$hover","_jsx","DayInputSizer","DayInput","maxLength","type","pattern","tabIndex","autoComplete","Divider","$disabled","MonthInputSizer","MonthInput","onKeyDown","$inactive","YearInputSizer","YearInput","Placeholder","$hide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}

package/shared/standalone-date-input/standalone-date-input.style.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ interface PlaceholderStyleProps {
 }
 interface DividerStyleProps {
     $inactive?: boolean;
+    $disabled?: boolean | undefined;
 }
 interface InputContainerStyleProps {
     $hover?: boolean;
@@ -124,6 +125,6 @@ export declare const YearInput: import("styled-components/dist/types").IStyledCo
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, never>>> & string;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$inactive"> & DividerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$inactive"> & DividerStyleProps, never>>> & string;
+export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DividerStyleProps> & DividerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof DividerStyleProps> & DividerStyleProps, never>>> & string;
 export declare const Placeholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof PlaceholderStyleProps> & PlaceholderStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof PlaceholderStyleProps> & PlaceholderStyleProps, never>>> & string;
 export {};