@maggioli-design-system/mds-modal 5.1.0 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-modal",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "mds-modal is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-button": "6.1.0",
-    "@maggioli-design-system/styles": "15.5.0",
-    "@stencil/core": "4.22.2",
+    "@maggioli-design-system/mds-button": "6.2.0",
+    "@maggioli-design-system/styles": "15.7.0",
+    "@stencil/core": "4.25.1",
     "clsx": "2.1.0"
   },
   "license": "MIT",

package/readme.md

@@ -49,7 +49,9 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 | `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
 | `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
 | `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-distance`   | Set the distance between the modal window and the screen bounds                                                                                    |
 | `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-radius`     | Set the border radius of the window                                                                                                                |
 | `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
 | `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
 

package/src/common/floating-controller.ts

@@ -0,0 +1,263 @@
+import {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  flip,
+  Middleware,
+  MiddlewareData,
+  offset,
+  shift,
+} from '@floating-ui/dom'
+import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
+import { cssDurationToMilliseconds } from './unit'
+import { setAttributeIfEmpty } from './aria'
+import { HTMLStencilElement } from '@stencil/core/internal'
+
+export interface FloatingElement extends PositionOptions {
+  host: HTMLFloatingElement,
+}
+
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+  visible: boolean,
+}
+
+export interface PositionOptions {
+  arrow: boolean;
+  arrowPadding: number;
+  autoPlacement: boolean;
+  flip: boolean;
+  offset: number;
+  placement: FloatingUIPlacement;
+  shift: boolean;
+  shiftPadding: number;
+  strategy: FloatingUIStrategy;
+}
+
+export class FloatingController {
+  private _caller: HTMLElement
+  private readonly _host: HTMLFloatingElement
+  arrowEl: HTMLElement | undefined
+
+  private cleanupAutoUpdate: () => void
+
+  constructor (host: HTMLFloatingElement, arrowEl?: HTMLElement) {
+    this._host = host
+    this.arrowEl = arrowEl
+  }
+
+  updateCaller (target: string): HTMLElement {
+    // search caller in document or rootNode of host (if target is in shadowDOM)
+    const caller = (this._host.parentElement?.shadowRoot?.querySelector(target) as HTMLElement) ??
+      ((this._host.getRootNode() as HTMLElement).querySelector(target) as HTMLElement)
+
+    if (!caller) {
+      throw Error(`Target not found: ${target}`)
+    }
+
+    this._caller = caller
+
+    setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true')
+    setAttributeIfEmpty(this._caller, 'aria-controls', target)
+    setAttributeIfEmpty(this._host, 'role', 'menu')
+    setAttributeIfEmpty(this._host, 'aria-labelledby', target)
+    return caller
+  }
+
+  private readonly arrowInset = (
+    middleware: MiddlewareData,
+    arrowPosition: string,
+  ): { bottom?: string; left?: string; right?: string; top?: string } => {
+    const { arrow } = middleware
+    const inset = { bottom: '', left: '', right: '', top: '' }
+
+    if (arrow === undefined) {
+      return {}
+    }
+
+    switch (arrowPosition) {
+    case 'bottom':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = '100%'
+      break
+    case 'left':
+      inset.right = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'right':
+      inset.left = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'top':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = ''
+      break
+    default:
+      break
+    }
+    return inset
+  }
+
+  private readonly arrowTransform = (
+    arrowPosition: string,
+  ): { transform: string } => {
+    let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)'
+    switch (arrowPosition) {
+    case 'bottom':
+      transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`
+      break
+    case 'left':
+      transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`
+      break
+    case 'right':
+      transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`
+      break
+    case 'top':
+      transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`
+      break
+    default:
+      break
+    }
+    return { transform: transformProps }
+  }
+
+  private readonly arrowTransformOrigin = (
+    arrowPosition: string,
+  ): { transformOrigin: string } => {
+    switch (arrowPosition) {
+    case 'bottom':
+      return { transformOrigin: 'center top' }
+    case 'left':
+      return { transformOrigin: 'right center' }
+    case 'right':
+      return { transformOrigin: 'left center' }
+    case 'top':
+      return { transformOrigin: 'center bottom' }
+    default:
+      return { transformOrigin: 'center top' }
+    }
+  }
+
+  private readonly calculatePosition = (): void => {
+    if (!this._caller) return
+
+    const middleware: Middleware[] = new Array<Middleware>()
+    const config: { padding?: number } = {}
+
+    if (this._host.shiftPadding) {
+      config.padding = this._host.shiftPadding
+    }
+
+    if (this._host.autoPlacement) {
+      middleware.push(autoPlacement())
+    }
+
+    if (this._host.offset) {
+      middleware.push(offset(this._host.offset))
+    }
+
+    if (!this._host.autoPlacement && this._host.flip) {
+      middleware.push(flip(config))
+    }
+
+    if (this._host.shift) {
+      middleware.push(shift(config))
+    }
+
+    if (this.arrowEl && this._host.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this._host.arrowPadding,
+        }),
+      )
+    }
+
+    computePosition(this._caller, this._host, {
+      middleware,
+      placement: this._host.placement,
+      strategy: this._host.strategy,
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this._host.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const arrowStyle = {}
+      const arrowPosition = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]]
+
+      if (arrowPosition && this.arrowEl) {
+        Object.assign(arrowStyle, this.arrowTransform(arrowPosition))
+        Object.assign(
+          arrowStyle,
+          this.arrowInset(middlewareData, arrowPosition),
+        )
+        Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition))
+        Object.assign(this.arrowEl.style, arrowStyle)
+      }
+    })
+  }
+
+  updatePosition (): void {
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
+    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+  }
+
+  dismiss (): void {
+    this.cleanupAutoUpdate()
+  }
+}
+
+export class Backdrop {
+  private readonly defaultBackdropId = 'mds-backdrop'
+  private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
+  private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
+
+  private readonly backdropId
+  private readonly cssBackdropZIndex
+  private readonly cssBackdropDuration
+
+  private backdropEl: HTMLElement
+  private backdropTimer: NodeJS.Timeout
+
+  constructor (backdropId?: string) {
+    this.backdropId = backdropId ?? this.defaultBackdropId
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-duration)`
+  }
+
+  attachBackdrop (): void {
+    if (!this.backdropEl) {
+      this.backdropEl = document.createElement('div')
+      this.backdropEl.className = this.backdropId
+      this.backdropEl.style.inset = '0'
+      this.backdropEl.style.pointerEvents = 'none'
+      this.backdropEl.style.position = 'fixed'
+      this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`
+      this.backdropEl.style.zIndex = this.cssBackdropZIndex
+    }
+    this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden
+    document.body.appendChild(this.backdropEl)
+
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible
+    }, 1)
+  }
+
+  detachBackdrop (): void {
+    if (!this.backdropEl) {
+      return
+    }
+    this.backdropEl.style.backgroundColor = 'transparent'
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.remove()
+    }, cssDurationToMilliseconds(this.cssBackdropDuration))
+  }
+}

package/src/common/slot.ts

@@ -0,0 +1,24 @@
+const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
+  }
+  return false
+}
+
+const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0
+  }
+  return false
+}
+
+export {
+  hasSlottedElements,
+  hasSlottedNodes,
+}

package/src/components/mds-modal/css/mds-modal-animate-left.css

@@ -4,7 +4,8 @@
 }
 
 :host([position="left"]) .window {
-  height: 100dvh;
+  height: 100%;
+  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   max-width: calc(100vw - 80px);
 }
 

package/src/components/mds-modal/css/mds-modal-animate-right.css

@@ -4,7 +4,8 @@
 }
 
 :host([position="right"]) .window {
-  height: 100dvh;
+  height: 100%;
+  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
   max-width: calc(100vw - 80px);
 }
 

package/src/components/mds-modal/css/mds-modal-animate.css

@@ -1,14 +1,4 @@
-:host {
-  @apply
-    mobile:p-400
-    p-800;
-}
-
 :host .window {
-  @apply
-    mobile:-m-400
-    -m-800;
-
   transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);
 }
 

package/src/components/mds-modal/mds-modal.css

@@ -10,6 +10,8 @@
  * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.
  * @prop --mds-modal-window-background: Set the background color of the window
  * @prop --mds-modal-window-overflow: Set the overflow of the window
+ * @prop --mds-modal-window-radius: Set the border radius of the window
+ * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds
  * @prop --mds-modal-window-shadow: Set the box shadow of the window
  * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened
  */
@@ -23,7 +25,9 @@
   --mds-modal-transition-outro-ease: theme('transitionTimingFunction.in-out-quint');
   --mds-modal-window-background: theme('colors.tone-neutral');
   --mds-modal-window-overflow: auto;
+  --mds-modal-window-radius: 0;
   --mds-modal-window-shadow: theme('boxShadow.2xl');
+  --mds-modal-window-distance: 0;
   --mds-modal-z-index: var(--magma-modal-z-index);
 
   @apply ease-in-out-expo;
@@ -76,9 +80,11 @@
   @apply gap-0;
 
   background-color: var(--mds-modal-window-background);
+  border-radius: var(--mds-modal-window-radius);
   box-shadow: var(--mds-modal-window-shadow);
   display: grid;
   grid-template-rows: 1fr;
+  margin: var(--mds-modal-window-distance);
   overflow: var(--mds-modal-window-overflow);
 }
 

package/src/components/mds-modal/mds-modal.tsx

@@ -133,7 +133,7 @@ export class MdsModal {
       <Host aria-modal={clsx(this.opened ? 'true' : 'false' )} onClick={(e: Event) => { this.closeModal(e) }}>
         { this.window
           ? <slot name="window"/>
-          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} role="dialog" part="window">
+          : <div class={clsx('window', (this.top || this.bottom) && `window-${this.top ? '-top' : ''}${this.bottom ? '-bottom' : ''}`)} part="window">
             { this.top &&
               <slot name="top"/>
             }

package/src/components/mds-modal/readme.md

@@ -47,7 +47,9 @@
 | `--mds-modal-overlay-color`     | Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.         |
 | `--mds-modal-overlay-opacity`   | Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`. |
 | `--mds-modal-window-background` | Set the background color of the window                                                                                                             |
+| `--mds-modal-window-distance`   | Set the distance between the modal window and the screen bounds                                                                                    |
 | `--mds-modal-window-overflow`   | Set the overflow of the window                                                                                                                     |
+| `--mds-modal-window-radius`     | Set the border radius of the window                                                                                                                |
 | `--mds-modal-window-shadow`     | Set the box shadow of the window                                                                                                                   |
 | `--mds-modal-z-index`           | Set the z-index of the window when the component is opened                                                                                         |
 

package/src/components/mds-modal/test/mds-modal.stories.tsx

@@ -26,19 +26,19 @@ const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@nintendo.com
 
 const Template = args =>
   <mds-modal {...args}>
-    <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09">
+    <header slot="top" class="p-800 flex gap-400 items-center border-b border-solid border-0 border-tone-neutral-09 max-w-[400px]">
       <mds-img class="w-1600" src="/logo-gruppo-maggioli-512w.webp"/>
       <div class="text-tone-neutral-02">
         <mds-text typography="h5" class="truncate min-w-0">Maggioli Editore</mds-text>
         <mds-text typography="detail" class="truncate min-w-0">Menu di servizio</mds-text>
       </div>
     </header>
-    <div class="p-800">
+    <div class="p-800 max-w-[400px]">
       <mds-text>
         As a multi-brand design system, our components need to be flexible enough for any one of our brands to use them for multiple use cases. To achieve this, we ensure that all of the brands are involved in the specification stage, giving us more confidence that we’re future-proofing our components as more brands adopt NewsKit.
       </mds-text>
     </div>
-    <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09">
+    <footer slot="bottom" class="p-800 flex gap-400 text-tone-neutral-02 border-t border-solid border-0 border-tone-neutral-09 max-w-[400px]">
       <mds-author class="flex-grow">
         <mds-avatar slot="avatar" class="w-1600 mobile:w-1200" src="/avatar-01-200x200.jpeg"/>
         <mds-text typography="h6">{ fullName }</mds-text>
@@ -81,7 +81,13 @@ export const Default = Template.bind({})
 Default.args = {
   position: 'right',
 }
-export const CustomWindow = CustomTemplate.bind({})
+
+export const DefaultWindowCustomized = Template.bind({})
+DefaultWindowCustomized.args = {
+  position: 'right',
+  style: { '--mds-modal-window-distance': '1rem', '--mds-modal-window-radius': '1rem' },
+}
+export const CustomWindowElement = CustomTemplate.bind({})
 export const Interactive = InteractiveTemplate.bind({})
 export const ARIATest = CustomTemplate.bind({})
 ARIATest.args = {

package/src/dictionary/animation.ts

@@ -0,0 +1,8 @@
+const horizontalActionsAnimationDictionary = [
+  'fade',
+  'slide',
+]
+
+export {
+  horizontalActionsAnimationDictionary,
+}

package/src/dictionary/file-extensions.ts

@@ -26,8 +26,8 @@ const fileExtensionsDictionary: FileExtenstion = {
   exe: { format: 'executable', description: 'fileEXE' },
   flac: { format: 'audio', description: 'uncompressedAudio' },
   gif: { format: 'image', description: 'compressedImage', preview: true },
-  htm: { format: 'markup', description: 'documentWeb' },
   heic: { format: 'image', description: 'imageHEFF' },
+  htm: { format: 'markup', description: 'documentWeb' },
   html: { format: 'markup', description: 'documentWeb' },
   jpe: { format: 'image', description: 'compressedImage', preview: true },
   jpeg: { format: 'image', description: 'compressedImage', preview: true },
@@ -44,9 +44,12 @@ const fileExtensionsDictionary: FileExtenstion = {
   mpg4: { format: 'video', description: 'videoSD' },
   mpg: { format: 'video', description: 'videoSD' },
   mpga: { format: 'audio', description: 'compressedAudio' },
+  odf: { format: 'document', description: 'openDocumentFormat' },
   odp: { format: 'slide', description: 'slideLO' },
   ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
   odt: { format: 'text', description: 'documentLO' },
+  ole: { format: 'document', description: 'objectLinkingAndEmbedding' },
+  p7m: { format: 'certificate', description: 'documentDigitalSingnature' },
   pdf: { format: 'document', description: 'documentAdobe' },
   php: { format: 'code', description: 'filePHP' },
   png: { format: 'image', description: 'imagePNG', preview: true },
@@ -59,6 +62,7 @@ const fileExtensionsDictionary: FileExtenstion = {
   tar: { format: 'archive', description: 'uncompressedArchive' },
   tiff: { format: 'image', description: 'imageTIFF' },
   ts: { format: 'code', description: 'fileTS' },
+  tsd: { format: 'certificate', description: 'certificateTSD' },
   tsx: { format: 'code', description: 'fileTSX' },
   txt: { format: 'text', description: 'documentTXT' },
   wav: { format: 'audio', description: 'uncompressedAudio' },
@@ -66,68 +70,10 @@ const fileExtensionsDictionary: FileExtenstion = {
   xar: { format: 'archive', description: 'compressedArchive' },
   xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
   xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+  xml: { format: 'markup', description: 'extensibleMarkupLanguage' },
   zip: { format: 'archive', description: 'compressedArchive' },
 }
 
-// const fileExtensionsDictionary: FileExtenstion = {
-//   '7z': { format: 'archive', description: 'Archivio compresso' },
-//   ace: { format: 'archive', description: 'Archivio compresso' },
-//   ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
-//   dart: { format: 'code', description: 'Dart' },
-//   db: { format: 'data', description: 'File di database' },
-//   default: { format: 'attachment', description: 'Formato sconosciuto' },
-//   dmg: { format: 'executable', description: 'Apple Disk Image' },
-//   doc: { format: 'text', description: 'Documento Microsoft Word' },
-//   docm: { format: 'text', description: 'Documento Microsoft Word' },
-//   docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
-//   eml: { format: 'email', description: 'E-mail di posta elettronica' },
-//   eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
-//   exe: { format: 'executable', description: 'File eseguibile Windows' },
-//   flac: { format: 'audio', description: 'Audio non compresso' },
-//   gif: { format: 'image', description: 'Immagine compressa', preview: true },
-//   htm: { format: 'markup', description: 'Pagina web' },
-//   heic: { format: 'image', description: 'High Efficiency Image File Format' },
-//   html: { format: 'markup', description: 'Pagina web' },
-//   jpe: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   js: { format: 'code', description: 'JavaScript' },
-//   json: { format: 'data', description: 'JavaScript Object Notation' },
-//   jsx: { format: 'code', description: 'JavaScript' },
-//   m2v: { format: 'video', description: 'Filmato SD' },
-//   mp2: { format: 'audio', description: 'Audio compresso' },
-//   mp3: { format: 'audio', description: 'Audio compresso' },
-//   mp4: { format: 'video', description: 'Filmato HD' },
-//   mp4v: { format: 'video', description: 'Filmato HD' },
-//   mpeg: { format: 'video', description: 'Filmato SD' },
-//   mpg4: { format: 'video', description: 'Filmato SD' },
-//   mpg: { format: 'video', description: 'Filmato SD' },
-//   mpga: { format: 'audio', description: 'Audio compresso' },
-//   odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
-//   ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
-//   odt: { format: 'text', description: 'File di testo LibreOffice' },
-//   pdf: { format: 'document', description: 'Documento Adobe' },
-//   php: { format: 'code', description: 'Hypertext Preprocessor' },
-//   png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
-//   ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
-//   rar: { format: 'archive', description: 'Archivio compresso' },
-//   rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
-//   sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
-//   shtml: { format: 'markup', description: 'Pagina web' },
-//   svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
-//   tar: { format: 'archive', description: 'Archivio non compresso' },
-//   tiff: { format: 'image', description: 'Tag Image File Format' },
-//   ts: { format: 'code', description: 'TypeScript' },
-//   tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
-//   txt: { format: 'text', description: 'Documento di testo non formattato' },
-//   wav: { format: 'audio', description: 'Audio non compresso' },
-//   webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
-//   xar: { format: 'archive', description: 'Archivio compresso' },
-//   xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   zip: { format: 'archive', description: 'Archivio compresso' },
-// }
-
 const genericMimeToExt: Map<string, string[]> = new Map([
   ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
   ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],

package/src/dictionary/tree.ts

@@ -0,0 +1,21 @@
+const treeActionsDictionary = [
+  'auto',
+  'visible',
+]
+
+const treeAppearanceDictionary = [
+  'depth',
+  'none',
+]
+
+const treeIconDictionary = [
+  'folder',
+  'chevron',
+]
+
+export {
+  treeActionsDictionary,
+  treeAppearanceDictionary,
+  treeIconDictionary,
+}
+

package/src/fixtures/filenames.ts

@@ -55,6 +55,69 @@ const filesList = [
   'wooden.jsx',
 ]
 
+const namedFilesList = {
+  '7z': 'frozen_haptic.7z',
+  'No extension file': 'this_is_an_extensionless_file',
+  'png with URL': 'https://i2.wp.com/clipart.info/images/ccovers/1495750818Apple-PNG-Clip-Art.png',
+  ace: 'sky_marketing.ace',
+  ai: 'foreground_overriding.ai',
+  db: 'matrix_black_hat.db',
+  default: 'copying.default',
+  dmg: 'protocol_designer.dmg',
+  doc: 'forges.doc',
+  docm: 'officer_somalia.docm',
+  docx: 'upgradable_gold.docx',
+  eml: 'brunei_logistical.eml',
+  eps: 'alarm_circuit_plastic.eps',
+  exe: 'rss_systematic_avon.exe',
+  flac: 'liaison_panel_central.flac',
+  gif: 'initiatives_group.gif',
+  htm: 'books_monetize_arizona.htm',
+  html: 'flexibility_auto_money.html',
+  jpe: 'intelligent_radical.jpe',
+  jpeg: 'iowa_installation.jpeg',
+  jpg: 'buckinghamshire_macao.jpg',
+  js: 'monitor.js',
+  json: 'calculating.json',
+  jsx: 'wooden.jsx',
+  m2v: 'interface_bedfordshire_solid.m2v',
+  mp2: 'explicit.mp2',
+  mp3: 'optimization_radical.mp3',
+  mp4: 'nebraska.mp4',
+  mp4v: 'reduced_regional_greenland.mp4v',
+  mpeg: 'impactful_alarm_handmade.mpeg',
+  mpg4: 'revolutionize.mpg4',
+  mpg: 'complexity_deposit.mpg',
+  mpga: 'ports_copy_granite.mpga',
+  odf: 'This is a file_to_read.odf',
+  odp: 'needs_based_solid.odp',
+  ods: 'compressing_black_colorado.ods',
+  odt: 'salad_compressing.odt',
+  ole: 'Document-RPF_Open-new.ole',
+  p7m: 'file with certificate from government.pdf.p7m',
+  pdf: 'connect_local_visualize.pdf',
+  php: 'fish.php',
+  png: 'awesome_orchestration.png',
+  ppt: 'gorgeous_manager_savings.ppt',
+  rar: 'unbranded.rar',
+  rtf: 'pound.rtf',
+  sass: 'open_source_gorgeous.sass',
+  shtml: 'brand.shtml',
+  svg: 'b2c_tan_sports.svg',
+  tar: 'graphic_frozen_bedfordshire.tar',
+  ts: 'forge_face.ts',
+  tsd: 'Marked file-7483274hy6Fg6R8.tsd',
+  txt: 'bedfordshire_iceland_identity.txt',
+  wav: 'synergistic.wav',
+  webp: 'open_source.webp',
+  xar: 'wisconsin_bypassing_small.xar',
+  xls: 'metrics_lempira_account.xls',
+  xlsx: 'hdd_navigate_panama.xlsx',
+  xml: 'Markup language.xml',
+  zip: 'tuna_table_fall.zip',
+}
+
 export {
   filesList,
+  namedFilesList,
 }