@mgdis/mg-components 5.5.0 → 5.6.0

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -433,8 +433,44 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {

package/dist/types/utils/behaviors.utils.d.ts

@@ -0,0 +1,83 @@
+export declare enum OverflowBehaviorElements {
+  MORE = "data-overflow-more",
+  BASE_INDEX = "data-overflow-base-index",
+  PROXY_INDEX = "data-overflow-proxy-index"
+}
+export declare class OverflowBehavior {
+  private element;
+  private render;
+  private resizeObserver;
+  private moreELement;
+  private children;
+  constructor(element: Element, render: () => HTMLElement);
+  /**********
+   * Public *
+   **********/
+  /**
+   * Disconnect ResizeObserver
+   *
+   * @returns {void}
+   */
+  disconnect: () => void;
+  /**
+   * Update more element status if active child
+   *
+   * @returns {void}
+   */
+  updateActiveStatus: () => void;
+  /************
+   * Internal *
+   ************/
+  /**
+   * run overflow behavior
+   *
+   * @param {number} width width of the container
+   * @returns {void}
+   */
+  private run;
+  /**
+   * Update displayed items in container from a given available space
+   *
+   * @param {number} availableWidth available width in container to display child items
+   * @returns {void}
+   */
+  private updateDisplayedItems;
+  /**
+   * Utility method to know if item overflow partialy or totaly in the container
+   *
+   * @param {number} cumulateWidth previous sibling elements cumulate width + item width
+   * @param {HTMLElement} item item HTML element
+   * @param {number} availableWidth container available width
+   * @returns {boolean} truthy if element is overflow
+   */
+  private isOverflowElement;
+  /**
+   * Utility method to know if a given element is the 'MORE' element
+   *
+   * @param {Element} element element to match with 'MORE' element
+   * @returns {boolean} truthy if element is the 'MORE' element
+   */
+  private isMoreElement;
+  /**
+   * Toggle display item element
+   *
+   * @param {HTMLElement} item item to control
+   * @param {boolean} isHidden is item hidden
+   * @returns {void}
+   */
+  private toggleItem;
+  /**
+   * Toggle element's hidde attribute
+   *
+   * @param {Element} element element to toggle
+   * @param {boolean} isHidden element is hidden
+   * @returns {void}
+   */
+  private toggleElement;
+  /**
+   * Remove hidden attributes on all items
+   *
+   * @returns {void}
+   */
+  private restoreItems;
+}

package/dist/types/utils/components.utils.d.ts

@@ -60,3 +60,17 @@ export declare const isTagName: (element: Element, tagNames: string[]) => boolea
  * Focusable elements query selector
  */
 export declare const focusableElements = "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]";
+/**
+ *
+ * @param {Window} localWindow the window we are lookink for other windows
+ * @returns {Window[]} The list of windows found
+ */
+export declare const getWindows: (localWindow: Window) => Window[];
+/**
+ * Get parent windows
+ *
+ * @param {Window} localWindow the window we are lookink for parents
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+export declare const getParentWindows: (localWindow: Window, windows?: Window[]) => Window[];

package/dist/types/utils/locale.utils.d.ts

@@ -27,3 +27,16 @@ export declare const dateRegExp: RegExp;
  * @returns {string} formatted date
  */
 export declare function localeDate(date: string, locale: string): string;
+/**
+ * Get locale and messages
+ * We load the defined locale but for now we only support the first subtag for messages
+ *
+ * @param {HTMLElement} element element we need to get the language
+ * @param {unknown} messages messages to use
+ * @param {string} defaultLocale default messages locale
+ * @returns {{ locale: string; messages: unknown }} messages object
+ */
+export declare const getLocaleMessages: (element: HTMLElement, messages: unknown, defaultLocale: string) => {
+  locale: string;
+  messages: unknown;
+};

package/dist/types/utils/unit.test.utils.d.ts

@@ -10,11 +10,11 @@ export declare const cloneDeep: (obj: unknown) => unknown;
  *
  * @param mutationObserverMock - Parameter that is sent to the `Object.defineProperty`
  * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
- * mock the resize observer, but its methods.
+ * mock the mutation observer, but its methods.
  * You can manually fire an intersection entry:
  * @param {Function} mutationObserverMock.disconnect disconnect function
- * @param {Function} mutationObserverMock.observe observe fnuction
- * @param {Function} mutationObserverMock.takeRecords takeRecords fnuction
+ * @param {Function} mutationObserverMock.observe observe function
+ * @param {Function} mutationObserverMock.takeRecords takeRecords function
  * @returns {MutationObserver} Mocked MutationObserver
  * @example
  * ```
@@ -28,15 +28,51 @@ export declare const cloneDeep: (obj: unknown) => unknown;
  * fireMo([{ type: 'childList', addedNodes: [AMockElemenet, AnotherMockElemenet], target: yourMockElemenet }]);;
  * ```
  */
-export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: {
-  disconnect: any;
-  observe: any;
-  takeRecords: any;
-}) => {
-  new (fn: any): {
-    disconnect: () => void;
-    observe: (target: Node, options?: MutationObserverInit) => void;
-    takeRecords: () => MutationRecord[];
-    cb: () => unknown;
-  };
+type SetupMutationObserverMockParams = {
+  disconnect: MutationObserver['disconnect'];
+  observe: MutationObserver['observe'];
+  takeRecords: MutationObserver['takeRecords'];
+};
+export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: SetupMutationObserverMockParams) => typeof MutationObserver;
+/**
+ * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.
+ *
+ * @param resizeObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the resize observer, but its methods.
+ * You can manually fire an intersection entry:
+ * @param {Function} resizeObserverMock.disconnect disconnect function
+ * @param {Function} resizeObserverMock.observe observe function
+ * @returns {ResizeObserver} Mocked ResizeObserver
+ * @example
+ * ```
+ * let fireRo;
+ * setupResizeObserverMock({
+ *   observe: function () {
+ *     fireRo = this.cb;
+ *   },
+ * });
+ * ...
+ * fireRo([{
+ *  borderBoxSize: ResizeObserverSize[],
+ *  contentBoxSize: ResizeObserverSize[],
+ *  contentRect: DOMRectReadOnly,
+ *  devicePixelContentBoxSize: ResizeObserverSize[],
+ *  target: yourMockElemenet
+ * }]);;
+ * ```
+ */
+type setupResizeObserverMockParams = {
+  disconnect: ResizeObserver['disconnect'];
+  observe: ResizeObserver['observe'];
 };
+export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
+/**
+ * force popover id when component use randomed identifier
+ *
+ * @param {Element} item element wich include mg-popover
+ * @param {string} id new fixed id
+ * @returns {void}
+ */
+export declare const forcePopoverId: (item: Element, id: string) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "MG Components",
   "packageManager": "pnpm@7.17.1",
   "engineStrict": true,
@@ -28,50 +28,50 @@
     "outputName": "junit.xml"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^2.20.0",
+    "@popperjs/core": "^2.11.6",
+    "@stencil/core": "^2.21.0",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-react-jsx": "^7.20.7",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.14",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/html": "^6.5.14",
+    "@storybook/addon-a11y": "^6.5.15",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/html": "^6.5.15",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
-    "@types/jest-image-snapshot": "^4.3.1",
+    "@types/jest-image-snapshot": "^4.3.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.3.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.10.1",
+    "chromatic": "^6.14.0",
     "css-loader": "^5.2.7",
     "eslint": "^7.32.0",
-    "eslint-plugin-jsdoc": "^38.0.6",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-jsdoc": "^38.1.6",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-storybook": "^0.6.10",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^13.0.0",
-    "jsx-dom": "^8.0.1-beta.1",
+    "jest-junit": "^13.2.0",
+    "jsx-dom": "^8.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "puppeteer": "^13.3.2",
-    "sass": "^1.41.0",
-    "sass-loader": "^10.2.0",
+    "prettier": "^2.8.2",
+    "puppeteer": "^13.7.0",
+    "sass": "^1.57.1",
+    "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
-    "ts-node": "^10.7.0",
-    "turbo": "^1.6.3",
+    "ts-node": "^10.9.1",
+    "turbo": "^1.7.0",
     "typescript": "~4.4.4"
   },
   "license": "BSD-3-Clause",

package/readme.md

@@ -20,45 +20,47 @@ To run MG Components, clone this repository, go to your new directory and run:
 # This repository uses pnpm as package manager
 corepack enable
 pnpm i
-npm run start
+pnpm start
 ```
 
 To build for production, run:
 
 ```bash
-npm run build
+pnpm build
 ```
 
 To run tests for the components, run:
 
 ```bash
-npm run test
+pnpm test
 
 # only unit tests
-npm run test:unit
+pnpm test:unit
 
 # only e2e tests
-npm run test:e2e
+pnpm test:e2e
 
 # filter on filename
-npm run test -- mg-icon
-npm run test:unit -- mg-icon
+pnpm test -- mg-icon
+pnpm test:unit -- mg-icon
 ```
 
 <!-- Not working for now: To regenerate snapshot you must add the `-u` parameter. -->
 
+To regenerate snapshot you must add the `--updateSnapshot` parameter.
+
 For E2E tests you **must** use [WSL](https://docs.microsoft.com/fr-fr/windows/wsl/install) or a Linux OS to get the same screenshots as the GitLab CI.
 
 To add a component, run:
 
 ```bash
-npm run generate component-path
+pnpm generate component-path
 
 # example for an atom
-npm run generate atoms/mg-icon
+pnpm generate atoms/mg-icon
 
 # example for a molecule
-npm run generate molecules/mg-message
+pnpm generate molecules/mg-message
 ```
 
 ## Naming Components
@@ -126,10 +128,17 @@ The plugin [storybook-addon-docs-stencil
 ### run
 
 ```bash
-npm run storybook
+pnpm storybook
 ```
 
 ### Notes
 
-- camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
-- Boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+To display components in our `stories`, we use the `filterArgs` method to only show the necessary arguments in the code example. It takes in the first parameter an object containing the arguments to be used, and in the second parameter, an object containing the component default values.
+
+```JS
+const Template = (args: any): HTMLElement => (
+  <mg-tooltip {...filterArgs(args, { placement: 'bottom' })}>
+    <mg-icon icon="info-circle"></mg-icon>
+  </mg-tooltip>
+);
+```

package/dist/components/locale.utils.js

@@ -1,40 +0,0 @@
-/**
- * Format number to the locale currency
- *
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @param {string} currency currency to apply
- * @returns {string} formatted currency
- */
-function localeCurrency(number, locale, currency) {
-  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
-}
-/**
- * Format number to locale
- *
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @returns {string} formatted number
- */
-function localeNumber(number, locale) {
-  return new Intl.NumberFormat(locale).format(number);
-}
-/**
- * Date RegExp
- */
-const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
-/**
- * Locale date format
- *
- * @param {string} date date to format
- * @param {string} locale locale to apply
- * @returns {string} formatted date
- */
-function localeDate(date, locale) {
-  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
-    return '';
-  }
-  return new Intl.DateTimeFormat(locale).format(new Date(date));
-}
-
-export { localeCurrency as a, localeNumber as b, dateRegExp as d, localeDate as l };

package/dist/components/mg-menu.conf.js

@@ -1,10 +0,0 @@
-/**
- * Menu direction type
- */
-var Direction;
-(function (Direction) {
-  Direction["VERTICAL"] = "vertical";
-  Direction["HORIZONTAL"] = "horizontal";
-})(Direction || (Direction = {}));
-
-export { Direction as D };