npm - @flipdish/portal-library - Versions diffs - 8.4.3 → 8.5.1 - Mend

@flipdish/portal-library 8.4.3 → 8.5.1

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

package/dist/components/molecules/Alert/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Alert"),a=require("@mui/material/AlertTitle"),n=require("@mui/material/Box"),i=require("@mui/material/styles"),s=require("../../../icons/Alert/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../../icons/CheckmarkCircle/index.cjs.js"),c=require("../../../icons/Diamond/index.cjs.js"),m=require("../../../icons/InformationCircle/index.cjs.js"),d=require("../../atoms/Button/index.cjs.js"),u=require("../../atoms/Link/index.cjs.js");const x={neutral:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-strong"]}),brand:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-primary"]}),destructive:t=>e.jsx(l,{color:t.palette.semantic.icon["icon-error"]}),warning:t=>e.jsx(s,{color:t.palette.semantic.icon["icon-warning"]}),information:t=>e.jsx(m,{color:t.palette.semantic.icon["icon-information"]}),"neutral-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),"brand-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),success:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-success"]})},p={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},k=(e,t)=>x[t](e),f=(e,t)=>p.background[t](e),b=(e,t)=>p.border[t](e),w=(e,t)=>p.header[t](e),j=(e,t)=>p.text[t](e),g=i.styled(n)((()=>({marginTop:"16px"}))),v=i.styled(u.Link)((()=>({padding:0}))),y=i.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:f(e,t),border:"1px solid",borderColor:b(e,t),color:j(e,t)}))),h=t.memo((({title:r,description:s,children:l,tone:o="neutral",icon:c,onClose:m,className:u,fdKey:x,action:p})=>{const f=i.useTheme(),b=t.useId(),j=l??s,h=Boolean(r),q=null!=j,C=h?`alert-title-${x??b}`:void 0,$=q?`alert-description-${x??b}`:void 0;return e.jsxs(y,{"aria-describedby":$,"aria-labelledby":C,className:u,"data-fd":x,icon:void 0===c?k(f,o):c,onClose:m,role:"alert",tone:o,children:[h&&e.jsx(a,{color:w(f,o),id:C,children:r}),q&&e.jsx(n,{id:$,children:j}),(()=>{if(!p)return null;const t=r?`${p.label} - ${r}`:p.label;if("link"===p.kind){const r=p.fdKey??`action-link-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(v,{"aria-label":t,fdKey:r,href:p.href,rel:p.rel,target:p.target,children:p.label})})}const a=p.fdKey??`action-button-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(d.Button,{"aria-label":t,fdKey:a,onClick:p.onClick,size:"small",variant:p.type??"primary",children:p.label})})})()]})}));h.displayName="Alert",module.exports=h;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Alert"),a=require("@mui/material/AlertTitle"),n=require("@mui/material/Box"),i=require("@mui/material/styles"),s=require("../../../icons/Alert/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../../icons/CheckmarkCircle/index.cjs.js"),c=require("../../../icons/Diamond/index.cjs.js"),d=require("../../../icons/InformationCircle/index.cjs.js"),m=require("../../atoms/Button/index.cjs.js"),u=require("../../atoms/Link/index.cjs.js");const x={neutral:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-strong"]}),brand:t=>e.jsx(c,{color:t.palette.semantic.icon["icon-primary"]}),destructive:t=>e.jsx(l,{color:t.palette.semantic.icon["icon-error"]}),warning:t=>e.jsx(s,{color:t.palette.semantic.icon["icon-warning"]}),information:t=>e.jsx(d,{color:t.palette.semantic.icon["icon-information"]}),"neutral-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),"brand-inverse":t=>e.jsx(c,{color:t.palette.semantic.icon["icon-inverse"]}),success:t=>e.jsx(o,{color:t.palette.semantic.icon["icon-success"]})},p={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},k=(e,t)=>x[t](e),f=(e,t)=>p.background[t](e),b=(e,t)=>p.border[t](e),j=(e,t)=>p.header[t](e),w=(e,t)=>p.text[t](e),g=i.styled(n)((()=>({marginTop:"16px"}))),v=i.styled(u.Link)((()=>({padding:0}))),y=i.styled(r,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:f(e,t),border:"1px solid",borderColor:b(e,t),color:w(e,t)}))),h=t.memo((({title:r,description:s,children:l,tone:o="neutral",icon:c,onClose:d,className:u,fdKey:x,action:p})=>{const f=i.useTheme(),b=t.useId(),w=l??s,h=Boolean(r),q=null!=w,C=h?`alert-title-${x??b}`:void 0,$=q?`alert-description-${x??b}`:void 0;return e.jsxs(y,{"aria-describedby":$,"aria-labelledby":C,className:u,"data-fd":x,icon:void 0===c?e.jsx("span",{"data-fd":"alert-icon",children:k(f,o)}):c??!1,onClose:d,role:"alert",tone:o,children:[h&&e.jsx(a,{color:j(f,o),id:C,children:r}),q&&e.jsx(n,{id:$,children:w}),(()=>{if(!p)return null;const t=r?`${p.label} - ${r}`:p.label;if("link"===p.kind){const r=p.fdKey??`action-link-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(v,{"aria-label":t,fdKey:r,href:p.href,rel:p.rel,target:p.target,children:p.label})})}const a=p.fdKey??`action-button-${p.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(g,{children:e.jsx(m.Button,{"aria-label":t,fdKey:a,onClick:p.onClick,size:"small",variant:p.type??"primary",children:p.label})})})()]})}));h.displayName="Alert",module.exports=h;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/Alert/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert /\nexport type AlertTones =\n \| 'brand-inverse'\n \| 'brand'\n \| 'destructive'\n \| 'information'\n \| 'neutral-inverse'\n \| 'neutral'\n \| 'success'\n \| 'warning';\n\n/* Props for the Alert component /\nexport interface AlertProps {\n /* Optional main heading text of the alert /\n title?: string;\n /* Detailed description text of the alert /\n description?: string;\n /* Optional custom content; when provided it replaces description /\n children?: ReactNode;\n /* Visual tone of the alert /\n tone?: AlertTones;\n /* Optional icon override; pass null to hide the icon /\n icon?: ReactNode \| null;\n /* Callback function when the alert is closed /\n onClose?: () => void;\n /* Action configuration (button by default, or link) /\n action?: AlertAction;\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n fdKey?: string;\n}\n\nexport type AlertAction =\n \| {\n /* Defaults to button when omitted /\n kind?: 'button';\n /* Text label for the action button /\n label: string;\n /* Visual style of the action button /\n type?: ButtonType;\n /* Callback function when the action button is clicked /\n onClick: () => void;\n /* Test ID for the action button /\n fdKey?: string;\n }\n \| {\n /* Render a link action /\n kind: 'link';\n /* Text label for the link /\n label: string;\n /* Destination URL /\n href: string;\n /* Target for the link /\n target?: '_blank' \| '_parent' \| '_self' \| '_top';\n /* rel attribute for the link /\n rel?: string;\n /* Test ID for the link /\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n ),\n};\n\nconst COLOURS = {\n background: {\n neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n },\n border: {\n neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n 'neutral-inverse': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n },\n text: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/\n Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({\n title,\n description,\n children,\n tone = 'neutral',\n icon,\n onClose,\n className,\n fdKey,\n action,\n }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const content = children ?? description;\n const hasTitle = Boolean(title);\n const hasContent = content !== undefined && content !== null;\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n const renderAction = (): JSX.Element \| null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? getIcon(theme, tone) : icon}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n {hasContent && <Box id={descriptionId}>{content}</Box>}\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert /\nexport type AlertTones =\n \| 'brand-inverse'\n \| 'brand'\n \| 'destructive'\n \| 'information'\n \| 'neutral-inverse'\n \| 'neutral'\n \| 'success'\n \| 'warning';\n\n/* Props for the Alert component /\nexport interface AlertProps {\n /* Optional main heading text of the alert /\n title?: string;\n /* Detailed description text of the alert /\n description?: string;\n /* Optional custom content; when provided it replaces description /\n children?: ReactNode;\n /* Visual tone of the alert /\n tone?: AlertTones;\n /* Optional icon override; pass null to hide the icon /\n icon?: ReactNode \| null;\n /* Callback function when the alert is closed /\n onClose?: () => void;\n /* Action configuration (button by default, or link) /\n action?: AlertAction;\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n fdKey?: string;\n}\n\nexport type AlertAction =\n \| {\n /* Defaults to button when omitted /\n kind?: 'button';\n /* Text label for the action button /\n label: string;\n /* Visual style of the action button /\n type?: ButtonType;\n /* Callback function when the action button is clicked /\n onClick: () => void;\n /* Test ID for the action button /\n fdKey?: string;\n }\n \| {\n /* Render a link action /\n kind: 'link';\n /* Text label for the link /\n label: string;\n /* Destination URL /\n href: string;\n /* Target for the link /\n target?: '_blank' \| '_parent' \| '_self' \| '_top';\n /* rel attribute for the link /\n rel?: string;\n /* Test ID for the link /\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n ),\n};\n\nconst COLOURS = {\n background: {\n neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n },\n border: {\n neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n 'neutral-inverse': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n },\n text: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/\n Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({\n title,\n description,\n children,\n tone = 'neutral',\n icon,\n onClose,\n className,\n fdKey,\n action,\n }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const content = children ?? description;\n const hasTitle = Boolean(title);\n const hasContent = content !== undefined && content !== null;\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n const renderAction = (): JSX.Element \| null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? <span data-fd=\"alert-icon\">{getIcon(theme, tone)}</span> : (icon ?? false)}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n {hasContent && <Box id={descriptionId}>{content}</Box>}\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}

package/dist/components/molecules/Alert/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useId as a}from"react";import n from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import o from"@mui/material/Box";import{styled as l,useTheme as s}from"@mui/material/styles";import c from"../../../icons/Alert/index.js";import m from"../../../icons/CancelCircle/index.js";import p from"../../../icons/CheckmarkCircle/index.js";import d from"../../../icons/Diamond/index.js";import f from"../../../icons/InformationCircle/index.js";import{Button as x}from"../../atoms/Button/index.js";import{Link as k}from"../../atoms/Link/index.js";const u={neutral:e=>t(d,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(d,{color:e.palette.semantic.icon["icon-primary"]}),destructive:e=>t(m,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(c,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(f,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(d,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(p,{color:e.palette.semantic.icon["icon-success"]})},b={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},w=(e,t)=>u[t](e),g=(e,t)=>b.background[t](e),v=(e,t)=>b.border[t](e),h=(e,t)=>b.header[t](e),y=(e,t)=>b.text[t](e),C=l(o)((()=>({marginTop:"16px"}))),j=l(k)((()=>({padding:0}))),$=l(n,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:g(e,t),border:"1px solid",borderColor:v(e,t),color:y(e,t)}))),K=r((({title:r,description:n,children:l,tone:c="neutral",icon:m,onClose:p,className:d,fdKey:f,action:k})=>{const u=s(),b=a(),g=l??n,v=Boolean(r),y=null!=g,K=v?`alert-title-${f??b}`:void 0,A=y?`alert-description-${f??b}`:void 0;return e($,{"aria-describedby":A,"aria-labelledby":K,className:d,"data-fd":f,icon:void 0===m?w(u,c):m,onClose:p,role:"alert",tone:c,children:[v&&t(i,{color:h(u,c),id:K,children:r}),y&&t(o,{id:A,children:g}),(()=>{if(!k)return null;const e=r?`${k.label} - ${r}`:k.label;if("link"===k.kind){const r=k.fdKey??`action-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(j,{"aria-label":e,fdKey:r,href:k.href,rel:k.rel,target:k.target,children:k.label})})}const a=k.fdKey??`action-button-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(x,{"aria-label":e,fdKey:a,onClick:k.onClick,size:"small",variant:k.type??"primary",children:k.label})})})()]})}));K.displayName="Alert";export{K as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useId as a}from"react";import n from"@mui/material/Alert";import i from"@mui/material/AlertTitle";import o from"@mui/material/Box";import{styled as l,useTheme as s}from"@mui/material/styles";import c from"../../../icons/Alert/index.js";import m from"../../../icons/CancelCircle/index.js";import d from"../../../icons/CheckmarkCircle/index.js";import p from"../../../icons/Diamond/index.js";import f from"../../../icons/InformationCircle/index.js";import{Button as x}from"../../atoms/Button/index.js";import{Link as k}from"../../atoms/Link/index.js";const u={neutral:e=>t(p,{color:e.palette.semantic.icon["icon-strong"]}),brand:e=>t(p,{color:e.palette.semantic.icon["icon-primary"]}),destructive:e=>t(m,{color:e.palette.semantic.icon["icon-error"]}),warning:e=>t(c,{color:e.palette.semantic.icon["icon-warning"]}),information:e=>t(f,{color:e.palette.semantic.icon["icon-information"]}),"neutral-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),"brand-inverse":e=>t(p,{color:e.palette.semantic.icon["icon-inverse"]}),success:e=>t(d,{color:e.palette.semantic.icon["icon-success"]})},b={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":e=>"transparent","brand-inverse":e=>"transparent"},header:{neutral:e=>e.palette.semantic.text["text-strong"],brand:e=>e.palette.semantic.text["text-strong"],destructive:e=>e.palette.semantic.text["text-strong"],warning:e=>e.palette.semantic.text["text-strong"],success:e=>e.palette.semantic.text["text-strong"],information:e=>e.palette.semantic.text["text-strong"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-strong"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-strong"]},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},w=(e,t)=>u[t](e),g=(e,t)=>b.background[t](e),v=(e,t)=>b.border[t](e),h=(e,t)=>b.header[t](e),y=(e,t)=>b.text[t](e),C=l(o)((()=>({marginTop:"16px"}))),j=l(k)((()=>({padding:0}))),$=l(n,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({backgroundColor:g(e,t),border:"1px solid",borderColor:v(e,t),color:y(e,t)}))),K=r((({title:r,description:n,children:l,tone:c="neutral",icon:m,onClose:d,className:p,fdKey:f,action:k})=>{const u=s(),b=a(),g=l??n,v=Boolean(r),y=null!=g,K=v?`alert-title-${f??b}`:void 0,A=y?`alert-description-${f??b}`:void 0;return e($,{"aria-describedby":A,"aria-labelledby":K,className:p,"data-fd":f,icon:void 0===m?t("span",{"data-fd":"alert-icon",children:w(u,c)}):m??!1,onClose:d,role:"alert",tone:c,children:[v&&t(i,{color:h(u,c),id:K,children:r}),y&&t(o,{id:A,children:g}),(()=>{if(!k)return null;const e=r?`${k.label} - ${r}`:k.label;if("link"===k.kind){const r=k.fdKey??`action-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(j,{"aria-label":e,fdKey:r,href:k.href,rel:k.rel,target:k.target,children:k.label})})}const a=k.fdKey??`action-button-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return t(C,{children:t(x,{"aria-label":e,fdKey:a,onClick:k.onClick,size:"small",variant:k.type??"primary",children:k.label})})})()]})}));K.displayName="Alert";export{K as default};
 //# sourceMappingURL=index.js.map

package/dist/components/molecules/Alert/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert /\nexport type AlertTones =\n \| 'brand-inverse'\n \| 'brand'\n \| 'destructive'\n \| 'information'\n \| 'neutral-inverse'\n \| 'neutral'\n \| 'success'\n \| 'warning';\n\n/* Props for the Alert component /\nexport interface AlertProps {\n /* Optional main heading text of the alert /\n title?: string;\n /* Detailed description text of the alert /\n description?: string;\n /* Optional custom content; when provided it replaces description /\n children?: ReactNode;\n /* Visual tone of the alert /\n tone?: AlertTones;\n /* Optional icon override; pass null to hide the icon /\n icon?: ReactNode \| null;\n /* Callback function when the alert is closed /\n onClose?: () => void;\n /* Action configuration (button by default, or link) /\n action?: AlertAction;\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n fdKey?: string;\n}\n\nexport type AlertAction =\n \| {\n /* Defaults to button when omitted /\n kind?: 'button';\n /* Text label for the action button /\n label: string;\n /* Visual style of the action button /\n type?: ButtonType;\n /* Callback function when the action button is clicked /\n onClick: () => void;\n /* Test ID for the action button /\n fdKey?: string;\n }\n \| {\n /* Render a link action /\n kind: 'link';\n /* Text label for the link /\n label: string;\n /* Destination URL /\n href: string;\n /* Target for the link /\n target?: '_blank' \| '_parent' \| '_self' \| '_top';\n /* rel attribute for the link /\n rel?: string;\n /* Test ID for the link /\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n ),\n};\n\nconst COLOURS = {\n background: {\n neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n },\n border: {\n neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n 'neutral-inverse': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n },\n text: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/\n Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({\n title,\n description,\n children,\n tone = 'neutral',\n icon,\n onClose,\n className,\n fdKey,\n action,\n }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const content = children ?? description;\n const hasTitle = Boolean(title);\n const hasContent = content !== undefined && content !== null;\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n const renderAction = (): JSX.Element \| null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? getIcon(theme, tone) : icon}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n {hasContent && <Box id={descriptionId}>{content}</Box>}\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":["import { memo, type ReactNode, useId } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\nimport MuiAlertTitle from '@mui/material/AlertTitle';\nimport Box from '@mui/material/Box';\nimport { styled, type Theme, useTheme } from '@mui/material/styles';\n\nimport AlertIcon from '../../../icons/Alert';\nimport CancelCircleIcon from '../../../icons/CancelCircle';\nimport CheckmarkCircleIcon from '../../../icons/CheckmarkCircle';\nimport DiamondIcon from '../../../icons/Diamond';\nimport InformationCircleIcon from '../../../icons/InformationCircle';\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Link from '../../atoms/Link';\n\n/** Visual tone of the alert /\nexport type AlertTones =\n \| 'brand-inverse'\n \| 'brand'\n \| 'destructive'\n \| 'information'\n \| 'neutral-inverse'\n \| 'neutral'\n \| 'success'\n \| 'warning';\n\n/* Props for the Alert component /\nexport interface AlertProps {\n /* Optional main heading text of the alert /\n title?: string;\n /* Detailed description text of the alert /\n description?: string;\n /* Optional custom content; when provided it replaces description /\n children?: ReactNode;\n /* Visual tone of the alert /\n tone?: AlertTones;\n /* Optional icon override; pass null to hide the icon /\n icon?: ReactNode \| null;\n /* Callback function when the alert is closed /\n onClose?: () => void;\n /* Action configuration (button by default, or link) /\n action?: AlertAction;\n /* Additional CSS class names /\n className?: string;\n /* Test ID for testing and automation /\n fdKey?: string;\n}\n\nexport type AlertAction =\n \| {\n /* Defaults to button when omitted /\n kind?: 'button';\n /* Text label for the action button /\n label: string;\n /* Visual style of the action button /\n type?: ButtonType;\n /* Callback function when the action button is clicked /\n onClick: () => void;\n /* Test ID for the action button /\n fdKey?: string;\n }\n \| {\n /* Render a link action /\n kind: 'link';\n /* Text label for the link /\n label: string;\n /* Destination URL /\n href: string;\n /* Target for the link /\n target?: '_blank' \| '_parent' \| '_self' \| '_top';\n /* rel attribute for the link /\n rel?: string;\n /* Test ID for the link /\n fdKey?: string;\n };\n\nconst ICONS = {\n neutral: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />,\n brand: (theme: Theme): JSX.Element => <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />,\n destructive: (theme: Theme): JSX.Element => (\n <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n ),\n warning: (theme: Theme): JSX.Element => <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />,\n information: (theme: Theme): JSX.Element => (\n <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n ),\n 'neutral-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n 'brand-inverse': (theme: Theme): JSX.Element => (\n <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n ),\n success: (theme: Theme): JSX.Element => (\n <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n ),\n};\n\nconst COLOURS = {\n background: {\n neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n },\n border: {\n neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n 'neutral-inverse': (_theme: Theme): string => 'transparent',\n 'brand-inverse': (_theme: Theme): string => 'transparent',\n },\n header: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-strong'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-strong'],\n },\n text: {\n neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n 'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n 'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n },\n};\n\nconst getIcon = (theme: Theme, tone: AlertTones): JSX.Element => {\n return ICONS[tone](theme);\n};\n\nconst getBackgroundColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.background[tone](theme);\n};\n\nconst getBorderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.border[tone](theme);\n};\n\nconst getHeaderColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.header[tone](theme);\n};\n\nconst getTextColour = (theme: Theme, tone: AlertTones): string => {\n return COLOURS.text[tone](theme);\n};\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledActionContainer = styled(Box)(() => ({\n marginTop: '16px',\n}));\n\nconst StyledActionLink = styled(Link)(() => ({\n padding: 0,\n}));\n\nconst StyledAlert = styled(MuiAlert, {\n shouldForwardProp: (prop) => !['tone'].includes(prop as string),\n})<StyledAlertProps>(({ theme, tone }) => ({\n backgroundColor: getBackgroundColour(theme, tone),\n border: '1px solid',\n borderColor: getBorderColour(theme, tone),\n color: getTextColour(theme, tone),\n}));\n\n/\n Alert component is used to display important messages or notifications to users.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional action button and close button.\n \n The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed, which is beneficial for components\n * that may be used frequently throughout the application.\n */\nconst Alert = memo(\n ({\n title,\n description,\n children,\n tone = 'neutral',\n icon,\n onClose,\n className,\n fdKey,\n action,\n }: AlertProps) => {\n const theme = useTheme();\n const alertId = useId();\n const content = children ?? description;\n const hasTitle = Boolean(title);\n const hasContent = content !== undefined && content !== null;\n const titleId = hasTitle ? `alert-title-${fdKey ?? alertId}` : undefined;\n const descriptionId = hasContent ? `alert-description-${fdKey ?? alertId}` : undefined;\n\n const renderAction = (): JSX.Element \| null => {\n if (!action) {\n return null;\n }\n\n const actionLabel = title ? `${action.label} - ${title}` : action.label;\n\n if (action.kind === 'link') {\n const actionFdKey = action.fdKey ?? `action-link-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <StyledActionLink\n aria-label={actionLabel}\n fdKey={actionFdKey}\n href={action.href}\n rel={action.rel}\n target={action.target}\n >\n {action.label}\n </StyledActionLink>\n </StyledActionContainer>\n );\n }\n\n const actionFdKey = action.fdKey ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledActionContainer>\n <Button\n aria-label={actionLabel}\n fdKey={actionFdKey}\n onClick={action.onClick}\n size=\"small\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n </StyledActionContainer>\n );\n };\n\n return (\n <StyledAlert\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n className={className}\n data-fd={fdKey}\n icon={icon === undefined ? <span data-fd=\"alert-icon\">{getIcon(theme, tone)}</span> : (icon ?? false)}\n onClose={onClose}\n role=\"alert\"\n tone={tone}\n >\n {hasTitle && (\n <MuiAlertTitle color={getHeaderColour(theme, tone)} id={titleId}>\n {title}\n </MuiAlertTitle>\n )}\n {hasContent && <Box id={descriptionId}>{content}</Box>}\n {renderAction()}\n </StyledAlert>\n );\n },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["ICONS","neutral","theme","_jsx","DiamondIcon","color","palette","semantic","icon","brand","destructive","CancelCircleIcon","warning","AlertIcon","information","InformationCircleIcon","success","CheckmarkCircleIcon","COLOURS","background","fill","border","stroke","_theme","header","text","getIcon","tone","getBackgroundColour","getBorderColour","getHeaderColour","getTextColour","StyledActionContainer","styled","Box","marginTop","StyledActionLink","Link","padding","StyledAlert","MuiAlert","shouldForwardProp","prop","includes","backgroundColor","borderColor","Alert","memo","title","description","children","onClose","className","fdKey","action","useTheme","alertId","useId","content","hasTitle","Boolean","hasContent","titleId","undefined","descriptionId","_jsxs","role","MuiAlertTitle","id","actionLabel","label","kind","actionFdKey","replace","toLowerCase","href","rel","target","Button","onClick","size","variant","type","renderAction","displayName"],"mappings":"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"}

package/dist/components/organisms/AssetManager/LibraryTabContent/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/styles"),r=require("@mui/material/Box"),i=require("../../../atoms/Card/index.cjs.js"),s=require("@mui/material/Grid2"),o=require("../../../molecules/EmptyState/index.cjs.js"),a=require("../../../../icons/CheckmarkCircleSolid/index.cjs.js"),l=require("../../../../providers/TranslationProvider.cjs.js"),n=require("./LibraryTabContentSkeleton.cjs.js");const d=t.styled(s)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=t.styled(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),m=t.styled(a)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),p=t.styled(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"})));module.exports=({assets:t,isLoading:r,error:a,selectedAssets:u,onAssetClick:x})=>{const{translate:h}=l.useTranslation();return r?e.jsx(n,{}):a?e.jsx(p,{children:e.jsx(o.EmptyState,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):t&&0!==t.length?e.jsx(d,{container:!0,component:"ul",spacing:1,children:t.map((t=>{const r=u.has(t.id);return e.jsx(s,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:e.jsxs(c,{"aria-label":`${h("Select")} ${t.fileName}`,onClick:()=>x(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(t))},role:"button",selected:r,tabIndex:0,children:[r&&e.jsx(m,{size:"lg"}),e.jsx(i,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:`${t.url}?h=203&fit=crop`})]})},t.id)}))}):e.jsx(p,{children:e.jsx(o.EmptyState,{description:"No assets available to display.",title:"No assets found"})})};
+"use strict";var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/styles"),r=require("@mui/material/Box"),s=require("../../../atoms/Card/index.cjs.js"),i=require("@mui/material/Grid2"),o=require("../../../molecules/EmptyState/index.cjs.js"),a=require("../../../../icons/CheckmarkCircleSolid/index.cjs.js"),l=require("../../../../providers/TranslationProvider.cjs.js"),n=require("./LibraryTabContentSkeleton.cjs.js");const d=t.styled(i)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=t.styled(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),p=t.styled(a)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),m=t.styled(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"})));module.exports=({assets:t,isLoading:r,error:a,selectedAssets:u,onAssetClick:x})=>{const{translate:h}=l.useTranslation();return r?e.jsx(n,{}):a?e.jsx(m,{children:e.jsx(o.EmptyState,{description:h("Failed_to_load_assets_please_try_again_later"),title:h("Error_loading_assets")})}):t&&0!==t.length?e.jsx(d,{container:!0,component:"ul",spacing:1,children:t.map((t=>{const r=u.has(t.id);return e.jsx(i,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:e.jsxs(c,{"aria-label":`${h("Select")} ${t.fileName}`,onClick:()=>x(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(t))},role:"button",selected:r,tabIndex:0,children:[r&&e.jsx(p,{size:"lg"}),e.jsx(s,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:`${t.url}?h=203&fit=crop`})]})},t.id)}))}):e.jsx(m,{children:e.jsx(o.EmptyState,{description:h("There_are_no_assets_to_display"),title:h("No_assets_found")})})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/LibraryTabContent/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n listStyle: 'none',\n margin: 0,\n padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n width: '100%',\n cursor: 'pointer',\n position: 'relative',\n '& .MuiCard-root': {\n // Always use 2px border to prevent layout shift\n borderWidth: '2px',\n borderColor: selected\n ? theme.palette.semantic.stroke['stroke-selected']\n : theme.palette.semantic.stroke['stroke-weak'],\n },\n '&:focus-visible .MuiCard-root': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n boxShadow: 'none',\n },\n '&:hover .MuiCard-root': {\n boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n position: 'absolute',\n top: theme.spacing(2),\n left: theme.spacing(2),\n zIndex: 1,\n color: theme.palette.semantic.icon['icon-primary'],\n '& circle': {\n fill: theme.palette.common.white,\n },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n padding: theme.spacing(4),\n maxWidth: '100%',\n overflow: 'hidden',\n boxSizing: 'border-box',\n}));\n\n/*\n Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n /\nexport interface LibraryTabContentProps {\n /* Array of assets to display /\n assets?: Asset[];\n /* Whether the assets are being loaded /\n isLoading: boolean;\n /* Error object if fetching assets failed /\n error: Error \| null;\n /* Map of selected assets (id -> Asset) for O(1) lookup performance /\n selectedAssets: Map<string, Asset>;\n /* Callback when an asset is clicked /\n onAssetClick: (asset: Asset) => void;\n}\n\n/\n LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n \n @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n assets,\n isLoading,\n error,\n selectedAssets,\n onAssetClick,\n}) => {\n const { translate } = useTranslation();\n\n if (isLoading) {\n return <LibraryTabContentSkeleton />;\n }\n\n if (error) {\n return (\n ~~// TODO: Update empty state when confirmed with design\n~~ <StyledErrorContainer>\n <EmptyState\n description~~=\"Failed to load assets. Please try again later.\"~~\n title~~=\"Error loading assets~~\"\n />\n </StyledErrorContainer>\n );\n }\n\n if (!assets \|\| assets.length === 0) {\n return (\n // TODO: Update empty state when confirmed with design\n <StyledErrorContainer>\n <EmptyState description~~=\"No assets available to display.\"~~ title~~=\"No assets found~~\" />\n </StyledErrorContainer>\n );\n }\n\n return (\n <StyledList container component=\"ul\" spacing={1}>\n {assets.map((asset: Asset) => {\n const isSelected = selectedAssets.has(asset.id);\n return (\n <Grid\n key={asset.id}\n aria-selected={isSelected}\n component=\"li\"\n size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n >\n <StyledCardWrapper\n aria-label={`${translate('Select')} ${asset.fileName}`}\n onClick={() => onAssetClick(asset)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onAssetClick(asset);\n }\n }}\n role=\"button\"\n selected={isSelected}\n tabIndex={0}\n >\n {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n <Card\n content={asset.fileName}\n heading=\"\"\n imageAlt={asset.metadata.altText}\n // Image source will be an imgix url, utilise params to render the image in the correct size and format\n imageSrc={`${asset.url}?h=203&fit=crop`}\n />\n </StyledCardWrapper>\n </Grid>\n );\n })}\n </StyledList>\n );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"4bAcA,MAAMA,EAAaC,EAAAA,OAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAAA,OAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAAA,OAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAAA,OAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,gCA+B+C,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,mBAEtB,OAAIL,EACKM,EAAAA,IAACC,EAAyB,IAG/BN,~~EAGAK~~,EAAAA,IAACX,EAAoB,CAAAa,SACnBF,EAAAA,IAACG,EAAAA,~~YACCC~~,~~YAAY~~,~~iDACZC~~,~~MAAM~~,~~2BAMTZ~~,GAA4B,IAAlBA,EAAOa,~~OAUpBN~~,EAAAA,IAAC3C,EAAU,CAACkD,WAAS,EAACC,UAAU,KAAK5C,QAAS,WAC3C6B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAAA,IAACzC,EAAI,CAAA,gBAEYoD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAAAA,KAACtD,EAAiB,CAAA,aACJ,GAAGiC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACLzD,SAAU0C,EACVgB,SAAU,YAEThB,GAAcX,EAAAA,IAACrB,EAAmB,CAACmC,KAAK,OACzCd,EAAAA,IAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,~~SAZjBb~~,EAAAA,IAACX,~~EAAoB~~,~~CAAAa,SACnBF,~~EAAAA,IAACG,EAAAA,~~YAAWC~~,~~YAAY~~,~~kCAAkCC~~,~~MAAM~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n listStyle: 'none',\n margin: 0,\n padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n width: '100%',\n cursor: 'pointer',\n position: 'relative',\n '& .MuiCard-root': {\n // Always use 2px border to prevent layout shift\n borderWidth: '2px',\n borderColor: selected\n ? theme.palette.semantic.stroke['stroke-selected']\n : theme.palette.semantic.stroke['stroke-weak'],\n },\n '&:focus-visible .MuiCard-root': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n boxShadow: 'none',\n },\n '&:hover .MuiCard-root': {\n boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n position: 'absolute',\n top: theme.spacing(2),\n left: theme.spacing(2),\n zIndex: 1,\n color: theme.palette.semantic.icon['icon-primary'],\n '& circle': {\n fill: theme.palette.common.white,\n },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n padding: theme.spacing(4),\n maxWidth: '100%',\n overflow: 'hidden',\n boxSizing: 'border-box',\n}));\n\n/*\n Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n /\nexport interface LibraryTabContentProps {\n /* Array of assets to display /\n assets?: Asset[];\n /* Whether the assets are being loaded /\n isLoading: boolean;\n /* Error object if fetching assets failed /\n error: Error \| null;\n /* Map of selected assets (id -> Asset) for O(1) lookup performance /\n selectedAssets: Map<string, Asset>;\n /* Callback when an asset is clicked /\n onAssetClick: (asset: Asset) => void;\n}\n\n/\n LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n \n @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n assets,\n isLoading,\n error,\n selectedAssets,\n onAssetClick,\n}) => {\n const { translate } = useTranslation();\n\n if (isLoading) {\n return <LibraryTabContentSkeleton />;\n }\n\n if (error) {\n return (\n <StyledErrorContainer>\n <EmptyState\n description={translate('Failed_to_load_assets_please_try_again_later')}\n title={translate('Error_loading_assets')}\n />\n </StyledErrorContainer>\n );\n }\n\n if (!assets \|\| assets.length === 0) {\n return (\n // TODO: Update empty state when confirmed with design\n <StyledErrorContainer>\n <EmptyState\n description={translate('There_are_no_assets_to_display')}\n title={translate('No_assets_found')}\n />\n </StyledErrorContainer>\n );\n }\n\n return (\n <StyledList container component=\"ul\" spacing={1}>\n {assets.map((asset: Asset) => {\n const isSelected = selectedAssets.has(asset.id);\n return (\n <Grid\n key={asset.id}\n aria-selected={isSelected}\n component=\"li\"\n size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n >\n <StyledCardWrapper\n aria-label={`${translate('Select')} ${asset.fileName}`}\n onClick={() => onAssetClick(asset)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onAssetClick(asset);\n }\n }}\n role=\"button\"\n selected={isSelected}\n tabIndex={0}\n >\n {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n <Card\n content={asset.fileName}\n heading=\"\"\n imageAlt={asset.metadata.altText}\n // Image source will be an imgix url, utilise params to render the image in the correct size and format\n imageSrc={`${asset.url}?h=203&fit=crop`}\n />\n </StyledCardWrapper>\n </Grid>\n );\n })}\n </StyledList>\n );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"4bAcA,MAAMA,EAAaC,EAAAA,OAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAAA,OAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAAA,OAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAAA,OAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,gCA+B+C,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,mBAEtB,OAAIL,EACKM,EAAAA,IAACC,EAAyB,IAG/BN,EAEAK,EAAAA,IAACX,EAAoB,CAAAa,SACnBF,EAAAA,IAACG,EAAAA,WAAU,CACTC,YAAaN,EAAU,gDACvBO,MAAOP,EAAU,4BAMpBL,GAA4B,IAAlBA,EAAOa,OAapBN,EAAAA,IAAC3C,EAAU,CAACkD,WAAS,EAACC,UAAU,KAAK5C,QAAS,WAC3C6B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAAA,IAACzC,EAAI,CAAA,gBAEYoD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAAAA,KAACtD,EAAiB,CAAA,aACJ,GAAGiC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACLzD,SAAU0C,EACVgB,SAAU,YAEThB,GAAcX,EAAAA,IAACrB,EAAmB,CAACmC,KAAK,OACzCd,EAAAA,IAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,SAfjBb,EAAAA,IAACX,YACCW,EAAAA,IAACG,EAAAA,YACCC,YAAaN,EAAU,kCACvBO,MAAOP,EAAU"}

package/dist/components/organisms/AssetManager/LibraryTabContent/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{styled as o}from"@mui/material/styles";import r from"@mui/material/Box";import i from"../../../atoms/Card/index.js";import a from"@mui/material/Grid2";import{EmptyState as s}from"../../../molecules/EmptyState/index.js";import l from"../../../../icons/CheckmarkCircleSolid/index.js";import{useTranslation as n}from"../../../../providers/TranslationProvider.js";import d from"./LibraryTabContentSkeleton.js";const m=o(a)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=o(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),p=o(l)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),h=o(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"}))),u=({assets:o,isLoading:r,error:l,selectedAssets:u,onAssetClick:b})=>{const{translate:f}=n();return r?e(d,{}):l?e(h,{children:e(s,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):o&&0!==o.length?e(m,{container:!0,component:"ul",spacing:1,children:o.map((o=>{const r=u.has(o.id);return e(a,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:t(c,{"aria-label":`${f("Select")} ${o.fileName}`,onClick:()=>b(o),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),b(o))},role:"button",selected:r,tabIndex:0,children:[r&&e(p,{size:"lg"}),e(i,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:`${o.url}?h=203&fit=crop`})]})},o.id)}))}):e(h,{children:e(s,{description:"No assets available to display.",title:"No assets found"})})};export{u as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{styled as o}from"@mui/material/styles";import r from"@mui/material/Box";import i from"../../../atoms/Card/index.js";import a from"@mui/material/Grid2";import{EmptyState as s}from"../../../molecules/EmptyState/index.js";import n from"../../../../icons/CheckmarkCircleSolid/index.js";import{useTranslation as l}from"../../../../providers/TranslationProvider.js";import d from"./LibraryTabContentSkeleton.js";const m=o(a)((({theme:e})=>({listStyle:"none",margin:0,padding:e.spacing(1)}))),c=o(r,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({width:"100%",cursor:"pointer",position:"relative","& .MuiCard-root":{borderWidth:"2px",borderColor:t?e.palette.semantic.stroke["stroke-selected"]:e.palette.semantic.stroke["stroke-weak"]},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"},"&:hover .MuiCard-root":{boxShadow:"0px 4px 16px rgba(0, 0, 0, 0.2)"}}))),p=o(n)((({theme:e})=>({position:"absolute",top:e.spacing(2),left:e.spacing(2),zIndex:1,color:e.palette.semantic.icon["icon-primary"],"& circle":{fill:e.palette.common.white}}))),h=o(r)((({theme:e})=>({padding:e.spacing(4),maxWidth:"100%",overflow:"hidden",boxSizing:"border-box"}))),u=({assets:o,isLoading:r,error:n,selectedAssets:u,onAssetClick:f})=>{const{translate:b}=l();return r?e(d,{}):n?e(h,{children:e(s,{description:b("Failed_to_load_assets_please_try_again_later"),title:b("Error_loading_assets")})}):o&&0!==o.length?e(m,{container:!0,component:"ul",spacing:1,children:o.map((o=>{const r=u.has(o.id);return e(a,{"aria-selected":r,component:"li",size:{widescreen:4,desktop:4,mobile:6,tablet:4},children:t(c,{"aria-label":`${b("Select")} ${o.fileName}`,onClick:()=>f(o),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),f(o))},role:"button",selected:r,tabIndex:0,children:[r&&e(p,{size:"lg"}),e(i,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:`${o.url}?h=203&fit=crop`})]})},o.id)}))}):e(h,{children:e(s,{description:b("There_are_no_assets_to_display"),title:b("No_assets_found")})})};export{u as default};
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/AssetManager/LibraryTabContent/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n listStyle: 'none',\n margin: 0,\n padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n width: '100%',\n cursor: 'pointer',\n position: 'relative',\n '& .MuiCard-root': {\n // Always use 2px border to prevent layout shift\n borderWidth: '2px',\n borderColor: selected\n ? theme.palette.semantic.stroke['stroke-selected']\n : theme.palette.semantic.stroke['stroke-weak'],\n },\n '&:focus-visible .MuiCard-root': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n boxShadow: 'none',\n },\n '&:hover .MuiCard-root': {\n boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n position: 'absolute',\n top: theme.spacing(2),\n left: theme.spacing(2),\n zIndex: 1,\n color: theme.palette.semantic.icon['icon-primary'],\n '& circle': {\n fill: theme.palette.common.white,\n },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n padding: theme.spacing(4),\n maxWidth: '100%',\n overflow: 'hidden',\n boxSizing: 'border-box',\n}));\n\n/*\n Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n /\nexport interface LibraryTabContentProps {\n /* Array of assets to display /\n assets?: Asset[];\n /* Whether the assets are being loaded /\n isLoading: boolean;\n /* Error object if fetching assets failed /\n error: Error \| null;\n /* Map of selected assets (id -> Asset) for O(1) lookup performance /\n selectedAssets: Map<string, Asset>;\n /* Callback when an asset is clicked /\n onAssetClick: (asset: Asset) => void;\n}\n\n/\n LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n \n @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n assets,\n isLoading,\n error,\n selectedAssets,\n onAssetClick,\n}) => {\n const { translate } = useTranslation();\n\n if (isLoading) {\n return <LibraryTabContentSkeleton />;\n }\n\n if (error) {\n return (\n ~~// TODO: Update empty state when confirmed with design\n~~ <StyledErrorContainer>\n <EmptyState\n description~~=\"Failed to load assets. Please try again later.\"~~\n title~~=\"Error loading assets~~\"\n />\n </StyledErrorContainer>\n );\n }\n\n if (!assets \|\| assets.length === 0) {\n return (\n // TODO: Update empty state when confirmed with design\n <StyledErrorContainer>\n <EmptyState description~~=\"No assets available to display.\"~~ title~~=\"No assets found~~\" />\n </StyledErrorContainer>\n );\n }\n\n return (\n <StyledList container component=\"ul\" spacing={1}>\n {assets.map((asset: Asset) => {\n const isSelected = selectedAssets.has(asset.id);\n return (\n <Grid\n key={asset.id}\n aria-selected={isSelected}\n component=\"li\"\n size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n >\n <StyledCardWrapper\n aria-label={`${translate('Select')} ${asset.fileName}`}\n onClick={() => onAssetClick(asset)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onAssetClick(asset);\n }\n }}\n role=\"button\"\n selected={isSelected}\n tabIndex={0}\n >\n {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n <Card\n content={asset.fileName}\n heading=\"\"\n imageAlt={asset.metadata.altText}\n // Image source will be an imgix url, utilise params to render the image in the correct size and format\n imageSrc={`${asset.url}?h=203&fit=crop`}\n />\n </StyledCardWrapper>\n </Grid>\n );\n })}\n </StyledList>\n );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","LibraryTabContent","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"6dAcA,MAAMA,EAAaC,EAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,iBA+BPC,EAAsD,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,IAEtB,OAAIL,EACKM,EAACC,EAAyB,IAG/BN,~~EAGAK~~,EAACZ,EAAoB,CAAAc,SACnBF,EAACG,~~GACCC~~,~~YAAY~~,~~iDACZC~~,~~MAAM~~,~~2BAMTZ~~,GAA4B,IAAlBA,EAAOa,~~OAUpBN~~,EAAC5C,EAAU,CAACmD,WAAS,EAACC,UAAU,KAAK7C,QAAS,WAC3C8B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAC1C,EAAI,CAAA,gBAEYqD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAACvD,EAAiB,CAAA,aACJ,GAAGkC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACL1D,SAAU2C,EACVgB,SAAU,YAEThB,GAAcX,EAACtB,EAAmB,CAACoC,KAAK,OACzCd,EAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,~~SAZjBb~~,EAACZ,~~EAAoB~~,~~CAAAc~~,~~SACnBF~~,~~EAACG~~,~~GAAWC~~,~~YAAY~~,~~kCAAkCC~~,~~MAAM~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/LibraryTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport Card from '@fd/components/atoms/Card';\nimport Grid from '@fd/components/atoms/Grid';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport type { Asset } from '../types/assets.type';\nimport LibraryTabContentSkeleton from './LibraryTabContentSkeleton';\n\nconst StyledList = styled(Grid)<{ component: string }>(({ theme }) => ({\n listStyle: 'none',\n margin: 0,\n padding: theme.spacing(1),\n}));\n\nconst StyledCardWrapper = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n width: '100%',\n cursor: 'pointer',\n position: 'relative',\n '& .MuiCard-root': {\n // Always use 2px border to prevent layout shift\n borderWidth: '2px',\n borderColor: selected\n ? theme.palette.semantic.stroke['stroke-selected']\n : theme.palette.semantic.stroke['stroke-weak'],\n },\n '&:focus-visible .MuiCard-root': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n boxShadow: 'none',\n },\n '&:hover .MuiCard-root': {\n boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)',\n },\n}));\n\nconst StyledCheckmarkIcon = styled(CheckmarkCircleSolidIcon)(({ theme }) => ({\n position: 'absolute',\n top: theme.spacing(2),\n left: theme.spacing(2),\n zIndex: 1,\n color: theme.palette.semantic.icon['icon-primary'],\n '& circle': {\n fill: theme.palette.common.white,\n },\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n padding: theme.spacing(4),\n maxWidth: '100%',\n overflow: 'hidden',\n boxSizing: 'border-box',\n}));\n\n/*\n Props for the LibraryTabContent component.\n * @param assets - Array of assets to display\n * @param isLoading - Whether the assets are being loaded\n * @param error - Error object if fetching assets failed\n * @param selectedAssets - Map of selected assets (id -> Asset) for O(1) lookup performance\n * @param onAssetClick - Callback when an asset is clicked\n /\nexport interface LibraryTabContentProps {\n /* Array of assets to display /\n assets?: Asset[];\n /* Whether the assets are being loaded /\n isLoading: boolean;\n /* Error object if fetching assets failed /\n error: Error \| null;\n /* Map of selected assets (id -> Asset) for O(1) lookup performance /\n selectedAssets: Map<string, Asset>;\n /* Callback when an asset is clicked /\n onAssetClick: (asset: Asset) => void;\n}\n\n/\n LibraryTab component displays a grid of assets that can be selected.\n * Receives assets data from parent and displays loading/error states.\n \n @param props - The component props\n * @returns The library tab content\n */\nconst LibraryTabContent: React.FC<LibraryTabContentProps> = ({\n assets,\n isLoading,\n error,\n selectedAssets,\n onAssetClick,\n}) => {\n const { translate } = useTranslation();\n\n if (isLoading) {\n return <LibraryTabContentSkeleton />;\n }\n\n if (error) {\n return (\n <StyledErrorContainer>\n <EmptyState\n description={translate('Failed_to_load_assets_please_try_again_later')}\n title={translate('Error_loading_assets')}\n />\n </StyledErrorContainer>\n );\n }\n\n if (!assets \|\| assets.length === 0) {\n return (\n // TODO: Update empty state when confirmed with design\n <StyledErrorContainer>\n <EmptyState\n description={translate('There_are_no_assets_to_display')}\n title={translate('No_assets_found')}\n />\n </StyledErrorContainer>\n );\n }\n\n return (\n <StyledList container component=\"ul\" spacing={1}>\n {assets.map((asset: Asset) => {\n const isSelected = selectedAssets.has(asset.id);\n return (\n <Grid\n key={asset.id}\n aria-selected={isSelected}\n component=\"li\"\n size={{ widescreen: 4, desktop: 4, mobile: 6, tablet: 4 }}\n >\n <StyledCardWrapper\n aria-label={`${translate('Select')} ${asset.fileName}`}\n onClick={() => onAssetClick(asset)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onAssetClick(asset);\n }\n }}\n role=\"button\"\n selected={isSelected}\n tabIndex={0}\n >\n {isSelected && <StyledCheckmarkIcon size=\"lg\" />}\n <Card\n content={asset.fileName}\n heading=\"\"\n imageAlt={asset.metadata.altText}\n // Image source will be an imgix url, utilise params to render the image in the correct size and format\n imageSrc={`${asset.url}?h=203&fit=crop`}\n />\n </StyledCardWrapper>\n </Grid>\n );\n })}\n </StyledList>\n );\n};\n\nexport default LibraryTabContent;\n"],"names":["StyledList","styled","Grid","theme","listStyle","margin","padding","spacing","StyledCardWrapper","Box","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledErrorContainer","maxWidth","overflow","boxSizing","LibraryTabContent","assets","isLoading","error","selectedAssets","onAssetClick","translate","useTranslation","_jsx","LibraryTabContentSkeleton","children","EmptyState","description","title","length","container","component","map","asset","isSelected","has","id","size","widescreen","desktop","mobile","tablet","_jsxs","fileName","onClick","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"6dAcA,MAAMA,EAAaC,EAAOC,EAAPD,EAAoC,EAAGE,YAAO,CAC/DC,UAAW,OACXC,OAAQ,EACRC,QAASH,EAAMI,QAAQ,OAGnBC,EAAoBP,EAAOQ,EAAK,CACpCC,kBAAoBC,GAAkB,aAATA,GADLV,EAEC,EAAGE,QAAOS,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EACTT,EAAMe,QAAQC,SAASC,OAAO,mBAC9BjB,EAAMe,QAAQC,SAASC,OAAO,gBAEpC,gCAAiC,CAC/BH,YAAad,EAAMe,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,QAEb,wBAAyB,CACvBA,UAAW,uCAITC,EAAsBrB,EAAOsB,EAAPtB,EAAiC,EAAGE,YAAO,CACrEY,SAAU,WACVS,IAAKrB,EAAMI,QAAQ,GACnBkB,KAAMtB,EAAMI,QAAQ,GACpBmB,OAAQ,EACRC,MAAOxB,EAAMe,QAAQC,SAASS,KAAK,gBACnC,WAAY,CACVC,KAAM1B,EAAMe,QAAQY,OAAOC,WAIzBC,EAAuB/B,EAAOQ,EAAPR,EAAY,EAAGE,YAAO,CACjDG,QAASH,EAAMI,QAAQ,GACvB0B,SAAU,OACVC,SAAU,SACVC,UAAW,iBA+BPC,EAAsD,EAC1DC,SACAC,YACAC,QACAC,iBACAC,mBAEA,MAAMC,UAAEA,GAAcC,IAEtB,OAAIL,EACKM,EAACC,EAAyB,IAG/BN,EAEAK,EAACZ,EAAoB,CAAAc,SACnBF,EAACG,EAAU,CACTC,YAAaN,EAAU,gDACvBO,MAAOP,EAAU,4BAMpBL,GAA4B,IAAlBA,EAAOa,OAapBN,EAAC5C,EAAU,CAACmD,WAAS,EAACC,UAAU,KAAK7C,QAAS,WAC3C8B,EAAOgB,KAAKC,IACX,MAAMC,EAAaf,EAAegB,IAAIF,EAAMG,IAC5C,OACEb,EAAC1C,EAAI,CAAA,gBAEYqD,EACfH,UAAU,KACVM,KAAM,CAAEC,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGhB,SAEzDiB,EAACvD,EAAiB,CAAA,aACJ,GAAGkC,EAAU,aAAaY,EAAMU,WAC5CC,QAAS,IAAMxB,EAAaa,GAC5BY,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,EAAaa,KAGjBgB,KAAK,SACL1D,SAAU2C,EACVgB,SAAU,YAEThB,GAAcX,EAACtB,EAAmB,CAACoC,KAAK,OACzCd,EAAC4B,EAAI,CACHC,QAASnB,EAAMU,SACfU,QAAQ,GACRC,SAAUrB,EAAMsB,SAASC,QAEzBC,SAAU,GAAGxB,EAAMyB,2BAxBlBzB,EAAMG,SAfjBb,EAACZ,YACCY,EAACG,GACCC,YAAaN,EAAU,kCACvBO,MAAOP,EAAU"}

package/dist/components/organisms/AssetManager/UploadTabContent/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var i=require("../../../../utilities/fileUtils.cjs.js"),l=require("../../FileUpload/index.cjs.js");const s=["jpg","jpeg","png","gif","bmp","tiff","ico","webp"];module.exports=({files:r,onUpload:o,onRemove:a})=>e.jsx(l,{allowedFileTypes:s,files:r,label:"",maxFiles:10,maxFileSize:i.TEN_MB_IN_BYTES,onRemove:a,onUpload:o});
+"use strict";var e=require("react/jsx-runtime");require("react");var i=require("../../../../utilities/fileUtils.cjs.js"),r=require("../../../../providers/TranslationProvider.cjs.js"),l=require("../../FileUpload/index.cjs.js");const s=["jpg","jpeg","png","bmp","tiff","ico","webp"];module.exports=({files:o,onUpload:a,onRemove:t,error:n})=>{const{translate:p}=r.useTranslation(),_=p("File_is_too_large_upload_a_file_under",{maxFileSize:"10 MB"}),u=p("File_type_isnt_supported_upload_an_image",{fileTypes:s.join(", ")});return e.jsx(l,{allowedFileTypes:s,error:n,files:o,invalidFileSizeText:_,invalidFileTypesText:u,label:"",maxFiles:10,maxFileSize:i.TEN_MB_IN_BYTES,onRemove:t,onUpload:a})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/UploadTabContent/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', '~~gif', '~~bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/*\n Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n /\nexport interface UploadTabContentProps {\n /* Array of file upload states /\n files: FileUploadState[];\n /* Callback fired when files are uploaded /\n onUpload: (files: File[]) => void;\n /* Callback fired when a file is removed /\n onRemove: (file: File) => void;\n}\n\n/\n UploadAsset component provides a file upload interface for uploading new assets.\n \n @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove }) => {\n return (\n <FileUpload\n allowedFileTypes={ALLOWED_FILE_TYPES}\n files={files}\n label=\"\"\n maxFiles={MAX_FILES}\n maxFileSize={TEN_MB_IN_BYTES}\n onRemove={onRemove}\n onUpload={onUpload}\n />\n );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","files","onUpload","onRemove","_jsx","FileUpload","allowedFileTypes","~~label~~","~~maxFiles~~","~~maxFileSize~~","TEN_MB_IN_BYTES"],"mappings":"~~oKAMA~~,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,~~MAAO,~~OAAQ,MAAO,~~uBAwBrB~~,EAAGC,QAAOC,WAAUC,~~cAE1EC~~,~~EAAAA~~,~~IAACC~~,EAAU,CACTC,~~iBAAkBN~~,~~EAClBC~~,MAAOA,~~EACPM~~,MAAM,GACNC,~~SA7BY~~,~~GA8BZC~~,~~YAAaC~~,EAAAA,~~gBACbP~~,SAAUA,EACVD,SAAUA"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport { useTranslation } from '../../../../providers/TranslationProvider';\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/*\n Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n * @param error - Optional error message to display on the file upload\n /\nexport interface UploadTabContentProps {\n /* Array of file upload states /\n files: FileUploadState[];\n /* Callback fired when files are uploaded /\n onUpload: (files: File[]) => void;\n /* Callback fired when a file is removed /\n onRemove: (file: File) => void;\n /* Optional error message to display on the file upload /\n error?: string \| null;\n}\n\n/\n UploadAsset component provides a file upload interface for uploading new assets.\n \n @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove, error }) => {\n const { translate } = useTranslation();\n const maxFileSizeText = translate('File_is_too_large_upload_a_file_under', {\n maxFileSize: '10 MB',\n });\n const invalidFileTypesText = translate('File_type_isnt_supported_upload_an_image', {\n fileTypes: ALLOWED_FILE_TYPES.join(', '),\n });\n\n return (\n <FileUpload\n allowedFileTypes={ALLOWED_FILE_TYPES}\n error={error}\n files={files}\n invalidFileSizeText={maxFileSizeText}\n invalidFileTypesText={invalidFileTypesText}\n label=\"\"\n maxFiles={MAX_FILES}\n maxFileSize={TEN_MB_IN_BYTES}\n onRemove={onRemove}\n onUpload={onUpload}\n />\n );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","files","onUpload","onRemove","error","translate","useTranslation","maxFileSizeText","maxFileSize","invalidFileTypesText","fileTypes","join","_jsx","FileUpload","allowedFileTypes","invalidFileSizeText","label","maxFiles","TEN_MB_IN_BYTES"],"mappings":"kOAOA,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,OAAQ,MAAO,uBA2Bd,EAAGC,QAAOC,WAAUC,WAAUC,YACtF,MAAMC,UAAEA,GAAcC,mBAChBC,EAAkBF,EAAU,wCAAyC,CACzEG,YAAa,UAETC,EAAuBJ,EAAU,2CAA4C,CACjFK,UAAWV,EAAmBW,KAAK,QAGrC,OACEC,MAACC,EAAU,CACTC,iBAAkBd,EAClBI,MAAOA,EACPH,MAAOA,EACPc,oBAAqBR,EACrBE,qBAAsBA,EACtBO,MAAM,GACNC,SA3CY,GA4CZT,YAAaU,EAAAA,gBACbf,SAAUA,EACVD,SAAUA"}

package/dist/components/organisms/AssetManager/UploadTabContent/index.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import { FileUploadState } from '../../FileUpload/index.js';
  * @param files - Array of file upload states
  * @param onUpload - Callback fired when files are uploaded
  * @param onRemove - Callback fired when a file is removed
+ * @param error - Optional error message to display on the file upload
  */
 interface UploadTabContentProps {
     /** Array of file upload states */
@@ -14,6 +15,8 @@ interface UploadTabContentProps {
     onUpload: (files: File[]) => void;
     /** Callback fired when a file is removed */
     onRemove: (file: File) => void;
+    /** Optional error message to display on the file upload */
+    error?: string | null;
 }
 /**
  * UploadAsset component provides a file upload interface for uploading new assets.

package/dist/components/organisms/AssetManager/UploadTabContent/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import{TEN_MB_IN_BYTES as i}from"../../../../utilities/fileUtils.js";import o from"../../FileUpload/index.js";const l=["jpg","jpeg","png","gif","bmp","tiff","ico","webp"],p=({files:p,onUpload:t,onRemove:m})=>e(o,{allowedFileTypes:l,files:p,label:"",maxFiles:10,maxFileSize:i,onRemove:m,onUpload:t});export{p as default};
+import{jsx as e}from"react/jsx-runtime";import"react";import{TEN_MB_IN_BYTES as i}from"../../../../utilities/fileUtils.js";import{useTranslation as o}from"../../../../providers/TranslationProvider.js";import l from"../../FileUpload/index.js";const r=["jpg","jpeg","png","bmp","tiff","ico","webp"],t=({files:t,onUpload:a,onRemove:p,error:s})=>{const{translate:n}=o(),m=n("File_is_too_large_upload_a_file_under",{maxFileSize:"10 MB"}),d=n("File_type_isnt_supported_upload_an_image",{fileTypes:r.join(", ")});return e(l,{allowedFileTypes:r,error:s,files:t,invalidFileSizeText:m,invalidFileTypesText:d,label:"",maxFiles:10,maxFileSize:i,onRemove:p,onUpload:a})};export{t as default};
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/AssetManager/UploadTabContent/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', '~~gif', '~~bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/*\n Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n /\nexport interface UploadTabContentProps {\n /* Array of file upload states /\n files: FileUploadState[];\n /* Callback fired when files are uploaded /\n onUpload: (files: File[]) => void;\n /* Callback fired when a file is removed /\n onRemove: (file: File) => void;\n}\n\n/\n UploadAsset component provides a file upload interface for uploading new assets.\n \n @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove }) => {\n return (\n <FileUpload\n allowedFileTypes={ALLOWED_FILE_TYPES}\n files={files}\n label=\"\"\n maxFiles={MAX_FILES}\n maxFileSize={TEN_MB_IN_BYTES}\n onRemove={onRemove}\n onUpload={onUpload}\n />\n );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","UploadTabContent","files","onUpload","onRemove","_jsx","FileUpload","allowedFileTypes","~~label~~","~~maxFiles~~","~~maxFileSize~~","TEN_MB_IN_BYTES"],"mappings":"~~oKAMA~~,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,~~MAAO,~~OAAQ,MAAO,~~QAwBzEC~~,EAAoD,EAAGC,QAAOC,WAAUC,~~cAE1EC~~,EAACC,EAAU,CACTC,~~iBAAkBP~~,~~EAClBE~~,MAAOA,~~EACPM~~,MAAM,GACNC,~~SA7BY~~,~~GA8BZC~~,~~YAAaC~~,~~EACbP~~,SAAUA,EACVD,SAAUA"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/organisms/AssetManager/UploadTabContent/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TEN_MB_IN_BYTES } from '@fd/utilities/fileUtils';\n\nimport { useTranslation } from '../../../../providers/TranslationProvider';\nimport FileUpload, { type FileUploadState } from '../../FileUpload';\n\nconst ALLOWED_FILE_TYPES = ['jpg', 'jpeg', 'png', 'bmp', 'tiff', 'ico', 'webp'];\nconst MAX_FILES = 10;\n\n/*\n Props for the UploadTabContent component.\n * @param files - Array of file upload states\n * @param onUpload - Callback fired when files are uploaded\n * @param onRemove - Callback fired when a file is removed\n * @param error - Optional error message to display on the file upload\n /\nexport interface UploadTabContentProps {\n /* Array of file upload states /\n files: FileUploadState[];\n /* Callback fired when files are uploaded /\n onUpload: (files: File[]) => void;\n /* Callback fired when a file is removed /\n onRemove: (file: File) => void;\n /* Optional error message to display on the file upload /\n error?: string \| null;\n}\n\n/\n UploadAsset component provides a file upload interface for uploading new assets.\n \n @param props - The component props\n * @returns The upload tab content\n */\nconst UploadTabContent: React.FC<UploadTabContentProps> = ({ files, onUpload, onRemove, error }) => {\n const { translate } = useTranslation();\n const maxFileSizeText = translate('File_is_too_large_upload_a_file_under', {\n maxFileSize: '10 MB',\n });\n const invalidFileTypesText = translate('File_type_isnt_supported_upload_an_image', {\n fileTypes: ALLOWED_FILE_TYPES.join(', '),\n });\n\n return (\n <FileUpload\n allowedFileTypes={ALLOWED_FILE_TYPES}\n error={error}\n files={files}\n invalidFileSizeText={maxFileSizeText}\n invalidFileTypesText={invalidFileTypesText}\n label=\"\"\n maxFiles={MAX_FILES}\n maxFileSize={TEN_MB_IN_BYTES}\n onRemove={onRemove}\n onUpload={onUpload}\n />\n );\n};\n\nexport default UploadTabContent;\n"],"names":["ALLOWED_FILE_TYPES","UploadTabContent","files","onUpload","onRemove","error","translate","useTranslation","maxFileSizeText","maxFileSize","invalidFileTypesText","fileTypes","join","_jsx","FileUpload","allowedFileTypes","invalidFileSizeText","label","maxFiles","TEN_MB_IN_BYTES"],"mappings":"kPAOA,MAAMA,EAAqB,CAAC,MAAO,OAAQ,MAAO,MAAO,OAAQ,MAAO,QA2BlEC,EAAoD,EAAGC,QAAOC,WAAUC,WAAUC,YACtF,MAAMC,UAAEA,GAAcC,IAChBC,EAAkBF,EAAU,wCAAyC,CACzEG,YAAa,UAETC,EAAuBJ,EAAU,2CAA4C,CACjFK,UAAWX,EAAmBY,KAAK,QAGrC,OACEC,EAACC,EAAU,CACTC,iBAAkBf,EAClBK,MAAOA,EACPH,MAAOA,EACPc,oBAAqBR,EACrBE,qBAAsBA,EACtBO,MAAM,GACNC,SA3CY,GA4CZT,YAAaU,EACbf,SAAUA,EACVD,SAAUA"}

package/dist/components/organisms/AssetManager/hooks/useAssetSelection.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react");exports.useAssetSelection=({maxSelect:s})=>{const[t,a]=e.useState(new Map);return{selectedAssetsMap:t,handleAssetClick:e.useCallback((e=>{a((t=>{const a=t.has(e.id),c=new Map(t);return a?c.delete(e.id):1===s?(c.clear(),c.set(e.id,e)):c.size<s&&c.set(e.id,e),c}))}),[s]),clearSelection:e.useCallback((()=>{a(new Map)}),[]),addAssetsToSelection:e.useCallback((e=>{a((t=>{const a=new Map(t);for(const t of e)a.size<s&&a.set(t.id,t);return a}))}),[s])}};
2	+ //# sourceMappingURL=useAssetSelection.cjs.js.map

package/dist/components/organisms/AssetManager/hooks/useAssetSelection.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAssetSelection.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetSelection.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { Asset } from '../types/assets.type';\n\ninterface UseAssetSelectionOptions {\n maxSelect: number;\n}\n\ninterface UseAssetSelectionReturn {\n selectedAssetsMap: Map<string, Asset>;\n handleAssetClick: (asset: Asset) => void;\n clearSelection: () => void;\n addAssetsToSelection: (assets: Asset[]) => void;\n}\n\n/**\n * Custom hook to manage asset selection state and logic\n * @param options - Configuration options including maxSelect limit\n * @returns Selection state and handlers\n */\nexport const useAssetSelection = ({ maxSelect }: UseAssetSelectionOptions): UseAssetSelectionReturn => {\n const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n\n const handleAssetClick = useCallback(\n (asset: Asset): void => {\n setSelectedAssetsMap((prevMap) => {\n const isSelected = prevMap.has(asset.id);\n const newMap = new Map(prevMap);\n\n if (isSelected) {\n // Always allow deselecting an already selected asset\n newMap.delete(asset.id);\n } else if (maxSelect === 1) {\n // Single select mode: replace selection\n newMap.clear();\n newMap.set(asset.id, asset);\n } else if (newMap.size < maxSelect) {\n // Multi-select mode: add if under limit\n newMap.set(asset.id, asset);\n }\n // If at max limit and trying to select a new asset, do nothing\n return newMap;\n });\n },\n [maxSelect],\n );\n\n const clearSelection = useCallback((): void => {\n setSelectedAssetsMap(new Map());\n }, []);\n\n const addAssetsToSelection = useCallback(\n (assets: Asset[]): void => {\n setSelectedAssetsMap((prevMap) => {\n const newMap = new Map(prevMap);\n // Add uploaded assets to selection, respecting maxSelect limit\n for (const asset of assets) {\n if (newMap.size < maxSelect) {\n newMap.set(asset.id, asset);\n }\n }\n return newMap;\n });\n },\n [maxSelect],\n );\n\n return {\n selectedAssetsMap,\n handleAssetClick,\n clearSelection,\n addAssetsToSelection,\n };\n};\n"],"names":["maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","handleAssetClick","useCallback","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","size","clearSelection","addAssetsToSelection","assets"],"mappings":"8DAoBiC,EAAGA,gBAClC,MAAOC,EAAmBC,GAAwBC,EAAAA,SAA6B,IAAIC,KA8CnF,MAAO,CACLH,oBACAI,iBA9CuBC,eACtBC,IACCL,GAAsBM,IACpB,MAAMC,EAAaD,EAAQE,IAAIH,EAAMI,IAC/BC,EAAS,IAAIR,IAAII,GAcvB,OAZIC,EAEFG,EAAOC,OAAON,EAAMI,IACG,IAAdX,GAETY,EAAOE,QACPF,EAAOG,IAAIR,EAAMI,GAAIJ,IACZK,EAAOI,KAAOhB,GAEvBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGhBK,OAGX,CAACZ,IA0BDiB,eAvBqBX,EAAAA,aAAY,KACjCJ,EAAqB,IAAIE,OACxB,IAsBDc,qBApB2BZ,eAC1Ba,IACCjB,GAAsBM,IACpB,MAAMI,EAAS,IAAIR,IAAII,GAEvB,IAAK,MAAMD,KAASY,EACdP,EAAOI,KAAOhB,GAChBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGzB,OAAOK,OAGX,CAACZ"}

package/dist/components/organisms/AssetManager/hooks/useAssetSelection.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { Asset } from '@flipdish/asset-management';
+interface UseAssetSelectionOptions {
+    maxSelect: number;
+}
+interface UseAssetSelectionReturn {
+    selectedAssetsMap: Map<string, Asset>;
+    handleAssetClick: (asset: Asset) => void;
+    clearSelection: () => void;
+    addAssetsToSelection: (assets: Asset[]) => void;
+}
+/**
+ * Custom hook to manage asset selection state and logic
+ * @param options - Configuration options including maxSelect limit
+ * @returns Selection state and handlers
+ */
+declare const useAssetSelection: ({ maxSelect }: UseAssetSelectionOptions) => UseAssetSelectionReturn;
+export { useAssetSelection };

package/dist/components/organisms/AssetManager/hooks/useAssetSelection.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useState as e,useCallback as t}from"react";const s=({maxSelect:s})=>{const[n,c]=e(new Map);return{selectedAssetsMap:n,handleAssetClick:t((e=>{c((t=>{const n=t.has(e.id),c=new Map(t);return n?c.delete(e.id):1===s?(c.clear(),c.set(e.id,e)):c.size<s&&c.set(e.id,e),c}))}),[s]),clearSelection:t((()=>{c(new Map)}),[]),addAssetsToSelection:t((e=>{c((t=>{const n=new Map(t);for(const t of e)n.size<s&&n.set(t.id,t);return n}))}),[s])}};export{s as useAssetSelection};
2	+ //# sourceMappingURL=useAssetSelection.js.map

package/dist/components/organisms/AssetManager/hooks/useAssetSelection.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAssetSelection.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetSelection.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { Asset } from '../types/assets.type';\n\ninterface UseAssetSelectionOptions {\n maxSelect: number;\n}\n\ninterface UseAssetSelectionReturn {\n selectedAssetsMap: Map<string, Asset>;\n handleAssetClick: (asset: Asset) => void;\n clearSelection: () => void;\n addAssetsToSelection: (assets: Asset[]) => void;\n}\n\n/**\n * Custom hook to manage asset selection state and logic\n * @param options - Configuration options including maxSelect limit\n * @returns Selection state and handlers\n */\nexport const useAssetSelection = ({ maxSelect }: UseAssetSelectionOptions): UseAssetSelectionReturn => {\n const [selectedAssetsMap, setSelectedAssetsMap] = useState<Map<string, Asset>>(new Map());\n\n const handleAssetClick = useCallback(\n (asset: Asset): void => {\n setSelectedAssetsMap((prevMap) => {\n const isSelected = prevMap.has(asset.id);\n const newMap = new Map(prevMap);\n\n if (isSelected) {\n // Always allow deselecting an already selected asset\n newMap.delete(asset.id);\n } else if (maxSelect === 1) {\n // Single select mode: replace selection\n newMap.clear();\n newMap.set(asset.id, asset);\n } else if (newMap.size < maxSelect) {\n // Multi-select mode: add if under limit\n newMap.set(asset.id, asset);\n }\n // If at max limit and trying to select a new asset, do nothing\n return newMap;\n });\n },\n [maxSelect],\n );\n\n const clearSelection = useCallback((): void => {\n setSelectedAssetsMap(new Map());\n }, []);\n\n const addAssetsToSelection = useCallback(\n (assets: Asset[]): void => {\n setSelectedAssetsMap((prevMap) => {\n const newMap = new Map(prevMap);\n // Add uploaded assets to selection, respecting maxSelect limit\n for (const asset of assets) {\n if (newMap.size < maxSelect) {\n newMap.set(asset.id, asset);\n }\n }\n return newMap;\n });\n },\n [maxSelect],\n );\n\n return {\n selectedAssetsMap,\n handleAssetClick,\n clearSelection,\n addAssetsToSelection,\n };\n};\n"],"names":["useAssetSelection","maxSelect","selectedAssetsMap","setSelectedAssetsMap","useState","Map","handleAssetClick","useCallback","asset","prevMap","isSelected","has","id","newMap","delete","clear","set","size","clearSelection","addAssetsToSelection","assets"],"mappings":"wDAoBaA,EAAoB,EAAGC,gBAClC,MAAOC,EAAmBC,GAAwBC,EAA6B,IAAIC,KA8CnF,MAAO,CACLH,oBACAI,iBA9CuBC,GACtBC,IACCL,GAAsBM,IACpB,MAAMC,EAAaD,EAAQE,IAAIH,EAAMI,IAC/BC,EAAS,IAAIR,IAAII,GAcvB,OAZIC,EAEFG,EAAOC,OAAON,EAAMI,IACG,IAAdX,GAETY,EAAOE,QACPF,EAAOG,IAAIR,EAAMI,GAAIJ,IACZK,EAAOI,KAAOhB,GAEvBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGhBK,OAGX,CAACZ,IA0BDiB,eAvBqBX,GAAY,KACjCJ,EAAqB,IAAIE,OACxB,IAsBDc,qBApB2BZ,GAC1Ba,IACCjB,GAAsBM,IACpB,MAAMI,EAAS,IAAIR,IAAII,GAEvB,IAAK,MAAMD,KAASY,EACdP,EAAOI,KAAOhB,GAChBY,EAAOG,IAAIR,EAAMI,GAAIJ,GAGzB,OAAOK,OAGX,CAACZ"}

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react"),l=require("./useUploadAsset.cjs.js");exports.useAssetUploadManager=({orgId:a,brandId:s,onUploadSuccess:r,getErrorMessage:o})=>{const[d,n]=e.useState([]),[u,t]=e.useState(null),c=l.useUploadAsset(),i=e.useCallback((e=>{if(0===e.length)return;t(null);const l=e.map((e=>({file:e})));n((e=>[...e,...l]))}),[]),p=e.useCallback((e=>{n((l=>l.filter((l=>l.file!==e))))}),[]),U=e.useCallback((()=>{t(null),c.mutate({orgId:a,brandId:s,files:d.map((e=>e.file))},{onSuccess:e=>{const l=e.data\|\|[];r&&r(l),n([])},onError:e=>{console.error("Upload failed:",e);const l=o(e);t(l)}})}),[a,s,d,c,r,o]),g=e.useCallback((()=>{n([])}),[]),b=e.useCallback((()=>{t(null)}),[]);return{uploadedFiles:d,uploadError:u,isUploading:c.isPending,handleUpload:i,handleRemove:p,handleSave:U,clearUploadedFiles:g,clearSaveUploadError:b}};
2	+ //# sourceMappingURL=useAssetUploadManager.cjs.js.map

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAssetUploadManager.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n orgId: string;\n brandId?: string;\n onUploadSuccess?: (assets: Asset[]) => void;\n getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n uploadedFiles: FileUploadState[];\n uploadError: string | null;\n isUploading: boolean;\n handleUpload: (files: File[]) => void;\n handleRemove: (file: File) => void;\n handleSave: () => void;\n clearUploadedFiles: () => void;\n clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n orgId,\n brandId,\n onUploadSuccess,\n getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n const [uploadError, setUploadError] = useState<string | null>(null);\n const uploadMutation = useUploadAsset();\n\n const handleUpload = useCallback((files: File[]): void => {\n if (files.length === 0) {\n return;\n }\n // Clear any upload errors when files are added\n setUploadError(null);\n // Add files with uploading state\n const newFiles: FileUploadState[] = files.map((file) => ({\n file,\n }));\n setUploadedFiles((prev) => [...prev, ...newFiles]);\n }, []);\n\n const handleRemove = useCallback((fileToRemove: File): void => {\n setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n }, []);\n\n const handleSave = useCallback((): void => {\n // Clear any previous errors\n setUploadError(null);\n\n uploadMutation.mutate(\n {\n orgId,\n brandId,\n files: uploadedFiles.map((file) => file.file),\n },\n {\n onSuccess: (response) => {\n const uploadedAssets = response.data || [];\n // Notify parent component of successful upload\n if (onUploadSuccess) {\n onUploadSuccess(uploadedAssets);\n }\n // Clear uploaded files after successful upload\n setUploadedFiles([]);\n },\n onError: (error) => {\n console.error('Upload failed:', error);\n // Display the error message\n const errorMessage = getErrorMessage(error);\n setUploadError(errorMessage);\n },\n },\n );\n }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n const clearUploadedFiles = useCallback((): void => {\n setUploadedFiles([]);\n }, []);\n\n const clearSaveUploadError = useCallback((): void => {\n setUploadError(null);\n }, []);\n\n return {\n uploadedFiles,\n uploadError,\n isUploading: uploadMutation.isPending,\n handleUpload,\n handleRemove,\n handleSave,\n clearUploadedFiles,\n clearSaveUploadError,\n };\n};\n"],"names":["orgId","brandId","onUploadSuccess","getErrorMessage","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","uploadMutation","useUploadAsset","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"uGA+BqC,EACnCA,QACAC,UACAC,kBACAC,sBAEA,MAAOC,EAAeC,GAAoBC,EAAAA,SAA4B,KAC/DC,EAAaC,GAAkBF,EAAAA,SAAwB,MACxDG,EAAiBC,EAAAA,iBAEjBC,EAAeC,eAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFN,EAAe,MAEf,MAAMO,EAA8BF,EAAMG,KAAKC,IAAI,CACjDA,WAEFZ,GAAkBa,GAAS,IAAIA,KAASH,OACvC,IAEGI,EAAeP,eAAaQ,IAChCf,GAAkBa,GAASA,EAAKG,QAAQC,GAAcA,EAAUL,OAASG,QACxE,IAEGG,EAAaX,EAAAA,aAAY,KAE7BJ,EAAe,MAEfC,EAAee,OACb,CACExB,QACAC,UACAY,MAAOT,EAAcY,KAAKC,GAASA,EAAKA,QAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC1B,GACFA,EAAgByB,GAGlBtB,EAAiB,KAEnBwB,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAe7B,EAAgB2B,GACrCtB,EAAewB,QAIpB,CAAChC,EAAOC,EAASG,EAAeK,EAAgBP,EAAiBC,IAE9D8B,EAAqBrB,EAAAA,aAAY,KACrCP,EAAiB,MAChB,IAEG6B,EAAuBtB,EAAAA,aAAY,KACvCJ,EAAe,QACd,IAEH,MAAO,CACLJ,gBACAG,cACA4B,YAAa1B,EAAe2B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import { FileUploadState } from '../../FileUpload/index.js';
+import { Asset } from '@flipdish/asset-management';
+interface UseAssetUploadManagerOptions {
+    orgId: string;
+    brandId?: string;
+    onUploadSuccess?: (assets: Asset[]) => void;
+    getErrorMessage: (error: Error) => string;
+}
+interface UseAssetUploadManagerReturn {
+    uploadedFiles: FileUploadState[];
+    uploadError: string | null;
+    isUploading: boolean;
+    handleUpload: (files: File[]) => void;
+    handleRemove: (file: File) => void;
+    handleSave: () => void;
+    clearUploadedFiles: () => void;
+    clearSaveUploadError: () => void;
+}
+/**
+ * Custom hook to manage asset upload state and logic
+ * Handles file management, upload execution, and error handling
+ *
+ * @param options - Configuration options for upload management
+ * @returns Upload state and handlers
+ */
+declare const useAssetUploadManager: ({ orgId, brandId, onUploadSuccess, getErrorMessage, }: UseAssetUploadManagerOptions) => UseAssetUploadManagerReturn;
+export { useAssetUploadManager };

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{useState as e,useCallback as l}from"react";import{useUploadAsset as o}from"./useUploadAsset.js";const r=({orgId:r,brandId:a,onUploadSuccess:n,getErrorMessage:d})=>{const[s,t]=e([]),[i,p]=e(null),c=o(),u=l((e=>{if(0===e.length)return;p(null);const l=e.map((e=>({file:e})));t((e=>[...e,...l]))}),[]),f=l((e=>{t((l=>l.filter((l=>l.file!==e))))}),[]),m=l((()=>{p(null),c.mutate({orgId:r,brandId:a,files:s.map((e=>e.file))},{onSuccess:e=>{const l=e.data\|\|[];n&&n(l),t([])},onError:e=>{console.error("Upload failed:",e);const l=d(e);p(l)}})}),[r,a,s,c,n,d]),g=l((()=>{t([])}),[]),U=l((()=>{p(null)}),[]);return{uploadedFiles:s,uploadError:i,isUploading:c.isPending,handleUpload:u,handleRemove:f,handleSave:m,clearUploadedFiles:g,clearSaveUploadError:U}};export{r as useAssetUploadManager};
2	+ //# sourceMappingURL=useAssetUploadManager.js.map

package/dist/components/organisms/AssetManager/hooks/useAssetUploadManager.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAssetUploadManager.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssetUploadManager.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { FileUploadState } from '../../FileUpload';\nimport type { Asset } from '../types/assets.type';\nimport { useUploadAsset } from './useUploadAsset';\n\ninterface UseAssetUploadManagerOptions {\n orgId: string;\n brandId?: string;\n onUploadSuccess?: (assets: Asset[]) => void;\n getErrorMessage: (error: Error) => string;\n}\n\ninterface UseAssetUploadManagerReturn {\n uploadedFiles: FileUploadState[];\n uploadError: string | null;\n isUploading: boolean;\n handleUpload: (files: File[]) => void;\n handleRemove: (file: File) => void;\n handleSave: () => void;\n clearUploadedFiles: () => void;\n clearSaveUploadError: () => void;\n}\n\n/**\n * Custom hook to manage asset upload state and logic\n * Handles file management, upload execution, and error handling\n *\n * @param options - Configuration options for upload management\n * @returns Upload state and handlers\n */\nexport const useAssetUploadManager = ({\n orgId,\n brandId,\n onUploadSuccess,\n getErrorMessage,\n}: UseAssetUploadManagerOptions): UseAssetUploadManagerReturn => {\n const [uploadedFiles, setUploadedFiles] = useState<FileUploadState[]>([]);\n const [uploadError, setUploadError] = useState<string | null>(null);\n const uploadMutation = useUploadAsset();\n\n const handleUpload = useCallback((files: File[]): void => {\n if (files.length === 0) {\n return;\n }\n // Clear any upload errors when files are added\n setUploadError(null);\n // Add files with uploading state\n const newFiles: FileUploadState[] = files.map((file) => ({\n file,\n }));\n setUploadedFiles((prev) => [...prev, ...newFiles]);\n }, []);\n\n const handleRemove = useCallback((fileToRemove: File): void => {\n setUploadedFiles((prev) => prev.filter((fileState) => fileState.file !== fileToRemove));\n }, []);\n\n const handleSave = useCallback((): void => {\n // Clear any previous errors\n setUploadError(null);\n\n uploadMutation.mutate(\n {\n orgId,\n brandId,\n files: uploadedFiles.map((file) => file.file),\n },\n {\n onSuccess: (response) => {\n const uploadedAssets = response.data || [];\n // Notify parent component of successful upload\n if (onUploadSuccess) {\n onUploadSuccess(uploadedAssets);\n }\n // Clear uploaded files after successful upload\n setUploadedFiles([]);\n },\n onError: (error) => {\n console.error('Upload failed:', error);\n // Display the error message\n const errorMessage = getErrorMessage(error);\n setUploadError(errorMessage);\n },\n },\n );\n }, [orgId, brandId, uploadedFiles, uploadMutation, onUploadSuccess, getErrorMessage]);\n\n const clearUploadedFiles = useCallback((): void => {\n setUploadedFiles([]);\n }, []);\n\n const clearSaveUploadError = useCallback((): void => {\n setUploadError(null);\n }, []);\n\n return {\n uploadedFiles,\n uploadError,\n isUploading: uploadMutation.isPending,\n handleUpload,\n handleRemove,\n handleSave,\n clearUploadedFiles,\n clearSaveUploadError,\n };\n};\n"],"names":["useAssetUploadManager","orgId","brandId","onUploadSuccess","getErrorMessage","uploadedFiles","setUploadedFiles","useState","uploadError","setUploadError","uploadMutation","useUploadAsset","handleUpload","useCallback","files","length","newFiles","map","file","prev","handleRemove","fileToRemove","filter","fileState","handleSave","mutate","onSuccess","response","uploadedAssets","data","onError","error","console","errorMessage","clearUploadedFiles","clearSaveUploadError","isUploading","isPending"],"mappings":"uGA+BO,MAAMA,EAAwB,EACnCC,QACAC,UACAC,kBACAC,sBAEA,MAAOC,EAAeC,GAAoBC,EAA4B,KAC/DC,EAAaC,GAAkBF,EAAwB,MACxDG,EAAiBC,IAEjBC,EAAeC,GAAaC,IAChC,GAAqB,IAAjBA,EAAMC,OACR,OAGFN,EAAe,MAEf,MAAMO,EAA8BF,EAAMG,KAAKC,IAAI,CACjDA,WAEFZ,GAAkBa,GAAS,IAAIA,KAASH,OACvC,IAEGI,EAAeP,GAAaQ,IAChCf,GAAkBa,GAASA,EAAKG,QAAQC,GAAcA,EAAUL,OAASG,QACxE,IAEGG,EAAaX,GAAY,KAE7BJ,EAAe,MAEfC,EAAee,OACb,CACExB,QACAC,UACAY,MAAOT,EAAcY,KAAKC,GAASA,EAAKA,QAE1C,CACEQ,UAAYC,IACV,MAAMC,EAAiBD,EAASE,MAAQ,GAEpC1B,GACFA,EAAgByB,GAGlBtB,EAAiB,KAEnBwB,QAAUC,IACRC,QAAQD,MAAM,iBAAkBA,GAEhC,MAAME,EAAe7B,EAAgB2B,GACrCtB,EAAewB,QAIpB,CAAChC,EAAOC,EAASG,EAAeK,EAAgBP,EAAiBC,IAE9D8B,EAAqBrB,GAAY,KACrCP,EAAiB,MAChB,IAEG6B,EAAuBtB,GAAY,KACvCJ,EAAe,QACd,IAEH,MAAO,CACLJ,gBACAG,cACA4B,YAAa1B,EAAe2B,UAC5BzB,eACAQ,eACAI,aACAU,qBACAC"}

package/dist/components/organisms/AssetManager/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),s=require("@mui/material/styles"),r=require("@mui/material/Box"),i=require("../../atoms/Tab/index.cjs.js"),t=require("../../molecules/Modal/index.cjs.js"),n=require("../../molecules/Tabs/index.cjs.js"),l=require("../../../providers/TranslationProvider.cjs.js"),o=require("@tanstack/react-query"),c=require("./hooks/useGetAssets.cjs.js"),d=require("./hooks/useUploadAsset.cjs.js"),u=require("./LibraryTabContent/index.cjs.js"),p=require("./UploadTabContent/index.cjs.js");const g=s.styled(r)((({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)}))),m=new o.QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),b=({open:s,onClose:r,onSelect:o,orgId:m,brandId:b,maxSelect:j=1})=>{const[f,y]=a.useState(new Map),[x,C]=a.useState("library"),[h,q]=a.useState([]),v=d.useUploadAsset(),{translate:k}=l.useTranslation(),{data:w,isLoading:S,error:M}=c.useGetAssets(m,s,b);a.useEffect((()=>{s||(y(new Map),q([]))}),[s]);const A=a.useCallback((()=>{y(new Map),r()}),[r]),T=a.useCallback((()=>{if(0===f.size)return;const e=Array.from(f.values());o&&e.length>0&&o(e),y(new Map),r()}),[o,f,r]),U=a.useCallback((e=>{y((a=>{const s=a.has(e.id),r=new Map(a);return s?r.delete(e.id):1===j?(r.clear(),r.set(e.id,e)):r.size<j&&r.set(e.id,e),r}))}),[j]),I=a.useCallback((()=>{v.mutate({orgId:m,brandId:b,files:h.map((e=>e.file))},{onSuccess:e=>{const a=e.data||[];y((e=>{const s=new Map(e);for(const e of a)s.size<j&&s.set(e.id,e);return s})),q([]),C("library")},onError:e=>{console.error("Upload failed:",e)}})}),[m,b,h,v,j]),L=a.useCallback((e=>{if(0===e.length)return;const a=e.map((e=>({file:e})));q((e=>[...e,...a]))}),[]),z=a.useCallback((e=>{q((a=>a.filter((a=>a.file!==e))))}),[]),P=a.useMemo((()=>{const e={label:k("Cancel"),onClick:A,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:k("Select"),onClick:T,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:k("Save"),onClick:I,disabled:v.isPending,variant:"primary",id:"asset-manager-upload"}]};return a[x]??a.library}),[x,v.isPending,A,T,I,k]);return e.jsxs(t,{actions:P,onClose:A,open:s,size:"large",title:k("library"===x?"Select_Images":"Upload_Images"),children:[e.jsxs(n,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{C(a),q([])},value:x,children:[e.jsx(i,{label:k("Upload"),value:"upload"}),e.jsx(i,{label:k("Library"),value:"library"})]}),e.jsx(g,{children:"library"===x?e.jsx(u,{assets:w?.data,error:M,isLoading:S,onAssetClick:U,selectedAssets:f}):e.jsx(p,{files:h,onRemove:z,onUpload:L})})]})};module.exports=a=>e.jsx(o.QueryClientProvider,{client:m,children:e.jsx(b,{...a})});
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),s=require("@mui/material/styles"),r=require("@mui/material/Box"),l=require("../../atoms/Tab/index.cjs.js"),i=require("../../molecules/Modal/index.cjs.js"),t=require("../../molecules/Tabs/index.cjs.js"),n=require("../../../providers/TranslationProvider.cjs.js"),o=require("@tanstack/react-query"),d=require("./hooks/useAssetSelection.cjs.js"),c=require("./hooks/useAssetUploadManager.cjs.js"),u=require("./hooks/useGetAssets.cjs.js"),p=require("./LibraryTabContent/index.cjs.js"),g=require("./UploadTabContent/index.cjs.js");const m=s.styled(r)((({theme:e})=>({height:"calc(70vh - 200px)",overflowY:"auto",marginTop:e.spacing(2),marginRight:e.spacing(-2),marginLeft:e.spacing(-1),marginBottom:e.spacing(-1),paddingRight:e.spacing(2),paddingLeft:e.spacing(1),paddingBottom:e.spacing(1)}))),j=new o.QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1,retry:2}}}),b=({open:s,onClose:r,onSelect:o,orgId:j,brandId:b,maxSelect:y=1})=>{const[h,x]=a.useState("library"),{translate:v}=n.useTranslation(),{data:q,isLoading:C,error:S}=u.useGetAssets(j,s,b),{selectedAssetsMap:A,handleAssetClick:f,clearSelection:k,addAssetsToSelection:U}=d.useAssetSelection({maxSelect:y}),{uploadedFiles:T,uploadError:_,isUploading:I,handleUpload:L,handleRemove:M,handleSave:E,clearUploadedFiles:F,clearSaveUploadError:R}=c.useAssetUploadManager({orgId:j,brandId:b,onUploadSuccess:e=>{U(e),x("library")},getErrorMessage:()=>v("Failed_to_upload_assets_try_again")});a.useEffect((()=>{s||(k(),F(),R())}),[s,k,F,R]);const w=a.useCallback((()=>{k(),r()}),[r,k]),B=a.useCallback((()=>{if(0===A.size)return void r();const e=Array.from(A.values());o&&e.length>0&&o(e),k(),r()}),[o,A,r,k]),z=a.useMemo((()=>{const e={label:v("Cancel"),onClick:w,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},a={library:[e,{label:v("Select"),onClick:B,variant:"primary",id:"asset-manager-select"}],upload:[e,{label:v("Save"),onClick:E,disabled:I,variant:"primary",id:"asset-manager-upload"}]};return a[h]??a.library}),[h,I,w,B,E,v]);return e.jsxs(i,{actions:z,onClose:w,open:s,size:"large",title:v("library"===h?"Select_Images":"Upload_Images"),children:[e.jsxs(t,{fdKey:"asset-manager-tabs",onChange:(e,a)=>{x(a),F()},value:h,children:[e.jsx(l,{label:v("Upload"),value:"upload"}),e.jsx(l,{label:v("Library"),value:"library"})]}),e.jsx(m,{children:"library"===h?e.jsx(p,{assets:q?.data,error:S,isLoading:C,onAssetClick:f,selectedAssets:A}):e.jsx(g,{error:_,files:T,onRemove:M,onUpload:L})})]})};module.exports=a=>e.jsx(o.QueryClientProvider,{client:j,children:e.jsx(b,{...a})});
 //# sourceMappingURL=index.cjs.js.map