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

package/cjs/file-upload/file-list-item/file-list-item.styles.js

@@ -1,175 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/drag-handle"),i=require("@lifesg/react-icons/exclamation-circle-fill"),o=require("styled-components"),r=require("../../button/button.js"),t=require("../../typography/index.js"),a=require("../../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(o);const s=d.default.li`
-    display: flex;
-    align-items: center;
-    width: 100%;
-    border: none;
-
-    &:not(:last-child) {
-        margin-bottom: ${a.V3_Spacing["spacing-16"]};
-    }
-
-    ${e=>e.$disabled&&"none"===e.$focusType?o.css`
-                cursor: not-allowed;
-            `:e.$sortable&&"self"===e.$focusType?o.css`
-                cursor: grabbing;
-                // Following recommendation by the library for touch events
-                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
-                touch-action: manipulation;
-            `:e.$sortable?o.css`
-                &:hover {
-                    cursor: grab;
-                }
-                // Following recommendation by the library for touch events
-                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
-                touch-action: manipulation;
-            `:void 0}
-`,l=d.default(e.DragHandleIcon)`
-    margin-right: ${a.V3_Spacing["spacing-16"]};
-    height: 1.5rem;
-    width: 1.5rem;
-    color: ${a.V3_Colour.icon};
-
-    ${e=>e.$active?o.css`
-                color: ${a.V3_Colour["icon-primary"]};
-            `:e.$disabled?o.css`
-                color: ${a.V3_Colour["icon-disabled"]};
-            `:void 0};
-`,c=d.default.div`
-    background: ${a.V3_Colour["bg-primary-subtlest"]};
-    border: ${a.V3_Border["width-010"]} ${a.V3_Border.solid}
-        ${a.V3_Colour.border};
-    border-radius: ${a.V3_Radius.sm};
-    padding: ${a.V3_Spacing["spacing-16"]} ${a.V3_Spacing["spacing-32"]};
-    display: flex;
-    align-items: center;
-    width: 100%;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        padding: ${a.V3_Spacing["spacing-16"]};
-    }
-
-    ${e=>e.$focused?o.css`
-                border-color: ${a.V3_Colour["border-focus"]};
-                box-shadow: ${a.V3_Shadow["xs-focus-strong"]};
-            `:e.$disabled?o.css`
-                border-color: ${a.V3_Colour["border-disabled"]};
-            `:e.$error?o.css`
-                background: ${a.V3_Colour["bg-error"]};
-                border-color: ${a.V3_Colour["border-error"]};
-            `:void 0}
-
-    ${e=>{if(!e.$error&&(e.$loading||e.$editable))return o.css`
-                ${a.V3_MediaQuery.MaxWidth.md} {
-                    flex-direction: column;
-                    align-items: flex-start;
-                }
-            `}}
-`,p=d.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-        width: 100%;
-        align-items: flex-start;
-    }
-
-    ${e=>{if(e.$hasThumbnail)return o.css`
-                ${a.V3_MediaQuery.MaxWidth.md} {
-                    flex-direction: row;
-                    align-items: center;
-                }
-            `}}
-`,g=d.default.div`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    width: 100%;
-`,u=d.default.div`
-    display: flex;
-    flex: 1;
-    align-items: center;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-    }
-`,m=d.default.div`
-    display: flex;
-    width: 5rem;
-    margin-left: ${a.V3_Spacing["spacing-8"]};
-    justify-content: flex-end;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        ${e=>e.$hideInMobile?o.css`
-                    display: none;
-                    visibility: hidden;
-                `:o.css`
-                    width: 100%;
-                    margin-left: 0;
-                    margin-top: ${a.V3_Spacing["spacing-8"]};
-                    justify-content: flex-start;
-                `}
-    }
-`,$=d.default(t.Typography.BodyMD)`
-    color: ${a.V3_Colour["text-subtler"]};
-`,f=d.default(t.Typography.BodyMD)``,x=d.default(t.Typography.BodyMD)`
-    margin-top: ${a.V3_Spacing["spacing-4"]};
-`,h=d.default(i.ExclamationCircleFillIcon)`
-    height: 1lh;
-    width: 1em;
-    flex-shrink: 0;
-    color: ${a.V3_Colour["icon-error-strong"]};
-`;d.default(t.Typography.BodySM)`
-    color: ${a.V3_Colour["text-error"]};
-`;const y=d.default(t.Typography.BodySM)`
-    color: ${a.V3_Colour["text-error"]};
-    margin-top: ${a.V3_Spacing["spacing-4"]};
-    display: flex;
-    gap: ${a.V3_Spacing["spacing-4"]};
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        display: none;
-        visibility: hidden;
-    }
-`,b=d.default(t.Typography.BodySM)`
-    color: ${a.V3_Colour["text-error"]};
-    display: none;
-    visibility: hidden;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        display: flex;
-        gap: ${a.V3_Spacing["spacing-4"]};
-        visibility: visible;
-        margin-top: ${a.V3_Spacing["spacing-8"]};
-    }
-`,_=d.default.div`
-    width: 6rem;
-    margin-left: ${a.V3_Spacing["spacing-32"]};
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        width: fit-content;
-
-        ${e=>e.$loading&&!e.$error?o.css`
-                    margin-left: 0;
-                    margin-top: ${a.V3_Spacing["spacing-16"]};
-                    width: 100%;
-                `:e.$editable&&!e.$error?o.css`
-                    margin-left: 0;
-                    margin-top: ${a.V3_Spacing["spacing-16"]};
-                    align-self: flex-end;
-                `:void 0}
-    }
-`,V=d.default(r.Button)`
-    min-width: unset;
-
-    &:not(:last-child) {
-        margin-right: ${a.V3_Spacing["spacing-16"]};
-    }
-`;exports.ActionContainer=_,exports.Box=c,exports.ContentSection=p,exports.DesktopErrorMessage=y,exports.DragHandleIcon=l,exports.ErrorIcon=h,exports.ExtendedNameSection=u,exports.FileSizeSection=m,exports.FileSizeText=$,exports.IconButton=V,exports.Item=s,exports.ItemDescriptionText=x,exports.ItemText=f,exports.MobileErrorMessage=b,exports.NameSection=g;
+"use strict";require("./file-list-item.styles_y7my2m.css");exports.actionContainer="a1gk2zsk",exports.box="bddx9rr",exports.contentSection="c1dhzflv",exports.desktopErrorMessage="d1vgco4e",exports.dragHandleIcon="dqb8x5u",exports.errorIcon="e1jm950n",exports.extendedNameSection="elwke9e",exports.fileSizeSection="f14h64yt",exports.fileSizeText="f1wv8fjl",exports.iconButton="i1wh4bod",exports.item="i18pxk0j",exports.itemDescriptionText="iivlkvo",exports.mobileErrorMessage="map0p9n",exports.nameSection="nk38w4a";
 //# sourceMappingURL=file-list-item.styles.js.map

package/cjs/file-upload/file-list-item/file-list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button as DSIconButton } from \"../../button\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${V3_Colour[\"border-focus\"]};\n                box-shadow: ${V3_Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${V3_Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionText = styled(Typography.BodyMD)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","V3_Colour","$active","Box","div","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","md","$focused","V3_Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","ItemText","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton"],"mappings":"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"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../../theme\";\n\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\n\nexport const item = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n    &[data-item-state=\"disabled\"] {\n        cursor: not-allowed;\n    }\n\n    &[data-item-state=\"sortable\"] {\n        &:hover {\n            cursor: grab;\n        }\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n\n    &[data-item-state=\"sortable-active\"] {\n        cursor: grabbing;\n\n        // Following recommendation by the library for touch events\n        // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n        touch-action: manipulation;\n    }\n`;\n\nexport const dragHandleIcon = css`\n    margin-right: ${Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${Colour[\"icon\"]};\n\n    &[data-drag-handle-state=\"active\"] {\n        color: ${Colour[\"icon-primary\"]};\n    }\n\n    &[data-drag-handle-state=\"disabled\"] {\n        color: ${Colour[\"icon-disabled\"]};\n    }\n`;\n\nexport const box = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${MediaQuery.MaxWidth.md} {\n        padding: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-box-state=\"focused\"] {\n        border-color: ${Colour[\"border-focus\"]};\n        box-shadow: ${Shadow[\"xs-focus-strong\"]};\n    }\n\n    &[data-box-state=\"disabled\"] {\n        border-color: ${Colour[\"border-disabled\"]};\n    }\n\n    &[data-box-state=\"error\"] {\n        background: ${Colour[\"bg-error\"]};\n        border-color: ${Colour[\"border-error\"]};\n    }\n\n    &[data-stack-mobile=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: column;\n            align-items: flex-start;\n        }\n    }\n`;\n\nexport const contentSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    &[data-has-thumbnail=\"true\"] {\n        ${MediaQuery.MaxWidth.md} {\n            flex-direction: row;\n            align-items: center;\n        }\n    }\n`;\n\nexport const nameSection = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const extendedNameSection = css`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const fileSizeSection = css`\n    display: flex;\n    width: 5rem;\n    margin-left: ${Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    &[data-mobile-visibility=\"hidden\"] {\n        ${MediaQuery.MaxWidth.md} {\n            display: none;\n            visibility: hidden;\n        }\n    }\n\n    &[data-mobile-visibility=\"expand\"] {\n        ${MediaQuery.MaxWidth.md} {\n            width: 100%;\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-8\"]};\n            justify-content: flex-start;\n        }\n    }\n`;\n\nexport const fileSizeText = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const itemDescriptionText = css`\n    margin-top: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const errorIcon = css`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const desktopErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    margin-top: ${Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-4\"]};\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const mobileErrorMessage = css`\n    color: ${Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const actionContainer = css`\n    width: 6rem;\n    margin-left: ${Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: fit-content;\n    }\n\n    &[data-mobile-layout=\"loading\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            width: 100%;\n        }\n    }\n\n    &[data-mobile-layout=\"editable\"] {\n        ${MediaQuery.MaxWidth.md} {\n            margin-left: 0;\n            margin-top: ${Spacing[\"spacing-16\"]};\n            align-self: flex-end;\n        }\n    }\n`;\n\nexport const iconButton = css`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n"],"names":[],"mappings":"6HAoM4B,uBAxIZ,iCAmCW,uCA4EK,kCA9HL,4BAuHL,uCA3CU,kCAYJ,gCAuBH,8BAoEF,wBAnNN,uCAmJe,qCAuBD,8BArEP"}

package/cjs/file-upload/file-list-item/file-list-item.styles_y7my2m.css

@@ -0,0 +1,14 @@
+.i18pxk0j{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border:none;}.i18pxk0j:not(:last-child){margin-bottom:var(--fds-spacing-16);}.i18pxk0j[data-item-state="disabled"]{cursor:not-allowed;}.i18pxk0j[data-item-state="sortable"]{touch-action:manipulation;}.i18pxk0j[data-item-state="sortable"]:hover{cursor:-webkit-grab;cursor:grab;}.i18pxk0j[data-item-state="sortable-active"]{cursor:-webkit-grabbing;cursor:grabbing;touch-action:manipulation;}
+.dqb8x5u{margin-right:var(--fds-spacing-16);height:1.5rem;width:1.5rem;color:var(--fds-colour-icon);}.dqb8x5u[data-drag-handle-state="active"]{color:var(--fds-colour-icon-primary);}.dqb8x5u[data-drag-handle-state="disabled"]{color:var(--fds-colour-icon-disabled);}
+.bddx9rr{background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);padding:var(--fds-spacing-16) var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}:where(body.fds-breakpoint-md-max) .bddx9rr{padding:var(--fds-spacing-16);}.bddx9rr[data-box-state="focused"]{border-color:var(--fds-colour-border-focus);box-shadow:var(--fds-shadow-xs-focus-strong);}.bddx9rr[data-box-state="disabled"]{border-color:var(--fds-colour-border-disabled);}.bddx9rr[data-box-state="error"]{background:var(--fds-colour-bg-error);border-color:var(--fds-colour-border-error);}:where(body.fds-breakpoint-md-max) .bddx9rr[data-stack-mobile="true"]{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.c1dhzflv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .c1dhzflv{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}:where(body.fds-breakpoint-md-max) .c1dhzflv[data-has-thumbnail="true"]{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.nk38w4a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}
+.elwke9e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .elwke9e{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:100%;}
+.f14h64yt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:5rem;margin-left:var(--fds-spacing-8);-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="hidden"]{display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .f14h64yt[data-mobile-visibility="expand"]{width:100%;margin-left:0;margin-top:var(--fds-spacing-8);-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
+.f1wv8fjl{color:var(--fds-colour-text-subtler);}
+.iivlkvo{margin-top:var(--fds-spacing-4);}
+.e1jm950n{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.d1vgco4e{color:var(--fds-colour-text-error);margin-top:var(--fds-spacing-4);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);}:where(body.fds-breakpoint-md-max) .d1vgco4e{display:none;visibility:hidden;}
+.map0p9n{color:var(--fds-colour-text-error);display:none;visibility:hidden;}:where(body.fds-breakpoint-md-max) .map0p9n{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);visibility:visible;margin-top:var(--fds-spacing-8);}
+.a1gk2zsk{width:6rem;margin-left:var(--fds-spacing-32);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-md-max) .a1gk2zsk{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}:where(body.fds-breakpoint-md-max) .a1gk2zsk[data-mobile-layout="loading"]{margin-left:0;margin-top:var(--fds-spacing-16);width:100%;}:where(body.fds-breakpoint-md-max) .a1gk2zsk[data-mobile-layout="editable"]{margin-left:0;margin-top:var(--fds-spacing-16);-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}
+.i1wh4bod{min-width:unset;}.i1wh4bod:not(:last-child){margin-right:var(--fds-spacing-16);}

package/cjs/file-upload/file-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../external/@dnd-kit/core/dist/core.esm.js"),t=require("../external/@dnd-kit/sortable/dist/sortable.esm.js"),s=require("react"),i=require("../external/react-resize-detector/build/index.esm.js"),n=require("../shared/accessibility/index.js"),o=require("./context.js"),l=require("./custom-sensors.js"),a=require("./file-item-edit.js"),d=require("./file-list.styles.js"),u=require("./file-list-item/file-list-item.js"),c=require("./helper.js");const p=s.forwardRef((function({fileItems:p=[],editableFileItems:f,fileDescriptionMaxLength:g,sortable:m,disabled:h,readOnly:j,onItemUpdate:y,onItemDelete:b,onSort:v},x){const[S,I]=s.useState({}),{setActiveId:$}=s.useContext(o.FileUploadContext),[q,M]=s.useState(""),O=s.useRef({});s.useImperativeHandle(x,(()=>({focus:()=>{var e;null===(e=D.current)||void 0===e||e.focus()}})));const{width:C=0,ref:D}=i.useResizeDetector(),F=s.useRef({}),E=r.useSensors(r.useSensor(l.MouseSensor,{activationConstraint:{distance:8}}),r.useSensor(r.TouchSensor,{activationConstraint:{delay:150,tolerance:5}}),r.useSensor(r.KeyboardSensor,{coordinateGetter:t.sortableKeyboardCoordinates})),w=e=>{delete F.current[e]};s.useEffect((()=>{const e=K(p);((e,r)=>{const t=Object.keys(e),s=Object.keys(r);if(t.length!==s.length)return!1;for(const t of s)if(e[t]!==r[t])return!1;return!0})(S,e)||I(e)}),[p,f,j]),s.useEffect((()=>{var e;if(!p||0===p.length)return void M("");const r=Date.now(),t=[];for(const s of p){const i=O.current[s.id];if(s.errorMessage)"error"!==(null==i?void 0:i.status)&&(t.push("string"==typeof s.errorMessage?`Error uploading ${s.name}: ${s.errorMessage}`:`Error uploading ${s.name}`),O.current[s.id]={progress:null!==(e=s.progress)&&void 0!==e?e:1,timestamp:r,status:"error"});else if(void 0!==s.progress)if(s.progress>=1)"complete"!==(null==i?void 0:i.status)&&(t.push(`${s.name} upload is complete`),O.current[s.id]={progress:1,timestamp:r,status:"complete"});else if("number"==typeof s.progress&&s.progress<1){(!i||"in-progress"!==i.status)&&(t.push(`Starting upload of ${s.name}`),O.current[s.id]={progress:s.progress,timestamp:r,status:"in-progress"})}}t.length>0&&M(t.join(", "))}),[p]);const L=e=>r=>{T(e.id,"display"),w(e.id);const t=Object.assign(Object.assign({},e),{description:r});y(t)},k=e=>r=>{F.current[e.id]=r},A=e=>()=>{e.description&&0!==e.description.length?T(e.id,"display"):b(e),w(e.id)},R=e=>()=>{T(e.id,"edit")},H=e=>()=>{b(e),D.current&&D.current.focus()},U=e=>{if(v&&p){const{active:r,over:s}=e;if(s&&r.id!==s.id){const e=p.findIndex((e=>e.id===r.id)),i=p.findIndex((e=>e.id===s.id)),n=t.arrayMove(p,e,i);v(n)}}$(void 0)},W=e=>{const{active:r}=e;$(r.id)},z=e=>f&&c.FileUploadHelper.isSupportedImageType(e.type),B=e=>!e.errorMessage&&!j&&!("number"==typeof e.progress&&e.progress<1)&&z(e)&&!e.description,K=e=>{if(!e||0===e.length)return{};const r={};for(const t of e)t.errorMessage?r[t.id]="error":S[t.id]?r[t.id]=S[t.id]:r[t.id]=B(t)?"edit":"display";return r},T=(e,r)=>{I((t=>Object.assign(Object.assign({},t),{[e]:r})))},G=()=>p&&p.length>1&&m&&Object.values(S).every((e=>"display"===e)),N=()=>{if(0===p.length)return"No files uploaded";const e=p.filter((e=>!(null==e?void 0:e.errorMessage)&&(1===e.progress||void 0===e.progress))).length,r=p.filter((e=>"number"==typeof e.progress&&e.progress<1)).length,t=p.filter((e=>e.errorMessage)).length;if(0===e&&0===r&&0===t)return"File list";const s=[e>0?`${e} completed files`:"",r>0?`${r} file in progress`:"",t>0?`${t} ${t>1?"files":"file"} with error`:""].filter(Boolean);return`${j?"Read-only file list":"File list"}. ${s.join(", ")}`},V=()=>{const r=((e,r)=>{if(!e||0===e.length)return[];const t=[];for(const s of e)if("edit"===r[s.id]){const e=t[t.length-1];Array.isArray(e)?e.push(s):t.push([s])}else t.push(s);return t})(p,S);return 0===r.length?null:r.map(((r,t)=>Array.isArray(r)?((r,t)=>{const s=r.map((r=>{const t=Object.assign({},r);return void 0!==F.current[r.id]&&(t.description=F.current[r.id]),e.jsx(a.FileItemEdit,{fileItem:t,wrapperWidth:C,fileDescriptionMaxLength:g,onSave:L(r),onCancel:A(r),onBlur:k(r)},r.id)}));return e.jsx(d.EditableItemsContainer,{children:e.jsx("ul",{children:s})},`editable-${t}`)})(r,t):e.jsx(u.FileListItem,{fileItem:r,editable:z(r),wrapperWidth:C,sortable:G(),disabled:h,readOnly:j,onDelete:H(r),onEditClick:R(r)},r.id)))},J=()=>e.jsxs(e.Fragment,{children:[e.jsx(n.VisuallyHidden,{"aria-live":"polite","aria-atomic":"true",children:q}),e.jsx(d.ListWrapper,{tabIndex:-1,$readOnly:j,ref:D,"aria-label":N(),children:V()})]});return h||j||!G()?J():e.jsx(r.DndContext,{sensors:E,onDragEnd:U,onDragStart:W,children:e.jsx(t.SortableContext,{items:p,strategy:t.verticalListSortingStrategy,children:J()})})}));exports.FileList=p;
+"use strict";var e=require("react/jsx-runtime"),r=require("../external/@dnd-kit/core/dist/core.esm.js"),t=require("../external/@dnd-kit/sortable/dist/sortable.esm.js"),s=require("clsx"),i=require("react"),n=require("../external/react-resize-detector/build/index.esm.js"),o=require("../shared/accessibility/index.js"),l=require("./context.js"),a=require("./custom-sensors.js"),d=require("./file-item-edit.js"),u=require("./file-list.styles.js"),c=require("./file-list-item/file-list-item.js"),p=require("./helper.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=f(s);const m=i.forwardRef((function({fileItems:s=[],editableFileItems:f,fileDescriptionMaxLength:m,sortable:h,disabled:j,readOnly:y,onItemUpdate:b,onItemDelete:v,onSort:x},S){const[I,q]=i.useState({}),{setActiveId:$}=i.useContext(l.FileUploadContext),[M,O]=i.useState(""),C=i.useRef({});i.useImperativeHandle(S,(()=>({focus:()=>{var e;null===(e=F.current)||void 0===e||e.focus()}})));const{width:D=0,ref:F}=n.useResizeDetector(),E=i.useRef({}),w=r.useSensors(r.useSensor(a.MouseSensor,{activationConstraint:{distance:8}}),r.useSensor(r.TouchSensor,{activationConstraint:{delay:150,tolerance:5}}),r.useSensor(r.KeyboardSensor,{coordinateGetter:t.sortableKeyboardCoordinates})),R=e=>{delete E.current[e]};i.useEffect((()=>{const e=K(s);((e,r)=>{const t=Object.keys(e),s=Object.keys(r);if(t.length!==s.length)return!1;for(const t of s)if(e[t]!==r[t])return!1;return!0})(I,e)||q(e)}),[s,f,y]),i.useEffect((()=>{var e;if(!s||0===s.length)return void O("");const r=Date.now(),t=[];for(const i of s){const s=C.current[i.id];if(i.errorMessage)"error"!==(null==s?void 0:s.status)&&(t.push("string"==typeof i.errorMessage?`Error uploading ${i.name}: ${i.errorMessage}`:`Error uploading ${i.name}`),C.current[i.id]={progress:null!==(e=i.progress)&&void 0!==e?e:1,timestamp:r,status:"error"});else if(void 0!==i.progress)if(i.progress>=1)"complete"!==(null==s?void 0:s.status)&&(t.push(`${i.name} upload is complete`),C.current[i.id]={progress:1,timestamp:r,status:"complete"});else if("number"==typeof i.progress&&i.progress<1){(!s||"in-progress"!==s.status)&&(t.push(`Starting upload of ${i.name}`),C.current[i.id]={progress:i.progress,timestamp:r,status:"in-progress"})}}t.length>0&&O(t.join(", "))}),[s]);const k=e=>r=>{T(e.id,"display"),R(e.id);const t=Object.assign(Object.assign({},e),{description:r});b(t)},A=e=>r=>{E.current[e.id]=r},L=e=>()=>{e.description&&0!==e.description.length?T(e.id,"display"):v(e),R(e.id)},W=e=>()=>{T(e.id,"edit")},H=e=>()=>{v(e),F.current&&F.current.focus()},N=e=>{if(x&&s){const{active:r,over:i}=e;if(i&&r.id!==i.id){const e=s.findIndex((e=>e.id===r.id)),n=s.findIndex((e=>e.id===i.id)),o=t.arrayMove(s,e,n);x(o)}}$(void 0)},U=e=>{const{active:r}=e;$(r.id)},z=e=>f&&p.FileUploadHelper.isSupportedImageType(e.type),B=e=>!e.errorMessage&&!y&&!("number"==typeof e.progress&&e.progress<1)&&z(e)&&!e.description,K=e=>{if(!e||0===e.length)return{};const r={};for(const t of e)t.errorMessage?r[t.id]="error":I[t.id]?r[t.id]=I[t.id]:r[t.id]=B(t)?"edit":"display";return r},T=(e,r)=>{q((t=>Object.assign(Object.assign({},t),{[e]:r})))},G=()=>s&&s.length>1&&h&&Object.values(I).every((e=>"display"===e)),V=()=>{if(0===s.length)return"No files uploaded";const e=s.filter((e=>!(null==e?void 0:e.errorMessage)&&(1===e.progress||void 0===e.progress))).length,r=s.filter((e=>"number"==typeof e.progress&&e.progress<1)).length,t=s.filter((e=>e.errorMessage)).length;if(0===e&&0===r&&0===t)return"File list";const i=[e>0?`${e} completed files`:"",r>0?`${r} file in progress`:"",t>0?`${t} ${t>1?"files":"file"} with error`:""].filter(Boolean);return`${y?"Read-only file list":"File list"}. ${i.join(", ")}`},J=()=>{const r=((e,r)=>{if(!e||0===e.length)return[];const t=[];for(const s of e)if("edit"===r[s.id]){const e=t[t.length-1];Array.isArray(e)?e.push(s):t.push([s])}else t.push(s);return t})(s,I);return 0===r.length?null:r.map(((r,t)=>Array.isArray(r)?((r,t)=>{const s=r.map((r=>{const t=Object.assign({},r);return void 0!==E.current[r.id]&&(t.description=E.current[r.id]),e.jsx(d.FileItemEdit,{fileItem:t,wrapperWidth:D,fileDescriptionMaxLength:m,onSave:k(r),onCancel:L(r),onBlur:A(r)},r.id)}));return e.jsx("li",{className:u.editableItemsContainer,children:e.jsx("ul",{children:s})},`editable-${t}`)})(r,t):e.jsx(c.FileListItem,{fileItem:r,editable:z(r),wrapperWidth:D,sortable:G(),disabled:j,readOnly:y,onDelete:H(r),onEditClick:W(r)},r.id)))},P=()=>e.jsxs(e.Fragment,{children:[e.jsx(o.VisuallyHidden,{"aria-live":"polite","aria-atomic":"true",children:M}),e.jsx("ul",{tabIndex:-1,className:g.default(u.listWrapper,y&&u.listWrapperReadOnly),ref:F,"aria-label":V(),children:J()})]});return j||y||!G()?P():e.jsx(r.DndContext,{sensors:w,onDragEnd:N,onDragStart:U,children:e.jsx(t.SortableContext,{items:s,strategy:t.verticalListSortingStrategy,children:P()})})}));exports.FileList=m;
 //# sourceMappingURL=file-list.js.map

package/cjs/file-upload/file-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list.js","sources":["../../../src/file-upload/file-list.tsx"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport {\n    DndContext,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { FileUploadContext } from \"./context\";\nimport { MouseSensor } from \"./custom-sensors\";\nimport { FileItemEdit } from \"./file-item-edit\";\nimport { EditableItemsContainer, ListWrapper } from \"./file-list.styles\";\nimport { FileListItem } from \"./file-list-item\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <EditableItemsContainer key={`editable-${keyToUse}`}>\n                <ul>{itemsToRender}</ul>\n            </EditableItemsContainer>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ListWrapper\n                    tabIndex={-1}\n                    $readOnly={readOnly}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ListWrapper>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","EditableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","ListWrapper","tabIndex","$readOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}
+{"version":3,"file":"file-list.js","sources":["../../../src/file-upload/file-list.tsx"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport {\n    DndContext,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { FileUploadContext } from \"./context\";\nimport { MouseSensor } from \"./custom-sensors\";\nimport { FileItemEdit } from \"./file-item-edit\";\nimport * as styles from \"./file-list.styles\";\nimport { FileListItem } from \"./file-list-item\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <li\n                key={`editable-${keyToUse}`}\n                className={styles.editableItemsContainer}\n            >\n                <ul>{itemsToRender}</ul>\n            </li>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ul\n                    tabIndex={-1}\n                    className={clsx(\n                        styles.listWrapper,\n                        readOnly && styles.listWrapperReadOnly\n                    )}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ul>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","className","styles.editableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","tabIndex","clsx","styles.listWrapper","styles.listWrapperReadOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}

package/cjs/file-upload/file-list.styles.js

@@ -1,21 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../v3_theme/index.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=r(t);const i=o.default.ul`
-    list-style-type: none;
-    margin-bottom: ${t=>t.$readOnly?"0":e.V3_Spacing["spacing-32"]};
-`,n=o.default.li`
-    border-top: ${e.V3_Border["width-010"]} ${e.V3_Border.solid} ${e.V3_Colour.border};
-    border-bottom: ${e.V3_Border["width-010"]} ${e.V3_Border.solid}
-        ${e.V3_Colour.border};
-
-    &:not(:last-child) {
-        margin-bottom: ${e.V3_Spacing["spacing-32"]};
-    }
-
-    &:not(:first-child) {
-        margin-top: ${e.V3_Spacing["spacing-32"]};
-    }
-
-    ul {
-        list-style-type: none;
-    }
-`;exports.EditableItemsContainer=n,exports.ListWrapper=i;
+"use strict";require("./file-list.styles_16vplxk.css");exports.editableItemsContainer="e1mlljmt",exports.listWrapper="lzv8h5c",exports.listWrapperReadOnly="l1rx15rp";
 //# sourceMappingURL=file-list.styles.js.map

package/cjs/file-upload/file-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list.styles.js","sources":["../../../src/file-upload/file-list.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Border, V3_Colour, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface ListWrapperStyleProps {\n    $readOnly?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const ListWrapper = styled.ul<ListWrapperStyleProps>`\n    list-style-type: none;\n    margin-bottom: ${(props) =>\n        props.$readOnly ? \"0\" : V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const EditableItemsContainer = styled.li`\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour.border};\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n    }\n\n    &:not(:first-child) {\n        margin-top: ${V3_Spacing[\"spacing-32\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":["ListWrapper","styled","ul","props","$readOnly","V3_Spacing","EditableItemsContainer","li","V3_Border","solid","V3_Colour","border"],"mappings":"qKAcO,MAAMA,EAAcC,EAAAA,QAAOC,EAAyB;;qBAErCC,GACdA,EAAMC,UAAY,IAAMC,EAAAA,WAAW;EAG9BC,EAAyBL,EAAAA,QAAOM,EAAE;kBAC7BC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC,SAASC,EAAAA,UAAUC;qBACpDH,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC/CC,EAAAA,UAAUC;;;yBAGKN,EAAAA,WAAW;;;;sBAIdA,EAAAA,WAAW;;;;;;"}
+{"version":3,"file":"file-list.styles.js","sources":["../../../src/file-upload/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme\";\n\nexport const listWrapper = css`\n    list-style-type: none;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const listWrapperReadOnly = css`\n    margin-bottom: 0;\n`;\n\nexport const editableItemsContainer = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-32\"]};\n    }\n\n    &:not(:first-child) {\n        margin-top: ${Spacing[\"spacing-32\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":[],"mappings":"iHAamC,+BATX,sCAKQ"}

package/cjs/file-upload/file-list.styles_16vplxk.css

@@ -0,0 +1,3 @@
+.lzv8h5c{list-style-type:none;margin-bottom:var(--fds-spacing-32);}
+.l1rx15rp{margin-bottom:0;}
+.e1mlljmt{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.e1mlljmt:not(:last-child){margin-bottom:var(--fds-spacing-32);}.e1mlljmt:not(:first-child){margin-top:var(--fds-spacing-32);}.e1mlljmt ul{list-style-type:none;}

package/cjs/file-upload/file-upload.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./context.js"),l=require("./dropzone.js"),i=require("./file-list.js"),n=require("./file-upload.styles.js");exports.FileUpload=({styleType:o="bordered",fileItems:s,title:a,description:d,maxFiles:u,warning:c,className:p,name:x,id:b,"data-testid":h,accept:j,capture:m,multiple:f,disabled:y,sortable:g=!1,fileDescriptionMaxLength:v,editableFileItems:D=!1,errorMessage:C,readOnly:F,customLabels:I,onChange:T,onDelete:U,onEdit:q,onSort:z})=>{const B={uploadButton:(null==I?void 0:I.uploadButtonLabel)||"Upload files"},L=t.useRef(null),S=t.useRef(null),[w,A]=t.useState(),M=()=>!(!u||!s)&&s.length>=u;return e.jsx(r.FileUploadContext.Provider,{value:{activeId:w,setActiveId:A},children:e.jsxs(l.FileUploadDropzone,{ref:L,onChange:e=>{var t;!y&&T&&(T(e),null===(t=S.current)||void 0===t||t.focus())},id:b?`${b}-dropzone`:"dropzone",accept:j,capture:m,border:"bordered"===o,className:p,"data-testid":h,name:x,multiple:f,disabled:y||M()||F,children:[!(!a&&!d)&&e.jsxs(n.TextContainer,{children:[a?"string"==typeof a?e.jsx(n.Title,{children:a}):e.jsx(n.TitleContainer,{baseTextSize:"body-baseline",children:a}):null,d?"string"==typeof d?e.jsx(n.Description,{children:d}):e.jsx(n.DescriptionContainer,{baseTextSize:"body-md",children:d}):null]}),!!c&&e.jsx(n.WarningAlert,{type:"warning",children:c}),e.jsx(i.FileList,{ref:S,fileItems:s,editableFileItems:D,fileDescriptionMaxLength:v,sortable:g,disabled:y,readOnly:F,onItemDelete:e=>{var t;U&&(U(e),null===(t=S.current)||void 0===t||t.focus())},onItemUpdate:e=>{q&&q(e)},onSort:e=>{z&&z(e)}}),C&&e.jsx(n.ErrorAlert,{type:"error",children:C}),!F&&e.jsxs(n.UploadButtonContainer,{children:[e.jsx(n.UploadButton,{type:"button",styleType:"secondary",disabled:!!w||y||M(),onClick:e=>{y||(e.preventDefault(),L.current&&L.current.openFileDialog())},children:B.uploadButton}),e.jsx(n.UploadButtonText,{weight:"semibold",children:"or drop them here"})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../alert/alert.js"),l=require("../button/button.js"),a=require("../markup/markup.js"),s=require("../typography/index.js"),i=require("./context.js"),n=require("./dropzone.js"),o=require("./file-list.js"),d=require("./file-upload.styles.js");exports.FileUpload=({styleType:u="bordered",fileItems:c,title:p,description:m,maxFiles:h,warning:y,className:x,name:b,id:j,"data-testid":g,accept:f,capture:v,multiple:B,disabled:N,sortable:q=!1,fileDescriptionMaxLength:D,editableFileItems:T=!1,errorMessage:C,readOnly:F,customLabels:I,onChange:M,onDelete:k,onEdit:z,onSort:L})=>{const A={uploadButton:(null==I?void 0:I.uploadButtonLabel)||"Upload files"},S=r.useRef(null),U=r.useRef(null),[w,O]=r.useState(),R=e=>{var r;if(void 0===h)return e;const t=null!==(r=null==c?void 0:c.length)&&void 0!==r?r:0,l=Math.max(h-t,0);return e.slice(0,l)},E=()=>!(!h||!c)&&c.length>=h;return e.jsx(i.FileUploadContext.Provider,{value:{activeId:w,setActiveId:O},children:e.jsxs(n.FileUploadDropzone,{ref:S,onChange:e=>{var r;const t=R(e);!N&&M&&t.length>0&&(M(t),null===(r=U.current)||void 0===r||r.focus())},id:j?`${j}-dropzone`:"dropzone",accept:f,capture:v,border:"bordered"===u,className:x,"data-testid":g,name:b,multiple:B,disabled:N||E()||F,children:[!(!p&&!m)&&e.jsxs("div",{className:d.textContainer,children:[p?"string"==typeof p?e.jsx(s.Typography.BodyBL,{children:p}):e.jsx(a.Markup,{className:d.markupContainer,baseTextSize:"body-baseline",children:p}):null,m?"string"==typeof m?e.jsx(s.Typography.BodyMD,{className:d.description,children:m}):e.jsx(a.Markup,{className:d.markupContainer,baseTextSize:"body-md",children:m}):null]}),!!y&&e.jsx(t.Alert,{className:d.warningAlert,type:"warning",children:y}),e.jsx(o.FileList,{ref:U,fileItems:c,editableFileItems:T,fileDescriptionMaxLength:D,sortable:q,disabled:N,readOnly:F,onItemDelete:e=>{var r;k&&(k(e),null===(r=U.current)||void 0===r||r.focus())},onItemUpdate:e=>{z&&z(e)},onSort:e=>{L&&L(e)}}),C&&e.jsx(t.Alert,{className:d.errorAlert,type:"error",children:C}),!F&&e.jsxs("div",{className:d.uploadButtonContainer,children:[e.jsx(l.Button,{type:"button",sizeType:"small",styleType:"secondary",disabled:!!w||N||E(),onClick:e=>{N||(e.preventDefault(),S.current&&S.current.openFileDialog())},className:d.uploadButton,children:A.uploadButton}),e.jsx(s.Typography.BodyMD,{className:d.uploadButtonText,weight:"semibold",children:"or drop them here"})]})]})})};
 //# sourceMappingURL=file-upload.js.map

package/cjs/file-upload/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return (\n            <TitleContainer baseTextSize=\"body-baseline\">\n                {title}\n            </TitleContainer>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return (\n            <DescriptionContainer baseTextSize=\"body-md\">\n                {description}\n            </DescriptionContainer>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","baseTextSize","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"4MAqB0B,EACtBA,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAAA,OAAwB,MACtCC,EAAcD,EAAAA,OAAoB,OACjCE,EAAUC,GAAeC,aA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EAsCvD,OACI+B,EAAAA,IAACC,EAAAA,kBAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAAAA,KAACC,EAAAA,mBAAkB,CACfC,IAAKf,EACLP,SAnFUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAgFQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAAAA,KAACQ,gBAAa,CAAAT,SAAA,CA/CrBrC,EAIgB,iBAAVA,EACAiC,EAAAA,IAACc,EAAAA,MAAK,CAAAV,SAAErC,IAIfiC,EAAAA,IAACe,EAAAA,eAAc,CAACC,aAAa,gBAAeZ,SACvCrC,IATE,KAeNC,EAIsB,iBAAhBA,EACAgC,EAAAA,IAACiB,EAAAA,YAAW,CAAAb,SAAEpC,IAIrBgC,EAAAA,IAACkB,EAAAA,qBAAoB,CAACF,aAAa,UAASZ,SACvCpC,IATE,UAmCAE,GACC8B,EAAAA,IAACmB,EAAAA,cAAaC,KAAK,UAAShB,SAAElC,IAElC8B,EAAAA,IAACqB,EAAAA,SAAQ,CACLd,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVuC,aAxGUC,UAClBrC,IACAA,EAASqC,GACU,QAAnBd,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAqGYa,aAvFUC,IAClBtC,GACAA,EAAOsC,EACX,EAqFYrC,OAlFIsC,IACZtC,GACAA,EAAOsC,EACX,IAiFS5C,GACGkB,EAAAA,IAAC2B,EAAAA,WAAU,CAACP,KAAK,QAAOhB,SAAEtB,KAE5BC,GACEsB,EAAAA,KAACuB,EAAAA,sBAAqB,CAAAxB,SAAA,CAClBJ,EAAAA,IAAC6B,EAAAA,aAAY,CACTT,KAAK,SACLvD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9BgC,QA/GpBC,IAEKrD,IACDqD,EAAMC,iBACFxC,EAAYkB,SACZlB,EAAYkB,QAAQuB,iBAE5B,EAwGoD7B,SAE/Bf,EAAOC,eAEZU,EAAAA,IAACkC,EAAAA,iBAAgB,CAACC,OAAO,WAAU/B,SAAA,6BAMtB"}
+{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport * as styles from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        const filesToProcess = limitIncomingFiles(files);\n\n        if (!disabled && onChange && filesToProcess.length > 0) {\n            onChange(filesToProcess);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const limitIncomingFiles = (files: File[]) => {\n        if (maxFiles === undefined) {\n            return files;\n        }\n\n        const existingItemsCount = fileItems?.length ?? 0;\n        const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n        return files.slice(0, remainingSlots);\n    };\n\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Typography.BodyBL>{title}</Typography.BodyBL>;\n        }\n\n        return (\n            <Markup\n                className={styles.markupContainer}\n                baseTextSize=\"body-baseline\"\n            >\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {description}\n                </Typography.BodyMD>\n            );\n        }\n\n        return (\n            <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n                {description}\n            </Markup>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <div className={styles.textContainer}>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </div>\n                )}\n                {!!warning && (\n                    <Alert className={styles.warningAlert} type=\"warning\">\n                        {warning}\n                    </Alert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <Alert className={styles.errorAlert} type=\"error\">\n                        {errorMessage}\n                    </Alert>\n                )}\n                {!readOnly && (\n                    <div className={styles.uploadButtonContainer}>\n                        <Button\n                            type=\"button\"\n                            sizeType=\"small\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                            className={styles.uploadButton}\n                        >\n                            {labels.uploadButton}\n                        </Button>\n                        <Typography.BodyMD\n                            className={styles.uploadButtonText}\n                            weight=\"semibold\"\n                        >\n                            or drop them here\n                        </Typography.BodyMD>\n                    </div>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"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"}

package/cjs/file-upload/file-upload.styles.js

@@ -1,41 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../alert/alert.js"),r=require("../button/button.js"),o=require("../markup/markup.js"),i=require("../typography/index.js"),a=require("../v3_theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var l=n(t);const d=l.default.div`
-    display: flex;
-    flex-direction: column;
-    margin-bottom: ${a.V3_Spacing["spacing-32"]};
-    gap: ${a.V3_Spacing["spacing-8"]};
-`,p=l.default(i.Typography.BodyBL)``,u=l.default(o.Markup)`
-    color: ${a.V3_Colour.text};
-`,s=l.default(i.Typography.BodyMD)`
-    color: ${a.V3_Colour["text-subtler"]};
-`,x=l.default(o.Markup)`
-    color: ${a.V3_Colour.text};
-`,c=l.default(e.Alert)`
-    margin-bottom: ${a.V3_Spacing["spacing-32"]};
-`,g=l.default.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        align-items: flex-start;
-    }
-`,m=l.default(r.Button.Small)`
-    width: 10rem;
-
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        width: 100%;
-    }
-`,f=l.default(i.Typography.BodyMD)`
-    color: ${a.V3_Colour["text-subtler"]};
-    margin-top: ${a.V3_Spacing["spacing-8"]};
-    width: 10rem;
-    text-align: center;
-    ${a.V3_MediaQuery.MaxWidth.md} {
-        display: none;
-        visibility: hidden;
-    }
-`,y=l.default(e.Alert)`
-    margin-bottom: ${a.V3_Spacing["spacing-32"]};
-`;exports.Description=s,exports.DescriptionContainer=x,exports.ErrorAlert=y,exports.TextContainer=d,exports.Title=p,exports.TitleContainer=u,exports.UploadButton=m,exports.UploadButtonContainer=g,exports.UploadButtonText=f,exports.WarningAlert=c;
+"use strict";require("./file-upload.styles_9ffwcd.css");exports.description="dhybrj2",exports.errorAlert="emjmrml",exports.markupContainer="m7vp3hf",exports.textContainer="t9vodht",exports.uploadButton="u7dp799",exports.uploadButtonContainer="u723luu",exports.uploadButtonText="u1rz06ff",exports.warningAlert="wq1el8u";
 //# sourceMappingURL=file-upload.styles.js.map

package/cjs/file-upload/file-upload.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.styles.js","sources":["../../../src/file-upload/file-upload.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const Title = styled(Typography.BodyBL)``;\n\nexport const TitleContainer = styled(Markup)`\n    color: ${V3_Colour.text};\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled(Markup)`\n    color: ${V3_Colour.text};\n`;\n\nexport const WarningAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const UploadButtonContainer = styled.div`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const UploadButton = styled(Button.Small)`\n    width: 10rem;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const UploadButtonText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const ErrorAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n"],"names":["TextContainer","styled","div","V3_Spacing","Title","Typography","BodyBL","TitleContainer","Markup","V3_Colour","text","Description","BodyMD","DescriptionContainer","WarningAlert","Alert","UploadButtonContainer","V3_MediaQuery","MaxWidth","md","UploadButton","Button","Small","UploadButtonText","ErrorAlert"],"mappings":"0SAWO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAG;;;qBAGlBC,EAAAA,WAAW;WACrBA,EAAAA,WAAW;EAGTC,EAAQH,EAAAA,QAAOI,aAAWC,OAAO,GAEjCC,EAAiBN,EAAAA,QAAOO,EAAAA,OAAO;aAC/BC,EAAAA,UAAUC;EAGVC,EAAcV,EAAAA,QAAOI,aAAWO,OAAO;aACvCH,EAAAA,UAAU;EAGVI,EAAuBZ,EAAAA,QAAOO,EAAAA,OAAO;aACrCC,EAAAA,UAAUC;EAGVI,EAAeb,EAAAA,QAAOc,EAAAA,MAAM;qBACpBZ,EAAAA,WAAW;EAGnBa,EAAwBf,EAAAA,QAAOC,GAAG;;;;;;MAMzCe,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAenB,EAAAA,QAAOoB,SAAOC,MAAM;;;MAG1CL,EAAAA,cAAcC,SAASC;;;EAKhBI,EAAmBtB,EAAAA,QAAOI,aAAWO,OAAO;aAC5CH,EAAAA,UAAU;kBACLN,EAAAA,WAAW;;;MAGvBc,EAAAA,cAAcC,SAASC;;;;EAMhBK,EAAavB,EAAAA,QAAOc,EAAAA,MAAM;qBAClBZ,EAAAA,WAAW;"}
+{"version":3,"file":"file-upload.styles.js","sources":["../../../src/file-upload/file-upload.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const markupContainer = css`\n    color: ${Colour.text};\n`;\n\nexport const description = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const warningAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const uploadButtonContainer = css`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const uploadButton = css`\n    width: 10rem;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const uploadButtonText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const errorAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n"],"names":[],"mappings":"uGAewB,6BAuCD,kCA3CK,gCAPF,+BA8BD,wCAXS,mCAmBL,gCAvBJ"}

package/cjs/file-upload/file-upload.styles_9ffwcd.css

@@ -0,0 +1,8 @@
+.t9vodht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--fds-spacing-32);gap:var(--fds-spacing-8);}
+.m7vp3hf{color:var(--fds-colour-text);}
+.dhybrj2{color:var(--fds-colour-text-subtler);}
+.wq1el8u{margin-bottom:var(--fds-spacing-32);}
+.u723luu{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}:where(body.fds-breakpoint-md-max) .u723luu{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.u7dp799{width:10rem;}:where(body.fds-breakpoint-md-max) .u7dp799{width:100%;}
+.u1rz06ff{color:var(--fds-colour-text-subtler);margin-top:var(--fds-spacing-8);width:10rem;text-align:center;}:where(body.fds-breakpoint-md-max) .u1rz06ff{display:none;visibility:hidden;}
+.emjmrml{margin-bottom:var(--fds-spacing-32);}