@flipdish/portal-library 7.6.0 → 7.8.0

package/dist/components/molecules/DropdownMenu/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/DropdownMenu/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport MuiListSubheader from '@mui/material/ListSubheader';\nimport type { MenuProps as MuiMenuProps } from '@mui/material/Menu';\nimport { styled } from '@mui/material/styles';\n\nimport Avatar from '@fd/components/atoms/Avatar';\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Divider from '@fd/components/atoms/Divider';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport ListItemText from '@fd/components/atoms/ListItemText';\nimport MenuItem, {\n  type CheckboxMenuItemProps,\n  type IconMenuItemProps,\n  type MenuItemProps,\n  type TextMenuItemProps,\n} from '@fd/components/atoms/MenuItem';\nimport Menu from '@fd/components/molecules/Menu';\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport MoreVerticalIcon from '@fd/icons/MoreVertical';\n\n/** Props for the DropdownMenuCheckboxOption component */\nexport type DropdownMenuCheckboxOption = Omit<CheckboxMenuItemProps, 'type'>;\n\n/** Props for the DropdownMenuIconOption component */\nexport type DropdownMenuIconOption = Omit<IconMenuItemProps, 'type'>;\n\n/** Props for the DropdownMenuTextOption component */\nexport type DropdownMenuTextOption = Omit<TextMenuItemProps, 'type'>;\n\ninterface DropdownMenuGroupOptionBase {\n  /** Label of the group */\n  groupLabel?: React.ReactNode;\n  /** ID of the group */\n  id?: string;\n}\n\ninterface DropdownMenuGroupOptionCheckbox extends DropdownMenuGroupOptionBase {\n  /** Type of the menu options */\n  optionsType: 'checkboxes';\n  /** Options of the menu */\n  options: DropdownMenuCheckboxOption[];\n}\n\ninterface DropdownMenuGroupOptionIcon extends DropdownMenuGroupOptionBase {\n  /** Type of the menu options */\n  optionsType: 'icons';\n  /** Options of the menu */\n  options: DropdownMenuIconOption[];\n}\n\ninterface DropdownMenuGroupOptionText extends DropdownMenuGroupOptionBase {\n  /** Type of the menu options */\n  optionsType?: 'text';\n  /** Options of the menu */\n  options: DropdownMenuTextOption[];\n}\n\n/** Props for the DropdownMenuGroupOption component */\nexport type DropdownMenuGroupOption =\n  | DropdownMenuGroupOptionCheckbox\n  | DropdownMenuGroupOptionIcon\n  | DropdownMenuGroupOptionText;\n\ninterface DropdownMenuBaseCommonProps extends Omit<MuiMenuProps, 'anchorEl' | 'onClose' | 'open'> {\n  /** Alignment of the menu */\n  align?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n  /** Disabled state of the menu */\n  disabled?: boolean;\n  /** Key of the menu */\n  fdKey: string;\n  /** Size of the menu */\n  size?: 'medium' | 'small';\n}\n\ninterface DropdownMenuCheckboxesProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'checkboxes';\n  /** Options of the menu */\n  options: DropdownMenuCheckboxOption[];\n}\n\ninterface DropdownMenuIconsProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'icons';\n  /** Options of the menu */\n  options: DropdownMenuIconOption[];\n}\n\ninterface DropdownMenuTextProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'text';\n  /** Options of the menu */\n  options: DropdownMenuTextOption[];\n}\n\ntype DropdownMenuOptionsProps = DropdownMenuCheckboxesProps | DropdownMenuIconsProps | DropdownMenuTextProps;\n\ninterface DropdownMenuOptionsGroupsProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'groups';\n  /** Options of the menu */\n  options: DropdownMenuGroupOption[];\n}\n\ntype DropdownMenuBaseProps = DropdownMenuOptionsGroupsProps | DropdownMenuOptionsProps;\n\ntype AvatarDropdownMenuProps = DropdownMenuBaseProps & {\n  /** Aria-label of the trigger */\n  ariaLabel?: never;\n  /** Secondary text of the menu item */\n  secondaryText?: string;\n  /** Source URL for the avatar image */\n  avatarSrc: string;\n  /** Label of the trigger */\n  label: string;\n  /** Type of the menu item */\n  type: 'avatar';\n};\n\ntype ButtonDropdownMenuProps = DropdownMenuBaseProps & {\n  /** Aria-label of the trigger */\n  ariaLabel?: never;\n  /** Secondary text of the menu item */\n  secondaryText?: never;\n  /** Source URL for the avatar image */\n  avatarSrc?: never;\n  /** Label of the trigger */\n  label: string;\n  /** Type of the menu item */\n  type: 'button';\n};\n\ntype IconButtonDropdownMenuProps = DropdownMenuBaseProps & {\n  /** Aria-label of the trigger */\n  ariaLabel: string;\n  /** Secondary text of the menu item */\n  secondaryText?: never;\n  /** Source URL for the avatar image */\n  avatarSrc?: never;\n  /** Label of the trigger */\n  label?: never;\n  /** Type of the menu item */\n  type: 'icon-button';\n};\n\n/** Props for the DropdownMenu component */\nexport type DropdownMenuProps =\n  | AvatarDropdownMenuProps\n  | ButtonDropdownMenuProps\n  | IconButtonDropdownMenuProps;\n\nconst StyledAvatarDropdownMenuButton = styled(Button)<{ disabled?: boolean; size: 'medium' | 'small' }>(\n  ({ theme, size, disabled }) => ({\n    height: size === 'small' ? 48 : 64,\n    padding: theme.spacing(1, 2),\n    textDecoration: 'none',\n\n    '& .MuiButton-icon': {\n      color: disabled\n        ? theme.palette.semantic.icon['icon-disabled']\n        : theme.palette.semantic.icon['icon-strong'],\n    },\n\n    '&:focus-visible, &.Mui-focusVisible': {\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n    },\n  }),\n);\n\nconst StyledAvatarListSubheader = styled(MuiListSubheader)(({ theme }) => ({\n  borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  padding: theme.spacing(1, 2),\n}));\n\n// Preserve MUI internals so MenuList handles it correctly\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n(StyledAvatarListSubheader as any).muiName = (MuiListSubheader as any).muiName;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n(StyledAvatarListSubheader as any).muiSkipListHighlight =\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n  (MuiListSubheader as unknown as { muiSkipListHighlight?: boolean }).muiSkipListHighlight ?? true;\n\nconst StyledAvatarLabelContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['disabled', 'size'].includes(prop as string),\n})<{ disabled: boolean; size: 'medium' | 'small' }>(({ theme, disabled, size }) => ({\n  display: 'flex',\n  gap: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),\n  alignItems: 'center',\n  textAlign: 'left',\n\n  ...(disabled && {\n    '& .MuiAvatar-root': {\n      opacity: theme.palette.action.disabledOpacity,\n    },\n    ' & .MuiListItemText-root, & .MuiListItemText-primary, & .MuiListItemText-secondary': {\n      color: theme.palette.semantic.text['text-disabled'],\n    },\n  }),\n}));\n\nconst mapAlignToOrigins = (\n  align: DropdownMenuProps['align'] = 'bottom-left',\n): Pick<MuiMenuProps, 'anchorOrigin' | 'transformOrigin'> => {\n  switch (align) {\n    case 'bottom-left':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n        transformOrigin: { vertical: 'top', horizontal: 'left' },\n      };\n    case 'bottom-right':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n        transformOrigin: { vertical: 'top', horizontal: 'right' },\n      };\n    case 'top-left':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'left' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'left' },\n      };\n    case 'top-right':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'right' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'right' },\n      };\n    default:\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n        transformOrigin: { vertical: 'top', horizontal: 'left' },\n      };\n  }\n};\n\n/**\n * A customizable DropdownMenu component supporting button and checkbox menu items with optional groups.\n *\n * @param props - The component props\n * @returns The rendered DropdownMenu component\n */\nexport const DropdownMenu = ({\n  align = 'bottom-left',\n  ariaLabel = '',\n  avatarSrc = '',\n  disabled = false,\n  fdKey,\n  label,\n  options = [],\n  optionsType = 'text',\n  secondaryText,\n  size = 'medium',\n  type = 'button',\n  ...props\n}: DropdownMenuProps): JSX.Element => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n\n  const triggerId = `${fdKey}-trigger`;\n  const menuId = `${fdKey}-menu`;\n\n  const handleOpen = (event: React.MouseEvent<HTMLElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleClick =\n    (onClick?: React.MouseEventHandler<HTMLLIElement>) =>\n    (event: React.MouseEvent<HTMLLIElement>): void => {\n      onClick?.(event);\n      handleClose();\n    };\n\n  const renderAvatarLabelContainer = (size: 'medium' | 'small'): JSX.Element | null => (\n    <StyledAvatarLabelContainer disabled={disabled} size={size}>\n      <Avatar\n        aria-hidden\n        alt=\"\" // Avatar is described by ListItemText\n        size={size}\n        src={avatarSrc}\n        type=\"logo\"\n      />\n      <ListItemText primary={label} secondary={secondaryText} />\n    </StyledAvatarLabelContainer>\n  );\n\n  const renderTrigger = (): JSX.Element => {\n    if (type === 'icon-button') {\n      return (\n        <IconButton\n          aria-controls={open ? menuId : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"menu\"\n          aria-label={ariaLabel}\n          disabled={disabled}\n          fdKey={fdKey}\n          id={triggerId}\n          onClick={handleOpen}\n          size={size}\n          variant=\"secondary\"\n        >\n          <MoreVerticalIcon />\n        </IconButton>\n      );\n    }\n    if (type === 'avatar') {\n      return (\n        <StyledAvatarDropdownMenuButton\n          aria-controls={open ? menuId : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"menu\"\n          disabled={disabled}\n          endIcon={open ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n          fdKey={fdKey}\n          id={triggerId}\n          onClick={handleOpen}\n          size={size}\n          variant=\"tertiary\"\n        >\n          {renderAvatarLabelContainer(size)}\n        </StyledAvatarDropdownMenuButton>\n      );\n    }\n\n    return (\n      <Button\n        aria-controls={open ? menuId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        disabled={disabled}\n        endIcon={open ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n        fdKey={fdKey}\n        id={triggerId}\n        onClick={handleOpen}\n        size={size}\n        variant=\"secondary\"\n      >\n        {label}\n      </Button>\n    );\n  };\n\n  const renderCheckboxItems = (items: CheckboxMenuItemProps[], keyPrefix: string): JSX.Element[] =>\n    items.map((item, index) => {\n      return (\n        <MenuItem\n          key={item.id ?? `${keyPrefix}-checkbox-${index}`}\n          checked={item.checked}\n          disabled={item.disabled}\n          label={item.label}\n          onCheckedChange={item.onCheckedChange}\n          secondaryText={item.secondaryText}\n          type=\"checkbox\"\n        />\n      );\n    });\n\n  const renderIconItems = (items: IconMenuItemProps[], keyPrefix: string): JSX.Element[] =>\n    items.map((item, index) => {\n      return (\n        <MenuItem\n          key={item.id ?? `${keyPrefix}-icon-${index}`}\n          disabled={item.disabled}\n          icon={item.icon}\n          label={item.label}\n          onClick={handleClick(item.onClick)}\n          secondaryText={item.secondaryText}\n          type=\"icon\"\n        />\n      );\n    });\n\n  const renderTextItems = (items: TextMenuItemProps[], keyPrefix: string): JSX.Element[] =>\n    items.map((item, index) => {\n      return (\n        <MenuItem\n          key={item.id ?? `${keyPrefix}-text-${index}`}\n          disabled={item.disabled}\n          label={item.label}\n          onClick={handleClick(item.onClick)}\n          secondaryText={item.secondaryText}\n          type=\"text\"\n        />\n      );\n    });\n\n  const renderItems = (\n    items: Omit<MenuItemProps, 'type'>[],\n    optionsType: DropdownMenuProps['optionsType'] = 'text',\n    keyPrefix: string = 'root',\n  ): JSX.Element[] => {\n    switch (optionsType) {\n      case 'checkboxes':\n        return renderCheckboxItems(items as CheckboxMenuItemProps[], keyPrefix);\n      case 'icons':\n        return renderIconItems(items as IconMenuItemProps[], keyPrefix);\n      case 'text':\n      default:\n        return renderTextItems(items as TextMenuItemProps[], keyPrefix);\n    }\n  };\n\n  // Returns a flat array of group items (subheaders, items, dividers) needed for accessibility\n  const renderGroupItems = (groups: DropdownMenuGroupOption[]): (JSX.Element | null)[] =>\n    groups.flatMap((group, index) => {\n      const groupKey = group.id ?? `group-${index}`;\n\n      const header = group.groupLabel ? (\n        <MuiListSubheader key={`subheader-${groupKey}`}>{group.groupLabel}</MuiListSubheader>\n      ) : null;\n      const items = renderItems(group.options, group.optionsType, groupKey);\n      const divider = index < groups.length - 1 ? <Divider key={`divider-${groupKey}`} /> : null;\n\n      return [header, ...items, divider];\n    });\n\n  const renderAvatarListSubheader = (): JSX.Element => {\n    return <StyledAvatarListSubheader>{renderAvatarLabelContainer('medium')}</StyledAvatarListSubheader>;\n  };\n\n  const optionsItems = useMemo(() => {\n    if (!options || options.length === 0) {\n      return null;\n    }\n\n    if (optionsType === 'groups') {\n      return renderGroupItems(options as DropdownMenuGroupOption[]);\n    }\n\n    return renderItems(options, optionsType);\n  }, [options, optionsType]);\n\n  const origins = mapAlignToOrigins(align);\n\n  return (\n    <>\n      {renderTrigger()}\n\n      <Menu\n        {...props}\n        {...origins}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        open={open}\n        slotProps={{\n          ...props.slotProps,\n          list: {\n            ...(props.slotProps?.list ?? {}),\n            id: menuId,\n            'aria-labelledby': triggerId,\n          },\n        }}\n      >\n        {type === 'avatar' && renderAvatarListSubheader()}\n        {optionsItems}\n      </Menu>\n    </>\n  );\n};\n\nexport default DropdownMenu;\n"],"names":["StyledAvatarDropdownMenuButton","styled","Button","theme","size","disabled","height","padding","spacing","textDecoration","color","palette","semantic","icon","backgroundColor","fill","StyledAvatarListSubheader","MuiListSubheader","borderBottom","stroke","muiName","muiSkipListHighlight","StyledAvatarLabelContainer","Box","shouldForwardProp","prop","includes","display","gap","alignItems","textAlign","opacity","action","disabledOpacity","text","DropdownMenu","align","ariaLabel","avatarSrc","fdKey","label","options","optionsType","secondaryText","type","props","anchorEl","setAnchorEl","useState","open","Boolean","triggerId","menuId","handleOpen","event","currentTarget","handleClose","handleClick","onClick","renderAvatarLabelContainer","_jsxs","children","_jsx","Avatar","alt","src","ListItemText","primary","secondary","renderItems","items","keyPrefix","map","item","index","MenuItem","checked","onCheckedChange","id","renderCheckboxItems","renderIconItems","renderTextItems","optionsItems","useMemo","length","groups","flatMap","group","groupKey","groupLabel","Divider","origins","anchorOrigin","vertical","horizontal","transformOrigin","mapAlignToOrigins","_Fragment","IconButton","undefined","variant","MoreVerticalIcon","endIcon","ArrowUp01Icon","ArrowDown01Icon","Menu","onClose","slotProps","list"],"mappings":"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"}

package/dist/components/molecules/DropdownMenu/index.d.ts

@@ -0,0 +1,120 @@
+import react__default from 'react';
+import { MenuProps } from '@mui/material/Menu';
+import { CheckboxMenuItemProps, IconMenuItemProps, TextMenuItemProps } from '@fd/components/atoms/MenuItem';
+
+/** Props for the DropdownMenuCheckboxOption component */
+type DropdownMenuCheckboxOption = Omit<CheckboxMenuItemProps, 'type'>;
+/** Props for the DropdownMenuIconOption component */
+type DropdownMenuIconOption = Omit<IconMenuItemProps, 'type'>;
+/** Props for the DropdownMenuTextOption component */
+type DropdownMenuTextOption = Omit<TextMenuItemProps, 'type'>;
+interface DropdownMenuGroupOptionBase {
+    /** Label of the group */
+    groupLabel?: react__default.ReactNode;
+    /** ID of the group */
+    id?: string;
+}
+interface DropdownMenuGroupOptionCheckbox extends DropdownMenuGroupOptionBase {
+    /** Type of the menu options */
+    optionsType: 'checkboxes';
+    /** Options of the menu */
+    options: DropdownMenuCheckboxOption[];
+}
+interface DropdownMenuGroupOptionIcon extends DropdownMenuGroupOptionBase {
+    /** Type of the menu options */
+    optionsType: 'icons';
+    /** Options of the menu */
+    options: DropdownMenuIconOption[];
+}
+interface DropdownMenuGroupOptionText extends DropdownMenuGroupOptionBase {
+    /** Type of the menu options */
+    optionsType?: 'text';
+    /** Options of the menu */
+    options: DropdownMenuTextOption[];
+}
+/** Props for the DropdownMenuGroupOption component */
+type DropdownMenuGroupOption = DropdownMenuGroupOptionCheckbox | DropdownMenuGroupOptionIcon | DropdownMenuGroupOptionText;
+interface DropdownMenuBaseCommonProps extends Omit<MenuProps, 'anchorEl' | 'onClose' | 'open'> {
+    /** Alignment of the menu */
+    align?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    /** Disabled state of the menu */
+    disabled?: boolean;
+    /** Key of the menu */
+    fdKey: string;
+    /** Size of the menu */
+    size?: 'medium' | 'small';
+}
+interface DropdownMenuCheckboxesProps extends DropdownMenuBaseCommonProps {
+    /** Type of the menu options */
+    optionsType: 'checkboxes';
+    /** Options of the menu */
+    options: DropdownMenuCheckboxOption[];
+}
+interface DropdownMenuIconsProps extends DropdownMenuBaseCommonProps {
+    /** Type of the menu options */
+    optionsType: 'icons';
+    /** Options of the menu */
+    options: DropdownMenuIconOption[];
+}
+interface DropdownMenuTextProps extends DropdownMenuBaseCommonProps {
+    /** Type of the menu options */
+    optionsType: 'text';
+    /** Options of the menu */
+    options: DropdownMenuTextOption[];
+}
+type DropdownMenuOptionsProps = DropdownMenuCheckboxesProps | DropdownMenuIconsProps | DropdownMenuTextProps;
+interface DropdownMenuOptionsGroupsProps extends DropdownMenuBaseCommonProps {
+    /** Type of the menu options */
+    optionsType: 'groups';
+    /** Options of the menu */
+    options: DropdownMenuGroupOption[];
+}
+type DropdownMenuBaseProps = DropdownMenuOptionsGroupsProps | DropdownMenuOptionsProps;
+type AvatarDropdownMenuProps = DropdownMenuBaseProps & {
+    /** Aria-label of the trigger */
+    ariaLabel?: never;
+    /** Secondary text of the menu item */
+    secondaryText?: string;
+    /** Source URL for the avatar image */
+    avatarSrc: string;
+    /** Label of the trigger */
+    label: string;
+    /** Type of the menu item */
+    type: 'avatar';
+};
+type ButtonDropdownMenuProps = DropdownMenuBaseProps & {
+    /** Aria-label of the trigger */
+    ariaLabel?: never;
+    /** Secondary text of the menu item */
+    secondaryText?: never;
+    /** Source URL for the avatar image */
+    avatarSrc?: never;
+    /** Label of the trigger */
+    label: string;
+    /** Type of the menu item */
+    type: 'button';
+};
+type IconButtonDropdownMenuProps = DropdownMenuBaseProps & {
+    /** Aria-label of the trigger */
+    ariaLabel: string;
+    /** Secondary text of the menu item */
+    secondaryText?: never;
+    /** Source URL for the avatar image */
+    avatarSrc?: never;
+    /** Label of the trigger */
+    label?: never;
+    /** Type of the menu item */
+    type: 'icon-button';
+};
+/** Props for the DropdownMenu component */
+type DropdownMenuProps = AvatarDropdownMenuProps | ButtonDropdownMenuProps | IconButtonDropdownMenuProps;
+/**
+ * A customizable DropdownMenu component supporting button and checkbox menu items with optional groups.
+ *
+ * @param props - The component props
+ * @returns The rendered DropdownMenu component
+ */
+declare const DropdownMenu: ({ align, ariaLabel, avatarSrc, disabled, fdKey, label, options, optionsType, secondaryText, size, type, ...props }: DropdownMenuProps) => JSX.Element;
+
+export { DropdownMenu, DropdownMenu as default };
+export type { DropdownMenuCheckboxOption, DropdownMenuGroupOption, DropdownMenuIconOption, DropdownMenuProps, DropdownMenuTextOption };

package/dist/components/molecules/DropdownMenu/index.js

@@ -0,0 +1,2 @@
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useState as o,useMemo as a}from"react";import r from"@mui/material/ListSubheader";import{styled as n}from"@mui/material/styles";import l from"../../atoms/Avatar/index.js";import s from"@mui/material/Box";import{Button as d}from"../../atoms/Button/index.js";import c from"@mui/material/Divider";import{IconButton as m}from"../../atoms/IconButton/index.js";import p from"@mui/material/ListItemText";import{MenuItem as u}from"../../atoms/MenuItem/index.js";import h from"@mui/material/Menu";import b from"../../../icons/ArrowDown01/index.js";import g from"../../../icons/ArrowUp01/index.js";import f from"../../../icons/MoreVertical/index.js";const x=n(d)((({theme:e,size:t,disabled:i})=>({height:"small"===t?48:64,padding:e.spacing(1,2),textDecoration:"none","& .MuiButton-icon":{color:i?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-weak"]}}))),y=n(r)((({theme:e})=>({borderBottom:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,padding:e.spacing(1,2)})));y.muiName=r.muiName,y.muiSkipListHighlight=r.muiSkipListHighlight??!0;const v=n(s,{shouldForwardProp:e=>!["disabled","size"].includes(e)})((({theme:e,disabled:t,size:i})=>({display:"flex",gap:"small"===i?e.spacing(1):e.spacing(1.5),alignItems:"center",textAlign:"left",...t&&{"& .MuiAvatar-root":{opacity:e.palette.action.disabledOpacity}," & .MuiListItemText-root, & .MuiListItemText-primary, & .MuiListItemText-secondary":{color:e.palette.semantic.text["text-disabled"]}}}))),k=({align:n="bottom-left",ariaLabel:s="",avatarSrc:k="",disabled:z=!1,fdKey:T,label:C,options:$=[],optionsType:L="text",secondaryText:M,size:I="medium",type:O="button",...j})=>{const[w,B]=o(null),A=Boolean(w),K=`${T}-trigger`,P=`${T}-menu`,S=e=>{z||B(e.currentTarget)},D=()=>{B(null)},H=e=>t=>{e?.(t),D()},N=t=>e(v,{disabled:z,size:t,children:[i(l,{"aria-hidden":!0,alt:"",size:t,src:k,type:"logo"}),i(p,{primary:C,secondary:M})]}),V=(e,t="text",o="root")=>{switch(t){case"checkboxes":return((e,t)=>e.map(((e,o)=>i(u,{checked:e.checked,disabled:e.disabled,label:e.label,onCheckedChange:e.onCheckedChange,secondaryText:e.secondaryText,type:"checkbox"},e.id??`${t}-checkbox-${o}`))))(e,o);case"icons":return((e,t)=>e.map(((e,o)=>i(u,{disabled:e.disabled,icon:e.icon,label:e.label,onClick:H(e.onClick),secondaryText:e.secondaryText,type:"icon"},e.id??`${t}-icon-${o}`))))(e,o);default:return((e,t)=>e.map(((e,o)=>i(u,{disabled:e.disabled,label:e.label,onClick:H(e.onClick),secondaryText:e.secondaryText,type:"text"},e.id??`${t}-text-${o}`))))(e,o)}},E=a((()=>{return $&&0!==$.length?"groups"===L?(e=$).flatMap(((t,o)=>{const a=t.id??`group-${o}`;return[t.groupLabel?i(r,{children:t.groupLabel},`subheader-${a}`):null,...V(t.options,t.optionsType,a),o<e.length-1?i(c,{},`divider-${a}`):null]})):V($,L):null;var e}),[$,L]),F=((e="bottom-left")=>{switch(e){case"bottom-left":default:return{anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"}};case"bottom-right":return{anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"}};case"top-left":return{anchorOrigin:{vertical:"top",horizontal:"left"},transformOrigin:{vertical:"bottom",horizontal:"left"}};case"top-right":return{anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"bottom",horizontal:"right"}}}})(n);return e(t,{children:["icon-button"===O?i(m,{"aria-controls":A?P:void 0,"aria-expanded":A,"aria-haspopup":"menu","aria-label":s,disabled:z,fdKey:T,id:K,onClick:S,size:I,variant:"secondary",children:i(f,{})}):"avatar"===O?i(x,{"aria-controls":A?P:void 0,"aria-expanded":A,"aria-haspopup":"menu",disabled:z,endIcon:i(A?g:b,{}),fdKey:T,id:K,onClick:S,size:I,variant:"tertiary",children:N(I)}):i(d,{"aria-controls":A?P:void 0,"aria-expanded":A,"aria-haspopup":"menu",disabled:z,endIcon:i(A?g:b,{}),fdKey:T,id:K,onClick:S,size:I,variant:"secondary",children:C}),e(h,{...j,...F,anchorEl:w,onClose:D,open:A,slotProps:{...j.slotProps,list:{...j.slotProps?.list??{},id:P,"aria-labelledby":K}},children:["avatar"===O&&i(y,{children:N("medium")}),E]})]})};export{k as DropdownMenu,k as default};
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/DropdownMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/DropdownMenu/index.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport MuiListSubheader from '@mui/material/ListSubheader';\nimport type { MenuProps as MuiMenuProps } from '@mui/material/Menu';\nimport { styled } from '@mui/material/styles';\n\nimport Avatar from '@fd/components/atoms/Avatar';\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Divider from '@fd/components/atoms/Divider';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport ListItemText from '@fd/components/atoms/ListItemText';\nimport MenuItem, {\n  type CheckboxMenuItemProps,\n  type IconMenuItemProps,\n  type MenuItemProps,\n  type TextMenuItemProps,\n} from '@fd/components/atoms/MenuItem';\nimport Menu from '@fd/components/molecules/Menu';\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport MoreVerticalIcon from '@fd/icons/MoreVertical';\n\n/** Props for the DropdownMenuCheckboxOption component */\nexport type DropdownMenuCheckboxOption = Omit<CheckboxMenuItemProps, 'type'>;\n\n/** Props for the DropdownMenuIconOption component */\nexport type DropdownMenuIconOption = Omit<IconMenuItemProps, 'type'>;\n\n/** Props for the DropdownMenuTextOption component */\nexport type DropdownMenuTextOption = Omit<TextMenuItemProps, 'type'>;\n\ninterface DropdownMenuGroupOptionBase {\n  /** Label of the group */\n  groupLabel?: React.ReactNode;\n  /** ID of the group */\n  id?: string;\n}\n\ninterface DropdownMenuGroupOptionCheckbox extends DropdownMenuGroupOptionBase {\n  /** Type of the menu options */\n  optionsType: 'checkboxes';\n  /** Options of the menu */\n  options: DropdownMenuCheckboxOption[];\n}\n\ninterface DropdownMenuGroupOptionIcon extends DropdownMenuGroupOptionBase {\n  /** Type of the menu options */\n  optionsType: 'icons';\n  /** Options of the menu */\n  options: DropdownMenuIconOption[];\n}\n\ninterface DropdownMenuGroupOptionText extends DropdownMenuGroupOptionBase {\n  /** Type of the menu options */\n  optionsType?: 'text';\n  /** Options of the menu */\n  options: DropdownMenuTextOption[];\n}\n\n/** Props for the DropdownMenuGroupOption component */\nexport type DropdownMenuGroupOption =\n  | DropdownMenuGroupOptionCheckbox\n  | DropdownMenuGroupOptionIcon\n  | DropdownMenuGroupOptionText;\n\ninterface DropdownMenuBaseCommonProps extends Omit<MuiMenuProps, 'anchorEl' | 'onClose' | 'open'> {\n  /** Alignment of the menu */\n  align?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n  /** Disabled state of the menu */\n  disabled?: boolean;\n  /** Key of the menu */\n  fdKey: string;\n  /** Size of the menu */\n  size?: 'medium' | 'small';\n}\n\ninterface DropdownMenuCheckboxesProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'checkboxes';\n  /** Options of the menu */\n  options: DropdownMenuCheckboxOption[];\n}\n\ninterface DropdownMenuIconsProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'icons';\n  /** Options of the menu */\n  options: DropdownMenuIconOption[];\n}\n\ninterface DropdownMenuTextProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'text';\n  /** Options of the menu */\n  options: DropdownMenuTextOption[];\n}\n\ntype DropdownMenuOptionsProps = DropdownMenuCheckboxesProps | DropdownMenuIconsProps | DropdownMenuTextProps;\n\ninterface DropdownMenuOptionsGroupsProps extends DropdownMenuBaseCommonProps {\n  /** Type of the menu options */\n  optionsType: 'groups';\n  /** Options of the menu */\n  options: DropdownMenuGroupOption[];\n}\n\ntype DropdownMenuBaseProps = DropdownMenuOptionsGroupsProps | DropdownMenuOptionsProps;\n\ntype AvatarDropdownMenuProps = DropdownMenuBaseProps & {\n  /** Aria-label of the trigger */\n  ariaLabel?: never;\n  /** Secondary text of the menu item */\n  secondaryText?: string;\n  /** Source URL for the avatar image */\n  avatarSrc: string;\n  /** Label of the trigger */\n  label: string;\n  /** Type of the menu item */\n  type: 'avatar';\n};\n\ntype ButtonDropdownMenuProps = DropdownMenuBaseProps & {\n  /** Aria-label of the trigger */\n  ariaLabel?: never;\n  /** Secondary text of the menu item */\n  secondaryText?: never;\n  /** Source URL for the avatar image */\n  avatarSrc?: never;\n  /** Label of the trigger */\n  label: string;\n  /** Type of the menu item */\n  type: 'button';\n};\n\ntype IconButtonDropdownMenuProps = DropdownMenuBaseProps & {\n  /** Aria-label of the trigger */\n  ariaLabel: string;\n  /** Secondary text of the menu item */\n  secondaryText?: never;\n  /** Source URL for the avatar image */\n  avatarSrc?: never;\n  /** Label of the trigger */\n  label?: never;\n  /** Type of the menu item */\n  type: 'icon-button';\n};\n\n/** Props for the DropdownMenu component */\nexport type DropdownMenuProps =\n  | AvatarDropdownMenuProps\n  | ButtonDropdownMenuProps\n  | IconButtonDropdownMenuProps;\n\nconst StyledAvatarDropdownMenuButton = styled(Button)<{ disabled?: boolean; size: 'medium' | 'small' }>(\n  ({ theme, size, disabled }) => ({\n    height: size === 'small' ? 48 : 64,\n    padding: theme.spacing(1, 2),\n    textDecoration: 'none',\n\n    '& .MuiButton-icon': {\n      color: disabled\n        ? theme.palette.semantic.icon['icon-disabled']\n        : theme.palette.semantic.icon['icon-strong'],\n    },\n\n    '&:focus-visible, &.Mui-focusVisible': {\n      backgroundColor: theme.palette.semantic.fill['fill-weak'],\n    },\n  }),\n);\n\nconst StyledAvatarListSubheader = styled(MuiListSubheader)(({ theme }) => ({\n  borderBottom: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  padding: theme.spacing(1, 2),\n}));\n\n// Preserve MUI internals so MenuList handles it correctly\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n(StyledAvatarListSubheader as any).muiName = (MuiListSubheader as any).muiName;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n(StyledAvatarListSubheader as any).muiSkipListHighlight =\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n  (MuiListSubheader as unknown as { muiSkipListHighlight?: boolean }).muiSkipListHighlight ?? true;\n\nconst StyledAvatarLabelContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['disabled', 'size'].includes(prop as string),\n})<{ disabled: boolean; size: 'medium' | 'small' }>(({ theme, disabled, size }) => ({\n  display: 'flex',\n  gap: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),\n  alignItems: 'center',\n  textAlign: 'left',\n\n  ...(disabled && {\n    '& .MuiAvatar-root': {\n      opacity: theme.palette.action.disabledOpacity,\n    },\n    ' & .MuiListItemText-root, & .MuiListItemText-primary, & .MuiListItemText-secondary': {\n      color: theme.palette.semantic.text['text-disabled'],\n    },\n  }),\n}));\n\nconst mapAlignToOrigins = (\n  align: DropdownMenuProps['align'] = 'bottom-left',\n): Pick<MuiMenuProps, 'anchorOrigin' | 'transformOrigin'> => {\n  switch (align) {\n    case 'bottom-left':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n        transformOrigin: { vertical: 'top', horizontal: 'left' },\n      };\n    case 'bottom-right':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n        transformOrigin: { vertical: 'top', horizontal: 'right' },\n      };\n    case 'top-left':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'left' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'left' },\n      };\n    case 'top-right':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'right' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'right' },\n      };\n    default:\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n        transformOrigin: { vertical: 'top', horizontal: 'left' },\n      };\n  }\n};\n\n/**\n * A customizable DropdownMenu component supporting button and checkbox menu items with optional groups.\n *\n * @param props - The component props\n * @returns The rendered DropdownMenu component\n */\nexport const DropdownMenu = ({\n  align = 'bottom-left',\n  ariaLabel = '',\n  avatarSrc = '',\n  disabled = false,\n  fdKey,\n  label,\n  options = [],\n  optionsType = 'text',\n  secondaryText,\n  size = 'medium',\n  type = 'button',\n  ...props\n}: DropdownMenuProps): JSX.Element => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n\n  const triggerId = `${fdKey}-trigger`;\n  const menuId = `${fdKey}-menu`;\n\n  const handleOpen = (event: React.MouseEvent<HTMLElement>): void => {\n    if (disabled) {\n      return;\n    }\n\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleClick =\n    (onClick?: React.MouseEventHandler<HTMLLIElement>) =>\n    (event: React.MouseEvent<HTMLLIElement>): void => {\n      onClick?.(event);\n      handleClose();\n    };\n\n  const renderAvatarLabelContainer = (size: 'medium' | 'small'): JSX.Element | null => (\n    <StyledAvatarLabelContainer disabled={disabled} size={size}>\n      <Avatar\n        aria-hidden\n        alt=\"\" // Avatar is described by ListItemText\n        size={size}\n        src={avatarSrc}\n        type=\"logo\"\n      />\n      <ListItemText primary={label} secondary={secondaryText} />\n    </StyledAvatarLabelContainer>\n  );\n\n  const renderTrigger = (): JSX.Element => {\n    if (type === 'icon-button') {\n      return (\n        <IconButton\n          aria-controls={open ? menuId : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"menu\"\n          aria-label={ariaLabel}\n          disabled={disabled}\n          fdKey={fdKey}\n          id={triggerId}\n          onClick={handleOpen}\n          size={size}\n          variant=\"secondary\"\n        >\n          <MoreVerticalIcon />\n        </IconButton>\n      );\n    }\n    if (type === 'avatar') {\n      return (\n        <StyledAvatarDropdownMenuButton\n          aria-controls={open ? menuId : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"menu\"\n          disabled={disabled}\n          endIcon={open ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n          fdKey={fdKey}\n          id={triggerId}\n          onClick={handleOpen}\n          size={size}\n          variant=\"tertiary\"\n        >\n          {renderAvatarLabelContainer(size)}\n        </StyledAvatarDropdownMenuButton>\n      );\n    }\n\n    return (\n      <Button\n        aria-controls={open ? menuId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        disabled={disabled}\n        endIcon={open ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n        fdKey={fdKey}\n        id={triggerId}\n        onClick={handleOpen}\n        size={size}\n        variant=\"secondary\"\n      >\n        {label}\n      </Button>\n    );\n  };\n\n  const renderCheckboxItems = (items: CheckboxMenuItemProps[], keyPrefix: string): JSX.Element[] =>\n    items.map((item, index) => {\n      return (\n        <MenuItem\n          key={item.id ?? `${keyPrefix}-checkbox-${index}`}\n          checked={item.checked}\n          disabled={item.disabled}\n          label={item.label}\n          onCheckedChange={item.onCheckedChange}\n          secondaryText={item.secondaryText}\n          type=\"checkbox\"\n        />\n      );\n    });\n\n  const renderIconItems = (items: IconMenuItemProps[], keyPrefix: string): JSX.Element[] =>\n    items.map((item, index) => {\n      return (\n        <MenuItem\n          key={item.id ?? `${keyPrefix}-icon-${index}`}\n          disabled={item.disabled}\n          icon={item.icon}\n          label={item.label}\n          onClick={handleClick(item.onClick)}\n          secondaryText={item.secondaryText}\n          type=\"icon\"\n        />\n      );\n    });\n\n  const renderTextItems = (items: TextMenuItemProps[], keyPrefix: string): JSX.Element[] =>\n    items.map((item, index) => {\n      return (\n        <MenuItem\n          key={item.id ?? `${keyPrefix}-text-${index}`}\n          disabled={item.disabled}\n          label={item.label}\n          onClick={handleClick(item.onClick)}\n          secondaryText={item.secondaryText}\n          type=\"text\"\n        />\n      );\n    });\n\n  const renderItems = (\n    items: Omit<MenuItemProps, 'type'>[],\n    optionsType: DropdownMenuProps['optionsType'] = 'text',\n    keyPrefix: string = 'root',\n  ): JSX.Element[] => {\n    switch (optionsType) {\n      case 'checkboxes':\n        return renderCheckboxItems(items as CheckboxMenuItemProps[], keyPrefix);\n      case 'icons':\n        return renderIconItems(items as IconMenuItemProps[], keyPrefix);\n      case 'text':\n      default:\n        return renderTextItems(items as TextMenuItemProps[], keyPrefix);\n    }\n  };\n\n  // Returns a flat array of group items (subheaders, items, dividers) needed for accessibility\n  const renderGroupItems = (groups: DropdownMenuGroupOption[]): (JSX.Element | null)[] =>\n    groups.flatMap((group, index) => {\n      const groupKey = group.id ?? `group-${index}`;\n\n      const header = group.groupLabel ? (\n        <MuiListSubheader key={`subheader-${groupKey}`}>{group.groupLabel}</MuiListSubheader>\n      ) : null;\n      const items = renderItems(group.options, group.optionsType, groupKey);\n      const divider = index < groups.length - 1 ? <Divider key={`divider-${groupKey}`} /> : null;\n\n      return [header, ...items, divider];\n    });\n\n  const renderAvatarListSubheader = (): JSX.Element => {\n    return <StyledAvatarListSubheader>{renderAvatarLabelContainer('medium')}</StyledAvatarListSubheader>;\n  };\n\n  const optionsItems = useMemo(() => {\n    if (!options || options.length === 0) {\n      return null;\n    }\n\n    if (optionsType === 'groups') {\n      return renderGroupItems(options as DropdownMenuGroupOption[]);\n    }\n\n    return renderItems(options, optionsType);\n  }, [options, optionsType]);\n\n  const origins = mapAlignToOrigins(align);\n\n  return (\n    <>\n      {renderTrigger()}\n\n      <Menu\n        {...props}\n        {...origins}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        open={open}\n        slotProps={{\n          ...props.slotProps,\n          list: {\n            ...(props.slotProps?.list ?? {}),\n            id: menuId,\n            'aria-labelledby': triggerId,\n          },\n        }}\n      >\n        {type === 'avatar' && renderAvatarListSubheader()}\n        {optionsItems}\n      </Menu>\n    </>\n  );\n};\n\nexport default DropdownMenu;\n"],"names":["StyledAvatarDropdownMenuButton","styled","Button","theme","size","disabled","height","padding","spacing","textDecoration","color","palette","semantic","icon","backgroundColor","fill","StyledAvatarListSubheader","MuiListSubheader","borderBottom","stroke","muiName","muiSkipListHighlight","StyledAvatarLabelContainer","Box","shouldForwardProp","prop","includes","display","gap","alignItems","textAlign","opacity","action","disabledOpacity","text","DropdownMenu","align","ariaLabel","avatarSrc","fdKey","label","options","optionsType","secondaryText","type","props","anchorEl","setAnchorEl","useState","open","Boolean","triggerId","menuId","handleOpen","event","currentTarget","handleClose","handleClick","onClick","renderAvatarLabelContainer","_jsxs","children","_jsx","Avatar","alt","src","ListItemText","primary","secondary","renderItems","items","keyPrefix","map","item","index","MenuItem","checked","onCheckedChange","id","renderCheckboxItems","renderIconItems","renderTextItems","optionsItems","useMemo","length","groups","flatMap","group","groupKey","groupLabel","Divider","origins","anchorOrigin","vertical","horizontal","transformOrigin","mapAlignToOrigins","_Fragment","IconButton","undefined","variant","MoreVerticalIcon","endIcon","ArrowUp01Icon","ArrowDown01Icon","Menu","onClose","slotProps","list"],"mappings":"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"}

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../types/index.cjs.js");const a=(a={})=>({...{id:"1",fileName:"Mock Asset.jpg",contentType:"image/jpeg",url:"./images/pizza-horizontal.jpg",createdBy:"Mock User",updatedBy:"Mock User",updatedAt:(new Date).toISOString(),uploadedAt:(new Date).toISOString(),orgId:"10121",brandId:"1",type:e.AssetType.IMAGE,metadata:{tags:["mock"]}},...a}),t=[a({id:"1",fileName:"Pizza Special.jpg",createdBy:"John Doe",updatedBy:"John Doe",metadata:{tags:["pizza","food"],altText:"Delicious pizza with toppings"}}),a({id:"2",fileName:"Burger Combo.jpg",createdBy:"Jane Smith",updatedBy:"Jane Smith",metadata:{tags:["burger","food"],altText:"Juicy burger with fries"}}),a({id:"3",fileName:"Salad Fresh.jpg",createdBy:"Bob Johnson",updatedBy:"Bob Johnson",metadata:{tags:["salad","healthy"],altText:"Fresh green salad"}}),a({id:"4",fileName:"Pasta Delight.jpg",createdBy:"Alice Brown",updatedBy:"Alice Brown",metadata:{tags:["pasta","italian"]}}),a({id:"5",fileName:"Dessert Special.jpg",createdBy:"Charlie Davis",updatedBy:"Charlie Davis",metadata:{tags:["dessert","sweet"]}})];exports.createMockAsset=a,exports.createMockAssets=(e,t)=>Array.from({length:e},((e,s)=>{const i=t?.[s]||{};return a({id:(s+1).toString(),fileName:`Mock Asset ${s+1}.jpg`,...i})})),exports.mockAssets=t;
+//# sourceMappingURL=mockAssets.cjs.js.map

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockAssets.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/__mocks__/mockAssets.ts"],"sourcesContent":["import { type Asset, AssetType } from '../types';\n\n/**\n * Factory function to create a mock asset with customizable properties\n * @param overrides - Partial asset properties to override defaults\n * @returns A complete mock asset\n */\nexport const createMockAsset = (overrides: Partial<Asset> = {}): Asset => {\n  const defaultAsset: Asset = {\n    id: '1',\n    fileName: 'Mock Asset.jpg',\n    contentType: 'image/jpeg',\n    url: './images/pizza-horizontal.jpg',\n    createdBy: 'Mock User',\n    updatedBy: 'Mock User',\n    updatedAt: new Date().toISOString(),\n    uploadedAt: new Date().toISOString(),\n    orgId: '10121',\n    brandId: '1',\n    type: AssetType.IMAGE,\n    metadata: { tags: ['mock'] },\n  };\n\n  return { ...defaultAsset, ...overrides };\n};\n\n/**\n * Generate multiple mock assets\n * @param count - Number of assets to generate\n * @param overridesArray - Optional array of overrides for each asset\n * @returns Array of mock assets\n */\nexport const createMockAssets = (count: number, overridesArray?: Array<Partial<Asset>>): Asset[] => {\n  return Array.from({ length: count }, (_, index) => {\n    const baseOverrides = overridesArray?.[index] || {};\n    return createMockAsset({\n      id: (index + 1).toString(),\n      fileName: `Mock Asset ${index + 1}.jpg`,\n      ...baseOverrides,\n    });\n  });\n};\n\n/**\n * Pre-defined mock assets for common testing scenarios\n */\nexport const mockAssets: Asset[] = [\n  createMockAsset({\n    id: '1',\n    fileName: 'Pizza Special.jpg',\n    createdBy: 'John Doe',\n    updatedBy: 'John Doe',\n    metadata: { tags: ['pizza', 'food'], altText: 'Delicious pizza with toppings' },\n  }),\n  createMockAsset({\n    id: '2',\n    fileName: 'Burger Combo.jpg',\n    createdBy: 'Jane Smith',\n    updatedBy: 'Jane Smith',\n    metadata: { tags: ['burger', 'food'], altText: 'Juicy burger with fries' },\n  }),\n  createMockAsset({\n    id: '3',\n    fileName: 'Salad Fresh.jpg',\n    createdBy: 'Bob Johnson',\n    updatedBy: 'Bob Johnson',\n    metadata: { tags: ['salad', 'healthy'], altText: 'Fresh green salad' },\n  }),\n  createMockAsset({\n    id: '4',\n    fileName: 'Pasta Delight.jpg',\n    createdBy: 'Alice Brown',\n    updatedBy: 'Alice Brown',\n    metadata: { tags: ['pasta', 'italian'] },\n  }),\n  createMockAsset({\n    id: '5',\n    fileName: 'Dessert Special.jpg',\n    createdBy: 'Charlie Davis',\n    updatedBy: 'Charlie Davis',\n    metadata: { tags: ['dessert', 'sweet'] },\n  }),\n];\n"],"names":["createMockAsset","overrides","id","fileName","contentType","url","createdBy","updatedBy","updatedAt","Date","toISOString","uploadedAt","orgId","brandId","type","AssetType","IMAGE","metadata","tags","mockAssets","altText","count","overridesArray","Array","from","length","_","index","baseOverrides","toString"],"mappings":"0DAOaA,EAAkB,CAACC,EAA4B,MAgBnD,IAfqB,CAC1BC,GAAI,IACJC,SAAU,iBACVC,YAAa,aACbC,IAAK,gCACLC,UAAW,YACXC,UAAW,YACXC,WAAW,IAAIC,MAAOC,cACtBC,YAAY,IAAIF,MAAOC,cACvBE,MAAO,QACPC,QAAS,IACTC,KAAMC,EAAAA,UAAUC,MAChBC,SAAU,CAAEC,KAAM,CAAC,aAGQjB,IAuBlBkB,EAAsB,CACjCnB,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,WACXC,UAAW,WACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,QAASE,QAAS,mCAEhDpB,EAAgB,CACdE,GAAI,IACJC,SAAU,mBACVG,UAAW,aACXC,UAAW,aACXU,SAAU,CAAEC,KAAM,CAAC,SAAU,QAASE,QAAS,6BAEjDpB,EAAgB,CACdE,GAAI,IACJC,SAAU,kBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,WAAYE,QAAS,uBAEnDpB,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,cAE9BlB,EAAgB,CACdE,GAAI,IACJC,SAAU,sBACVG,UAAW,gBACXC,UAAW,gBACXU,SAAU,CAAEC,KAAM,CAAC,UAAW,gEAhDF,CAACG,EAAeC,IACvCC,MAAMC,KAAK,CAAEC,OAAQJ,IAAS,CAACK,EAAGC,KACvC,MAAMC,EAAgBN,IAAiBK,IAAU,CAAA,EACjD,OAAO3B,EAAgB,CACrBE,IAAKyB,EAAQ,GAAGE,WAChB1B,SAAU,cAAcwB,EAAQ,WAC7BC"}

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.d.ts

@@ -0,0 +1,21 @@
+import { Asset } from '../types/index.js';
+
+/**
+ * Factory function to create a mock asset with customizable properties
+ * @param overrides - Partial asset properties to override defaults
+ * @returns A complete mock asset
+ */
+declare const createMockAsset: (overrides?: Partial<Asset>) => Asset;
+/**
+ * Generate multiple mock assets
+ * @param count - Number of assets to generate
+ * @param overridesArray - Optional array of overrides for each asset
+ * @returns Array of mock assets
+ */
+declare const createMockAssets: (count: number, overridesArray?: Array<Partial<Asset>>) => Asset[];
+/**
+ * Pre-defined mock assets for common testing scenarios
+ */
+declare const mockAssets: Asset[];
+
+export { createMockAsset, createMockAssets, mockAssets };

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.js

@@ -0,0 +1,2 @@
+import{AssetType as e}from"../types/index.js";const a=(a={})=>({...{id:"1",fileName:"Mock Asset.jpg",contentType:"image/jpeg",url:"./images/pizza-horizontal.jpg",createdBy:"Mock User",updatedBy:"Mock User",updatedAt:(new Date).toISOString(),uploadedAt:(new Date).toISOString(),orgId:"10121",brandId:"1",type:e.IMAGE,metadata:{tags:["mock"]}},...a}),t=(e,t)=>Array.from({length:e},((e,i)=>{const d=t?.[i]||{};return a({id:(i+1).toString(),fileName:`Mock Asset ${i+1}.jpg`,...d})})),i=[a({id:"1",fileName:"Pizza Special.jpg",createdBy:"John Doe",updatedBy:"John Doe",metadata:{tags:["pizza","food"],altText:"Delicious pizza with toppings"}}),a({id:"2",fileName:"Burger Combo.jpg",createdBy:"Jane Smith",updatedBy:"Jane Smith",metadata:{tags:["burger","food"],altText:"Juicy burger with fries"}}),a({id:"3",fileName:"Salad Fresh.jpg",createdBy:"Bob Johnson",updatedBy:"Bob Johnson",metadata:{tags:["salad","healthy"],altText:"Fresh green salad"}}),a({id:"4",fileName:"Pasta Delight.jpg",createdBy:"Alice Brown",updatedBy:"Alice Brown",metadata:{tags:["pasta","italian"]}}),a({id:"5",fileName:"Dessert Special.jpg",createdBy:"Charlie Davis",updatedBy:"Charlie Davis",metadata:{tags:["dessert","sweet"]}})];export{a as createMockAsset,t as createMockAssets,i as mockAssets};
+//# sourceMappingURL=mockAssets.js.map

package/dist/components/organisms/AssetManager/__mocks__/mockAssets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockAssets.js","sources":["../../../../../src/components/organisms/AssetManager/__mocks__/mockAssets.ts"],"sourcesContent":["import { type Asset, AssetType } from '../types';\n\n/**\n * Factory function to create a mock asset with customizable properties\n * @param overrides - Partial asset properties to override defaults\n * @returns A complete mock asset\n */\nexport const createMockAsset = (overrides: Partial<Asset> = {}): Asset => {\n  const defaultAsset: Asset = {\n    id: '1',\n    fileName: 'Mock Asset.jpg',\n    contentType: 'image/jpeg',\n    url: './images/pizza-horizontal.jpg',\n    createdBy: 'Mock User',\n    updatedBy: 'Mock User',\n    updatedAt: new Date().toISOString(),\n    uploadedAt: new Date().toISOString(),\n    orgId: '10121',\n    brandId: '1',\n    type: AssetType.IMAGE,\n    metadata: { tags: ['mock'] },\n  };\n\n  return { ...defaultAsset, ...overrides };\n};\n\n/**\n * Generate multiple mock assets\n * @param count - Number of assets to generate\n * @param overridesArray - Optional array of overrides for each asset\n * @returns Array of mock assets\n */\nexport const createMockAssets = (count: number, overridesArray?: Array<Partial<Asset>>): Asset[] => {\n  return Array.from({ length: count }, (_, index) => {\n    const baseOverrides = overridesArray?.[index] || {};\n    return createMockAsset({\n      id: (index + 1).toString(),\n      fileName: `Mock Asset ${index + 1}.jpg`,\n      ...baseOverrides,\n    });\n  });\n};\n\n/**\n * Pre-defined mock assets for common testing scenarios\n */\nexport const mockAssets: Asset[] = [\n  createMockAsset({\n    id: '1',\n    fileName: 'Pizza Special.jpg',\n    createdBy: 'John Doe',\n    updatedBy: 'John Doe',\n    metadata: { tags: ['pizza', 'food'], altText: 'Delicious pizza with toppings' },\n  }),\n  createMockAsset({\n    id: '2',\n    fileName: 'Burger Combo.jpg',\n    createdBy: 'Jane Smith',\n    updatedBy: 'Jane Smith',\n    metadata: { tags: ['burger', 'food'], altText: 'Juicy burger with fries' },\n  }),\n  createMockAsset({\n    id: '3',\n    fileName: 'Salad Fresh.jpg',\n    createdBy: 'Bob Johnson',\n    updatedBy: 'Bob Johnson',\n    metadata: { tags: ['salad', 'healthy'], altText: 'Fresh green salad' },\n  }),\n  createMockAsset({\n    id: '4',\n    fileName: 'Pasta Delight.jpg',\n    createdBy: 'Alice Brown',\n    updatedBy: 'Alice Brown',\n    metadata: { tags: ['pasta', 'italian'] },\n  }),\n  createMockAsset({\n    id: '5',\n    fileName: 'Dessert Special.jpg',\n    createdBy: 'Charlie Davis',\n    updatedBy: 'Charlie Davis',\n    metadata: { tags: ['dessert', 'sweet'] },\n  }),\n];\n"],"names":["createMockAsset","overrides","id","fileName","contentType","url","createdBy","updatedBy","updatedAt","Date","toISOString","uploadedAt","orgId","brandId","type","AssetType","IMAGE","metadata","tags","createMockAssets","count","overridesArray","Array","from","length","_","index","baseOverrides","toString","mockAssets","altText"],"mappings":"oDAOaA,EAAkB,CAACC,EAA4B,MAgBnD,IAfqB,CAC1BC,GAAI,IACJC,SAAU,iBACVC,YAAa,aACbC,IAAK,gCACLC,UAAW,YACXC,UAAW,YACXC,WAAW,IAAIC,MAAOC,cACtBC,YAAY,IAAIF,MAAOC,cACvBE,MAAO,QACPC,QAAS,IACTC,KAAMC,EAAUC,MAChBC,SAAU,CAAEC,KAAM,CAAC,aAGQjB,IASlBkB,EAAmB,CAACC,EAAeC,IACvCC,MAAMC,KAAK,CAAEC,OAAQJ,IAAS,CAACK,EAAGC,KACvC,MAAMC,EAAgBN,IAAiBK,IAAU,CAAA,EACjD,OAAO1B,EAAgB,CACrBE,IAAKwB,EAAQ,GAAGE,WAChBzB,SAAU,cAAcuB,EAAQ,WAC7BC,OAQIE,EAAsB,CACjC7B,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,WACXC,UAAW,WACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,QAASY,QAAS,mCAEhD9B,EAAgB,CACdE,GAAI,IACJC,SAAU,mBACVG,UAAW,aACXC,UAAW,aACXU,SAAU,CAAEC,KAAM,CAAC,SAAU,QAASY,QAAS,6BAEjD9B,EAAgB,CACdE,GAAI,IACJC,SAAU,kBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,WAAYY,QAAS,uBAEnD9B,EAAgB,CACdE,GAAI,IACJC,SAAU,oBACVG,UAAW,cACXC,UAAW,cACXU,SAAU,CAAEC,KAAM,CAAC,QAAS,cAE9BlB,EAAgB,CACdE,GAAI,IACJC,SAAU,sBACVG,UAAW,gBACXC,UAAW,gBACXU,SAAU,CAAEC,KAAM,CAAC,UAAW"}

package/dist/components/organisms/AssetManager/hooks/useAssets.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("@tanstack/react-query"),s=require("../services/asset.service.cjs.js");exports.useGetAssets=(r,t=!0)=>e.useQuery({queryKey:[s.getAssetsKey,r],queryFn:()=>s.getAssets(r),enabled:t,staleTime:3e5,gcTime:6e5});
+//# sourceMappingURL=useAssets.cjs.js.map

package/dist/components/organisms/AssetManager/hooks/useAssets.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssets.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssets.ts"],"sourcesContent":["import { useQuery, type UseQueryResult } from '@tanstack/react-query';\n\nimport { getAssets, getAssetsKey } from '../services/asset.service';\nimport type { Asset } from '../types';\n\n/**\n * Hook to fetch assets from the API\n * Automatically determines the API URL based on environment and orgId\n * @param orgId - Organization ID\n * @param enabled - Whether the query should be enabled\n * @returns Query result with assets data, loading state, and error state\n */\nexport const useGetAssets = (orgId: string, enabled = true): UseQueryResult<Asset[], Error> => {\n  return useQuery<Asset[]>({\n    queryKey: [getAssetsKey, orgId],\n    queryFn: () => getAssets(orgId),\n    enabled,\n    staleTime: 5 * 60 * 1000, // 5 minutes\n    gcTime: 10 * 60 * 1000, // 10 minutes\n  });\n};\n"],"names":["orgId","enabled","useQuery","queryKey","getAssetsKey","queryFn","getAssets","staleTime","gcTime"],"mappings":"uHAY4B,CAACA,EAAeC,GAAU,IAC7CC,WAAkB,CACvBC,SAAU,CAACC,EAAAA,aAAcJ,GACzBK,QAAS,IAAMC,EAAAA,UAAUN,GACzBC,UACAM,UAAW,IACXC,OAAQ"}

package/dist/components/organisms/AssetManager/hooks/useAssets.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook to fetch assets from the API
+ * Automatically determines the API URL based on environment and orgId
+ * @param orgId - Organization ID
+ * @param enabled - Whether the query should be enabled
+ * @returns Query result with assets data, loading state, and error state
+ */
+declare const useGetAssets: (orgId: string, enabled?: boolean) => QueryObserverResult<TData, TError>;
+
+export { useGetAssets };

package/dist/components/organisms/AssetManager/hooks/useAssets.js

@@ -0,0 +1,2 @@
+import{useQuery as e}from"@tanstack/react-query";import{getAssets as r,getAssetsKey as s}from"../services/asset.service.js";const t=(t,a=!0)=>e({queryKey:[s,t],queryFn:()=>r(t),enabled:a,staleTime:3e5,gcTime:6e5});export{t as useGetAssets};
+//# sourceMappingURL=useAssets.js.map

package/dist/components/organisms/AssetManager/hooks/useAssets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssets.js","sources":["../../../../../src/components/organisms/AssetManager/hooks/useAssets.ts"],"sourcesContent":["import { useQuery, type UseQueryResult } from '@tanstack/react-query';\n\nimport { getAssets, getAssetsKey } from '../services/asset.service';\nimport type { Asset } from '../types';\n\n/**\n * Hook to fetch assets from the API\n * Automatically determines the API URL based on environment and orgId\n * @param orgId - Organization ID\n * @param enabled - Whether the query should be enabled\n * @returns Query result with assets data, loading state, and error state\n */\nexport const useGetAssets = (orgId: string, enabled = true): UseQueryResult<Asset[], Error> => {\n  return useQuery<Asset[]>({\n    queryKey: [getAssetsKey, orgId],\n    queryFn: () => getAssets(orgId),\n    enabled,\n    staleTime: 5 * 60 * 1000, // 5 minutes\n    gcTime: 10 * 60 * 1000, // 10 minutes\n  });\n};\n"],"names":["useGetAssets","orgId","enabled","useQuery","queryKey","getAssetsKey","queryFn","getAssets","staleTime","gcTime"],"mappings":"4HAYO,MAAMA,EAAe,CAACC,EAAeC,GAAU,IAC7CC,EAAkB,CACvBC,SAAU,CAACC,EAAcJ,GACzBK,QAAS,IAAMC,EAAUN,GACzBC,UACAM,UAAW,IACXC,OAAQ"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/styles"),r=require("@mui/material/Box"),a=require("../../atoms/Card/index.cjs.js"),s=require("@mui/material/Grid2"),l=require("@mui/material/Typography"),o=require("../../molecules/Modal/index.cjs.js"),n=require("../../../icons/CheckmarkCircleSolid/index.cjs.js");const c=i.styled(r)((({theme:e})=>({marginBottom:e.spacing(3)}))),d=i.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"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),m=i.styled(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}})));module.exports=({open:i,onClose:r,onSelect:n,assets:u,multiSelect:p=!1})=>{const[x,h]=t.useState([]);t.useEffect((()=>{i||h([])}),[i]);const g=()=>{h([]),r()},b=()=>{if(n&&u){const e=u.filter((e=>x.includes(e.id)));n(e)}h([]),r()},j=e=>{h((t=>p?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e.jsxs(o,{actions:[{label:"Cancel",onClick:g,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:b,variant:"primary",disabled:0===x.length,id:"asset-manager-select"}],onClose:g,open:i,size:"large",title:"Select Images",children:[e.jsx(c,{children:e.jsx(l,{variant:"h3Strong",children:"Tabs placeholder text"})}),e.jsx(s,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:u?.map((t=>{const i=x.includes(t.id);return e.jsx(s,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e.jsxs(d,{"aria-label":"Select "+t.fileName,onClick:()=>j(t.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),j(t.id))},role:"button",selected:i,tabIndex:0,children:[i&&e.jsx(m,{size:"lg"}),e.jsx(a,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:t.url})]})},t.id)}))})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("@mui/material/styles"),i=require("@mui/material/Box"),r=require("../../atoms/Card/index.cjs.js"),a=require("../../atoms/CircularProgress/index.cjs.js"),l=require("@mui/material/Grid2"),n=require("@mui/material/Tab"),o=require("../../molecules/EmptyState/index.cjs.js"),c=require("../../molecules/Modal/index.cjs.js"),d=require("../../molecules/Tabs/index.cjs.js"),m=require("../../../icons/CheckmarkCircleSolid/index.cjs.js"),u=require("./hooks/useAssets.cjs.js");const p=s.styled(i)((({theme:e})=>({marginBottom:e.spacing(3)}))),x=s.styled(i,{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"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),j=s.styled(m)((({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}}))),g=s.styled(i)((({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",minHeight:"200px",padding:e.spacing(4)}))),h=s.styled(i)((({theme:e})=>({padding:e.spacing(4)})));module.exports=({open:s,onClose:i,onSelect:m,orgId:y,multiSelect:b=!1})=>{const[C,k]=t.useState([]),{data:f,isLoading:S,error:q}=u.useGetAssets(y,s);t.useEffect((()=>{s||k([])}),[s]);const v=()=>{k([]),i()},w=()=>{if(m&&f){const e=f.filter((e=>C.includes(e.id)));m(e)}k([]),i()},E=e=>{k((t=>b?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e.jsxs(c,{actions:[{label:"Cancel",onClick:v,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:w,variant:"primary",disabled:0===C.length,id:"asset-manager-select"}],onClose:v,open:s,title:"Select Images",children:[e.jsx(p,{children:e.jsxs(d,{fdKey:"asset-manager-tabs",onChange:()=>{},value:1,children:[e.jsx(n,{label:"Upload"}),e.jsx(n,{label:"Library"})]})}),S?e.jsx(g,{children:e.jsx(a.CircularProgress,{size:"large"})}):q?e.jsx(h,{children:e.jsx(o.EmptyState,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):f&&0!==f.length?e.jsx(l,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:f.map((t=>{const s=C.includes(t.id);return e.jsx(l,{"aria-selected":s,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e.jsxs(x,{"aria-label":"Select "+t.fileName,onClick:()=>E(t.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),E(t.id))},role:"button",selected:s,tabIndex:0,children:[s&&e.jsx(j,{size:"lg"}),e.jsx(r,{content:t.fileName,heading:"",imageAlt:t.metadata.altText,imageSrc:t.url})]})},t.id)}))}):e.jsx(h,{children:e.jsx(o.EmptyState,{description:"No assets available to display.",title:"No assets found"})})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/organisms/AssetManager/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } 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 Typography from '@fd/components/atoms/Typography';\nimport Modal from '@fd/components/molecules/Modal';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\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 ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\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\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /** Assets to display if no api is provided */\n  assets?: Asset[];\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  assets,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActionButtons = (): Array<{\n    disabled?: boolean;\n    id: string;\n    label: string;\n    onClick: () => void;\n    tone?: 'brand' | 'neutral';\n    variant: 'primary' | 'secondary';\n  }> => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary',\n        tone: 'neutral',\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary',\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => (\n    <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n      {assets?.map((asset: Asset) => {\n        const isSelected = selectedAssetIds.includes(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n              onClick={() => handleAssetClick(asset.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  handleAssetClick(asset.id);\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                imageSrc={asset.url}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <Modal\n      actions={getActionButtons()}\n      onClose={handleCancel}\n      open={open}\n      size=\"large\"\n      title={'Select Images'} // TODO: translate this text when translate provider is added\n    >\n      <StyledTabsContainer>\n        {/* TODO: replace this with tabs component when available */}\n        <Typography variant=\"h3Strong\">Tabs placeholder text</Typography>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","open","onClose","onSelect","assets","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","useEffect","handleCancel","handleSelect","selectedAssets","filter","asset","includes","id","handleAssetClick","assetId","prev","_jsxs","Modal","actions","label","onClick","variant","tone","disabled","length","size","title","children","_jsx","Typography","Grid","container","component","sx","listStyle","margin","padding","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"oWAaA,MAAMA,EAAsBC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChDC,aAAcD,EAAME,QAAQ,OAGxBC,EAAoBL,EAAAA,OAAOC,EAAK,CACpCK,kBAAoBC,GAAkB,aAATA,GADLP,EAEC,EAAGE,QAAOM,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EAAWN,EAAMY,QAAQC,SAASC,OAAO,mBAAqB,cAG3EC,UAAWT,EAAW,OAAS,mBAAmBN,EAAMY,QAAQC,SAASC,OAAO,kBAElF,UAAW,CACTE,QAAS,IAEX,gCAAiC,CAC/BL,YAAaX,EAAMY,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,YAITE,EAAsBnB,EAAAA,OAAOoB,EAAPpB,EAAiC,EAAGE,YAAO,CACrES,SAAU,WACVU,IAAKnB,EAAME,QAAQ,GACnBkB,KAAMpB,EAAME,QAAQ,GACpBmB,OAAQ,EACRC,MAAOtB,EAAMY,QAAQC,SAASU,KAAK,gBACnC,WAAY,CACVC,KAAMxB,EAAMY,QAAQa,OAAOC,0BA2BmB,EAChDC,OACAC,UACAC,WACAC,SACAC,eAAc,MAEd,MAAOC,EAAkBC,GAAuBC,EAAAA,SAAmB,IAGnEC,EAAAA,WAAU,KACHR,GACHM,EAAoB,MAErB,CAACN,IAEJ,MAAMS,EAAe,KACnBH,EAAoB,IACpBL,KAGIS,EAAe,KACnB,GAAIR,GAAYC,EAAQ,CACtB,MAAMQ,EAAiBR,EAAOS,QAAQC,GAAUR,EAAiBS,SAASD,EAAME,MAChFb,EAASS,EACX,CACAL,EAAoB,IACpBL,KAGIe,EAAoBC,IACxBX,GAAqBY,GACfd,EACEc,EAAKJ,SAASG,GACTC,EAAKN,QAAQG,GAAOA,IAAOE,IAE7B,IAAIC,EAAMD,GAEbC,EAAKJ,SAASG,GACT,GAEF,CAACA,MAqEd,OACEE,EAAAA,KAACC,GACCC,QA1DK,CACL,CACEC,MAAO,SACPC,QAASd,EACTe,QAAS,YACTC,KAAM,UACNV,GAAI,wBAEN,CACEO,MAAO,SACPC,QAASb,EACTc,QAAS,UACTE,SAAsC,IAA5BrB,EAAiBsB,OAC3BZ,GAAI,yBA8CNd,QAASQ,EACTT,KAAMA,EACN4B,KAAK,QACLC,MAAO,gBAAeC,SAAA,CAEtBC,EAAAA,IAAC7D,EAAmB,CAAA4D,SAElBC,EAAAA,IAACC,EAAU,CAACR,QAAQ,gDA/CxBO,MAACE,EAAI,CAACC,WAAS,EAACC,UAAU,KAAK5D,QAAS,EAAG6D,GAAI,CAAEC,UAAW,OAAQC,OAAQ,EAAGC,QAAS,GAAGT,SACxF3B,GAAQqC,KAAK3B,IACZ,MAAM4B,EAAapC,EAAiBS,SAASD,EAAME,IACnD,OACEgB,EAAAA,IAACE,EAAI,CAAA,gBAEYQ,EACfN,UAAU,KACVP,KAAM,CAAEc,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGf,SAEzDX,EAAAA,KAAC3C,EAAiB,CAAA,aACJ,UAAYqC,EAAMiC,SAC9BvB,QAAS,IAAMP,EAAiBH,EAAME,IACtCgC,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACFlC,EAAiBH,EAAME,MAG3BoC,KAAK,SACLxE,SAAU8D,EACVW,SAAU,EAACtB,SAAA,CAEVW,GAAcV,EAAAA,IAACzC,EAAmB,CAACsC,KAAK,OACzCG,EAAAA,IAACsB,EAAI,CACHC,QAASzC,EAAMiC,SACfS,QAAQ,GACRC,SAAU3C,EAAM4C,SAASC,QACzBC,SAAU9C,EAAM+C,UAvBf/C,EAAME"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } 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 CircularProgress from '@fd/components/atoms/CircularProgress';\nimport Grid from '@fd/components/atoms/Grid';\nimport Tab from '@fd/components/atoms/Tab';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport Modal from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport { useGetAssets } from './hooks/useAssets';\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\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 ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\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\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst StyledLoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  minHeight: '200px',\n  padding: theme.spacing(4),\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n}));\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Fetch assets from API - service handles everything\n  const { data: assets, isLoading, error } = useGetAssets(orgId, open);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset: Asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActions = () => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary' as const,\n        tone: 'neutral' as const,\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary' as const,\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => {\n    if (isLoading) {\n      return (\n        <StyledLoadingContainer>\n          <CircularProgress size=\"large\" />\n        </StyledLoadingContainer>\n      );\n    }\n\n    if (error) {\n      return (\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        <StyledErrorContainer>\n          <EmptyState description=\"No assets available to display.\" title=\"No assets found\" />\n        </StyledErrorContainer>\n      );\n    }\n\n    return (\n      <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n        {assets.map((asset: Asset) => {\n          const isSelected = selectedAssetIds.includes(asset.id);\n          return (\n            <Grid\n              key={asset.id}\n              aria-selected={isSelected}\n              component=\"li\"\n              size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n            >\n              <StyledCardWrapper\n                aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n                onClick={() => handleAssetClick(asset.id)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    handleAssetClick(asset.id);\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                  imageSrc={asset.url}\n                />\n              </StyledCardWrapper>\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  };\n\n  return (\n    // TODO: replace this with a new modal component when available\n    <Modal actions={getActions()} onClose={handleCancel} open={open} title=\"Select Images\">\n      <StyledTabsContainer>\n        {/* TODO: replace this with a new tabs component when available */}\n        <Tabs fdKey=\"asset-manager-tabs\" onChange={() => {}} value={1}>\n          <Tab label=\"Upload\" />\n          <Tab label=\"Library\" />\n        </Tabs>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledLoadingContainer","display","justifyContent","alignItems","minHeight","padding","StyledErrorContainer","open","onClose","onSelect","orgId","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","data","assets","isLoading","error","useGetAssets","useEffect","handleCancel","handleSelect","selectedAssets","filter","asset","includes","id","handleAssetClick","assetId","prev","_jsxs","Modal","actions","label","onClick","variant","tone","disabled","length","title","children","_jsx","Tabs","fdKey","onChange","value","Tab","CircularProgress","size","EmptyState","description","Grid","container","component","sx","listStyle","margin","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"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"}

package/dist/components/organisms/AssetManager/index.d.ts

@@ -18,8 +18,10 @@ interface AssetManagerProps {
     onClose: () => void;
     /** Callback function when assets are selected */
     onSelect?: (selectedAssets: Asset[]) => void;
-    /** Assets to display if no api is provided */
-    assets?: Asset[];
+    /**
+     * Organization ID for fetching assets
+     */
+    orgId: string;
     /** Whether multiple assets can be selected. Defaults to false */
     multiSelect?: boolean;
 }

package/dist/components/organisms/AssetManager/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as i}from"react";import{styled as r}from"@mui/material/styles";import a from"@mui/material/Box";import l from"../../atoms/Card/index.js";import n from"@mui/material/Grid2";import s from"@mui/material/Typography";import c from"../../molecules/Modal/index.js";import m from"../../../icons/CheckmarkCircleSolid/index.js";const d=r(a)((({theme:e})=>({marginBottom:e.spacing(3)}))),p=r(a,{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"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),u=r(m)((({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=({open:r,onClose:a,onSelect:m,assets:h,multiSelect:f=!1})=>{const[g,b]=o([]);i((()=>{r||b([])}),[r]);const k=()=>{b([]),a()},x=e=>{b((t=>f?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e(c,{actions:[{label:"Cancel",onClick:k,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:()=>{if(m&&h){const e=h.filter((e=>g.includes(e.id)));m(e)}b([]),a()},variant:"primary",disabled:0===g.length,id:"asset-manager-select"}],onClose:k,open:r,size:"large",title:"Select Images",children:[t(d,{children:t(s,{variant:"h3Strong",children:"Tabs placeholder text"})}),t(n,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:h?.map((o=>{const i=g.includes(o.id);return t(n,{"aria-selected":i,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e(p,{"aria-label":"Select "+o.fileName,onClick:()=>x(o.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),x(o.id))},role:"button",selected:i,tabIndex:0,children:[i&&t(u,{size:"lg"}),t(l,{content:o.fileName,heading:"",imageAlt:o.metadata.altText,imageSrc:o.url})]})},o.id)}))})]})};export{h as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i,useEffect as o}from"react";import{styled as r}from"@mui/material/styles";import a from"@mui/material/Box";import l from"../../atoms/Card/index.js";import{CircularProgress as n}from"../../atoms/CircularProgress/index.js";import s from"@mui/material/Grid2";import c from"@mui/material/Tab";import{EmptyState as d}from"../../molecules/EmptyState/index.js";import m from"../../molecules/Modal/index.js";import p from"../../molecules/Tabs/index.js";import u from"../../../icons/CheckmarkCircleSolid/index.js";import{useGetAssets as g}from"./hooks/useAssets.js";const h=r(a)((({theme:e})=>({marginBottom:e.spacing(3)}))),f=r(a,{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"]:"transparent",boxShadow:t?"none":`inset 0 0 0 1px ${e.palette.semantic.stroke["stroke-weak"]}`},"&:hover":{opacity:.9},"&:focus-visible .MuiCard-root":{borderColor:e.palette.semantic.stroke["stroke-selected"],boxShadow:"none"}}))),b=r(u)((({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}}))),x=r(a)((({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",minHeight:"200px",padding:e.spacing(4)}))),k=r(a)((({theme:e})=>({padding:e.spacing(4)}))),y=({open:r,onClose:a,onSelect:u,orgId:y,multiSelect:C=!1})=>{const[S,j]=i([]),{data:v,isLoading:w,error:I}=g(y,r);o((()=>{r||j([])}),[r]);const z=()=>{j([]),a()},N=e=>{j((t=>C?t.includes(e)?t.filter((t=>t!==e)):[...t,e]:t.includes(e)?[]:[e]))};return e(m,{actions:[{label:"Cancel",onClick:z,variant:"secondary",tone:"neutral",id:"asset-manager-cancel"},{label:"Select",onClick:()=>{if(u&&v){const e=v.filter((e=>S.includes(e.id)));u(e)}j([]),a()},variant:"primary",disabled:0===S.length,id:"asset-manager-select"}],onClose:z,open:r,title:"Select Images",children:[t(h,{children:e(p,{fdKey:"asset-manager-tabs",onChange:()=>{},value:1,children:[t(c,{label:"Upload"}),t(c,{label:"Library"})]})}),w?t(x,{children:t(n,{size:"large"})}):I?t(k,{children:t(d,{description:"Failed to load assets. Please try again later.",title:"Error loading assets"})}):v&&0!==v.length?t(s,{container:!0,component:"ul",spacing:1,sx:{listStyle:"none",margin:0,padding:0},children:v.map((i=>{const o=S.includes(i.id);return t(s,{"aria-selected":o,component:"li",size:{widescreen:3,desktop:3,mobile:6,tablet:4},children:e(f,{"aria-label":"Select "+i.fileName,onClick:()=>N(i.id),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),N(i.id))},role:"button",selected:o,tabIndex:0,children:[o&&t(b,{size:"lg"}),t(l,{content:i.fileName,heading:"",imageAlt:i.metadata.altText,imageSrc:i.url})]})},i.id)}))}):t(k,{children:t(d,{description:"No assets available to display.",title:"No assets found"})})]})};export{y as default};
 //# sourceMappingURL=index.js.map

package/dist/components/organisms/AssetManager/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } 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 Typography from '@fd/components/atoms/Typography';\nimport Modal from '@fd/components/molecules/Modal';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\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 ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\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\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /** Assets to display if no api is provided */\n  assets?: Asset[];\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  assets,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActionButtons = (): Array<{\n    disabled?: boolean;\n    id: string;\n    label: string;\n    onClick: () => void;\n    tone?: 'brand' | 'neutral';\n    variant: 'primary' | 'secondary';\n  }> => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary',\n        tone: 'neutral',\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary',\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => (\n    <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n      {assets?.map((asset: Asset) => {\n        const isSelected = selectedAssetIds.includes(asset.id);\n        return (\n          <Grid\n            key={asset.id}\n            aria-selected={isSelected}\n            component=\"li\"\n            size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n          >\n            <StyledCardWrapper\n              aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n              onClick={() => handleAssetClick(asset.id)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  handleAssetClick(asset.id);\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                imageSrc={asset.url}\n              />\n            </StyledCardWrapper>\n          </Grid>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <Modal\n      actions={getActionButtons()}\n      onClose={handleCancel}\n      open={open}\n      size=\"large\"\n      title={'Select Images'} // TODO: translate this text when translate provider is added\n    >\n      <StyledTabsContainer>\n        {/* TODO: replace this with tabs component when available */}\n        <Typography variant=\"h3Strong\">Tabs placeholder text</Typography>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","AssetManager","open","onClose","onSelect","assets","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","useEffect","handleCancel","handleAssetClick","assetId","prev","includes","filter","id","_jsxs","Modal","actions","label","onClick","variant","tone","selectedAssets","asset","disabled","length","size","title","children","_jsx","Typography","Grid","container","component","sx","listStyle","margin","padding","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"+YAaA,MAAMA,EAAsBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChDC,aAAcD,EAAME,QAAQ,OAGxBC,EAAoBL,EAAOC,EAAK,CACpCK,kBAAoBC,GAAkB,aAATA,GADLP,EAEC,EAAGE,QAAOM,eAAU,CAC7CC,MAAO,OACPC,OAAQ,UACRC,SAAU,WACV,kBAAmB,CAEjBC,YAAa,MACbC,YAAaL,EAAWN,EAAMY,QAAQC,SAASC,OAAO,mBAAqB,cAG3EC,UAAWT,EAAW,OAAS,mBAAmBN,EAAMY,QAAQC,SAASC,OAAO,kBAElF,UAAW,CACTE,QAAS,IAEX,gCAAiC,CAC/BL,YAAaX,EAAMY,QAAQC,SAASC,OAAO,mBAC3CC,UAAW,YAITE,EAAsBnB,EAAOoB,EAAPpB,EAAiC,EAAGE,YAAO,CACrES,SAAU,WACVU,IAAKnB,EAAME,QAAQ,GACnBkB,KAAMpB,EAAME,QAAQ,GACpBmB,OAAQ,EACRC,MAAOtB,EAAMY,QAAQC,SAASU,KAAK,gBACnC,WAAY,CACVC,KAAMxB,EAAMY,QAAQa,OAAOC,WA2BzBC,EAA4C,EAChDC,OACAC,UACAC,WACAC,SACAC,eAAc,MAEd,MAAOC,EAAkBC,GAAuBC,EAAmB,IAGnEC,GAAU,KACHR,GACHM,EAAoB,MAErB,CAACN,IAEJ,MAAMS,EAAe,KACnBH,EAAoB,IACpBL,KAYIS,EAAoBC,IACxBL,GAAqBM,GACfR,EACEQ,EAAKC,SAASF,GACTC,EAAKE,QAAQC,GAAOA,IAAOJ,IAE7B,IAAIC,EAAMD,GAEbC,EAAKC,SAASF,GACT,GAEF,CAACA,MAqEd,OACEK,EAACC,GACCC,QA1DK,CACL,CACEC,MAAO,SACPC,QAASX,EACTY,QAAS,YACTC,KAAM,UACNP,GAAI,wBAEN,CACEI,MAAO,SACPC,QA3Ce,KACnB,GAAIlB,GAAYC,EAAQ,CACtB,MAAMoB,EAAiBpB,EAAOW,QAAQU,GAAUnB,EAAiBQ,SAASW,EAAMT,MAChFb,EAASqB,EACX,CACAjB,EAAoB,IACpBL,KAsCIoB,QAAS,UACTI,SAAsC,IAA5BpB,EAAiBqB,OAC3BX,GAAI,yBA8CNd,QAASQ,EACTT,KAAMA,EACN2B,KAAK,QACLC,MAAO,gBAAeC,SAAA,CAEtBC,EAAC7D,EAAmB,CAAA4D,SAElBC,EAACC,EAAU,CAACV,QAAQ,gDA/CxBS,EAACE,EAAI,CAACC,WAAS,EAACC,UAAU,KAAK5D,QAAS,EAAG6D,GAAI,CAAEC,UAAW,OAAQC,OAAQ,EAAGC,QAAS,GAAGT,SACxF1B,GAAQoC,KAAKf,IACZ,MAAMgB,EAAanC,EAAiBQ,SAASW,EAAMT,IACnD,OACEe,EAACE,EAAI,CAAA,gBAEYQ,EACfN,UAAU,KACVP,KAAM,CAAEc,WAAY,EAAGC,QAAS,EAAGC,OAAQ,EAAGC,OAAQ,GAAGf,SAEzDb,EAACzC,EAAiB,CAAA,aACJ,UAAYiD,EAAMqB,SAC9BzB,QAAS,IAAMV,EAAiBc,EAAMT,IACtC+B,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACFvC,EAAiBc,EAAMT,MAG3BmC,KAAK,SACLxE,SAAU8D,EACVW,SAAU,EAACtB,SAAA,CAEVW,GAAcV,EAACzC,EAAmB,CAACsC,KAAK,OACzCG,EAACsB,EAAI,CACHC,QAAS7B,EAAMqB,SACfS,QAAQ,GACRC,SAAU/B,EAAMgC,SAASC,QACzBC,SAAUlC,EAAMmC,UAvBfnC,EAAMT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/organisms/AssetManager/index.tsx"],"sourcesContent":["import React, { useEffect, useState } 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 CircularProgress from '@fd/components/atoms/CircularProgress';\nimport Grid from '@fd/components/atoms/Grid';\nimport Tab from '@fd/components/atoms/Tab';\nimport EmptyState from '@fd/components/molecules/EmptyState';\nimport Modal from '@fd/components/molecules/Modal';\nimport Tabs from '@fd/components/molecules/Tabs';\nimport CheckmarkCircleSolidIcon from '@fd/icons/CheckmarkCircleSolid';\n\nimport { useGetAssets } from './hooks/useAssets';\nimport type { Asset } from './types';\n\nconst StyledTabsContainer = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(3),\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 ? theme.palette.semantic.stroke['stroke-selected'] : 'transparent',\n    // Use box-shadow to create the visual 1px border when not selected\n    // This prevents layout shift while maintaining the visual appearance\n    boxShadow: selected ? 'none' : `inset 0 0 0 1px ${theme.palette.semantic.stroke['stroke-weak']}`,\n  },\n  '&:hover': {\n    opacity: 0.9,\n  },\n  '&:focus-visible .MuiCard-root': {\n    borderColor: theme.palette.semantic.stroke['stroke-selected'],\n    boxShadow: 'none',\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\n/**\n * Props for the AssetManager component.\n * Provides a modal interface for selecting images from a grid display.\n * It supports both single and multiple image selection modes.\n *\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n *\n * ```tsx\n * import AssetManager from '@flipdish/portal-library/components/organisms/AssetManager';\n */\nexport interface AssetManagerProps {\n  /** Whether the asset manager modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed or cancelled */\n  onClose: () => void;\n  /** Callback function when assets are selected */\n  onSelect?: (selectedAssets: Asset[]) => void;\n  /**\n   * Organization ID for fetching assets\n   */\n  orgId: string;\n  /** Whether multiple assets can be selected. Defaults to false */\n  multiSelect?: boolean;\n}\n\nconst StyledLoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  minHeight: '200px',\n  padding: theme.spacing(4),\n}));\n\nconst StyledErrorContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4),\n}));\n\nconst AssetManager: React.FC<AssetManagerProps> = ({\n  open,\n  onClose,\n  onSelect,\n  orgId,\n  multiSelect = false,\n}) => {\n  const [selectedAssetIds, setSelectedAssetIds] = useState<string[]>([]);\n\n  // Fetch assets from API - service handles everything\n  const { data: assets, isLoading, error } = useGetAssets(orgId, open);\n\n  // Reset selection when modal opens/closes\n  useEffect(() => {\n    if (!open) {\n      setSelectedAssetIds([]);\n    }\n  }, [open]);\n\n  const handleCancel = (): void => {\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleSelect = (): void => {\n    if (onSelect && assets) {\n      const selectedAssets = assets.filter((asset: Asset) => selectedAssetIds.includes(asset.id));\n      onSelect(selectedAssets);\n    }\n    setSelectedAssetIds([]);\n    onClose();\n  };\n\n  const handleAssetClick = (assetId: string): void => {\n    setSelectedAssetIds((prev) => {\n      if (multiSelect) {\n        if (prev.includes(assetId)) {\n          return prev.filter((id) => id !== assetId);\n        }\n        return [...prev, assetId];\n      } else {\n        if (prev.includes(assetId)) {\n          return [];\n        }\n        return [assetId];\n      }\n    });\n  };\n\n  const getActions = () => {\n    return [\n      {\n        label: 'Cancel',\n        onClick: handleCancel,\n        variant: 'secondary' as const,\n        tone: 'neutral' as const,\n        id: 'asset-manager-cancel',\n      },\n      {\n        label: 'Select',\n        onClick: handleSelect,\n        variant: 'primary' as const,\n        disabled: selectedAssetIds.length === 0,\n        id: 'asset-manager-select',\n      },\n    ];\n  };\n\n  const renderBrowseTab = (): React.ReactElement => {\n    if (isLoading) {\n      return (\n        <StyledLoadingContainer>\n          <CircularProgress size=\"large\" />\n        </StyledLoadingContainer>\n      );\n    }\n\n    if (error) {\n      return (\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        <StyledErrorContainer>\n          <EmptyState description=\"No assets available to display.\" title=\"No assets found\" />\n        </StyledErrorContainer>\n      );\n    }\n\n    return (\n      <Grid container component=\"ul\" spacing={1} sx={{ listStyle: 'none', margin: 0, padding: 0 }}>\n        {assets.map((asset: Asset) => {\n          const isSelected = selectedAssetIds.includes(asset.id);\n          return (\n            <Grid\n              key={asset.id}\n              aria-selected={isSelected}\n              component=\"li\"\n              size={{ widescreen: 3, desktop: 3, mobile: 6, tablet: 4 }}\n            >\n              <StyledCardWrapper\n                aria-label={'Select ' + asset.fileName} // TODO: translate this text when translate provider is added\n                onClick={() => handleAssetClick(asset.id)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    handleAssetClick(asset.id);\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                  imageSrc={asset.url}\n                />\n              </StyledCardWrapper>\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  };\n\n  return (\n    // TODO: replace this with a new modal component when available\n    <Modal actions={getActions()} onClose={handleCancel} open={open} title=\"Select Images\">\n      <StyledTabsContainer>\n        {/* TODO: replace this with a new tabs component when available */}\n        <Tabs fdKey=\"asset-manager-tabs\" onChange={() => {}} value={1}>\n          <Tab label=\"Upload\" />\n          <Tab label=\"Library\" />\n        </Tabs>\n      </StyledTabsContainer>\n      {renderBrowseTab()}\n    </Modal>\n  );\n};\n\nexport default AssetManager;\n"],"names":["StyledTabsContainer","styled","Box","theme","marginBottom","spacing","StyledCardWrapper","shouldForwardProp","prop","selected","width","cursor","position","borderWidth","borderColor","palette","semantic","stroke","boxShadow","opacity","StyledCheckmarkIcon","CheckmarkCircleSolidIcon","top","left","zIndex","color","icon","fill","common","white","StyledLoadingContainer","display","justifyContent","alignItems","minHeight","padding","StyledErrorContainer","AssetManager","open","onClose","onSelect","orgId","multiSelect","selectedAssetIds","setSelectedAssetIds","useState","data","assets","isLoading","error","useGetAssets","useEffect","handleCancel","handleAssetClick","assetId","prev","includes","filter","id","_jsxs","Modal","actions","label","onClick","variant","tone","selectedAssets","asset","disabled","length","title","children","_jsx","Tabs","fdKey","onChange","value","Tab","CircularProgress","size","EmptyState","description","Grid","container","component","sx","listStyle","margin","map","isSelected","widescreen","desktop","mobile","tablet","fileName","onKeyDown","e","key","preventDefault","role","tabIndex","Card","content","heading","imageAlt","metadata","altText","imageSrc","url"],"mappings":"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"}

package/dist/components/organisms/AssetManager/services/asset.service.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const t=t=>{if(!t)return;return`${(()=>{const t=window.location?.host?.includes("portal.flipdish.com"),e=window.location?.host?.includes("portal.flipdishdev.com");return t?"https://asset-management-service.portal.flipdish.com":e?"https://asset-management-service.portal.flipdishdev.com":"https://ci.asset-management-service.clients-ephemeral.flipdishdev.com"})()}/${t}/assets`};exports.getAssets=async e=>{const s=t(e);if(!s)throw new Error("Organization ID is required to fetch assets");const i=await fetch(s,{method:"GET",credentials:"include"});if(!i.ok)throw new Error(`Failed to fetch assets: ${i.statusText}`);return await i.json()},exports.getAssetsKey="getAssets";
+//# sourceMappingURL=asset.service.cjs.js.map

package/dist/components/organisms/AssetManager/services/asset.service.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset.service.cjs.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { Asset } from '../types';\n\nexport const getAssetsKey = 'getAssets';\n\nconst PROD_API_URL = 'https://asset-management-service.portal.flipdish.com';\nconst STAGING_API_URL = 'https://asset-management-service.portal.flipdishdev.com';\nconst CI_API_URL = 'https://ci.asset-management-service.clients-ephemeral.flipdishdev.com';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n  const isStaging = window.location?.host?.includes('portal.flipdishdev.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  if (isStaging) {\n    return STAGING_API_URL;\n  }\n\n  // Default to CI/dev environment\n  return CI_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string): string | undefined => {\n  if (!orgId) return undefined;\n\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/${orgId}/assets`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string): Promise<Asset[]> => {\n  const apiUrl = buildApiUrl(orgId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as Asset[];\n};\n"],"names":["buildApiUrl","orgId","isProd","window","location","host","includes","isStaging","getAssetManagementApiUrl","async","apiUrl","Error","response","fetch","method","credentials","ok","statusText","json"],"mappings":"aAEO,MA+BDA,EAAeC,IACnB,IAAKA,EAAO,OAGZ,MAAO,GAzBwB,MAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBACzCC,EAAYJ,OAAOC,UAAUC,MAAMC,SAAS,0BAElD,OAAIJ,EAZe,uDAgBfK,EAfkB,0DACL,yEA8BDC,MACKP,8BAQEQ,MAAOR,IAC9B,MAAMS,EAASV,EAAYC,GAE3B,IAAKS,EACH,MAAM,IAAIC,MAAM,+CAGlB,MAAMC,QAAiBC,MAAMH,EAAQ,CACnCI,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM,6BA3DG"}

package/dist/components/organisms/AssetManager/services/asset.service.d.ts

@@ -0,0 +1,11 @@
+import { Asset } from '../types/index.js';
+
+declare const getAssetsKey = "getAssets";
+/**
+ * Fetches assets from the asset management service API
+ * @param orgId - organization ID.
+ * @returns Promise resolving to an array of assets
+ */
+declare const getAssets: (orgId: string) => Promise<Asset[]>;
+
+export { getAssets, getAssetsKey };

package/dist/components/organisms/AssetManager/services/asset.service.js

@@ -0,0 +1,2 @@
+const t="getAssets",e=t=>{if(!t)return;return`${(()=>{const t=window.location?.host?.includes("portal.flipdish.com"),e=window.location?.host?.includes("portal.flipdishdev.com");return t?"https://asset-management-service.portal.flipdish.com":e?"https://asset-management-service.portal.flipdishdev.com":"https://ci.asset-management-service.clients-ephemeral.flipdishdev.com"})()}/${t}/assets`},s=async t=>{const s=e(t);if(!s)throw new Error("Organization ID is required to fetch assets");const i=await fetch(s,{method:"GET",credentials:"include"});if(!i.ok)throw new Error(`Failed to fetch assets: ${i.statusText}`);return await i.json()};export{s as getAssets,t as getAssetsKey};
+//# sourceMappingURL=asset.service.js.map

package/dist/components/organisms/AssetManager/services/asset.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"asset.service.js","sources":["../../../../../src/components/organisms/AssetManager/services/asset.service.ts"],"sourcesContent":["import type { Asset } from '../types';\n\nexport const getAssetsKey = 'getAssets';\n\nconst PROD_API_URL = 'https://asset-management-service.portal.flipdish.com';\nconst STAGING_API_URL = 'https://asset-management-service.portal.flipdishdev.com';\nconst CI_API_URL = 'https://ci.asset-management-service.clients-ephemeral.flipdishdev.com';\n\n/**\n * Gets the asset management API base URL based on the current environment\n * @returns The appropriate API URL for the current environment\n */\nconst getAssetManagementApiUrl = (): string => {\n  const isProd = window.location?.host?.includes('portal.flipdish.com');\n  const isStaging = window.location?.host?.includes('portal.flipdishdev.com');\n\n  if (isProd) {\n    return PROD_API_URL;\n  }\n\n  if (isStaging) {\n    return STAGING_API_URL;\n  }\n\n  // Default to CI/dev environment\n  return CI_API_URL;\n};\n\n/**\n * Builds the complete API URL for fetching assets\n * @param orgId - Optional organization ID.\n * @returns The complete API URL or undefined if no orgId available\n */\nconst buildApiUrl = (orgId: string): string | undefined => {\n  if (!orgId) return undefined;\n\n  const baseUrl = getAssetManagementApiUrl();\n  return `${baseUrl}/${orgId}/assets`;\n};\n\n/**\n * Fetches assets from the asset management service API\n * @param orgId - organization ID.\n * @returns Promise resolving to an array of assets\n */\nexport const getAssets = async (orgId: string): Promise<Asset[]> => {\n  const apiUrl = buildApiUrl(orgId);\n\n  if (!apiUrl) {\n    throw new Error('Organization ID is required to fetch assets');\n  }\n\n  const response = await fetch(apiUrl, {\n    method: 'GET',\n    credentials: 'include',\n  });\n\n  if (!response.ok) {\n    throw new Error(`Failed to fetch assets: ${response.statusText}`);\n  }\n\n  return (await response.json()) as Asset[];\n};\n"],"names":["getAssetsKey","buildApiUrl","orgId","isProd","window","location","host","includes","isStaging","getAssetManagementApiUrl","getAssets","async","apiUrl","Error","response","fetch","method","credentials","ok","statusText","json"],"mappings":"AAEO,MAAMA,EAAe,YA+BtBC,EAAeC,IACnB,IAAKA,EAAO,OAGZ,MAAO,GAzBwB,MAC/B,MAAMC,EAASC,OAAOC,UAAUC,MAAMC,SAAS,uBACzCC,EAAYJ,OAAOC,UAAUC,MAAMC,SAAS,0BAElD,OAAIJ,EAZe,uDAgBfK,EAfkB,0DACL,yEA8BDC,MACKP,YAQVQ,EAAYC,MAAOT,IAC9B,MAAMU,EAASX,EAAYC,GAE3B,IAAKU,EACH,MAAM,IAAIC,MAAM,+CAGlB,MAAMC,QAAiBC,MAAMH,EAAQ,CACnCI,OAAQ,MACRC,YAAa,YAGf,IAAKH,EAASI,GACZ,MAAM,IAAIL,MAAM,2BAA2BC,EAASK,cAGtD,aAAcL,EAASM"}

package/dist/mocks/msw/handlers.cjs.js

@@ -0,0 +1,2 @@
+"use strict";require("../../node_modules/.pnpm/msw@2.12.3_@types_node@20.19.25_typescript@5.4.5/node_modules/msw/lib/core/index.cjs.js");var e=require("../../components/organisms/AssetManager/__mocks__/mockAssets.cjs.js"),s=require("../../node_modules/.pnpm/msw@2.12.3_@types_node@20.19.25_typescript@5.4.5/node_modules/msw/lib/core/http.cjs.js"),o=require("../../node_modules/.pnpm/msw@2.12.3_@types_node@20.19.25_typescript@5.4.5/node_modules/msw/lib/core/HttpResponse.cjs.js");const t=[...[s.http.get("*asset-management-service*/:orgId/assets",(({request:s,params:t})=>(console.log("[MSW] Intercepted request:",s.url,"orgId:",t.orgId),o.HttpResponse.json(e.mockAssets))))]];exports.handlers=t;
+//# sourceMappingURL=handlers.cjs.js.map

package/dist/mocks/msw/handlers.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handlers.cjs.js","sources":["../../../src/mocks/msw/handlers.ts"],"sourcesContent":["import { http, HttpResponse } from 'msw';\n\nimport { mockAssets } from '../../components/organisms/AssetManager/__mocks__/mockAssets';\n\nconst assetManagementHandlers = [\n  http.get('*asset-management-service*/:orgId/assets', ({ request, params }) => {\n    // eslint-disable-next-line no-console\n    console.log('[MSW] Intercepted request:', request.url, 'orgId:', params['orgId']);\n    return HttpResponse.json(mockAssets);\n  }),\n];\n\nexport const handlers = [...assetManagementHandlers];\n"],"names":["handlers","http","get","request","params","console","log","url","HttpResponse","json","mockAssets"],"mappings":"geAIA,MAQaA,EAAW,IARQ,CAC9BC,EAAAA,KAAKC,IAAI,4CAA4C,EAAGC,UAASC,aAE/DC,QAAQC,IAAI,6BAA8BH,EAAQI,IAAK,SAAUH,EAAc,OACxEI,EAAAA,aAAaC,KAAKC"}

package/dist/mocks/msw/handlers.d.ts

@@ -0,0 +1,5 @@
+import { HttpHandler } from '../../node_modules/.pnpm/msw@2.12.3_@types_node@20.19.25_typescript@5.4.5/node_modules/msw/lib/core/handlers/HttpHandler.d.js';
+
+declare const handlers: HttpHandler[];
+
+export { handlers };

package/dist/mocks/msw/handlers.js

@@ -0,0 +1,2 @@
+import"../../node_modules/.pnpm/msw@2.12.3_@types_node@20.19.25_typescript@5.4.5/node_modules/msw/lib/core/index.js";import{mockAssets as e}from"../../components/organisms/AssetManager/__mocks__/mockAssets.js";import{http as s}from"../../node_modules/.pnpm/msw@2.12.3_@types_node@20.19.25_typescript@5.4.5/node_modules/msw/lib/core/http.js";import{HttpResponse as o}from"../../node_modules/.pnpm/msw@2.12.3_@types_node@20.19.25_typescript@5.4.5/node_modules/msw/lib/core/HttpResponse.js";const t=[...[s.get("*asset-management-service*/:orgId/assets",(({request:s,params:t})=>(console.log("[MSW] Intercepted request:",s.url,"orgId:",t.orgId),o.json(e))))]];export{t as handlers};
+//# sourceMappingURL=handlers.js.map