npm - @veeqo/ui - Versions diffs - 12.5.0 → 13.0.0 - Mend

@veeqo/ui 12.5.0 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/dist/components/Alerts/Alert/Alert.cjs CHANGED Viewed

@@ -26,8 +26,8 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
             Alerts_module[`${variant}-alert-variant`],
             className,
         ]), flexWrap: "nowrap", ...divProps },
-        React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
-            React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.default.createElement(FlexRow.FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: Alert_module.iconTextContainer },
+            React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: Alerts_module.icon, alignItems: "flex-start" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.default.createElement(FlexCol.FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
                 titleSlot || (React__default.default.createElement(Text.Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
                 messageSlot || React__default.default.createElement(Text.Text, { variant: "body" }, message)))),

package/dist/components/Alerts/Alert/Alert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,cAAc;AACrB,YAAAA,YAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAC,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;AACV,SAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,KACb,QAAQ,EAAA;QAEZJ,sBAAC,CAAA,aAAA,CAAAC,eAAO,IACN,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,~~OAAO~~,~~EACzC~~,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEE,YAAM,CAAC,iBAAiB,EAAA;AAEnC,YAAAH,sBAAA,CAAA,aAAA,CAACC,eAAO,EACN,EAAA,KAAK,EAAEI,2BAAa,CAAC,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAED,aAAW,CAAC,IAAI,EAC3B,UAAU,EAAC,~~OAAO~~,EAAA,~~EAEjB~~,QAAQ,IAAIJ,qCAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRN,sBAAC,CAAA,aAAA,CAAAO,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIP,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;AAEV,QAAAP,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,cAAc,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,EAAEE,YAAM,CAAC,qBAAqB,EAAA;YACzF,gBAAgB;YAEhB,YAAY,KACXH,sBAAA,CAAA,aAAA,CAACM,eAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAEH,YAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CH,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXR,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,SAAS,EAAEH,YAAM,CAAC,cAAc,EAAA;gBACvCH,sBAAC,CAAA,aAAA,CAAAQ,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}
1	+ {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["IconMap","React","FlexRow","buildClassnames","styles","alertStyles","assignCssVars","FlexCol","Text","Button","CrossIcon"],"mappings":"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"}

package/dist/components/Alerts/Alert/Alert.js CHANGED Viewed

@@ -20,8 +20,8 @@ const Alert = ({ size = 'base', variant = 'default', colours: passedColours, rig
             alertStyles[`${variant}-alert-variant`],
             className,
         ]), flexWrap: "nowrap", ...divProps },
-        React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'start', flexWrap: "nowrap", className: styles.iconTextContainer },
-            React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.createElement(FlexRow, { alignItems: isXsSize ? 'center' : 'flex-start', flexWrap: "nowrap", className: styles.iconTextContainer },
+            React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: passedColours === null || passedColours === undefined ? undefined : passedColours.primary }), className: alertStyles.icon, alignItems: "flex-start" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
             children || (React__default.createElement(FlexCol, { gap: isXsSize ? 'xs' : 'sm' },
                 titleSlot || (React__default.createElement(Text, { variant: "bodyBold", style: size === 'base' ? { lineHeight: '24px' } : {} }, title)),
                 messageSlot || React__default.createElement(Text, { variant: "body" }, message)))),

package/dist/components/Alerts/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAca,MAAA,KAAK,GAAG,CAAC,EACpB,IAAI,GAAG,MAAM,EACb,OAAO,GAAG,SAAS,EACnB,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,QAAQ,EACA,KAAI;AACf,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;AAEpC,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI;IAE9B,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EACN,EAAA,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,cAAc;AACrB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;YACvC,SAAS;AACV,SAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,KACb,QAAQ,EAAA;QAEZA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,~~OAAO~~,~~EACzC~~,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA;AAEnC,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,OAAO,EAAE,CAAC,EAC3D,SAAS,EAAE,WAAW,CAAC,IAAI,EAC3B,UAAU,EAAC,~~OAAO~~,EAAA,~~EAEjB~~,QAAQ,IAAIA,6BAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;AAET,YAAA,QAAQ,KACPA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAA;AACjC,gBAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,IAAI,KAAK,MAAM,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,EAC1E,EAAA,KAAK,CACD,CACR;AACA,gBAAA,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAQ,CAC7C,CACX,CACO;AAEV,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,cAAc,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAA;YACzF,gBAAgB;YAEhB,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,EAC5D,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,MAC1CA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,GAAK,WAAW,EAAA,EACxD,KAAK,CACC,CACV,CAAC,CACM,CACX;YAEA,YAAY,KACXA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA;gBACvCA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,CAAA,CACM,CACX,CACO,CACF;AAEd;;;;"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../src/components/Alerts/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../../Text';\nimport { Button } from '../../Button';\nimport { CrossIcon } from '../../../icons';\nimport { IconMap } from '../constants';\nimport { AlertProps } from './types';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { assignCssVars, buildClassnames } from '../../../utils';\n\nimport alertStyles from '../Alerts.module.scss';\nimport styles from './Alert.module.scss';\n\nexport const Alert = ({\n size = 'base',\n variant = 'default',\n colours: passedColours,\n rightActions,\n rightActionsSlot,\n title,\n titleSlot,\n messageSlot,\n message,\n children,\n iconSlot,\n onClickClose,\n className,\n ...divProps\n}: AlertProps) => {\n const DefaultIcon = IconMap[variant];\n\n const isXsSize = size === 'xs';\n\n return (\n <FlexRow\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.alertContainer,\n styles[`${size}-size`],\n alertStyles[`${variant}-alert-variant`],\n className,\n ])}\n flexWrap=\"nowrap\"\n {...divProps}\n >\n <FlexRow\n alignItems={isXsSize ? 'center' : 'flex-start'}\n flexWrap=\"nowrap\"\n className={styles.iconTextContainer}\n >\n <FlexRow\n style={assignCssVars({ iconColor: passedColours?.primary })}\n className={alertStyles.icon}\n alignItems=\"flex-start\"\n >\n {iconSlot \|\| <DefaultIcon role=\"presentation\" />}\n </FlexRow>\n\n {children \|\| (\n <FlexCol gap={isXsSize ? 'xs' : 'sm'}>\n {titleSlot \|\| (\n <Text variant=\"bodyBold\" style={size === 'base' ? { lineHeight: '24px' } : {}}>\n {title}\n </Text>\n )}\n {messageSlot \|\| <Text variant=\"body\">{message}</Text>}\n </FlexCol>\n )}\n </FlexRow>\n\n <FlexRow justifyContent=\"flex-end\" flexWrap=\"nowrap\" className={styles.rightActionsContainer}>\n {rightActionsSlot}\n\n {rightActions && (\n <FlexCol justifyContent=\"center\" className={styles.rightActions}>\n {rightActions.map(({ label, ...actionProps }) => (\n <Button key={label} type=\"button\" size=\"sm\" {...actionProps}>\n {label}\n </Button>\n ))}\n </FlexCol>\n )}\n\n {onClickClose && (\n <FlexCol className={styles.closeContainer}>\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n size=\"sm\"\n />\n </FlexCol>\n )}\n </FlexRow>\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/Flex/FlexCol/FlexCol.d.ts CHANGED Viewed

@@ -2,9 +2,9 @@ import React from 'react';
 import { FlexDefaultProps } from '../types';
 export declare const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps;
 export declare const FlexCol: React.ForwardRefExoticComponent<{
-    alignItems?: import("csstype").Property.AlignItems | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
+    justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/FlexRow/FlexRow.d.ts CHANGED Viewed

@@ -2,9 +2,9 @@ import React from 'react';
 import { FlexDefaultProps } from '../types';
 export declare const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps;
 export declare const FlexRow: React.ForwardRefExoticComponent<{
-    alignItems?: import("csstype").Property.AlignItems | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
+    justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
     gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Flex/types.d.ts CHANGED Viewed

@@ -1,11 +1,20 @@
 import { CSSProperties, HTMLAttributes } from 'react';
 declare const sizes: import("../../theme/modules/sizes").SizeScale;
+type JustifyContentValues = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type AlignItemsValues = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexWrapValues = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type FlexProps = {
-    alignItems?: CSSProperties['alignItems'];
-    justifyContent?: CSSProperties['justifyContent'];
+    alignItems?: AlignItemsValues;
+    justifyContent?: JustifyContentValues;
     gap?: keyof typeof sizes;
-    flexWrap?: CSSProperties['flexWrap'];
+    flexWrap?: FlexWrapValues;
     flexGrow?: CSSProperties['flexGrow'];
 } & HTMLAttributes<HTMLDivElement>;
-export type FlexDefaultProps = Pick<CSSProperties, 'alignItems' | 'justifyContent' | 'gap' | 'flexWrap' | 'flexGrow'>;
+export type FlexDefaultProps = {
+    alignItems: AlignItemsValues;
+    justifyContent: JustifyContentValues;
+    gap: keyof typeof sizes;
+    flexWrap: FlexWrapValues;
+    flexGrow: CSSProperties['flexGrow'];
+};
 export {};

package/dist/components/Pagination/styled.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const PageLimitContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    alignItems?: import("csstype").Property.AlignItems | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
+    alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
+    justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
     gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
-    flexWrap?: import("csstype").Property.FlexWrap | undefined;
+    flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
     flexGrow?: import("csstype").Property.FlexGrow | undefined;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/components/UploadFile/UploadFile.cjs CHANGED Viewed

@@ -1,143 +1,124 @@
 'use strict';
 var React = require('react');
+var index = require('../../theme/index.cjs');
+var CriticalIcon = require('../../icons/design-system/components/CriticalIcon.cjs');
+var LockIcon = require('../../icons/design-system/components/LockIcon.cjs');
 var styled$1 = require('./styled.cjs');
 var constants = require('./constants.cjs');
 var UploadCopy = require('./components/UploadCopy/UploadCopy.cjs');
-var setInputElFile = require('./utils/setInputElFile/setInputElFile.cjs');
+var DropCopy = require('./components/DropCopy/DropCopy.cjs');
 var getValidTypesString = require('./utils/getValidTypesString/getValidTypesString.cjs');
 var getFileSizeString = require('./utils/getFileSizeString/getFileSizeString.cjs');
 var getTypePropForInputEl = require('./utils/getTypePropForInputEl/getTypePropForInputEl.cjs');
 var styled = require('../../hoc/withLabels/styled.cjs');
-var UploadFileErrors = require('./components/UploadFileErrors/UploadFileErrors.cjs');
-var UploadedFile = require('./components/UploadedFile/UploadedFile.cjs');
+var UploadedFile = require('../UploadedFile/UploadedFile.cjs');
 var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var useUploadFile = require('./hooks/useUploadFile/useUploadFile.cjs');
+var useValidateInput = require('./hooks/useValidateInput/useValidateInput.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const UploadFile = React.forwardRef(({ id, name, maxBytes = 1000000, format = constants.FileSizeUnit.MB, fileTypes, label = 'Upload file', required, disabled, ...otherProps }, outerRef) => {
-    const inputRef = React.useRef(null);
-    React.useImperativeHandle(outerRef, () => inputRef.current, []);
-    const [file, setFile] = React.useState();
-    const [errorState, setErrorState] = React.useState(constants.InputState.VALID);
-    const isInvalidFormat = errorState === constants.InputState.INVALID_FORMAT || errorState === constants.InputState.INVALID_FORMAT_AND_SIZE;
-    const isOverMaxSize = errorState === constants.InputState.INVALID_SIZE || errorState === constants.InputState.INVALID_FORMAT_AND_SIZE;
+const UploadFile = React.forwardRef(({ id, name, maxBytes = constants.DEFAULT_MAXIMUM_FILE_BYTES, format = constants.FileSizeUnit.MB, fileTypes, disabled, multiple, label = multiple ? 'Upload files' : 'Upload file', hideUploadedFiles = false, onMaxFilesExceeded, maxFiles = constants.DEFAULT_MAXIMUM_MULTIPLE_FILES, disabledMessage, isDirty, errorMessage = '', ...otherProps }, outerRef) => {
+    var _a, _b;
+    const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } = useUploadFile.useUploadFile();
+    useValidateInput.useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });
+    React.useImperativeHandle(outerRef, () => inputRef.current, [inputRef]);
+    const [isDragOver, setIsDragOver] = React.useState(false);
     // Computed properties based on params
     const maxSizeCopy = getFileSizeString.getFileSizeString({ maxBytes, format });
     const acceptedTypesCopy = getValidTypesString.getValidTypesString({ fileTypes });
     const acceptedTypesForInputEl = getTypePropForInputEl.getTypePropForInputEl({ fileTypes });
-    const clearFileSelection = () => {
-        var _a;
-        if ((_a = inputRef.current) === null || _a === undefined ? undefined : _a.value)
-            inputRef.current.value = '';
-    };
-    // Tracks error states within the input element itself, using preset
-    // error messages and assigns these to the input component based on the file
-    const setInputValidation = ({ overMaxSize, invalidFormat, }) => {
-        var _a;
-        let error = constants.InputState.VALID;
-        if (invalidFormat && !overMaxSize) {
-            error = constants.InputState.INVALID_FORMAT;
-        }
-        else if (!invalidFormat && overMaxSize) {
-            error = constants.InputState.INVALID_SIZE;
-        }
-        else if (invalidFormat && overMaxSize) {
-            error = constants.InputState.INVALID_FORMAT_AND_SIZE;
+    const validateMaximumFiles = React.useCallback((files) => {
+        if ((files === null || files === undefined ? undefined : files.length) && (files === null || files === undefined ? undefined : files.length) > maxFiles) {
+            clearFileSelection();
+            onMaxFilesExceeded === null || onMaxFilesExceeded === undefined ? undefined : onMaxFilesExceeded();
+            return false;
         }
-        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.setCustomValidity(error);
-        setErrorState(error);
-    };
+        return true;
+    }, [clearFileSelection, maxFiles, onMaxFilesExceeded]);
     // Processes file and updates the UI appropriately:
     const updateFiles = React.useCallback((files) => {
         if (!files.length) {
-            setInputValidation({ invalidFormat: true });
             return;
         }
-        const [newFile] = files;
-        const hasExceededMaxSize = newFile.size > maxBytes;
-        const [, extension] = newFile.type.split('/');
-        const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);
-        const hasInvalidFormat = !isTypeValid;
-        if (hasExceededMaxSize || hasInvalidFormat) {
-            // Empty the inputRef's read-only fileList by clearing the value attribute,
-            // since we have an invalid input.
-            clearFileSelection();
-        }
-        else {
-            // Update the files attribute of the input el, with the new file(s)
-            setInputElFile.setInputElFile({ fileList: files, elementId: id });
-        }
-        setInputValidation({
-            invalidFormat: hasInvalidFormat,
-            overMaxSize: hasExceededMaxSize,
-        });
-        setFile(newFile);
-    }, [fileTypes, id, maxBytes]);
+        setFileList(files);
+    }, [setFileList]);
     // For focussing of input el and updating drop UI
     const onDragEnter = (event) => {
         var _a;
         event.preventDefault();
+        setIsDragOver(true);
         (_a = inputRef.current) === null || _a === undefined ? undefined : _a.focus();
     };
     // For unfocussing of input el and updating drop UI
     const onDragLeave = (event) => {
-        var _a;
         event.preventDefault();
-        (_a = inputRef.current) === null || _a === undefined ? undefined : _a.blur();
+        setIsDragOver(false);
     };
     // Prevents default browser behaviour
     const onDragOver = (event) => event.preventDefault();
     // Process file when dropped into eligible area
     const onDrop = (event) => {
         event.preventDefault();
+        setIsDragOver(false);
         // Prevent reactions on dragging events that do not contain files
         if (!event.dataTransfer.files.length)
             return;
-        updateFiles(event.dataTransfer.files);
+        const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);
+        if (canUpdateFiles) {
+            updateFiles(event.dataTransfer.files);
+        }
     };
-    // Removes input el's files, clears errors and removes file from react component
-    const resetSelection = React.useCallback(() => {
-        clearFileSelection();
-        setFile(undefined);
-        setInputValidation({
-            invalidFormat: false,
-            overMaxSize: false,
-        });
-    }, []);
     // Updates UI based on a native file input change. Attached via useEffect below
-    const onInputChange = React.useCallback(() => {
-        var _a;
-        const files = (_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.files;
-        if ((files === null || files === undefined ? undefined : files.length) && (files === null || files === undefined ? undefined : files.length) > 0)
+    const onChange = React.useCallback(() => {
+        var _a, _b;
+        const canUpdateFiles = validateMaximumFiles((_a = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _a === undefined ? undefined : _a.files);
+        const files = (_b = inputRef === null || inputRef === undefined ? undefined : inputRef.current) === null || _b === undefined ? undefined : _b.files;
+        if (canUpdateFiles && files) {
             updateFiles(files);
-        else
-            resetSelection();
-    }, [resetSelection, updateFiles]);
+        }
+        else if (fileList) {
+            updateFiles(fileList);
+        }
+    }, [validateMaximumFiles, inputRef, fileList, updateFiles]);
     React.useEffect(() => {
         const ref = inputRef === null || inputRef === undefined ? undefined : inputRef.current;
-        ref === null || ref === undefined ? undefined : ref.addEventListener('change', onInputChange);
-        ref === null || ref === undefined ? undefined : ref.addEventListener('cancel', resetSelection);
+        ref === null || ref === undefined ? undefined : ref.addEventListener('change', onChange);
+        ref === null || ref === undefined ? undefined : ref.addEventListener('cancel', onCancel);
         return () => {
-            ref === null || ref === undefined ? undefined : ref.removeEventListener('change', onInputChange);
-            ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', resetSelection);
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('change', onChange);
+            ref === null || ref === undefined ? undefined : ref.removeEventListener('cancel', onCancel);
         };
-    }, [onInputChange, resetSelection]);
+    }, [onChange, onCancel, inputRef]);
+    const hasError = !!((errorMessage || ((_a = inputRef.current) === null || _a === undefined ? undefined : _a.validationMessage)) && !(fileList === null || fileList === undefined ? undefined : fileList.length));
     return (React__default.default.createElement(styled.RootStack, { spacing: "xs", alignX: "stretch" },
         React__default.default.createElement(styled.Label, { htmlFor: id },
             label,
             React__default.default.createElement(FlexCol.FlexCol, null,
                 React__default.default.createElement(styled.Hint, null,
-                    React__default.default.createElement("div", null, acceptedTypesCopy),
-                    React__default.default.createElement("div", null, maxSizeCopy)),
-                React__default.default.createElement(styled$1.DropZoneContainer, { "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
-                    React__default.default.createElement(UploadCopy.UploadCopy, null),
-                    React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, required: required, disabled: disabled, ...otherProps })))),
+                    maxSizeCopy,
+                    React__default.default.createElement("br", null),
+                    acceptedTypesCopy),
+                React__default.default.createElement(styled$1.DropZoneContainer, { hasError: hasError, isDragOver: isDragOver, "data-testid": "drop-zone-container", onDrop: onDrop, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave },
+                    isDragOver ? React__default.default.createElement(DropCopy.DropCopy, null) : React__default.default.createElement(UploadCopy.UploadCopy, null),
+                    React__default.default.createElement("input", { ref: inputRef, id: id, type: "file", accept: acceptedTypesForInputEl, name: name, disabled: disabled, multiple: multiple, ...otherProps })))),
         React__default.default.createElement(FlexCol.FlexCol, null,
-            React__default.default.createElement(UploadedFile.UploadedFile, { file: file, resetSelection: resetSelection, disabled: disabled }),
-            React__default.default.createElement(UploadFileErrors.UploadFileErrors, { acceptedTypesCopy: isInvalidFormat ? acceptedTypesCopy : undefined, maxSizeCopy: isOverMaxSize ? maxSizeCopy : undefined }))));
+            hasError && (React__default.default.createElement(FlexRow.FlexRow, null,
+                React__default.default.createElement(CriticalIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.secondary.red.base }),
+                React__default.default.createElement(styled.Error, null, errorMessage || ((_b = inputRef.current) === null || _b === undefined ? undefined : _b.validationMessage)))),
+            disabledMessage && (React__default.default.createElement(FlexRow.FlexRow, { id: `${id}-disabled` },
+                React__default.default.createElement(LockIcon.ReactComponent, { width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light }),
+                React__default.default.createElement(styled.Disabled, null, disabledMessage))),
+            !hideUploadedFiles &&
+                fileList && [
+                Array.from(fileList).map((file) => {
+                    return (React__default.default.createElement(UploadedFile.UploadedFile, { key: `${file.name}`, file: file, onRemoveFile: removeFileFromList, disabled: disabled, format: format, maxBytes: maxBytes, fileTypes: fileTypes }));
+                }),
+            ])));
 });
 exports.UploadFile = UploadFile;

package/dist/components/UploadFile/UploadFile.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { DropZoneContainer } from './styled';\nimport { InputState, FileSizeUnit } from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { setInputElFile } from './utils/setInputElFile/setInputElFile';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadFileErrors } from './components/UploadFileErrors/UploadFileErrors';\nimport { UploadedFile } from './components/UploadedFile/UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = 1000000,\n format = FileSizeUnit.MB,\n fileTypes,\n label = 'Upload file',\n required,\n disabled,\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const inputRef = useRef<HTMLInputElement \| null>(null);\n useImperativeHandle(outerRef, () => inputRef.current!, []);\n\n const [file, setFile] = useState<File>();\n const [errorState, setErrorState] = useState(InputState.VALID);\n\n const isInvalidFormat =\n errorState === InputState.INVALID_FORMAT \|\| errorState === InputState.INVALID_FORMAT_AND_SIZE;\n const isOverMaxSize =\n errorState === InputState.INVALID_SIZE \|\| errorState === InputState.INVALID_FORMAT_AND_SIZE;\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const clearFileSelection = () => {\n if (inputRef.current?.value) inputRef.current.value = '';\n };\n\n // Tracks error states within the input element itself, using preset\n // error messages and assigns these to the input component based on the file\n const setInputValidation = ({\n overMaxSize,\n invalidFormat,\n }: {\n overMaxSize?: boolean;\n invalidFormat?: boolean;\n }) => {\n let error = InputState.VALID;\n if (invalidFormat && !overMaxSize) {\n error = InputState.INVALID_FORMAT;\n } else if (!invalidFormat && overMaxSize) {\n error = InputState.INVALID_SIZE;\n } else if (invalidFormat && overMaxSize) {\n error = InputState.INVALID_FORMAT_AND_SIZE;\n }\n inputRef.current?.setCustomValidity(error);\n setErrorState(error);\n };\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n setInputValidation({ invalidFormat: true });\n return;\n }\n\n const [newFile] = files;\n const hasExceededMaxSize = newFile.size > maxBytes;\n\n const [, extension] = newFile.type.split('/');\n const isTypeValid = fileTypes.find((validType) => validType.substring(1) === extension);\n const hasInvalidFormat = !isTypeValid;\n\n if (hasExceededMaxSize \|\| hasInvalidFormat) {\n // Empty the inputRef's read-only fileList by clearing the value attribute,\n // since we have an invalid input.\n clearFileSelection();\n } else {\n // Update the files attribute of the input el, with the new file(s)\n setInputElFile({ fileList: files, elementId: id });\n }\n setInputValidation({\n invalidFormat: hasInvalidFormat,\n overMaxSize: hasExceededMaxSize,\n });\n setFile(newFile);\n },\n [fileTypes, id, maxBytes],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n inputRef.current?.blur();\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n updateFiles(event.dataTransfer.files);\n };\n\n // Removes input el's files, clears errors and removes file from react component\n const resetSelection = useCallback(() => {\n clearFileSelection();\n setFile(undefined);\n setInputValidation({\n invalidFormat: false,\n overMaxSize: false,\n });\n }, []);\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onInputChange = useCallback(() => {\n const files = inputRef?.current?.files;\n if (files?.length && files?.length > 0) updateFiles(files);\n else resetSelection();\n }, [resetSelection, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onInputChange);\n ref?.addEventListener('cancel', resetSelection);\n\n return () => {\n ref?.removeEventListener('change', onInputChange);\n ref?.removeEventListener('cancel', resetSelection);\n };\n }, [onInputChange, resetSelection]);\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n <div>{acceptedTypesCopy}</div>\n <div>{maxSizeCopy}</div>\n </Hint>\n <DropZoneContainer\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n <UploadCopy />\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n required={required}\n disabled={disabled}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n <UploadedFile file={file} resetSelection={resetSelection} disabled={disabled} />\n <UploadFileErrors\n acceptedTypesCopy={isInvalidFormat ? acceptedTypesCopy : undefined}\n maxSizeCopy={isOverMaxSize ? maxSizeCopy : undefined}\n />\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["forwardRef","FileSizeUnit","useRef","useImperativeHandle","useState","InputState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","setInputElFile","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","UploadCopy","UploadedFile","UploadFileErrors"],"mappings":"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"}
1	+ {"version":3,"file":"UploadFile.cjs","sources":["../../../src/components/UploadFile/UploadFile.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useState,\n DragEvent,\n forwardRef,\n useImperativeHandle,\n} from 'react';\nimport { theme } from 'Theme';\nimport { CriticalIcon, LockIcon } from '../../icons';\nimport { DropZoneContainer } from './styled';\nimport {\n FileSizeUnit,\n DEFAULT_MAXIMUM_MULTIPLE_FILES,\n DEFAULT_MAXIMUM_FILE_BYTES,\n} from './constants';\nimport { UploadCopy } from './components/UploadCopy/UploadCopy';\nimport { DropCopy } from './components/DropCopy/DropCopy';\nimport { getFileSizeString, getTypePropForInputEl, getValidTypesString } from './utils';\nimport { UploadFileProps } from './types';\nimport { Disabled, Error, Hint, Label, RootStack } from '../../hoc/withLabels/styled';\nimport { UploadedFile } from '../UploadedFile';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { useUploadFile } from './hooks/useUploadFile';\nimport { useValidateInput } from './hooks/useValidateInput';\n\nexport const UploadFile = forwardRef<HTMLInputElement, UploadFileProps>(\n (\n {\n id,\n name,\n maxBytes = DEFAULT_MAXIMUM_FILE_BYTES,\n format = FileSizeUnit.MB,\n fileTypes,\n disabled,\n multiple,\n label = multiple ? 'Upload files' : 'Upload file',\n hideUploadedFiles = false,\n onMaxFilesExceeded,\n maxFiles = DEFAULT_MAXIMUM_MULTIPLE_FILES,\n disabledMessage,\n isDirty,\n errorMessage = '',\n ...otherProps\n }: UploadFileProps,\n outerRef,\n ) => {\n const { inputRef, fileList, setFileList, onCancel, removeFileFromList, clearFileSelection } =\n useUploadFile();\n\n useValidateInput({ inputRef, fileList, fileTypes, maxBytes, errorMessage });\n\n useImperativeHandle(outerRef, () => inputRef.current!, [inputRef]);\n\n const [isDragOver, setIsDragOver] = useState(false);\n\n // Computed properties based on params\n const maxSizeCopy = getFileSizeString({ maxBytes, format });\n const acceptedTypesCopy = getValidTypesString({ fileTypes });\n const acceptedTypesForInputEl = getTypePropForInputEl({ fileTypes });\n\n const validateMaximumFiles = useCallback(\n (files: FileList \| null \| undefined) => {\n if (files?.length && files?.length > maxFiles) {\n clearFileSelection();\n onMaxFilesExceeded?.();\n return false;\n }\n return true;\n },\n [clearFileSelection, maxFiles, onMaxFilesExceeded],\n );\n\n // Processes file and updates the UI appropriately:\n const updateFiles = useCallback(\n (files: FileList) => {\n if (!files.length) {\n return;\n }\n\n setFileList(files);\n },\n [setFileList],\n );\n\n // For focussing of input el and updating drop UI\n const onDragEnter = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(true);\n inputRef.current?.focus();\n };\n\n // For unfocussing of input el and updating drop UI\n const onDragLeave = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n };\n\n // Prevents default browser behaviour\n const onDragOver = (event: DragEvent<HTMLElement>) => event.preventDefault();\n\n // Process file when dropped into eligible area\n const onDrop = (event: DragEvent<HTMLElement>) => {\n event.preventDefault();\n setIsDragOver(false);\n // Prevent reactions on dragging events that do not contain files\n if (!event.dataTransfer.files.length) return;\n\n const canUpdateFiles = validateMaximumFiles(event.dataTransfer.files);\n if (canUpdateFiles) {\n updateFiles(event.dataTransfer.files);\n }\n };\n\n // Updates UI based on a native file input change. Attached via useEffect below\n const onChange = useCallback(() => {\n const canUpdateFiles = validateMaximumFiles(inputRef?.current?.files);\n const files = inputRef?.current?.files;\n if (canUpdateFiles && files) {\n updateFiles(files);\n } else if (fileList) {\n updateFiles(fileList);\n }\n }, [validateMaximumFiles, inputRef, fileList, updateFiles]);\n\n useEffect(() => {\n const ref = inputRef?.current;\n ref?.addEventListener('change', onChange);\n ref?.addEventListener('cancel', onCancel);\n\n return () => {\n ref?.removeEventListener('change', onChange);\n ref?.removeEventListener('cancel', onCancel);\n };\n }, [onChange, onCancel, inputRef]);\n\n const hasError = !!((errorMessage \|\| inputRef.current?.validationMessage) && !fileList?.length);\n\n return (\n <RootStack spacing=\"xs\" alignX=\"stretch\">\n <Label htmlFor={id}>\n {label}\n <FlexCol>\n <Hint>\n {maxSizeCopy}\n <br />\n {acceptedTypesCopy}\n </Hint>\n <DropZoneContainer\n hasError={hasError}\n isDragOver={isDragOver}\n data-testid=\"drop-zone-container\"\n onDrop={onDrop}\n onDragEnter={onDragEnter}\n onDragOver={onDragOver}\n onDragLeave={onDragLeave}\n >\n {isDragOver ? <DropCopy /> : <UploadCopy />}\n <input\n ref={inputRef}\n id={id}\n type=\"file\"\n accept={acceptedTypesForInputEl}\n name={name}\n disabled={disabled}\n multiple={multiple}\n {...otherProps}\n />\n </DropZoneContainer>\n </FlexCol>\n </Label>\n <FlexCol>\n {hasError && (\n <FlexRow>\n <CriticalIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.secondary.red.base}\n />\n <Error>{errorMessage \|\| inputRef.current?.validationMessage}</Error>\n </FlexRow>\n )}\n {disabledMessage && (\n <FlexRow id={`${id}-disabled`}>\n <LockIcon\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n <Disabled>{disabledMessage}</Disabled>\n </FlexRow>\n )}\n {!hideUploadedFiles &&\n fileList && [\n Array.from(fileList).map((file) => {\n return (\n <UploadedFile\n key={`${file.name}`}\n file={file}\n onRemoveFile={removeFileFromList}\n disabled={disabled}\n format={format}\n maxBytes={maxBytes}\n fileTypes={fileTypes}\n />\n );\n }),\n ]}\n </FlexCol>\n </RootStack>\n );\n },\n);\n"],"names":["forwardRef","DEFAULT_MAXIMUM_FILE_BYTES","FileSizeUnit","DEFAULT_MAXIMUM_MULTIPLE_FILES","useUploadFile","useValidateInput","useImperativeHandle","useState","getFileSizeString","getValidTypesString","getTypePropForInputEl","useCallback","useEffect","React","RootStack","Label","FlexCol","Hint","DropZoneContainer","DropCopy","UploadCopy","FlexRow","CriticalIcon","theme","Error","LockIcon","Disabled","UploadedFile"],"mappings":"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"}