@imposium-hub/components 1.45.5 → 1.46.1

package/package.json

@@ -1,118 +1,132 @@
 {
-  "name": "@imposium-hub/components",
-  "version": "1.45.5",
-  "description": "React & Typescript component / asset library for Imposium front-ends",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/cjs/index.d.ts",
-  "scripts": {
-    "start": "npm run build && npm run watch",
-    "build": "npx concurrently \"npm:build-*\"",
-    "watch": "npx concurrently \"npm:watch-*\"",
-    "watch-less": "npx onchange 'less/**/*.less' -- npm run build-less",
-    "build-less": "npx lessc ./less/entry.less ./dist/styles.less && npx lessc ./dist/styles.less ./dist/styles.css",
-    "build-ts-esm": "npx tsc --outDir dist/esm --module esnext --target esnext --pretty",
-    "build-ts-cjs": "npx tsc --pretty ",
-    "watch-ts-esm": "npm run build-ts-esm -- --watch",
-    "watch-ts-cjs": "npm run build-ts-cjs -- --watch",
-    "lint": "npx eslint \"./src/**/*.*\"",
-    "lint-fix": "npm run lint --fix",
-    "deploy": "npx np --no-tests --message `v%s`",
-    "release": "npm run lint && npm run build && npm run deploy",
-    "storybook": "npm run build && start-storybook -p 6066"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NickelMedia/Imposium-Hub-Components.git"
-  },
-  "author": "Greg Webber",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/NickelMedia/Imposium-Hub-Components/issues"
-  },
-  "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
-  "dependencies": {
-    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/resize-observer-browser": "^0.1.5",
-    "ansi_up": "^5.1.0",
-    "auth0-js": "^9.11.3",
-    "cogo-toast": "^4.2.3",
-    "export-to-csv": "^0.2.1",
-    "file-saver": "^2.0.5",
-    "imposium-js-sdk": "^2.3.1",
-    "js-cookie": "^2.2.1",
-    "lodash": "^4.17.21",
-    "moment": "^2.29.1",
-    "react-color": "^2.18.0",
-    "react-merge-refs": "^1.1.0",
-    "react-moveable": "^0.26.1"
-  },
-  "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/pro-light-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
-    "axios": "^0.21.1",
-    "hotkeys-js": "^3.6.12",
-    "localforage": "^1.7.3",
-    "react": "^17.0.1",
-    "react-autosuggest": "^9.4.3",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^17.0.2",
-    "react-dropzone": "^10.1.6",
-    "react-redux": "^5.0.7",
-    "react-resize-detector": "^6.7.1",
-    "react-spinners": "^0.6.1",
-    "react-table": "^7.7.0",
-    "react-tooltip": "3.11.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-brands-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/pro-light-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-interactions": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/testing-library": "^0.0.11",
-    "@types/lodash": "^4.14.178",
-    "@types/react": "^17.0.37",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.24.0",
-    "axios": "^0.21.1",
-    "babel-loader": "^8.2.5",
-    "concurrently": "^7.1.0",
-    "eslint": "^8.14.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "hotkeys-js": "^3.6.12",
-    "less": "^4.1.2",
-    "less-plugin-clean-css": "^1.5.1",
-    "localforage": "^1.7.3",
-    "np": "^7.6.1",
-    "onchange": "^7.1.0",
-    "react": "^17.0.1",
-    "react-autosuggest": "^9.4.3",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^17.0.2",
-    "react-dropzone": "^10.1.6",
-    "react-redux": "^5.0.7",
-    "react-resize-detector": "^6.7.1",
-    "react-spinners": "^0.6.1",
-    "react-table": "^7.7.0",
-    "react-tooltip": "3.11.1",
-    "run-sequence": "^2.2.1",
-    "sb": "^6.4.22",
-    "storybook-dark-mode": "^1.1.0",
-    "typescript": "^4.6.3"
-  }
+    "name": "@imposium-hub/components",
+    "version": "1.46.1",
+    "description": "React & Typescript component / asset library for Imposium front-ends",
+    "main": "./dist/cjs/index.js",
+    "module": "./dist/esm/index.js",
+    "types": "./dist/cjs/index.d.ts",
+    "scripts": {
+        "start": "npm run build && npm run watch",
+        "build": "npx concurrently \"npm:build-*\"",
+        "watch": "npx concurrently \"npm:watch-*\"",
+        "watch-less": "npx onchange 'less/**/*.less' -- npm run build-less",
+        "build-less": "npx lessc ./less/entry.less ./dist/styles.less && npx lessc ./dist/styles.less ./dist/styles.css",
+        "build-ts-esm": "npx tsc --outDir dist/esm --module esnext --target esnext --pretty",
+        "build-ts-cjs": "npx tsc --pretty ",
+        "watch-ts-esm": "npm run build-ts-esm -- --watch",
+        "watch-ts-cjs": "npm run build-ts-cjs -- --watch",
+        "lint": "npx eslint \"./src/**/*.*\"",
+        "lint-fix": "npm run lint -- --fix",
+        "deploy": "npx np --no-tests --message `v%s`",
+        "release": "npm run check-formatting && npm run lint && npm run build && npm run deploy",
+        "format": "prettier --write \"**/*.{,js,json,jsx,ts,tsx,md}\"",
+        "check-formatting": "prettier --check \"**/*.{,js,json,jsx,ts,tsx,md}\"",
+        "storybook": "npm run build && start-storybook -p 6066"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/NickelMedia/Imposium-Hub-Components.git"
+    },
+    "author": "Greg Webber",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://github.com/NickelMedia/Imposium-Hub-Components/issues"
+    },
+    "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
+    "dependencies": {
+        "ansi_up": "^5.1.0",
+        "auth0-js": "^9.11.3",
+        "cogo-toast": "^4.2.3",
+        "export-to-csv": "^0.2.1",
+        "file-saver": "^2.0.5",
+        "imposium-js-sdk": "^2.3.1",
+        "js-cookie": "^2.2.1",
+        "lodash": "^4.17.21",
+        "moment": "^2.29.1",
+        "react-color": "^2.18.0",
+        "react-merge-refs": "^1.1.0",
+        "react-moveable": "^0.26.1"
+    },
+    "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/pro-light-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "axios": "^0.21.1",
+        "hotkeys-js": "^3.6.12",
+        "localforage": "^1.7.3",
+        "react": "^17.0.1",
+        "react-autosuggest": "^9.4.3",
+        "react-dnd": "^14.0.2",
+        "react-dnd-html5-backend": "^14.0.0",
+        "react-dom": "^17.0.2",
+        "react-dropzone": "^10.1.6",
+        "react-redux": "^5.0.7",
+        "react-resize-detector": "^6.7.1",
+        "react-spinners": "^0.6.1",
+        "react-table": "^7.7.0",
+        "react-tooltip": "3.11.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.17.10",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/pro-light-svg-icons": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@imposium-hub/eslint-config": "^1.0.0",
+        "@imposium-hub/prettier-config": "^2.0.0",
+        "@storybook/addon-actions": "^6.4.22",
+        "@storybook/addon-docs": "^6.4.22",
+        "@storybook/addon-essentials": "^6.4.22",
+        "@storybook/addon-interactions": "^6.4.22",
+        "@storybook/addon-links": "^6.4.22",
+        "@storybook/addon-storysource": "^6.4.22",
+        "@storybook/react": "^6.4.22",
+        "@storybook/testing-library": "^0.0.11",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/lodash": "^4.14.178",
+        "@types/react": "^17.0.37",
+        "@types/resize-observer-browser": "^0.1.5",
+        "@typescript-eslint/eslint-plugin": "^5.21.0",
+        "@typescript-eslint/parser": "^5.24.0",
+        "axios": "^0.21.1",
+        "babel-loader": "^8.2.5",
+        "concurrently": "^7.1.0",
+        "eslint": "^8.14.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-prefer-arrow": "^1.2.3",
+        "eslint-plugin-unused-imports": "^2.0.0",
+        "hotkeys-js": "^3.6.12",
+        "less": "^4.1.2",
+        "less-plugin-clean-css": "^1.5.1",
+        "localforage": "^1.7.3",
+        "np": "^7.6.1",
+        "onchange": "^7.1.0",
+        "prettier": "^2.6.2",
+        "react": "^17.0.1",
+        "react-autosuggest": "^9.4.3",
+        "react-dnd": "^14.0.2",
+        "react-dnd-html5-backend": "^14.0.0",
+        "react-dom": "^17.0.2",
+        "react-dropzone": "^10.1.6",
+        "react-redux": "^5.0.7",
+        "react-resize-detector": "^6.7.1",
+        "react-spinners": "^0.6.1",
+        "react-table": "^7.7.0",
+        "react-tooltip": "3.11.1",
+        "run-sequence": "^2.2.1",
+        "sb": "^6.4.22",
+        "storybook-dark-mode": "^1.1.0",
+        "typescript": "^4.6.3"
+    },
+    "eslintConfig": {
+        "root": true,
+        "extends": [
+            "@imposium-hub/eslint-config/typescript-react"
+        ]
+    },
+    "prettier": "@imposium-hub/prettier-config"
 }

package/src/Util.ts

@@ -1,11 +1,10 @@
-export const isLocal = () : boolean => ((window.location.hostname === 'localhost'));
+export const isLocal = (): boolean => window.location.hostname === 'localhost';
 
-export const getActiveOrg = (activeOrgId : string, access : any) : any => (
-    access.organizations.find((o : any) => (o.id === activeOrgId))
-);
+export const getActiveOrg = (activeOrgId: string, access: any): any =>
+    access.organizations.find((o: any) => o.id === activeOrgId);
 
-export const validateAccessLevel = (orgId : string, serviceId : number, access : any) : boolean => {
-    const activeOrg : any = getActiveOrg(orgId, access);
+export const validateAccessLevel = (orgId: string, serviceId: number, access: any): boolean => {
+    const activeOrg: any = getActiveOrg(orgId, access);
 
     if (!activeOrg) {
         return false;
@@ -14,26 +13,23 @@ export const validateAccessLevel = (orgId : string, serviceId : number, access :
     return activeOrg.services.includes(serviceId);
 };
 
-export const getFirstStoryInOrg = (orgId : string, access : any) : string => {
-    const activeOrg : any = getActiveOrg(orgId, access);
+export const getFirstStoryInOrg = (orgId: string, access: any): string => {
+    const activeOrg: any = getActiveOrg(orgId, access);
 
-    return (activeOrg && typeof activeOrg.stories[0] === 'object')
-        ? activeOrg.stories[0].id
-        : '';
+    return activeOrg && typeof activeOrg.stories[0] === 'object' ? activeOrg.stories[0].id : '';
 };
 
-export const scrapeEmail = (auth : any) : string => (
-    (auth && auth.idTokenPayload && auth.idTokenPayload['https://imposium.com/email'])
+export const scrapeEmail = (auth: any): string =>
+    auth && auth.idTokenPayload && auth.idTokenPayload['https://imposium.com/email']
         ? auth.idTokenPayload['https://imposium.com/email']
-        : ''
-);
+        : '';
 
 export const parameterizeServiceUrl = (
-    activeOrg : string,
-    activeStory : string,
-    url : string,
-    id? : number
-) : string => {
+    activeOrg: string,
+    activeStory: string,
+    url: string,
+    id?: number
+): string => {
     if (activeOrg && activeStory) {
         switch (id) {
             case 1:
@@ -54,39 +50,38 @@ export const parameterizeServiceUrl = (
     }
 };
 
-export const string2HexCode = (s : string) : string => {
-    const hash : any = s.split('')
-        .map((c : string, i : number) => (s.charCodeAt(i)))
-        .reduce<number>((p : number, c : number) => (c + ((p << 5) - p)), 0);
+export const string2HexCode = (s: string): string => {
+    const hash: any = s
+        .split('')
+        .map((c: string, i: number) => s.charCodeAt(i))
+        .reduce<number>((p: number, c: number) => c + ((p << 5) - p), 0);
 
-    const color : string = (hash & 0x00FFFFFF).toString(16).toUpperCase();
+    const color: string = (hash & 0x00ffffff).toString(16).toUpperCase();
 
     return `#${'00000'.substring(0, 6 - color.length) + color}`;
 };
 
-export const generateUUID = () : string => {
-
+export const generateUUID = (): string => {
     let d = new Date().getTime();
     const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
         const r = (d + Math.random() * 16) % 16 | 0;
         d = Math.floor(d / 16);
-        return (c === 'x' ? r : (r & 0x7 | 0x8)).toString(16);
+        return (c === 'x' ? r : (r & 0x7) | 0x8).toString(16);
     });
     return uuid;
 };
 
-export const fitToContainer = (container : any, content : any, config : any) : any => {
+export const fitToContainer = (container: any, content: any, config: any): any => {
     let newH;
     let newW;
     let top;
     let left;
     const aspectRatio = content.width / content.height;
-    const contWidth = (config.padding) ? container.width - (config.padding * 2) : container.width;
-    const contHeight = (config.padding) ? container.height - (config.padding * 2) : container.height;
-    const padding = (config.padding) ? config.padding : 0;
+    const contWidth = config.padding ? container.width - config.padding * 2 : container.width;
+    const contHeight = config.padding ? container.height - config.padding * 2 : container.height;
+    const padding = config.padding ? config.padding : 0;
     // scale
     if (config.scaleMode === 'proportionalInside') {
-
         newW = contWidth;
         newH = newW / aspectRatio;
 
@@ -94,9 +89,7 @@ export const fitToContainer = (container : any, content : any, config : any) : a
             newH = contHeight;
             newW = newH * aspectRatio;
         }
-
     } else if (config.scaleMode === 'proportionalOutside') {
-
         newW = contWidth;
         newH = newW / aspectRatio;
 
@@ -104,9 +97,7 @@ export const fitToContainer = (container : any, content : any, config : any) : a
             newH = contHeight;
             newW = newH * aspectRatio;
         }
-
     } else if (config.scaleMode === 'none' || !config.scaleMode) {
-
         newW = content.width;
         newH = content.height;
     }
@@ -126,8 +117,18 @@ export const fitToContainer = (container : any, content : any, config : any) : a
     }
 
     // fit
-    left = (config.hAlign === 'left') ? 0 : (config.hAlign === 'right') ? (contWidth - newW) : (contWidth - newW) / 2;
-    top = (config.vAlign === 'top') ? 0 : (config.vAlign === 'bottom') ? (contHeight - newH) : (contHeight - newH) / 2;
+    left =
+        config.hAlign === 'left'
+            ? 0
+            : config.hAlign === 'right'
+            ? contWidth - newW
+            : (contWidth - newW) / 2;
+    top =
+        config.vAlign === 'top'
+            ? 0
+            : config.vAlign === 'bottom'
+            ? contHeight - newH
+            : (contHeight - newH) / 2;
 
     top += padding;
     left += padding;
@@ -142,22 +143,25 @@ export const fitToContainer = (container : any, content : any, config : any) : a
 
 // only allow hotkeys to fire on inputs if it's the ENTER or ESCAPE key
 export const filterHotkeys = (e) => {
-
     const tagName = (e.target || e.srcElement).tagName;
 
-    const isInput = (tagName.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA');
-    const enter = (e.code === 'Enter');
-    const esc = (e.code === 'Escape');
-    const isMeta = (e.metaKey === true);
+    const isInput =
+        tagName.isContentEditable ||
+        tagName === 'INPUT' ||
+        tagName === 'SELECT' ||
+        tagName === 'TEXTAREA';
+    const enter = e.code === 'Enter';
+    const esc = e.code === 'Escape';
+    const isMeta = e.metaKey === true;
 
-    if (!isInput || isInput && enter || isInput && esc || isInput && isMeta) {
+    if (!isInput || (isInput && enter) || (isInput && esc) || (isInput && isMeta)) {
         return true;
     } else {
         return false;
     }
 };
 
-export const isObjEmpty = (obj : any) => {
+export const isObjEmpty = (obj: any) => {
     for (const key in obj) {
         if (obj.hasOwnProperty(key)) {
             return false;
@@ -166,8 +170,7 @@ export const isObjEmpty = (obj : any) => {
     return true;
 };
 
-export const validateAssetMimetype = (file : File) : boolean => {
-
+export const validateAssetMimetype = (file: File): boolean => {
     const [fileType, fileFormat] = file.type.split('/');
     const nameSegments = file.name.split('.');
     const extension = nameSegments[nameSegments.length - 1];
@@ -200,7 +203,6 @@ export const validateAssetMimetype = (file : File) : boolean => {
 };
 
 export const isFont = (mimeType, extension) => {
-
     const accepted = [
         'font',
         'otf',
@@ -222,35 +224,38 @@ export const isFont = (mimeType, extension) => {
     ];
 
     if (mimeType) {
-        return (accepted.indexOf(mimeType) !== -1);
+        return accepted.indexOf(mimeType) !== -1;
     } else {
-        return (accepted.indexOf(extension) !== -1);
+        return accepted.indexOf(extension) !== -1;
     }
 };
 
-export const mimetypeConformsToOverlay = (overlayAccepts : string, file : File) : boolean => {
+export const mimetypeConformsToOverlay = (overlayAccepts: string, file: File): boolean => {
     const [fileType, fileFormat] = file.type.split('/');
 
     return (
         (overlayAccepts === 'video' && fileType === 'video') ||
         (overlayAccepts === 'image' && fileType === 'image') ||
         (overlayAccepts === 'audio' && fileType === 'audio') ||
-        (overlayAccepts === 'template' && fileType === 'application' && (fileFormat === 'zip' || fileFormat === 'x-gzip')) ||
-        (overlayAccepts === 'image_sequence' && fileType === 'application' && (fileFormat === 'zip' || fileFormat === 'x-gzip'))
+        (overlayAccepts === 'template' &&
+            fileType === 'application' &&
+            (fileFormat === 'zip' || fileFormat === 'x-gzip')) ||
+        (overlayAccepts === 'image_sequence' &&
+            fileType === 'application' &&
+            (fileFormat === 'zip' || fileFormat === 'x-gzip'))
     );
 };
 
-export const toFixed = (num : number, fixed : number) => {
-    const re = new RegExp(`^-?\\d+(?:\.\\d{0,${(fixed || -1)}})?`);
+export const toFixed = (num: number, fixed: number) => {
+    const re = new RegExp(`^-?\\d+(?:\.\\d{0,${fixed || -1}})?`);
     return num.toString().match(re)[0];
 };
 
-export const padStart = (num : number, pad : number) => {
-    return new Array(pad + 1 - (num.toString()).length).join('0') + num;
+export const padStart = (num: number, pad: number) => {
+    return new Array(pad + 1 - num.toString().length).join('0') + num;
 };
 
-export const formatDateDefault = (unix : number) => {
-
+export const formatDateDefault = (unix: number) => {
     const date = new Date(unix * 1000);
 
     const month = date.getMonth() + 1; // JS months are 0 indexed...
@@ -259,9 +264,13 @@ export const formatDateDefault = (unix : number) => {
 
     let hr = date.getHours();
     const meridian = hr >= 12 ? 'PM' : 'AM';
-    if (hr > 12) { hr = hr - 12; }
-    if (hr === 0) { hr = 12; }
-    let min : any = date.getMinutes();
+    if (hr > 12) {
+        hr = hr - 12;
+    }
+    if (hr === 0) {
+        hr = 12;
+    }
+    let min: any = date.getMinutes();
     if (min < 10) {
         min = `0${min}`;
     }
@@ -269,15 +278,14 @@ export const formatDateDefault = (unix : number) => {
     return `${month}/${day}/${year} ${hr}:${min} ${meridian}`;
 };
 
-export const formattedTime = (millis : number) => {
-    const minutes : any = Math.floor(millis / 60000);
-    const seconds : any = ((millis % 60000) / 1000).toFixed(0);
+export const formattedTime = (millis: number) => {
+    const minutes: any = Math.floor(millis / 60000);
+    const seconds: any = ((millis % 60000) / 1000).toFixed(0);
 
-    return `${(minutes < 10 ? '0' : '')}${minutes}:${(seconds < 10 ? '0' : '')}${seconds}`
+    return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
 
-export const s3Url = (cloudFrontUrl : string, distro, origin) : string => {
-
+export const s3Url = (cloudFrontUrl: string, distro, origin): string => {
     if (cloudFrontUrl) {
         return cloudFrontUrl.replace(distro, origin);
     } else {

package/src/components/Tag/Tag.tsx

@@ -3,26 +3,25 @@ import { ICON_TIMES } from '../../constants/icons';
 import { string2HexCode } from '../../Util';
 
 interface ITagProps {
-    copy : string;
-    colorize? : boolean;
-    removeHandler? : (...args) => any;
+    copy: string;
+    colorize?: boolean;
+    removeHandler?: (...args) => any;
 }
 
-const Tag : React.FC<ITagProps> = (p : ITagProps) => {
+const Tag: React.FC<ITagProps> = (p: ITagProps) => {
     if (typeof p.copy !== 'string') {
         throw new Error('Prop passed to Tag is not string: ');
     }
 
-    const borderLeftColor : string = (p.colorize) ? `${string2HexCode(p.copy)}` : '';
-    const remove : JSX.Element = (typeof p.removeHandler === 'function') &&
-        (<div className = 'remove-tag' onClick = {p.removeHandler}>{ICON_TIMES}</div>);
+    const borderLeftColor: string = p.colorize ? `${string2HexCode(p.copy)}` : '';
+    const remove: JSX.Element = typeof p.removeHandler === 'function' && (
+        <div className='remove-tag' onClick={p.removeHandler}>
+            {ICON_TIMES}
+        </div>
+    );
 
     return (
-        <div
-            key = {p.copy}
-            style = {{borderLeftColor}}
-            className = 'imposium-tag'
-        >
+        <div key={p.copy} style={{ borderLeftColor }} className='imposium-tag'>
             {p.copy}
             {remove}
         </div>

package/src/components/Tooltip.tsx

@@ -3,16 +3,14 @@ import * as ReactDOM from 'react-dom';
 import ReactTooltip from 'react-tooltip';
 
 export interface IToolTipConfig {
-    content : string;
-    position? : string;
-    theme? : string;
+    content: string;
+    position?: string;
+    theme?: string;
 }
 
-export const renderTooltipProps = (id : string, config : IToolTipConfig | string) : any => {
-
+export const renderTooltipProps = (id: string, config: IToolTipConfig | string): any => {
     if (config) {
-
-        const content = (typeof config === 'object') ? config.content : config;
+        const content = typeof config === 'object' ? config.content : config;
         return {
             'data-tip': content,
             'data-for': id
@@ -22,25 +20,28 @@ export const renderTooltipProps = (id : string, config : IToolTipConfig | string
     }
 };
 
-export const renderTooltip = (id : string, config : IToolTipConfig | string) : any => {
-    const tooltipLayer : HTMLElement = document.getElementById('tooltips');
+export const renderTooltip = (id: string, config: IToolTipConfig | string): any => {
+    const tooltipLayer: HTMLElement = document.getElementById('tooltips');
 
     if (config && tooltipLayer) {
         let theme = 'light';
         let place = 'top';
 
         if (typeof config === 'object') {
-            theme = (config.theme) ? config.theme : 'light';
-            place = (config.position) ? config.position : 'top';
+            theme = config.theme ? config.theme : 'light';
+            place = config.position ? config.position : 'top';
         }
 
-        const tooltipComponent = <ReactTooltip
-            place = {place}
-            offset = {{top: 0, right: 0, bottom: 0, left: 0}}
-            id = {id}
-            className = {`imposium-button-tooltip-${theme}`}
-            delayShow = {1000}
-            effect = 'solid'/>;
+        const tooltipComponent = (
+            <ReactTooltip
+                place={place}
+                offset={{ top: 0, right: 0, bottom: 0, left: 0 }}
+                id={id}
+                className={`imposium-button-tooltip-${theme}`}
+                delayShow={1000}
+                effect='solid'
+            />
+        );
 
         return ReactDOM.createPortal(tooltipComponent, tooltipLayer);
     } else {