@lifesg/react-design-system 3.4.0-canary.4 → 3.4.0-canary.6

package/filter/filter-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.js","sources":["../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n} from \"./filter-sidebar.styles\";\nimport { FilterSidebarProps } from \"./types\";\nimport { FilterBody } from \"./filter.styles\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    children,\n    headerTitle: _headerTitle,\n    ...otherProps\n}: FilterSidebarProps) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const labels = {\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    return (\n        <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n            <DesktopContainer\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                {...otherProps}\n            >\n                <FilterHeader>\n                    <FilterTitle>{labels.title}</FilterTitle>\n                    <FilterClearButton\n                        styleType=\"link\"\n                        type=\"button\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </FilterClearButton>\n                </FilterHeader>\n                <FilterBody>{children}</FilterBody>\n            </DesktopContainer>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitle","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"4VAWO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,SAC3BA,EACAC,YAAaC,GAAYN,EACtBO,EAAUC,EAAAR,EANa,2EAQ1B,MAAMS,EAAUC,EAAuB,MAEjCC,EAAS,CACXC,OAAOX,aAAY,EAAZA,EAAcI,cAAeC,GAAgB,UACpDO,OAAOZ,eAAAA,EAAca,mBAAoB,SAG7C,OACIC,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASL,SACjEiB,EAACC,EAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,EAAU,CAAAH,SAAA,CAEdiB,EAACK,EAAY,CAAAtB,SAAA,CACTW,EAACY,EAAW,CAAAvB,SAAEO,EAAOC,QACrBG,EAACa,EAAiB,CACdC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAM7B,eAAAA,IACf8B,SAAU7B,EAAmB,aACjB,SAASQ,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAACkB,EAAU,CAAA7B,SAAEA,SAEI,EAIjCL,EAAcmC,YAAc"}
+{"version":3,"file":"filter-sidebar.js","sources":["../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FilterTitleGroup,\n} from \"./filter-sidebar.styles\";\nimport { FilterSidebarProps } from \"./types\";\nimport { FilterBody } from \"./filter.styles\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    count,\n    children,\n    headerTitle: _headerTitle,\n    ...otherProps\n}: FilterSidebarProps) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const labels = {\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    return (\n        <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n            <DesktopContainer\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                {...otherProps}\n            >\n                <FilterHeader>\n                    <FilterTitleGroup>\n                        <FilterTitle>{labels.title}</FilterTitle>\n                        <FilterBadge count={count} />\n                    </FilterTitleGroup>\n                    <FilterClearButton\n                        styleType=\"link\"\n                        type=\"button\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </FilterClearButton>\n                </FilterHeader>\n                <FilterBody>{children}</FilterBody>\n            </DesktopContainer>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","count","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitleGroup","FilterTitle","FilterBadge","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"kaAaO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,MAC3BA,EAAKC,SACLA,EACAC,YAAaC,GAAYP,EACtBQ,EAAUC,EAAAT,EAPa,mFAS1B,MAAMU,EAAUC,EAAuB,MAEjCC,EAAS,CACXC,OAAOZ,aAAY,EAAZA,EAAcK,cAAeC,GAAgB,UACpDO,OAAOb,eAAAA,EAAcc,mBAAoB,SAG7C,OACIC,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,YACxDY,EAACC,EAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,aAEJc,EAACK,EAAY,CAAAtB,SAAA,CACTiB,EAACM,EAAgB,CAAAvB,SAAA,CACbW,EAACa,EAAW,CAAAxB,SAAEO,EAAOC,QACrBG,EAACc,EAAW,CAAC1B,MAAOA,OAExBY,EAACe,GACGC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAMhC,aAAO,EAAPA,IACfiC,SAAUhC,EAAmB,aACjB,SAASS,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAACoB,EAAU,CAAA/B,SAAEA,SAEI,EAIjCN,EAAcsC,YAAc"}

package/filter/filter-sidebar.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const DesktopContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const FilterTitleGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FilterTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const FilterClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;

package/filter/filter-sidebar.styles.js

@@ -1,23 +1,28 @@
-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 n,Border as r,Radius as t,Spacing as e,Font as d}from"../theme/index.js";const a=i.div`
+    background-color: ${n.bg};
+    border: ${r["width-010"]} ${r.solid} ${n.border};
+    border-radius: ${t.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: ${n.bg};
+`,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: ${e["spacing-8"]};
+    margin: ${e["spacing-24"]} 0 ${e["spacing-24"]}
+        ${e["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: ${e["spacing-20"]};
+    padding-left: ${e["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

@@ -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;;"}
+{"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 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;EAGtBI,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

@@ -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/types.d.ts

@@ -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

@@ -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

@@ -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"}
+{"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/fullscreen-image-carousel/fullscreen-image-carousel.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as n}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as l,MagnifierPlusIcon as o,MagnifierMinusIcon as a,CrossIcon as d}from"@lifesg/react-icons";import{BinIcon as s}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as h}from"@react-aria/live-announcer";import{forwardRef as u,useState as m,useRef as v,useMemo as f,useCallback as g,useImperativeHandle as p,useEffect as b}from"react";import{TransformWrapper as $,TransformComponent as I}from"react-zoom-pan-pinch";import{ModalV2 as j}from"../modal-v2/index.js";import"../external/lodash/_root.js";import"../external/lodash/_baseGetTag.js";import{useStateCallback as C}from"../shared/hooks/use-state-callback.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as w}from"../util/use-event-listener.js";import{CarouselModalContent as T,ImageGalleryContainer as k,ImageGalleryWrapper as x,ImageGallerySwipe as y,ArrowButton as L,BoxChip as S,Chip as N,TopActionButtons as D,MagnifierButton as M,DeleteButton as z,CloseButton as A,ImageGallerySlides as R,ImageGallerySlide as Z,FocusableImageRegion as _,SlidePlaceholderImage as O,SlideImage as W,ThumbnailContainer as X,ThumbnailWrapper as E,ThumbnailItemContainer as F,ThumbnailItem as P,ThumbnailImage as V,FileInfoTextWrapper as B,FileInfoFileName as G,FileInfoFileSize as H}from"./fullscreen-image-carousel.style.js";const q=e=>!!e&&"custom"===e.type,J=(u,J)=>{var K,{items:Q,initialActiveItemIndex:U,hideThumbnail:Y=!1,hideNavigation:ee=!1,hideCounter:ie=!1,hideMagnifier:te=!1,onDelete:ne,onClose:re,insets:le,show:oe}=u,ae=e(u,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[de,se]=C(null!=U?U:0),[ce,he]=m({}),[ue,me]=m(1),[ve,fe]=m(),[ge,pe]=m(),be=v(null),$e=v([]),Ie=v([]),je=v(null),Ce=ve&&ge?ve-ge:0,we=Q[de],Te=Q.some((e=>{var i;return q(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),ke=Te?"item":"image",xe=f((()=>Q.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[Q]),ye=g((e=>{var i,t;const n=Q[e],r=Te?"Item":"Image",l=q(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",o=`${r} ${e+1} of ${Q.length}.`;return l?`${l}. ${o}`:o}),[Q,Te]);p(J,(()=>({currentItemIndex:de,setCurrentItem:ze,goToPrevItem:De,goToNextItem:Me}))),w("keydown",(function(e){"ArrowRight"===e.key?Me():"ArrowLeft"===e.key?De():"Escape"===e.key&&(null==re||re())}),"document"),b((()=>{var e;oe&&(null===(e=je.current)||void 0===e||e.focus())}),[oe]),b((()=>{0!==Q.length?de>Q.length-1&&se(Q.length-1):se(0)}),[de,Q.length,se]),b((()=>{var e,i;null===(i=null===(e=$e.current)||void 0===e?void 0:e[de])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),me(1)}),[de]);const Le=e=>{me(e.state.scale)};const Se=({src:e,height:i,width:t})=>{he((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},Ne=()=>{if(!we||q(we))return;const e=ce[we.src];if(be.current&&e){const{clientHeight:i,clientWidth:t}=be.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},De=()=>{var e,i;null===(i=null===(e=Ie.current)||void 0===e?void 0:e[de])||void 0===i||i.resetTransform(),se((e=>0===e?Q.length-1:e-1),(e=>{c("polite"),h(ye(e),"polite")}))},Me=()=>{var e,i;null===(i=null===(e=Ie.current)||void 0===e?void 0:e[de])||void 0===i||i.resetTransform(),se((e=>e===Q.length-1?0:e+1),(e=>{c("polite"),h(ye(e),"polite")}))},ze=e=>{var i,t;null===(t=null===(i=Ie.current)||void 0===i?void 0:i[de])||void 0===t||t.resetTransform(),se(e)};return i(j,Object.assign({},ae,{"data-testid":"image-carousel-modal","aria-label":Te?"Carousel":"Image carousel",show:oe,disableInitialFocus:!0,children:t(T,{children:[t(k,{children:[t(x,{children:[i(y,{ref:be,onTouchStart:e=>{ue<=1&&fe(e.touches[0].clientX)},onTouchMove:e=>{!ve||ue>1||pe(e.touches[0].clientX)},onTouchEnd:()=>{be.current&&(Math.abs(Ce)>be.current.offsetWidth/3&&(Ce>0?Me():De()),fe(void 0),pe(void 0))},children:i(R,{style:{transform:`translateX(calc(${100*-de}% - ${Ce}px))`},children:Q.map(((e,t)=>{const n=t===de,r=Math.abs(t-de)<=1||0===de&&t===Q.length-1||de===Q.length-1&&0===t;return i(Z,{"data-testid":"slide-item",children:i(_,{ref:n?je:null,tabIndex:n?0:-1,children:q(e)?r?e.renderContent():i(O,{}):i($,{ref:e=>Ie.current[t]=e,panning:{disabled:ue<=1},initialScale:1,onZoom:Le,onZoomStop:Le,onWheel:Le,children:i(I,{children:i(W,{src:e.src,alt:ye(t),placeholder:i(O,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Se})})})})},t)}))})}),!ee&&t(n,{children:[i(L,{"aria-label":`Previous ${ke}`,"data-testid":"prev-btn",$position:"left",onClick:De,$insetLeft:null==le?void 0:le.left,$insetRight:null==le?void 0:le.right,children:i(r,{"aria-hidden":!0})}),i(L,{"aria-label":`Next ${ke}`,"data-testid":"forward-btn",$position:"right",onClick:Me,$insetLeft:null==le?void 0:le.left,$insetRight:null==le?void 0:le.right,children:i(l,{"aria-hidden":!0})})]}),!ie&&i(S,{"aria-hidden":"true",children:i(N,{weight:"semibold",children:`${de+1}/${Q.length}`})})]}),!Y&&i(X,{$insetBottom:null==le?void 0:le.bottom,"aria-hidden":"true",children:i(E,{children:Q.map(((e,t)=>{var n;const r=q(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i(F,{children:i(P,{"data-testid":"thumbnail-item",$active:t===de,onClick:()=>ze(t),ref:e=>$e.current[t]=e,children:r?i(V,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(O,{})})},t)}))})})]}),t(D,{$hasFileInfo:xe,$insetTop:null==le?void 0:le.top,$insetLeft:null==le?void 0:le.left,$insetRight:null==le?void 0:le.right,children:[xe&&(()=>{const{fileName:e,fileSize:n}=null!=we?we:{},r=null==e?void 0:e.trim(),l=null==n?void 0:n.trim();return t(B,{$centerContent:!l,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i(G,{weight:"semibold","data-testid":"file-info-name",children:r}),l&&i(H,{"data-testid":"file-info-size",children:l})]})})(),!te&&!q(we)&&i(M,{"aria-label":1===ue?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,n;if(1===ue){const t=Ne();null===(i=null===(e=Ie.current)||void 0===e?void 0:e[de])||void 0===i||i.centerView(t),me(null!=t?t:1)}else me(1),null===(n=null===(t=Ie.current)||void 0===t?void 0:t[de])||void 0===n||n.resetTransform()},children:i(1===ue?o:a,{"aria-hidden":!0})}),ne&&i(z,{"aria-label":`Delete ${q(we)&&(null===(K=we.itemLabel)||void 0===K?void 0:K.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{we&&ne&&ne(we,de)},children:i(s,{"aria-hidden":!0})}),i(A,{"aria-label":Te?"Close carousel":"Close image carousel",onClick:re,children:i(d,{"aria-hidden":!0})})]})]})}))},K=u(J);export{J as Component,K as FullscreenImageCarousel};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as n}from"react/jsx-runtime";import{ChevronLeftIcon as l,ChevronRightIcon as r,MagnifierPlusIcon as o,MagnifierMinusIcon as a,CrossIcon as d}from"@lifesg/react-icons";import{BinIcon as s}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as u}from"@react-aria/live-announcer";import{forwardRef as h,useState as m,useRef as v,useMemo as f,useCallback as g,useImperativeHandle as p,useEffect as b}from"react";import{TransformWrapper as $,TransformComponent as I}from"react-zoom-pan-pinch";import{ModalV2 as C}from"../modal-v2/index.js";import{useStateCallback as w}from"../shared/hooks/use-state-callback.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import{useEventListener as j}from"../util/use-event-listener.js";import{CarouselModalContent as T,ImageGalleryContainer as k,ImageGalleryWrapper as x,ImageGallerySwipe as y,ArrowButton as L,BoxChip as S,Chip as N,TopActionButtons as D,MagnifierButton as M,DeleteButton as z,CloseButton as A,ImageGallerySlides as R,ImageGallerySlide as Z,FocusableImageRegion as O,SlidePlaceholderImage as W,SlideImage as X,ThumbnailContainer as E,ThumbnailWrapper as F,ThumbnailItemContainer as P,ThumbnailItem as V,ThumbnailImage as _,FileInfoTextWrapper as B,FileInfoFileName as H,FileInfoFileSize as q}from"./fullscreen-image-carousel.style.js";const G=e=>!!e&&"custom"===e.type,J=(h,J)=>{var K,{items:Q,initialActiveItemIndex:U,hideThumbnail:Y=!1,hideNavigation:ee=!1,hideCounter:ie=!1,hideMagnifier:te=!1,onDelete:ne,onClose:le,insets:re,show:oe}=h,ae=e(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[de,se]=w(null!=U?U:0),[ce,ue]=m({}),[he,me]=m(1),[ve,fe]=m(),[ge,pe]=m(),be=v(null),$e=v([]),Ie=v([]),Ce=v(null),we=ve&&ge?ve-ge:0,je=Q[de],Te=Q.some((e=>{var i;return G(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),ke=Te?"item":"image",xe=f((()=>Q.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[Q]),ye=g((e=>{var i,t;const n=Q[e],l=Te?"Item":"Image",r=G(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",o=`${l} ${e+1} of ${Q.length}.`;return r?`${r}. ${o}`:o}),[Q,Te]);p(J,(()=>({currentItemIndex:de,setCurrentItem:ze,goToPrevItem:De,goToNextItem:Me}))),j("keydown",(function(e){"ArrowRight"===e.key?Me():"ArrowLeft"===e.key?De():"Escape"===e.key&&(null==le||le())}),"document"),b((()=>{var e;oe&&(null===(e=Ce.current)||void 0===e||e.focus())}),[oe]),b((()=>{0!==Q.length?de>Q.length-1&&se(Q.length-1):se(0)}),[de,Q.length,se]),b((()=>{var e,i;null===(i=null===(e=$e.current)||void 0===e?void 0:e[de])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),me(1)}),[de]);const Le=e=>{me(e.state.scale)};const Se=({src:e,height:i,width:t})=>{ue((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},Ne=()=>{if(!je||G(je))return;const e=ce[je.src];if(be.current&&e){const{clientHeight:i,clientWidth:t}=be.current,{width:n,height:l}=e,r=l/n<i/t;return n<t&&l<i?r?t/n:i/l:r?i/(l/(n/t)):t/(n/(l/i))}},De=()=>{var e,i;null===(i=null===(e=Ie.current)||void 0===e?void 0:e[de])||void 0===i||i.resetTransform(),se((e=>0===e?Q.length-1:e-1),(e=>{c("polite"),u(ye(e),"polite")}))},Me=()=>{var e,i;null===(i=null===(e=Ie.current)||void 0===e?void 0:e[de])||void 0===i||i.resetTransform(),se((e=>e===Q.length-1?0:e+1),(e=>{c("polite"),u(ye(e),"polite")}))},ze=e=>{var i,t;null===(t=null===(i=Ie.current)||void 0===i?void 0:i[de])||void 0===t||t.resetTransform(),se(e)};return i(C,Object.assign({},ae,{"data-testid":"image-carousel-modal","aria-label":Te?"Carousel":"Image carousel",show:oe,disableInitialFocus:!0,children:t(T,{children:[t(k,{children:[t(x,{children:[i(y,{ref:be,onTouchStart:e=>{he<=1&&fe(e.touches[0].clientX)},onTouchMove:e=>{!ve||he>1||pe(e.touches[0].clientX)},onTouchEnd:()=>{be.current&&(Math.abs(we)>be.current.offsetWidth/3&&(we>0?Me():De()),fe(void 0),pe(void 0))},children:i(R,{style:{transform:`translateX(calc(${100*-de}% - ${we}px))`},children:Q.map(((e,t)=>{const n=t===de,l=Math.abs(t-de)<=1||0===de&&t===Q.length-1||de===Q.length-1&&0===t;return i(Z,{"data-testid":"slide-item",children:i(O,{ref:n?Ce:null,tabIndex:n?0:-1,children:G(e)?l?e.renderContent():i(W,{}):i($,{ref:e=>Ie.current[t]=e,panning:{disabled:he<=1},initialScale:1,onZoom:Le,onZoomStop:Le,onWheel:Le,children:i(I,{children:i(X,{src:e.src,alt:ye(t),placeholder:i(W,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Se})})})})},t)}))})}),!ee&&t(n,{children:[i(L,{"aria-label":`Previous ${ke}`,"data-testid":"prev-btn",$position:"left",onClick:De,$insetLeft:null==re?void 0:re.left,$insetRight:null==re?void 0:re.right,children:i(l,{"aria-hidden":!0})}),i(L,{"aria-label":`Next ${ke}`,"data-testid":"forward-btn",$position:"right",onClick:Me,$insetLeft:null==re?void 0:re.left,$insetRight:null==re?void 0:re.right,children:i(r,{"aria-hidden":!0})})]}),!ie&&i(S,{"aria-hidden":"true",children:i(N,{weight:"semibold",children:`${de+1}/${Q.length}`})})]}),!Y&&i(E,{$insetBottom:null==re?void 0:re.bottom,"aria-hidden":"true",children:i(F,{children:Q.map(((e,t)=>{var n;const l=G(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i(P,{children:i(V,{"data-testid":"thumbnail-item",$active:t===de,onClick:()=>ze(t),ref:e=>$e.current[t]=e,children:l?i(_,{src:l,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(W,{})})},t)}))})})]}),t(D,{$hasFileInfo:xe,$insetTop:null==re?void 0:re.top,$insetLeft:null==re?void 0:re.left,$insetRight:null==re?void 0:re.right,children:[xe&&(()=>{const{fileName:e,fileSize:n}=null!=je?je:{},l=null==e?void 0:e.trim(),r=null==n?void 0:n.trim();return t(B,{$centerContent:!r,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[l&&i(H,{weight:"semibold","data-testid":"file-info-name",children:l}),r&&i(q,{"data-testid":"file-info-size",children:r})]})})(),!te&&!G(je)&&i(M,{"aria-label":1===he?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,n;if(1===he){const t=Ne();null===(i=null===(e=Ie.current)||void 0===e?void 0:e[de])||void 0===i||i.centerView(t),me(null!=t?t:1)}else me(1),null===(n=null===(t=Ie.current)||void 0===t?void 0:t[de])||void 0===n||n.resetTransform()},children:i(1===he?o:a,{"aria-hidden":!0})}),ne&&i(z,{"aria-label":`Delete ${G(je)&&(null===(K=je.itemLabel)||void 0===K?void 0:K.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{je&&ne&&ne(je,de)},children:i(s,{"aria-hidden":!0})}),i(A,{"aria-label":Te?"Close carousel":"Close image carousel",onClick:le,children:i(d,{"aria-hidden":!0})})]})]})}))},K=h(J);export{J as Component,K as FullscreenImageCarousel};
 //# sourceMappingURL=fullscreen-image-carousel.js.map

package/fullscreen-image-carousel/fullscreen-image-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                <TopActionButtons\n                    $hasFileInfo={hasFileInfo}\n                    $insetTop={insets?.top}\n                    $insetLeft={insets?.left}\n                    $insetRight={insets?.right}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <MagnifierButton\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </MagnifierButton>\n                    )}\n\n                    {onDelete && (\n                        <DeleteButton\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </DeleteButton>\n                    )}\n\n                    <CloseButton\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </CloseButton>\n                </TopActionButtons>\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","children","_jsxs","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","$insetTop","top","trimmedName","trimmedSize","FileInfoTextWrapper","FileInfoFileName","FileInfoFileSize","renderFileInfo","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                <TopActionButtons\n                    $hasFileInfo={hasFileInfo}\n                    $insetTop={insets?.top}\n                    $insetLeft={insets?.left}\n                    $insetRight={insets?.right}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <MagnifierButton\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </MagnifierButton>\n                    )}\n\n                    {onDelete && (\n                        <DeleteButton\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </DeleteButton>\n                    )}\n\n                    <CloseButton\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </CloseButton>\n                </TopActionButtons>\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","children","_jsxs","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","$insetTop","top","trimmedName","trimmedSize","FileInfoTextWrapper","FileInfoFileName","FileInfoFileSize","renderFileInfo","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

package/index.js

@@ -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/modal/modal.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import r,{useRef as t,useEffect as i}from"react";import{Overlay as l}from"../overlay/overlay.js";import{useViewport as a}from"../shared/hooks/useViewport.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as n}from"../util/use-event.js";import{Container as m}from"./modal.styles.js";const s=s=>{var{id:d="modal",show:c,animationFrom:p="bottom",children:v,enableOverlayClick:h=!0,rootComponentId:u,zIndex:f,onOverlayClick:j,dismissKeyboardOnShow:y=!0}=s,b=e(s,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow"]);const{verticalHeight:O,offsetTop:C}=a(),k=t(null),w=v&&r.cloneElement(v,{ref:k}),I=n((()=>{var e,o;y&&(null===(o=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===o||o.call(e))}));return i((()=>{c&&I()}),[c,I]),o(l,{"data-testid":`${d}-overlay`,show:c,enableOverlayClick:h,onOverlayClick:j,id:d,rootId:u,containerRef:k,zIndex:f,children:o(m,Object.assign({$show:c,$animationFrom:p,"data-testid":d,$verticalHeight:O,$offsetTop:C},b,{children:w}))})};export{s as Modal};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import o,{useRef as t}from"react";import{Overlay as i}from"../overlay/overlay.js";import{useViewport as l}from"../shared/hooks/useViewport.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as a}from"../util/use-event.js";import{Container as n}from"./modal.styles.js";const m=m=>{var{id:s="modal",show:d,animationFrom:c="bottom",children:p,enableOverlayClick:v=!0,rootComponentId:h,zIndex:u,onOverlayClick:y,dismissKeyboardOnShow:j=!0}=m,b=e(m,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow"]);const f=a((()=>{var e,r;j&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:O,ready:C}=l({enabled:d,onBeforeStart:f}),k=t(null),w=p&&o.cloneElement(p,{ref:k});return r(i,{"data-testid":`${s}-overlay`,show:d,enableOverlayClick:v,onOverlayClick:y,id:s,rootId:h,containerRef:k,zIndex:u,children:r(n,Object.assign({$show:d,$ready:C,$animationFrom:c,"data-testid":s,$verticalHeight:O},b,{children:w}))})};export{m as Modal};
 //# sourceMappingURL=modal.js.map

package/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { Container } from \"./modal.styles\";\nimport { ModalProps } from \"./types\";\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={show}\n                $animationFrom={animationFrom}\n                data-testid={id}\n                $verticalHeight={verticalHeight}\n                $offsetTop={offsetTop}\n                {...otherProps}\n            >\n                {childWithRef}\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","childWithRef","React","cloneElement","ref","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$show","$animationFrom","$verticalHeight","$offsetTop"],"mappings":"qiBAOO,MAAMA,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,GAAIT,EACzBU,EAAUC,EAAAX,EAVK,mIAelB,MAAMY,eAAEA,EAAcC,UAAEA,GAAcC,IAChCC,EAAWC,EAAuB,MAClCC,EACFb,GAAYc,EAAMC,aAAaf,EAAU,CAAEgB,IAAKL,IAK9CM,EAAkBC,GAAS,aACzBb,YACAc,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAzB,OAAA,EAAAA,EAAE0B,6BAC7C,IAYJ,OATAC,GAAU,KACFzB,GACAmB,GACJ,GACD,CAACnB,EAAMmB,IAMNO,EAACC,EAAO,CAAA,cACS,GAAG5B,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJ6B,OAAQxB,EACRyB,aAAchB,EACdR,OAAQA,EAAMH,SAEdwB,EAACI,EAASC,OAAAC,OAAA,CAAAC,MACCjC,EAAIkC,eACKjC,gBACHF,EAAEoC,gBACEzB,EAAc0B,WACnBzB,GACRH,EAAU,CAAAN,SAEba,MAEC"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useEvent } from \"../util\";\nimport { Container } from \"./modal.styles\";\nimport { ModalProps } from \"./types\";\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight, ready } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <Container\n                $show={show}\n                $ready={ready}\n                $animationFrom={animationFrom}\n                data-testid={id}\n                $verticalHeight={verticalHeight}\n                {...otherProps}\n            >\n                {childWithRef}\n            </Container>\n        </Overlay>\n    );\n};\n"],"names":["Modal","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","ready","useViewport","enabled","onBeforeStart","childRef","useRef","childWithRef","React","cloneElement","ref","_jsx","Overlay","rootId","containerRef","Container","Object","assign","$show","$ready","$verticalHeight"],"mappings":"shBAOO,MAAMA,EAASC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,GAAIT,EACzBU,EAAUC,EAAAX,EAVK,mIAelB,MAAMY,EAAkBC,GAAS,aACzBJ,YACAK,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAhB,OAAA,EAAAA,EAAEiB,6BAC7C,KAEEC,eAAEA,EAAcC,MAAEA,GAAUC,EAAY,CAC1CC,QAASnB,EACToB,cAAeV,IAEbW,EAAWC,EAAuB,MAClCC,EACFrB,GAAYsB,EAAMC,aAAavB,EAAU,CAAEwB,IAAKL,IAKpD,OACIM,EAACC,EAAO,CAAA,cACS,GAAG7B,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJ8B,OAAQzB,EACR0B,aAAcT,EACdhB,OAAQA,EAAMH,SAEdyB,EAACI,EAASC,OAAAC,OAAA,CAAAC,MACClC,EAAImC,OACHlB,iBACQhB,EAAa,cAChBF,EAAEqC,gBACEpB,GACbR,EAAU,CAAAN,SAEbqB,MAEC"}

package/modal/modal.styles.d.ts

@@ -1,9 +1,9 @@
 import { ModalAnimationDirection } from "../modal-v2/types";
 interface Props {
     $show: boolean;
+    $ready?: boolean;
     $animationFrom?: ModalAnimationDirection;
     $verticalHeight?: number;
-    $offsetTop?: number;
 }
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof Props> & Props, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof Props> & Props, never>>> & string;
 export {};

package/modal/modal.styles.js

@@ -1,4 +1,4 @@
-import t from"styled-components";import{MediaQuery as i}from"../theme/index.js";const e=t.div`
+import t from"styled-components";import{MediaQuery as i}from"../theme/index.js";const n=t.div`
     position: relative;
     display: flex;
     justify-content: center;
@@ -6,14 +6,13 @@ import t from"styled-components";import{MediaQuery as i}from"../theme/index.js";
     height: 100%;
     width: 100%;
     overflow: hidden;
-    ${t=>{return i=t.$show,e=t.$animationFrom||"bottom",i?`\n\t\t\t${e}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${e}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var i,e}}
+
+    ${t=>{return i=t.$show,n=t.$animationFrom||"bottom",e=t.$ready,i&&!e?`\n\t\t\t${n}: -3%;\n\t\t\topacity: 0;\n\t\t\ttransition: none;\n\t\t`:i?`\n\t\t\t${n}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${n}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var i,n,e}}
 
     ${i.MaxWidth.sm} {
         height: calc(
             ${t=>t.$verticalHeight?`${t.$verticalHeight}px`:"1vh"} * 100
         );
-
-        top: ${t=>t.$offsetTop||0}px;
     }
-`;export{e as Container};
+`;export{n as Container};
 //# sourceMappingURL=modal.styles.js.map

package/modal/modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.js","sources":["../../src/modal/modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { MediaQuery } from \"../theme\";\n\ninterface Props {\n    $show: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n    $offsetTop?: number;\n}\n\nconst visibilityStyle = (\n    show: boolean,\n    animationFrom: ModalAnimationDirection\n) => {\n    if (show) {\n        return `\n\t\t\t${animationFrom}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`;\n    }\n\n    return `\n\t\t${animationFrom}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;\n};\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    ${(props) => visibilityStyle(props.$show, props.$animationFrom || \"bottom\")}\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(\n            ${(props) =>\n                    props.$verticalHeight\n                        ? `${props.$verticalHeight}px`\n                        : \"1vh\"} * 100\n        );\n\n        top: ${(props) => props.$offsetTop || 0}px;\n    }\n`;\n"],"names":["Container","styled","div","props","visibilityStyle","show","$show","animationFrom","$animationFrom","MediaQuery","MaxWidth","sm","$verticalHeight","$offsetTop"],"mappings":"gFAWA,MAoBaA,EAAYC,EAAOC,GAAU;;;;;;;;MAQnCC,IAAUC,OA3BbC,EA2B6BF,EAAMG,MA1BnCC,EA0B0CJ,EAAMK,gBAAkB,SAxB9DH,EACO,WACVE,iIAOM,SACPA,4FAdoB,IACpBF,EACAE,CA0B2E;;MAEzEE,EAAWC,SAASC;;cAEXR,GACKA,EAAMS,gBACA,GAAGT,EAAMS,oBACT;;;eAGVT,GAAUA,EAAMU,YAAc;;"}
+{"version":3,"file":"modal.styles.js","sources":["../../src/modal/modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { MediaQuery } from \"../theme\";\n\ninterface Props {\n    $show: boolean;\n    $ready?: boolean;\n    $animationFrom?: ModalAnimationDirection;\n    $verticalHeight?: number;\n}\n\nconst visibilityStyle = (\n    show: boolean,\n    animationFrom: ModalAnimationDirection,\n    ready?: boolean\n) => {\n    if (show && !ready) {\n        return `\n\t\t\t${animationFrom}: -3%;\n\t\t\topacity: 0;\n\t\t\ttransition: none;\n\t\t`;\n    }\n\n    if (show) {\n        return `\n\t\t\t${animationFrom}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`;\n    }\n\n    return `\n\t\t${animationFrom}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;\n};\n\nexport const Container = styled.div<Props>`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n\n    ${(props) =>\n        visibilityStyle(\n            props.$show,\n            props.$animationFrom || \"bottom\",\n            props.$ready\n        )}\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(\n            ${(props) =>\n                    props.$verticalHeight\n                        ? `${props.$verticalHeight}px`\n                        : \"1vh\"} * 100\n        );\n    }\n`;\n"],"names":["Container","styled","div","props","visibilityStyle","show","$show","animationFrom","$animationFrom","ready","$ready","MediaQuery","MaxWidth","sm","$verticalHeight"],"mappings":"gFAWA,MA6BaA,EAAYC,EAAOC,GAAU;;;;;;;;;MASnCC,IACCC,OAtCJC,EAuCQF,EAAMG,MAtCdC,EAuCQJ,EAAMK,gBAAkB,SAtChCC,EAuCQN,EAAMO,OArCVL,IAASI,EACF,WACVF,4DAMGF,EACO,WACVE,iIAOM,SACPA,4FAvBoB,IACpBF,EACAE,EACAE,CAwCK;;MAEHE,EAAWC,SAASC;;cAEXV,GACKA,EAAMW,gBACA,GAAGX,EAAMW,oBACT;;;"}

package/modal-v2/modal-v2.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i}from"react/jsx-runtime";import{useFloating as o,useTransitionStatus as t,useDismiss as r,useInteractions as a,FloatingFocusManager as l}from"@floating-ui/react";import n,{useRef as s,useEffect as d}from"react";import{Overlay as m}from"../overlay/overlay.js";import{useViewport as c}from"../shared/hooks/useViewport.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as p}from"../util/use-event.js";import{ModalContext as u}from"./modal-context.js";import{Container as b,ScrollContainer as h,ModalContainer as v}from"./modal-v2.styles.js";const f=f=>{var{id:y,show:j,onClose:g,animationFrom:C="bottom",children:O,enableOverlayClick:x=!0,rootComponentId:F,zIndex:I,onOverlayClick:k,dismissKeyboardOnShow:w=!0,"data-testid":$="modal","aria-label":z,"aria-labelledby":P,"aria-describedby":E,disableInitialFocus:H=!1}=f,K=e(f,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus"]);const{verticalHeight:S,offsetTop:T}=c(),_=s(null),M=O&&n.cloneElement(O,{ref:_}),{refs:R,context:V}=o({open:j,onOpenChange:e=>{e||null==g||g()}}),{isMounted:q,status:A}=t(V,{duration:300}),B=r(V,{outsidePress:!1,enabled:!!g}),{getFloatingProps:D}=a([B]),G=p((()=>{var e,i;w&&(null===(i=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===i||i.call(e))}));return d((()=>{j&&G()}),[j,G]),i(m,{"data-testid":`${$}-overlay`,show:q,enableOverlayClick:x,onOverlayClick:k,id:y,rootId:F,containerRef:_,zIndex:I,children:i(b,Object.assign({$show:q,$animationFrom:C,"data-testid":$,$verticalHeight:S,$offsetTop:T,"data-status":A},K,{children:i(u.Provider,{value:{onClose:g},children:q&&i(l,{context:V,initialFocus:H?-1:R.floating,children:i(h,{children:i(v,Object.assign({ref:R.setFloating},D(),{role:"dialog","aria-label":z,"aria-labelledby":P,"aria-describedby":E,children:M}))})})})}))})};export{f as ModalV2};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i}from"react/jsx-runtime";import{useFloating as o,useTransitionStatus as r,useDismiss as a,useInteractions as t,FloatingFocusManager as l}from"@floating-ui/react";import n,{useRef as s}from"react";import{Overlay as d}from"../overlay/overlay.js";import{useViewport as m}from"../shared/hooks/useViewport.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as c}from"../util/use-event.js";import{ModalContext as b}from"./modal-context.js";import{Container as u,ScrollContainer as p,ModalContainer as v}from"./modal-v2.styles.js";const h=h=>{var{id:y,show:f,onClose:j,animationFrom:g="bottom",children:C,enableOverlayClick:O=!0,rootComponentId:x,zIndex:F,onOverlayClick:I,dismissKeyboardOnShow:k=!0,"data-testid":w="modal","aria-label":z,"aria-labelledby":P,"aria-describedby":S,disableInitialFocus:$=!1}=h,E=e(h,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus"]);const H=c((()=>{var e,i;k&&(null===(i=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===i||i.call(e))})),{verticalHeight:K}=m({enabled:f,onBeforeStart:H}),_=s(null),B=C&&n.cloneElement(C,{ref:_}),{refs:M,context:R}=o({open:f,onOpenChange:e=>{e||null==j||j()}}),{isMounted:V,status:q}=r(R,{duration:300}),A=a(R,{outsidePress:!1,enabled:!!j}),{getFloatingProps:D}=t([A]);return i(d,{"data-testid":`${w}-overlay`,show:f,enableOverlayClick:O,onOverlayClick:I,id:y,rootId:x,containerRef:_,zIndex:F,children:i(u,Object.assign({$animationFrom:g,"data-testid":w,$verticalHeight:K,"data-status":q},E,{children:i(b.Provider,{value:{onClose:j},children:V&&i(l,{context:R,initialFocus:$?-1:M.floating,children:i(p,{children:i(v,Object.assign({ref:M.setFloating},D(),{role:"dialog","aria-label":z,"aria-labelledby":P,"aria-describedby":S,children:B}))})})})}))})};export{h as ModalV2};
 //# sourceMappingURL=modal-v2.js.map