@pega/cosmos-react-core 9.0.0-build.9.9 → 9.0.0

package/lib/components/File/FileInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"AAGA,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AASpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,cAAc;iBAAsC,cAAc,CAAC,SAAS,CAAC;SAuBxF,CAAC;AAIH,eAAO,MAAM,kBAAkB;YACrB,gBAAgB,CAAC,QAAQ,CAAC;cACxB,gBAAgB,CAAC,UAAU,CAAC;cAC5B,OAAO;SAyCjB,CAAC;AAIH,eAAO,MAAM,iBAAiB,gLAe5B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAgC3B,CAAC;AAIF,eAAO,MAAM,uBAAuB;aAAyB,cAAc,CAAC,SAAS,CAAC;SAarF,CAAC;AAEF,eAAO,MAAM,uBAAuB,0GAWnC,CAAC;AAIF,eAAO,MAAM,UAAU,gLAEtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mMAwC3B,CAAC;AAIH,eAAO,MAAM,eAAe;;;iBAAoC,cAAc,CAAC,SAAS,CAAC;SASvF,CAAC;AAEH,eAAO,MAAM,sBAAsB,8MAejC,CAAC;AAIH,eAAO,MAAM,uBAAuB,oLAWlC,CAAC"}
+{"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAS1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,cAAc;;;;;iBAA4C,cAAc,CAAC,SAAS,CAAC;YA0B/F,CAAC;AAIF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YACrB,gBAAgB,CAAC,QAAQ,CAAC;cACxB,gBAAgB,CAAC,UAAU,CAAC;cAC5B,OAAO;gJAyCjB,CAAC;AAIH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAe5B,CAAC;AAIH,eAAO,MAAM,eAAe,6NA2B3B,CAAC;AAIF,eAAO,MAAM,uBAAuB;aAAyB,cAAc,CAAC,SAAS,CAAC;YAarF,CAAC;AAEF,eAAO,MAAM,uBAAuB,+NAWnC,CAAC;AAIF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oMAEtB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;0KAwC3B,CAAC;AAIH,eAAO,MAAM,eAAe;iBAAoC,cAAc,CAAC,SAAS,CAAC;;;iDASvF,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mLAejC,CAAC;AAIH,eAAO,MAAM,uBAAuB;;2JAWlC,CAAC"}

package/lib/components/File/FileInput.styles.js

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
-import { hideVisually } from 'polished';
-import FormControl, {} from '../FormControl';
+import { StyledFormControl } from '../FormControl';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import BareButton from '../Button/BareButton';
@@ -9,21 +8,22 @@ import { StyledMetaListItem } from '../MetaList/MetaList';
 import Button from '../Button';
 import { calculateFontSize } from '../../styles';
 import { StyledFileItem } from './FileItem';
-export const StyledDropZone = styled(FormControl)(({ compactMode, theme: { base: { 'hit-area': { 'finger-min': fingerMin, compact } }, components } }) => {
+export const StyledDropZone = styled(StyledFormControl)(({ compactMode, theme: { base: { 'hit-area': { 'finger-min': fingerMin, compact } }, components } }) => {
     return css `
-    height: ${components.input.height};
-    border: none;
-    cursor: pointer;
+      width: 100%;
+      height: ${components.input.height};
+      border: none;
+      cursor: pointer;
 
-    ${compactMode &&
+      ${compactMode &&
         css `
-      height: ${compact};
-    `}
+        height: ${compact};
+      `}
 
-    @media (pointer: coarse) {
-      height: ${fingerMin};
-    }
-  `;
+      @media (pointer: coarse) {
+        height: ${fingerMin};
+      }
+    `;
 });
 StyledDropZone.defaultProps = defaultThemeProp;
 export const StyledUploadStatus = styled(Flex)(({ dragOver, status, readOnly, theme: { base: { 'border-radius': borderRadius }, components: { 'form-field': formField, 'form-control': { 'border-color': borderColor, ':hover': { 'border-color': hoverBorderColor }, 'border-radius': formBorderRadius } } } }) => {
@@ -63,17 +63,15 @@ export const StyledIconWrapper = styled(Flex)(({ theme: { base: { 'border-radius
   `;
 });
 StyledIconWrapper.defaultProps = defaultThemeProp;
-export const StyledFileInput = styled.div(({ theme: { components: { 'form-control': { 'border-color': borderColor, ':focus': { 'box-shadow': boxShadow } } } } }) => {
+export const StyledFileInput = styled.div(({ theme: { components: { 'form-control': { 'border-color': borderColor } } } }) => {
     return css `
       position: relative;
 
       input {
-        ${hideVisually}
+        display: none;
       }
 
-      input:enabled:focus + ${StyledDropZone} {
-        box-shadow: ${boxShadow};
-
+      ${StyledDropZone}:focus:not([disabled]) {
         > ${StyledIconWrapper} {
           border: none;
         }

package/lib/components/File/FileInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.styles.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormControl, { type FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport Button from '../Button';\nimport { calculateFontSize } from '../../styles';\n\nimport type { FileInputProps } from './FileInput';\nimport { StyledFileItem } from './FileItem';\n\nexport const StyledDropZone = styled(FormControl)<{ compactMode: FileInputProps['compact'] }>(({\n  compactMode,\n  theme: {\n    base: {\n      'hit-area': { 'finger-min': fingerMin, compact }\n    },\n    components\n  }\n}) => {\n  return css`\n    height: ${components.input.height};\n    border: none;\n    cursor: pointer;\n\n    ${compactMode &&\n    css`\n      height: ${compact};\n    `}\n\n    @media (pointer: coarse) {\n      height: ${fingerMin};\n    }\n  `;\n});\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledUploadStatus = styled(Flex)<{\n  status: FormControlProps['status'];\n  readOnly: FormControlProps['readOnly'];\n  dragOver: boolean;\n}>(({\n  dragOver,\n  status,\n  readOnly,\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'form-field': formField,\n      'form-control': {\n        'border-color': borderColor,\n        ':hover': { 'border-color': hoverBorderColor },\n        'border-radius': formBorderRadius\n      }\n    }\n  }\n}) => {\n  return css`\n    border: 0.0625rem dashed ${borderColor};\n    border-start-start-radius: calc(${borderRadius} * ${formBorderRadius});\n    border-end-start-radius: calc(${borderRadius} * ${formBorderRadius});\n    ${!readOnly &&\n    css`\n      ${status &&\n      css`\n        border-color: ${formField[status]['status-color']};\n      `};\n\n      ${dragOver &&\n      css`\n        border-style: solid;\n      `}\n\n      &:hover:not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n      }\n    `}\n  `;\n});\n\nStyledUploadStatus.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrapper = styled(Flex)(({\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'form-control': { 'border-color': borderColor, 'border-radius': formBorderRadius }\n    }\n  }\n}) => {\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-start-end-radius: calc(${borderRadius} * ${formBorderRadius});\n    border-end-end-radius: calc(${borderRadius} * ${formBorderRadius});\n    border-inline-start: none;\n    aspect-ratio: 1 / 1;\n  `;\n});\n\nStyledIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div(\n  ({\n    theme: {\n      components: {\n        'form-control': {\n          'border-color': borderColor,\n          ':focus': { 'box-shadow': boxShadow }\n        }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n\n      input {\n        ${hideVisually}\n      }\n\n      input:enabled:focus + ${StyledDropZone} {\n        box-shadow: ${boxShadow};\n\n        > ${StyledIconWrapper} {\n          border: none;\n        }\n        > ${StyledUploadStatus} {\n          border-block: none;\n          border-inline-start: none;\n          border-inline-end: 0.0625rem dashed ${borderColor};\n        }\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nexport const StyledSingleFileWrapper = styled.div<{ compact: FileInputProps['compact'] }>(\n  ({ compact }) => {\n    return css`\n      display: contents;\n\n      ${compact &&\n      css`\n        > ${StyledFileItem} {\n          width: 25ch;\n        }\n      `};\n    `;\n  }\n);\n\nexport const StyledAttachedFileCount = styled.span(\n  ({\n    theme: {\n      base: { palette, spacing }\n    }\n  }) => {\n    return css`\n      padding-inline-start: ${spacing};\n      color: ${palette.interactive};\n    `;\n  }\n);\n\nStyledAttachedFileCount.defaultProps = defaultThemeProp;\n\nexport const StyledFlex = styled(Flex)`\n  height: inherit;\n`;\n\nexport const StyledBareButton = styled(BareButton)(({\n  theme: {\n    base: {\n      palette,\n      'hit-area': { 'finger-min': fingerMin, compact },\n      'border-radius': baseRadius\n    },\n    components: {\n      'form-control': {\n        'border-color': borderColor,\n        'border-radius': radius,\n        ':focus': { 'box-shadow': boxShadow }\n      }\n    }\n  }\n}) => {\n  return css`\n    height: ${compact};\n    width: 25ch;\n    cursor: pointer;\n    border-radius: calc(${baseRadius} * ${radius});\n    background-color: ${palette['primary-background']};\n\n    @media (pointer: coarse) {\n      height: ${fingerMin};\n    }\n\n    &:focus {\n      box-shadow: ${boxShadow};\n\n      ${StyledIconWrapper} {\n        border: none;\n      }\n      ${StyledUploadStatus} {\n        border-block: none;\n        border-inline-start: none;\n        border-inline-end: 0.0625rem dashed ${borderColor};\n      }\n    }\n  `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled(FormField)<{ compactMode: FileInputProps['compact'] }>(({\n  compactMode\n}) => {\n  return css`\n    ${compactMode &&\n    css`\n      width: 25ch;\n    `};\n  `;\n});\n\nexport const StyledFileInputControl = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n  theme: {\n    base: { spacing },\n    components: { 'form-field': formField }\n  },\n  status\n}) => {\n  return css`\n    ${StyledFormFieldInfo} {\n      margin-block-start: calc(0.5 * ${spacing});\n      ${StyledMetaListItem}:first-child {\n        color: ${status && formField[status]['status-color']};\n      }\n    }\n  `;\n});\n\nStyledFileInputControl.defaultProps = defaultThemeProp;\n\nexport const StyledDownloadAllButton = styled(Button)(({\n  theme: {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n  }\n}) => {\n  const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n  return css`\n    font-size: ${infoFontSize};\n    margin-block-start: calc(0.5 * ${spacing});\n    align-self: flex-start;\n  `;\n});\n\nStyledDownloadAllButton.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"FileInput.styles.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl, type FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport Button from '../Button';\nimport { calculateFontSize } from '../../styles';\n\nimport type { FileInputProps } from './FileInput';\nimport { StyledFileItem } from './FileItem';\n\nexport const StyledDropZone = styled(StyledFormControl)<{ compactMode: FileInputProps['compact'] }>(\n  ({\n    compactMode,\n    theme: {\n      base: {\n        'hit-area': { 'finger-min': fingerMin, compact }\n      },\n      components\n    }\n  }) => {\n    return css`\n      width: 100%;\n      height: ${components.input.height};\n      border: none;\n      cursor: pointer;\n\n      ${compactMode &&\n      css`\n        height: ${compact};\n      `}\n\n      @media (pointer: coarse) {\n        height: ${fingerMin};\n      }\n    `;\n  }\n);\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledUploadStatus = styled(Flex)<{\n  status: FormControlProps['status'];\n  readOnly: FormControlProps['readOnly'];\n  dragOver: boolean;\n}>(({\n  dragOver,\n  status,\n  readOnly,\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'form-field': formField,\n      'form-control': {\n        'border-color': borderColor,\n        ':hover': { 'border-color': hoverBorderColor },\n        'border-radius': formBorderRadius\n      }\n    }\n  }\n}) => {\n  return css`\n    border: 0.0625rem dashed ${borderColor};\n    border-start-start-radius: calc(${borderRadius} * ${formBorderRadius});\n    border-end-start-radius: calc(${borderRadius} * ${formBorderRadius});\n    ${!readOnly &&\n    css`\n      ${status &&\n      css`\n        border-color: ${formField[status]['status-color']};\n      `};\n\n      ${dragOver &&\n      css`\n        border-style: solid;\n      `}\n\n      &:hover:not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n      }\n    `}\n  `;\n});\n\nStyledUploadStatus.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrapper = styled(Flex)(({\n  theme: {\n    base: { 'border-radius': borderRadius },\n    components: {\n      'form-control': { 'border-color': borderColor, 'border-radius': formBorderRadius }\n    }\n  }\n}) => {\n  return css`\n    border: 0.0625rem solid ${borderColor};\n    border-start-end-radius: calc(${borderRadius} * ${formBorderRadius});\n    border-end-end-radius: calc(${borderRadius} * ${formBorderRadius});\n    border-inline-start: none;\n    aspect-ratio: 1 / 1;\n  `;\n});\n\nStyledIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div(\n  ({\n    theme: {\n      components: {\n        'form-control': { 'border-color': borderColor }\n      }\n    }\n  }) => {\n    return css`\n      position: relative;\n\n      input {\n        display: none;\n      }\n\n      ${StyledDropZone}:focus:not([disabled]) {\n        > ${StyledIconWrapper} {\n          border: none;\n        }\n        > ${StyledUploadStatus} {\n          border-block: none;\n          border-inline-start: none;\n          border-inline-end: 0.0625rem dashed ${borderColor};\n        }\n      }\n    `;\n  }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nexport const StyledSingleFileWrapper = styled.div<{ compact: FileInputProps['compact'] }>(\n  ({ compact }) => {\n    return css`\n      display: contents;\n\n      ${compact &&\n      css`\n        > ${StyledFileItem} {\n          width: 25ch;\n        }\n      `};\n    `;\n  }\n);\n\nexport const StyledAttachedFileCount = styled.span(\n  ({\n    theme: {\n      base: { palette, spacing }\n    }\n  }) => {\n    return css`\n      padding-inline-start: ${spacing};\n      color: ${palette.interactive};\n    `;\n  }\n);\n\nStyledAttachedFileCount.defaultProps = defaultThemeProp;\n\nexport const StyledFlex = styled(Flex)`\n  height: inherit;\n`;\n\nexport const StyledBareButton = styled(BareButton)(({\n  theme: {\n    base: {\n      palette,\n      'hit-area': { 'finger-min': fingerMin, compact },\n      'border-radius': baseRadius\n    },\n    components: {\n      'form-control': {\n        'border-color': borderColor,\n        'border-radius': radius,\n        ':focus': { 'box-shadow': boxShadow }\n      }\n    }\n  }\n}) => {\n  return css`\n    height: ${compact};\n    width: 25ch;\n    cursor: pointer;\n    border-radius: calc(${baseRadius} * ${radius});\n    background-color: ${palette['primary-background']};\n\n    @media (pointer: coarse) {\n      height: ${fingerMin};\n    }\n\n    &:focus {\n      box-shadow: ${boxShadow};\n\n      ${StyledIconWrapper} {\n        border: none;\n      }\n      ${StyledUploadStatus} {\n        border-block: none;\n        border-inline-start: none;\n        border-inline-end: 0.0625rem dashed ${borderColor};\n      }\n    }\n  `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled(FormField)<{ compactMode: FileInputProps['compact'] }>(({\n  compactMode\n}) => {\n  return css`\n    ${compactMode &&\n    css`\n      width: 25ch;\n    `};\n  `;\n});\n\nexport const StyledFileInputControl = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n  theme: {\n    base: { spacing },\n    components: { 'form-field': formField }\n  },\n  status\n}) => {\n  return css`\n    ${StyledFormFieldInfo} {\n      margin-block-start: calc(0.5 * ${spacing});\n      ${StyledMetaListItem}:first-child {\n        color: ${status && formField[status]['status-color']};\n      }\n    }\n  `;\n});\n\nStyledFileInputControl.defaultProps = defaultThemeProp;\n\nexport const StyledDownloadAllButton = styled(Button)(({\n  theme: {\n    base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n  }\n}) => {\n  const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n  return css`\n    font-size: ${infoFontSize};\n    margin-block-start: calc(0.5 * ${spacing});\n    align-self: flex-start;\n  `;\n});\n\nStyledDownloadAllButton.defaultProps = defaultThemeProp;\n"]}

package/lib/components/File/FileItem.d.ts

@@ -19,8 +19,10 @@ export interface FileItemProps extends BaseProps {
     onCancel?: (id: FileItemProps['id']) => void;
     /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
     onEdit?: (id: FileItemProps['id']) => void;
-    /** When passed, will be called on click of the name. Passes file id as the parameter. */
+    /** When passed, the file name will be rendered as a clickable button. Fires on direct click of the name. Passes file id as the parameter. */
     onPreview?: (id: FileItemProps['id']) => void;
+    /** When passed, will render a preview tooltip. Will be fired on click of preview tooltip. Passes file id as the parameter. */
+    onPreviewPopoverClick?: (id: FileItemProps['id']) => void;
     /**
      * Moves preview option to actions menu.
      * To be used only in compact mode of single file input when rendered in a table
@@ -41,10 +43,16 @@ export interface FileItemProps extends BaseProps {
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledFileItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledPreviewTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../../types").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTextTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("../../types").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<ForwardRefForwardPropsComponent<import("../Text").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledFileItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     compactMode: FileItemProps["compact"];
     isDisabled?: FileItemProps["disabled"];
-}, never>;
+}>> & string;
 declare const FileItem: ForwardRefForwardPropsComponent<FileItemProps>;
 export default FileItem;
 //# sourceMappingURL=FileItem.d.ts.map

package/lib/components/File/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAYlD,OAAO,KAAK,EAAE,+BAA+B,EAAE,SAAS,EAAU,MAAM,aAAa,CAAC;AAetF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,yFAAyF;IACzF,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,0IAA0I;IAC1I,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA+CD,eAAO,MAAM,cAAc;iBACZ,aAAa,CAAC,SAAS,CAAC;iBACxB,aAAa,CAAC,UAAU,CAAC;SA2EvC,CAAC;AAIF,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAwL3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAuC,MAAM,OAAO,CAAC;AAYvF,OAAO,KAAK,EAAE,+BAA+B,EAAE,SAAS,EAAU,MAAM,aAAa,CAAC;AAyBtF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,6IAA6I;IAC7I,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,8HAA8H;IAC9H,qBAAqB,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1D;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,0IAA0I;IAC1I,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAgBD,eAAO,MAAM,kBAAkB;;2IAE9B,CAAC;AAEF,eAAO,MAAM,eAAe;;uIAE3B,CAAC;AAyBF,eAAO,MAAM,cAAc;iBACZ,aAAa,CAAC,SAAS,CAAC;iBACxB,aAAa,CAAC,UAAU,CAAC;YA2EvC,CAAC;AAIF,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAiQ3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/components/File/FileItem.js

@@ -12,7 +12,7 @@ import Text, { StyledText } from '../Text';
 import Tooltip from '../Tooltip';
 import { defaultThemeProp } from '../../theme';
 import Button, { StyledButton } from '../Button';
-import { useI18n, useElement, useConfiguration, useConsolidatedRef } from '../../hooks';
+import { useI18n, useElement, useConfiguration, useConsolidatedRef, usePreviewContext, useModalContext } from '../../hooks';
 import Actions from '../Actions';
 import Progress from '../Progress';
 import { StyledProgressRing } from '../Progress/Progress.styles';
@@ -21,6 +21,9 @@ import Flex from '../Flex';
 import { StyledIconShape } from '../Icon/Icon';
 import { getActiveElement, getFocusables } from '../../utils';
 import { ellipsisOverflow } from '../../styles/mixins';
+import { StyledLinkPopover, StyledLinkPreviewPopoverBtn } from '../Link/Link';
+import Popover from '../Popover';
+import { Keyboard } from '../Badges';
 import { getKindFromMimeType, getMimeTypeFromFile } from './utils';
 import FileVisual, { StyledFileVisual } from './FileVisual';
 registerIcon(openIcon, timesIcon, previewIcon, editIcon, downloadIcon, deleteIcon);
@@ -35,10 +38,10 @@ const titleEllipsisStyle = css `
   flex-shrink: 1;
   ${ellipsisOverflow}
 `;
-const StyledPreviewTitle = styled(Button) `
+export const StyledPreviewTitle = styled(Button) `
   ${titleEllipsisStyle}
 `;
-const StyledTextTitle = styled(Text) `
+export const StyledTextTitle = styled(Text) `
   ${titleEllipsisStyle}
 `;
 const StyledMeta = styled(StyledText)(({ theme, error }) => {
@@ -115,11 +118,15 @@ export const StyledFileItem = styled.div(({ theme: { base: { palette, spacing, '
 });
 StyledFileItem.defaultProps = defaultThemeProp;
 const FileItem = forwardRef(function FileItem(props, ref) {
-    const { id, name, thumbnail, format, error, onCancel, onEdit, onPreview, onDownload, onDelete, onOpen, progress, compact = false, previewFromActions = false, disabled = false, ...restProps } = props;
+    const { id, name, thumbnail, format, error, onCancel, onEdit, onPreview, onPreviewPopoverClick, onDownload, onDelete, onOpen, progress, compact = false, previewFromActions = false, disabled = false, ...restProps } = props;
     const [thumbnailError, setThumbnailError] = useState(false);
     const [textTarget, setTextTarget] = useElement();
     const [metaTarget, setMetaTarget] = useElement();
+    const [popover, setPopover] = useState(false);
+    const [previewPopover, setPreviewPopover] = useState(false);
     const { locale } = useConfiguration();
+    const { initialized: inModal } = useModalContext();
+    const { previewTriggerRef } = usePreviewContext();
     const t = useI18n();
     const uploading = typeof progress === 'number' && progress < 100;
     const itemRef = useConsolidatedRef(ref);
@@ -148,16 +155,13 @@ const FileItem = forwardRef(function FileItem(props, ref) {
     ].flatMap(action => {
         if (!action || !action.onClick)
             return [];
-        const { text, icon, onClick } = action;
+        const { text, icon, onClick: onActionClick } = action;
         return [
             {
                 id: text,
                 text,
                 icon,
-                onClick: () => {
-                    if (onClick)
-                        onClick(id);
-                }
+                onClick: () => onActionClick(id)
             }
         ];
     });
@@ -187,9 +191,22 @@ const FileItem = forwardRef(function FileItem(props, ref) {
             alignItems: 'center',
             justify: 'start',
             gap: 1
-        }, isDisabled: disabled, compactMode: compact, ref: itemRef, children: [visual, !previewFromActions && onPreview && !(error || uploading) ? (_jsxs(Button, { ...restProps, as: StyledPreviewTitle, variant: 'link', ref: setTextTarget, onClick: () => {
-                    onPreview(id);
-                }, "aria-label": t('preview_file', [name]), disabled: disabled, children: [name, format === 'url' && _jsx(Icon, { name: 'open' })] })) : (_jsx(Text, { ...restProps, as: StyledTextTitle, ref: setTextTarget, children: name })), metaMessage && (_jsxs(_Fragment, { children: [_jsx(Text, { as: StyledMeta, variant: 'secondary', error: error && !uploading, ref: setMetaTarget, children: metaMessage }), metaTarget && (_jsx(Tooltip, { target: metaTarget, describeTarget: false, smart: true, children: metaMessage }))] })), (error || uploading) && onCancel && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Button, { label: t('cancel'), "aria-label": `${t('cancel')} - ${contextualLabel}`, variant: 'simple', compact: true, icon: true, onClick: () => onCancel(id), children: _jsx(Icon, { name: 'times' }) }) })), !(error || uploading) && !!definedActions.length && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Actions, { items: definedActions, compact: true, iconOnly: true, contextualLabel: name, disabled: disabled }) })), textTarget && (_jsx(Tooltip, { target: textTarget, smart: true, describeTarget: false, children: name }))] }));
+        }, isDisabled: disabled, compactMode: compact, ref: itemRef, children: [visual, !previewFromActions &&
+                ((!inModal && onPreviewPopoverClick) || onPreview) &&
+                !(error || uploading) ? (_jsxs(Button, { ...restProps, as: StyledPreviewTitle, variant: 'link', ref: setTextTarget, onClick: () => {
+                    onPreview?.(id);
+                }, onKeyDown: (e) => {
+                    if (e.getModifierState('Alt') && e.code === 'KeyP') {
+                        previewTriggerRef.current = e.currentTarget;
+                        onPreviewPopoverClick?.(id);
+                    }
+                }, onMouseEnter: onPreviewPopoverClick ? () => setPopover(true) : undefined, onMouseLeave: onPreviewPopoverClick ? () => setPopover(false) : undefined, onFocus: onPreviewPopoverClick ? () => setPreviewPopover(true) : undefined, onBlur: onPreviewPopoverClick ? () => setPreviewPopover(false) : undefined, "aria-label": t('preview_file', [name]), disabled: disabled, children: [name, format === 'url' && _jsx(Icon, { name: 'open' })] })) : (_jsx(Text, { ...restProps, as: StyledTextTitle, ref: setTextTarget, children: name })), metaMessage && (_jsxs(_Fragment, { children: [_jsx(Text, { as: StyledMeta, variant: 'secondary', error: error && !uploading, ref: setMetaTarget, children: metaMessage }), metaTarget && (_jsx(Tooltip, { target: metaTarget, describeTarget: false, smart: true, children: metaMessage }))] })), (error || uploading) && onCancel && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Button, { label: t('cancel'), "aria-label": `${t('cancel')} - ${contextualLabel}`, variant: 'simple', compact: true, icon: true, onClick: () => onCancel(id), children: _jsx(Icon, { name: 'times' }) }) })), !(error || uploading) && !!definedActions.length && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Actions, { items: definedActions, compact: true, iconOnly: true, contextualLabel: name, disabled: disabled }) })), textTarget && !onPreviewPopoverClick && (_jsx(Tooltip, { target: textTarget, smart: true, describeTarget: false, children: name })), onPreviewPopoverClick && !inModal && !previewFromActions && (_jsx(Popover, { as: StyledLinkPopover, show: popover, placement: 'top', groupId: 'tooltip', showDelay: 'short', target: textTarget, onMouseEnter: () => setPopover(true), onMouseLeave: () => setPopover(false), arrow: true, portal: true, children: _jsx(StyledLinkPreviewPopoverBtn, { type: 'button', onClick: () => {
+                        previewTriggerRef.current = textTarget;
+                        onPreviewPopoverClick?.(id);
+                    }, tabIndex: -1, children: _jsx("div", { children: _jsx("span", { children: t('preview') }) }) }) })), onPreviewPopoverClick && !inModal && !previewFromActions && (_jsx(Popover, { as: StyledLinkPopover, show: previewPopover, placement: 'top', groupId: 'tooltip', showDelay: 'short', target: textTarget, arrow: true, portal: true, children: _jsx(StyledLinkPreviewPopoverBtn, { type: 'button', onClick: () => {
+                        previewTriggerRef.current = textTarget;
+                        onPreviewPopoverClick?.(id);
+                    }, tabIndex: -1, children: _jsxs("div", { children: [_jsx("span", { children: t('preview') }), _jsxs(Flex, { container: { inline: true, justify: 'end' }, children: [_jsx(Keyboard, { keyName: 'Alt' }), _jsx(Keyboard, { keyName: 'P' })] })] }) }) }))] }));
 });
 export default FileItem;
 //# sourceMappingURL=FileItem.js.map

package/lib/components/File/FileItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport type { PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as previewIcon from '../Icon/icons/preview.icon';\nimport * as editIcon from '../Icon/icons/pencil.icon';\nimport * as downloadIcon from '../Icon/icons/download.icon';\nimport * as deleteIcon from '../Icon/icons/trash.icon';\nimport Text, { StyledText } from '../Text';\nimport Tooltip from '../Tooltip';\nimport type { ForwardRefForwardPropsComponent, BaseProps, Action } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButton } from '../Button';\nimport { useI18n, useElement, useConfiguration, useConsolidatedRef } from '../../hooks';\nimport Actions from '../Actions';\nimport Progress from '../Progress';\nimport { StyledProgressRing } from '../Progress/Progress.styles';\nimport { formatNumber } from '../Number';\nimport Flex from '../Flex';\nimport { StyledIconShape } from '../Icon/Icon';\nimport { getActiveElement, getFocusables } from '../../utils';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nregisterIcon(openIcon, timesIcon, previewIcon, editIcon, downloadIcon, deleteIcon);\n\nexport interface FileItemProps extends BaseProps {\n  /** Unique id for item. */\n  id: string;\n  /** Name of the file. */\n  name: string;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: FileVisualProps['thumbnail'];\n  /** File extension. Use 'url' for link */\n  format?: string;\n  /**\n   * Used for a smaller sized FileItem.\n   * @default false\n   */\n  compact?: boolean;\n  /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n  onCancel?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onEdit?: (id: FileItemProps['id']) => void;\n  /** When passed, will be called on click of the name. Passes file id as the parameter. */\n  onPreview?: (id: FileItemProps['id']) => void;\n  /**\n   * Moves preview option to actions menu.\n   * To be used only in compact mode of single file input when rendered in a table\n   */\n  previewFromActions?: boolean;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */\n  onDownload?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDelete?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onOpen?: (id: FileItemProps['id']) => void;\n  /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n  progress?: number;\n  /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */\n  error?: string;\n  /** Setting the disable state */\n  disabled?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledErrorIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst titleEllipsisStyle = css`\n  flex-shrink: 1;\n  ${ellipsisOverflow}\n`;\n\nconst StyledPreviewTitle = styled(Button)`\n  ${titleEllipsisStyle}\n`;\n\nconst StyledTextTitle = styled(Text)`\n  ${titleEllipsisStyle}\n`;\n\nconst StyledMeta = styled(StyledText)<{ error: boolean }>(({ theme, error }) => {\n  return css`\n    /* min width to show percentage in full */\n    min-width: 4ch;\n    margin-inline-start: auto;\n    ${titleEllipsisStyle}\n    ${error &&\n    css`\n      color: ${theme.base.palette.urgent};\n    `}\n  `;\n});\n\nStyledMeta.defaultProps = defaultThemeProp;\n\nconst StyledActionsWrapper = styled.div<{ meta: boolean }>(({ meta }) => {\n  return css`\n    margin-inline-start: ${meta ? 'unset' : 'auto'};\n  `;\n});\n\nStyledActionsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileItem = styled.div<{\n  compactMode: FileItemProps['compact'];\n  isDisabled?: FileItemProps['disabled'];\n}>(\n  ({\n    theme: {\n      base: {\n        palette,\n        spacing,\n        'hit-area': { compact },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        input,\n        'form-control': {\n          ':disabled': {\n            'background-color': disabledBackgroundColor,\n            'border-color': disabledBorderColor\n          }\n        }\n      }\n    },\n    compactMode,\n    isDisabled\n  }) => {\n    return css`\n      border-radius: calc(var(--container-border-radius) * 0.5);\n      border: 0.0625rem solid ${palette['border-line']};\n      background-color: ${palette['primary-background']};\n      height: ${input.height};\n      min-width: calc(${input.height} + 12ch + 1.5 * ${spacing} + ${compact});\n\n      ${compactMode &&\n      css`\n        height: ${compact};\n        min-width: calc(${compact} + 12ch + 2 * ${spacing});\n        width: fit-content;\n        max-width: 25ch;\n\n        ${StyledPreviewTitle}, ${StyledTextTitle} {\n          min-width: 12ch;\n          max-width: calc(25ch - (${compact} + 2 * ${spacing}));\n        }\n\n        ${StyledActionsWrapper} > ${StyledButton} {\n          min-height: 100%;\n          min-width: 100%;\n          margin-block: ${spacing};\n        }\n      `}\n\n      > ${StyledProgressRing} {\n        margin-inline-start: calc(0.5 * ${spacing});\n      }\n\n      > ${StyledFileVisual}, > ${StyledIconShape} {\n        border-start-start-radius: inherit;\n        border-end-start-radius: inherit;\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        width: ${input.height};\n        flex-shrink: 0;\n\n        ${compactMode &&\n        css`\n          height: ${compact};\n          width: ${compact};\n        `}\n      }\n      ${isDisabled &&\n      css`\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        opacity: ${disabledOpacity};\n      `}\n    `;\n  }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: ForwardRefForwardPropsComponent<FileItemProps> = forwardRef(function FileItem(\n  props: PropsWithoutRef<FileItemProps>,\n  ref: FileItemProps['ref']\n) {\n  const {\n    id,\n    name,\n    thumbnail,\n    format,\n    error,\n    onCancel,\n    onEdit,\n    onPreview,\n    onDownload,\n    onDelete,\n    onOpen,\n    progress,\n    compact = false,\n    previewFromActions = false,\n    disabled = false,\n    ...restProps\n  } = props;\n\n  const [thumbnailError, setThumbnailError] = useState(false);\n  const [textTarget, setTextTarget] = useElement();\n  const [metaTarget, setMetaTarget] = useElement();\n  const { locale } = useConfiguration();\n  const t = useI18n();\n  const uploading = typeof progress === 'number' && progress < 100;\n  const itemRef = useConsolidatedRef(ref);\n\n  const activeElement = getActiveElement();\n  const activeElementInItem = itemRef.current?.contains(activeElement);\n\n  let metaMessage;\n\n  if (uploading) {\n    metaMessage = formatNumber(progress, {\n      locale,\n      options: {\n        style: 'unit',\n        unit: 'percent',\n        maximumFractionDigits: 0\n      }\n    });\n  } else if (error) {\n    metaMessage = error;\n  }\n\n  const definedActions: Action[] = [\n    previewFromActions ? { onClick: onPreview, text: t('preview'), icon: 'preview' } : undefined,\n    { onClick: onEdit, text: t('edit'), icon: 'pencil' },\n    { onClick: onDownload, text: t('download'), icon: 'download' },\n    { onClick: onDelete, text: t('delete'), icon: 'trash' },\n    { onClick: onOpen, text: t('link_open_in_tab_text'), icon: 'open' }\n  ].flatMap(action => {\n    if (!action || !action.onClick) return [];\n\n    const { text, icon, onClick } = action;\n    return [\n      {\n        id: text,\n        text,\n        icon,\n        onClick: () => {\n          if (onClick) onClick(id);\n        }\n      }\n    ];\n  });\n\n  let visual;\n  let contextualLabel;\n\n  if (uploading) {\n    visual = <Progress variant='ring' placement='inline' value={progress} />;\n    contextualLabel = t('uploading_file', [name]);\n  } else if (error) {\n    visual = <StyledErrorIcon name='warn-solid' />;\n    contextualLabel = t('upload_failed', [name, error]);\n  } else {\n    visual = (\n      <FileVisual\n        type={\n          format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? '')\n        }\n        thumbnail={thumbnailError ? undefined : thumbnail}\n        onThumbnailError={() => {\n          setThumbnailError(true);\n        }}\n      />\n    );\n    contextualLabel = name;\n  }\n\n  useEffect(() => {\n    if (!activeElement?.isConnected && activeElementInItem && itemRef.current) {\n      getFocusables(itemRef.current)[0]?.focus();\n    }\n  }, [progress, error, onCancel, onDelete, onPreview, onEdit, onDownload]);\n\n  return (\n    <Flex\n      as={StyledFileItem}\n      container={{\n        pad: [undefined, 0.5, undefined, undefined],\n        alignItems: 'center',\n        justify: 'start',\n        gap: 1\n      }}\n      isDisabled={disabled}\n      compactMode={compact}\n      ref={itemRef}\n    >\n      {visual}\n\n      {!previewFromActions && onPreview && !(error || uploading) ? (\n        <Button\n          {...restProps}\n          as={StyledPreviewTitle}\n          variant='link'\n          ref={setTextTarget}\n          onClick={() => {\n            onPreview(id);\n          }}\n          aria-label={t('preview_file', [name])}\n          disabled={disabled}\n        >\n          {name}\n          {format === 'url' && <Icon name='open' />}\n        </Button>\n      ) : (\n        <Text {...restProps} as={StyledTextTitle} ref={setTextTarget}>\n          {name}\n        </Text>\n      )}\n      {metaMessage && (\n        <>\n          <Text as={StyledMeta} variant='secondary' error={error && !uploading} ref={setMetaTarget}>\n            {metaMessage}\n          </Text>\n\n          {metaTarget && (\n            <Tooltip target={metaTarget} describeTarget={false} smart>\n              {metaMessage}\n            </Tooltip>\n          )}\n        </>\n      )}\n\n      {(error || uploading) && onCancel && (\n        <StyledActionsWrapper meta={!!metaMessage}>\n          <Button\n            label={t('cancel')}\n            aria-label={`${t('cancel')} - ${contextualLabel}`}\n            variant='simple'\n            compact\n            icon\n            onClick={() => onCancel(id)}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledActionsWrapper>\n      )}\n\n      {!(error || uploading) && !!definedActions.length && (\n        <StyledActionsWrapper meta={!!metaMessage}>\n          <Actions\n            items={definedActions}\n            compact\n            iconOnly\n            contextualLabel={name}\n            disabled={disabled}\n          />\n        </StyledActionsWrapper>\n      )}\n\n      {textTarget && (\n        <Tooltip target={textTarget} smart describeTarget={false}>\n          {name}\n        </Tooltip>\n      )}\n    </Flex>\n  );\n});\n\nexport default FileItem;\n"]}
+{"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport type { PropsWithoutRef, Ref, KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Icon, { registerIcon } from '../Icon';\nimport * as openIcon from '../Icon/icons/open.icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as previewIcon from '../Icon/icons/preview.icon';\nimport * as editIcon from '../Icon/icons/pencil.icon';\nimport * as downloadIcon from '../Icon/icons/download.icon';\nimport * as deleteIcon from '../Icon/icons/trash.icon';\nimport Text, { StyledText } from '../Text';\nimport Tooltip from '../Tooltip';\nimport type { ForwardRefForwardPropsComponent, BaseProps, Action } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button, { StyledButton } from '../Button';\nimport {\n  useI18n,\n  useElement,\n  useConfiguration,\n  useConsolidatedRef,\n  usePreviewContext,\n  useModalContext\n} from '../../hooks';\nimport Actions from '../Actions';\nimport Progress from '../Progress';\nimport { StyledProgressRing } from '../Progress/Progress.styles';\nimport { formatNumber } from '../Number';\nimport Flex from '../Flex';\nimport { StyledIconShape } from '../Icon/Icon';\nimport { getActiveElement, getFocusables } from '../../utils';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledLinkPopover, StyledLinkPreviewPopoverBtn } from '../Link/Link';\nimport Popover from '../Popover';\nimport { Keyboard } from '../Badges';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nregisterIcon(openIcon, timesIcon, previewIcon, editIcon, downloadIcon, deleteIcon);\n\nexport interface FileItemProps extends BaseProps {\n  /** Unique id for item. */\n  id: string;\n  /** Name of the file. */\n  name: string;\n  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n  thumbnail?: FileVisualProps['thumbnail'];\n  /** File extension. Use 'url' for link */\n  format?: string;\n  /**\n   * Used for a smaller sized FileItem.\n   * @default false\n   */\n  compact?: boolean;\n  /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n  onCancel?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onEdit?: (id: FileItemProps['id']) => void;\n  /** When passed, the file name will be rendered as a clickable button. Fires on direct click of the name. Passes file id as the parameter. */\n  onPreview?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a preview tooltip. Will be fired on click of preview tooltip. Passes file id as the parameter. */\n  onPreviewPopoverClick?: (id: FileItemProps['id']) => void;\n  /**\n   * Moves preview option to actions menu.\n   * To be used only in compact mode of single file input when rendered in a table\n   */\n  previewFromActions?: boolean;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */\n  onDownload?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onDelete?: (id: FileItemProps['id']) => void;\n  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n  onOpen?: (id: FileItemProps['id']) => void;\n  /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n  progress?: number;\n  /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */\n  error?: string;\n  /** Setting the disable state */\n  disabled?: boolean;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledErrorIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-start: calc(0.5 * ${theme.base.spacing});\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst titleEllipsisStyle = css`\n  flex-shrink: 1;\n  ${ellipsisOverflow}\n`;\n\nexport const StyledPreviewTitle = styled(Button)`\n  ${titleEllipsisStyle}\n`;\n\nexport const StyledTextTitle = styled(Text)`\n  ${titleEllipsisStyle}\n`;\n\nconst StyledMeta = styled(StyledText)<{ error: boolean }>(({ theme, error }) => {\n  return css`\n    /* min width to show percentage in full */\n    min-width: 4ch;\n    margin-inline-start: auto;\n    ${titleEllipsisStyle}\n    ${error &&\n    css`\n      color: ${theme.base.palette.urgent};\n    `}\n  `;\n});\n\nStyledMeta.defaultProps = defaultThemeProp;\n\nconst StyledActionsWrapper = styled.div<{ meta: boolean }>(({ meta }) => {\n  return css`\n    margin-inline-start: ${meta ? 'unset' : 'auto'};\n  `;\n});\n\nStyledActionsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileItem = styled.div<{\n  compactMode: FileItemProps['compact'];\n  isDisabled?: FileItemProps['disabled'];\n}>(\n  ({\n    theme: {\n      base: {\n        palette,\n        spacing,\n        'hit-area': { compact },\n        'disabled-opacity': disabledOpacity\n      },\n      components: {\n        input,\n        'form-control': {\n          ':disabled': {\n            'background-color': disabledBackgroundColor,\n            'border-color': disabledBorderColor\n          }\n        }\n      }\n    },\n    compactMode,\n    isDisabled\n  }) => {\n    return css`\n      border-radius: calc(var(--container-border-radius) * 0.5);\n      border: 0.0625rem solid ${palette['border-line']};\n      background-color: ${palette['primary-background']};\n      height: ${input.height};\n      min-width: calc(${input.height} + 12ch + 1.5 * ${spacing} + ${compact});\n\n      ${compactMode &&\n      css`\n        height: ${compact};\n        min-width: calc(${compact} + 12ch + 2 * ${spacing});\n        width: fit-content;\n        max-width: 25ch;\n\n        ${StyledPreviewTitle}, ${StyledTextTitle} {\n          min-width: 12ch;\n          max-width: calc(25ch - (${compact} + 2 * ${spacing}));\n        }\n\n        ${StyledActionsWrapper} > ${StyledButton} {\n          min-height: 100%;\n          min-width: 100%;\n          margin-block: ${spacing};\n        }\n      `}\n\n      > ${StyledProgressRing} {\n        margin-inline-start: calc(0.5 * ${spacing});\n      }\n\n      > ${StyledFileVisual}, > ${StyledIconShape} {\n        border-start-start-radius: inherit;\n        border-end-start-radius: inherit;\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        width: ${input.height};\n        flex-shrink: 0;\n\n        ${compactMode &&\n        css`\n          height: ${compact};\n          width: ${compact};\n        `}\n      }\n      ${isDisabled &&\n      css`\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        opacity: ${disabledOpacity};\n      `}\n    `;\n  }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: ForwardRefForwardPropsComponent<FileItemProps> = forwardRef(function FileItem(\n  props: PropsWithoutRef<FileItemProps>,\n  ref: FileItemProps['ref']\n) {\n  const {\n    id,\n    name,\n    thumbnail,\n    format,\n    error,\n    onCancel,\n    onEdit,\n    onPreview,\n    onPreviewPopoverClick,\n    onDownload,\n    onDelete,\n    onOpen,\n    progress,\n    compact = false,\n    previewFromActions = false,\n    disabled = false,\n    ...restProps\n  } = props;\n\n  const [thumbnailError, setThumbnailError] = useState(false);\n  const [textTarget, setTextTarget] = useElement();\n  const [metaTarget, setMetaTarget] = useElement();\n  const [popover, setPopover] = useState(false);\n  const [previewPopover, setPreviewPopover] = useState(false);\n  const { locale } = useConfiguration();\n  const { initialized: inModal } = useModalContext();\n  const { previewTriggerRef } = usePreviewContext();\n  const t = useI18n();\n  const uploading = typeof progress === 'number' && progress < 100;\n  const itemRef = useConsolidatedRef(ref);\n\n  const activeElement = getActiveElement();\n  const activeElementInItem = itemRef.current?.contains(activeElement);\n\n  let metaMessage;\n\n  if (uploading) {\n    metaMessage = formatNumber(progress, {\n      locale,\n      options: {\n        style: 'unit',\n        unit: 'percent',\n        maximumFractionDigits: 0\n      }\n    });\n  } else if (error) {\n    metaMessage = error;\n  }\n\n  const definedActions: Action[] = [\n    previewFromActions ? { onClick: onPreview, text: t('preview'), icon: 'preview' } : undefined,\n    { onClick: onEdit, text: t('edit'), icon: 'pencil' },\n    { onClick: onDownload, text: t('download'), icon: 'download' },\n    { onClick: onDelete, text: t('delete'), icon: 'trash' },\n    { onClick: onOpen, text: t('link_open_in_tab_text'), icon: 'open' }\n  ].flatMap(action => {\n    if (!action || !action.onClick) return [];\n\n    const { text, icon, onClick: onActionClick } = action;\n    return [\n      {\n        id: text,\n        text,\n        icon,\n        onClick: () => onActionClick(id)\n      }\n    ];\n  });\n\n  let visual;\n  let contextualLabel;\n\n  if (uploading) {\n    visual = <Progress variant='ring' placement='inline' value={progress} />;\n    contextualLabel = t('uploading_file', [name]);\n  } else if (error) {\n    visual = <StyledErrorIcon name='warn-solid' />;\n    contextualLabel = t('upload_failed', [name, error]);\n  } else {\n    visual = (\n      <FileVisual\n        type={\n          format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? '')\n        }\n        thumbnail={thumbnailError ? undefined : thumbnail}\n        onThumbnailError={() => {\n          setThumbnailError(true);\n        }}\n      />\n    );\n    contextualLabel = name;\n  }\n\n  useEffect(() => {\n    if (!activeElement?.isConnected && activeElementInItem && itemRef.current) {\n      getFocusables(itemRef.current)[0]?.focus();\n    }\n  }, [progress, error, onCancel, onDelete, onPreview, onEdit, onDownload]);\n\n  return (\n    <Flex\n      as={StyledFileItem}\n      container={{\n        pad: [undefined, 0.5, undefined, undefined],\n        alignItems: 'center',\n        justify: 'start',\n        gap: 1\n      }}\n      isDisabled={disabled}\n      compactMode={compact}\n      ref={itemRef}\n    >\n      {visual}\n\n      {!previewFromActions &&\n      ((!inModal && onPreviewPopoverClick) || onPreview) &&\n      !(error || uploading) ? (\n        <Button\n          {...restProps}\n          as={StyledPreviewTitle}\n          variant='link'\n          ref={setTextTarget}\n          onClick={() => {\n            onPreview?.(id);\n          }}\n          onKeyDown={(e: ReactKeyboardEvent) => {\n            if (e.getModifierState('Alt') && e.code === 'KeyP') {\n              previewTriggerRef.current = e.currentTarget as HTMLElement;\n              onPreviewPopoverClick?.(id);\n            }\n          }}\n          onMouseEnter={onPreviewPopoverClick ? () => setPopover(true) : undefined}\n          onMouseLeave={onPreviewPopoverClick ? () => setPopover(false) : undefined}\n          onFocus={onPreviewPopoverClick ? () => setPreviewPopover(true) : undefined}\n          onBlur={onPreviewPopoverClick ? () => setPreviewPopover(false) : undefined}\n          aria-label={t('preview_file', [name])}\n          disabled={disabled}\n        >\n          {name}\n          {format === 'url' && <Icon name='open' />}\n        </Button>\n      ) : (\n        <Text {...restProps} as={StyledTextTitle} ref={setTextTarget}>\n          {name}\n        </Text>\n      )}\n      {metaMessage && (\n        <>\n          <Text as={StyledMeta} variant='secondary' error={error && !uploading} ref={setMetaTarget}>\n            {metaMessage}\n          </Text>\n\n          {metaTarget && (\n            <Tooltip target={metaTarget} describeTarget={false} smart>\n              {metaMessage}\n            </Tooltip>\n          )}\n        </>\n      )}\n\n      {(error || uploading) && onCancel && (\n        <StyledActionsWrapper meta={!!metaMessage}>\n          <Button\n            label={t('cancel')}\n            aria-label={`${t('cancel')} - ${contextualLabel}`}\n            variant='simple'\n            compact\n            icon\n            onClick={() => onCancel(id)}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledActionsWrapper>\n      )}\n\n      {!(error || uploading) && !!definedActions.length && (\n        <StyledActionsWrapper meta={!!metaMessage}>\n          <Actions\n            items={definedActions}\n            compact\n            iconOnly\n            contextualLabel={name}\n            disabled={disabled}\n          />\n        </StyledActionsWrapper>\n      )}\n\n      {textTarget && !onPreviewPopoverClick && (\n        <Tooltip target={textTarget} smart describeTarget={false}>\n          {name}\n        </Tooltip>\n      )}\n\n      {onPreviewPopoverClick && !inModal && !previewFromActions && (\n        <Popover\n          as={StyledLinkPopover}\n          show={popover}\n          placement='top'\n          groupId='tooltip'\n          showDelay='short'\n          target={textTarget}\n          onMouseEnter={() => setPopover(true)}\n          onMouseLeave={() => setPopover(false)}\n          arrow\n          portal\n        >\n          <StyledLinkPreviewPopoverBtn\n            type='button'\n            onClick={() => {\n              previewTriggerRef.current = textTarget as HTMLElement;\n              onPreviewPopoverClick?.(id);\n            }}\n            tabIndex={-1}\n          >\n            <div>\n              <span>{t('preview')}</span>\n            </div>\n          </StyledLinkPreviewPopoverBtn>\n        </Popover>\n      )}\n\n      {onPreviewPopoverClick && !inModal && !previewFromActions && (\n        <Popover\n          as={StyledLinkPopover}\n          show={previewPopover}\n          placement='top'\n          groupId='tooltip'\n          showDelay='short'\n          target={textTarget}\n          arrow\n          portal\n        >\n          <StyledLinkPreviewPopoverBtn\n            type='button'\n            onClick={() => {\n              previewTriggerRef.current = textTarget as HTMLElement;\n              onPreviewPopoverClick?.(id);\n            }}\n            tabIndex={-1}\n          >\n            <div>\n              <span>{t('preview')}</span>\n              <Flex container={{ inline: true, justify: 'end' }}>\n                <Keyboard keyName='Alt' />\n                <Keyboard keyName='P' />\n              </Flex>\n            </div>\n          </StyledLinkPreviewPopoverBtn>\n        </Popover>\n      )}\n    </Flex>\n  );\n});\n\nexport default FileItem;\n"]}