@imposium-hub/components 2.11.3-3 → 2.11.4

package/dist/esm/components/text-area-field/TextAreaField.d.ts

@@ -37,6 +37,6 @@ declare class TextAreaField extends React.PureComponent<ITextAreaFieldProps, ITe
     private renderButtons;
     private toggleEditing;
     componentDidUpdate(prevProps: any): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default TextAreaField;

package/dist/esm/components/text-area-field/TextAreaField.stories.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import TextAreaField from './TextAreaField';
 declare const _default: {
     title: string;
     components: typeof TextAreaField;
 };
 export default _default;
-export declare const defaultTextAreaField: () => React.JSX.Element;
+export declare const defaultTextAreaField: () => JSX.Element;

package/dist/esm/components/text-field/TextField.d.ts

@@ -59,6 +59,6 @@ declare class TextField extends React.PureComponent<ITextFieldProps, ITextFieldS
     private renderSubmittableIcon;
     private renderButtons;
     private renderInput;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default TextField;

package/dist/esm/components/text-field/TextField.stories.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import TextField from './TextField';
 declare const _default: {
     title: string;
     components: typeof TextField;
 };
 export default _default;
-export declare const defaultTextField: () => React.JSX.Element;
+export declare const defaultTextField: () => JSX.Element;

package/dist/esm/constants/icons.d.ts

@@ -1,77 +1,76 @@
-import * as React from 'react';
-export declare const ICON_VIDEO: React.JSX.Element;
-export declare const ICON_IMAGE: React.JSX.Element;
-export declare const ICON_STICKY_NOTE: React.JSX.Element;
-export declare const ICON_FILTER: React.JSX.Element;
-export declare const ICON_FILTERS: React.JSX.Element;
-export declare const ICON_FILE_VIDEO: React.JSX.Element;
-export declare const ICON_FILE_AUDIO: React.JSX.Element;
-export declare const ICON_FILE_IMAGE: React.JSX.Element;
-export declare const ICON_FILE_ARCHIVE: React.JSX.Element;
-export declare const ICON_IMAGE_SEQ_TYPE: React.JSX.Element;
-export declare const ICON_AUDIO_TYPE: React.JSX.Element;
-export declare const ICON_COPY: React.JSX.Element;
-export declare const ICON_TIMES: React.JSX.Element;
-export declare const ICON_CIRCLE_NOTCH: React.JSX.Element;
-export declare const ICON_CARET_UP: React.JSX.Element;
-export declare const ICON_CARET_DOWN: React.JSX.Element;
-export declare const ICON_CHECK: React.JSX.Element;
-export declare const ICON_EDIT: React.JSX.Element;
-export declare const ICON_SEARCH: React.JSX.Element;
-export declare const ICON_PLUS: React.JSX.Element;
-export declare const ICON_MINUS: React.JSX.Element;
-export declare const ICON_CLIPBOARD: React.JSX.Element;
-export declare const ICON_EXCLAIMATION_TRIANGLE: React.JSX.Element;
-export declare const ICON_ANGLE_LEFT: React.JSX.Element;
-export declare const ICON_ANGLE_DOUBLE_LEFT: React.JSX.Element;
-export declare const ICON_ANGLE_RIGHT: React.JSX.Element;
-export declare const ICON_ANGLE_DOUBLE_RIGHT: React.JSX.Element;
-export declare const ICON_CHEVRON_DOWN: React.JSX.Element;
-export declare const ICON_CHEVRON_UP: React.JSX.Element;
-export declare const ICON_USER_LOCK: React.JSX.Element;
-export declare const ICON_BAN: React.JSX.Element;
-export declare const SORT_UP: React.JSX.Element;
-export declare const SORT_DOWN: React.JSX.Element;
-export declare const ICON_TIMES_CIRCLE: React.JSX.Element;
-export declare const ICON_INFO_CIRCLE: React.JSX.Element;
-export declare const ICON_FONT: React.JSX.Element;
-export declare const ICON_ALIGN_LEFT: React.JSX.Element;
-export declare const ICON_ALIGN_RIGHT: React.JSX.Element;
-export declare const ICON_ALIGN_CENTER: React.JSX.Element;
-export declare const ICON_BARS: React.JSX.Element;
-export declare const ICON_ARROW_UP: React.JSX.Element;
-export declare const ICON_ARROW_CENTER_V: React.JSX.Element;
-export declare const ICON_ARROW_DOWN: React.JSX.Element;
-export declare const ICON_ARROW_LEFT: React.JSX.Element;
-export declare const ICON_ARROW_CENTER_H: React.JSX.Element;
-export declare const ICON_ARROW_RIGHT: React.JSX.Element;
-export declare const ICON_COMPRESS: React.JSX.Element;
-export declare const ICON_EXPAND: React.JSX.Element;
-export declare const ICON_EXPAND_ARROWS: React.JSX.Element;
-export declare const ICON_LAYER_GROUP: React.JSX.Element;
-export declare const ICON_CUBE: React.JSX.Element;
-export declare const ICON_FILE_CODE: React.JSX.Element;
-export declare const ICON_HELP: React.JSX.Element;
-export declare const ICON_HUBSPOT: React.JSX.Element;
-export declare const ICON_EMAIL: React.JSX.Element;
-export declare const ICON_GLOBE: React.JSX.Element;
-export declare const ICON_PROJECT_DIAGRAM: React.JSX.Element;
-export declare const ICON_JS: React.JSX.Element;
-export declare const ICON_DOWNLOAD: React.JSX.Element;
-export declare const ICON_UPLOAD: React.JSX.Element;
-export declare const ICON_UPLEFT_ANCHOR: React.JSX.Element;
-export declare const ICON_UP_ANCHOR: React.JSX.Element;
-export declare const ICON_UPRIGHT_ANCHOR: React.JSX.Element;
-export declare const ICON_LEFT_ANCHOR: React.JSX.Element;
-export declare const ICON_RIGHT_ANCHOR: React.JSX.Element;
-export declare const ICON_DOWNLEFT_ANCHOR: React.JSX.Element;
-export declare const ICON_DOWN_ANCHOR: React.JSX.Element;
-export declare const ICON_DOWNRIGHT_ANCHOR: React.JSX.Element;
-export declare const ICON_CENTER_ANCHOR: React.JSX.Element;
-export declare const ICON_CLAPPERBOARD_PLAY: React.JSX.Element;
-export declare const ICON_CODE: React.JSX.Element;
-export declare const ICON_UP_RIGHT_FROM_SQUARE: React.JSX.Element;
-export declare const ICON_FILE_UPLOAD: React.JSX.Element;
-export declare const ICON_FILE_ERROR: React.JSX.Element;
-export declare const ICON_FILE_ADD: React.JSX.Element;
-export declare const ICON_FILE_REPLACE: React.JSX.Element;
+export declare const ICON_VIDEO: JSX.Element;
+export declare const ICON_IMAGE: JSX.Element;
+export declare const ICON_STICKY_NOTE: JSX.Element;
+export declare const ICON_FILTER: JSX.Element;
+export declare const ICON_FILTERS: JSX.Element;
+export declare const ICON_FILE_VIDEO: JSX.Element;
+export declare const ICON_FILE_AUDIO: JSX.Element;
+export declare const ICON_FILE_IMAGE: JSX.Element;
+export declare const ICON_FILE_ARCHIVE: JSX.Element;
+export declare const ICON_IMAGE_SEQ_TYPE: JSX.Element;
+export declare const ICON_AUDIO_TYPE: JSX.Element;
+export declare const ICON_COPY: JSX.Element;
+export declare const ICON_TIMES: JSX.Element;
+export declare const ICON_CIRCLE_NOTCH: JSX.Element;
+export declare const ICON_CARET_UP: JSX.Element;
+export declare const ICON_CARET_DOWN: JSX.Element;
+export declare const ICON_CHECK: JSX.Element;
+export declare const ICON_EDIT: JSX.Element;
+export declare const ICON_SEARCH: JSX.Element;
+export declare const ICON_PLUS: JSX.Element;
+export declare const ICON_MINUS: JSX.Element;
+export declare const ICON_CLIPBOARD: JSX.Element;
+export declare const ICON_EXCLAIMATION_TRIANGLE: JSX.Element;
+export declare const ICON_ANGLE_LEFT: JSX.Element;
+export declare const ICON_ANGLE_DOUBLE_LEFT: JSX.Element;
+export declare const ICON_ANGLE_RIGHT: JSX.Element;
+export declare const ICON_ANGLE_DOUBLE_RIGHT: JSX.Element;
+export declare const ICON_CHEVRON_DOWN: JSX.Element;
+export declare const ICON_CHEVRON_UP: JSX.Element;
+export declare const ICON_USER_LOCK: JSX.Element;
+export declare const ICON_BAN: JSX.Element;
+export declare const SORT_UP: JSX.Element;
+export declare const SORT_DOWN: JSX.Element;
+export declare const ICON_TIMES_CIRCLE: JSX.Element;
+export declare const ICON_INFO_CIRCLE: JSX.Element;
+export declare const ICON_FONT: JSX.Element;
+export declare const ICON_ALIGN_LEFT: JSX.Element;
+export declare const ICON_ALIGN_RIGHT: JSX.Element;
+export declare const ICON_ALIGN_CENTER: JSX.Element;
+export declare const ICON_BARS: JSX.Element;
+export declare const ICON_ARROW_UP: JSX.Element;
+export declare const ICON_ARROW_CENTER_V: JSX.Element;
+export declare const ICON_ARROW_DOWN: JSX.Element;
+export declare const ICON_ARROW_LEFT: JSX.Element;
+export declare const ICON_ARROW_CENTER_H: JSX.Element;
+export declare const ICON_ARROW_RIGHT: JSX.Element;
+export declare const ICON_COMPRESS: JSX.Element;
+export declare const ICON_EXPAND: JSX.Element;
+export declare const ICON_EXPAND_ARROWS: JSX.Element;
+export declare const ICON_LAYER_GROUP: JSX.Element;
+export declare const ICON_CUBE: JSX.Element;
+export declare const ICON_FILE_CODE: JSX.Element;
+export declare const ICON_HELP: JSX.Element;
+export declare const ICON_HUBSPOT: JSX.Element;
+export declare const ICON_EMAIL: JSX.Element;
+export declare const ICON_GLOBE: JSX.Element;
+export declare const ICON_PROJECT_DIAGRAM: JSX.Element;
+export declare const ICON_JS: JSX.Element;
+export declare const ICON_DOWNLOAD: JSX.Element;
+export declare const ICON_UPLOAD: JSX.Element;
+export declare const ICON_UPLEFT_ANCHOR: JSX.Element;
+export declare const ICON_UP_ANCHOR: JSX.Element;
+export declare const ICON_UPRIGHT_ANCHOR: JSX.Element;
+export declare const ICON_LEFT_ANCHOR: JSX.Element;
+export declare const ICON_RIGHT_ANCHOR: JSX.Element;
+export declare const ICON_DOWNLEFT_ANCHOR: JSX.Element;
+export declare const ICON_DOWN_ANCHOR: JSX.Element;
+export declare const ICON_DOWNRIGHT_ANCHOR: JSX.Element;
+export declare const ICON_CENTER_ANCHOR: JSX.Element;
+export declare const ICON_CLAPPERBOARD_PLAY: JSX.Element;
+export declare const ICON_CODE: JSX.Element;
+export declare const ICON_UP_RIGHT_FROM_SQUARE: JSX.Element;
+export declare const ICON_FILE_UPLOAD: JSX.Element;
+export declare const ICON_FILE_ERROR: JSX.Element;
+export declare const ICON_FILE_ADD: JSX.Element;
+export declare const ICON_FILE_REPLACE: JSX.Element;

package/dist/styles.css

@@ -2572,21 +2572,25 @@ body a {
     background-position: 20px 10px;
   }
 }
-.shortcuts-menu {
+.shortcuts-dropdown {
+  overflow: auto;
+  height: 90%;
+}
+.shortcuts-dropdown .shortcuts-menu {
   padding: 5px;
   box-sizing: border-box;
   background: #272727;
   width: 235px;
 }
-.shortcuts-menu table tr td {
+.shortcuts-dropdown .shortcuts-menu table tr td {
   font-size: 12px;
   padding: 0.2em;
 }
-.shortcuts-menu table tr td.hotkey-cell {
+.shortcuts-dropdown .shortcuts-menu table tr td.hotkey-cell {
   font-weight: 600;
   text-align: right;
 }
-.shortcuts-menu table tr td.shortcut-desc {
+.shortcuts-dropdown .shortcuts-menu table tr td.shortcut-desc {
   padding: 0.2em 0.2em 0.2em 1.2em;
 }
 .spinner {

package/dist/styles.less

@@ -2517,24 +2517,29 @@ body{
 	}
 }
 
-.shortcuts-menu {
+.shortcuts-dropdown {
+  overflow: auto;
+  height: 90%;
+  .shortcuts-menu {
     padding: 5px;
     box-sizing: border-box;
     background: @background;
     width: 235px;
+
     table {
-    tr {
-      td {
-        font-size: 12px;
-        padding: 0.2em;
+      tr {
+        td {
+          font-size: 12px;
+          padding: 0.2em;
 
-        &.hotkey-cell {
-          font-weight: 600;
-          text-align: right;
-        }
+          &.hotkey-cell {
+            font-weight: 600;
+            text-align: right;
+          }
 
-        &.shortcut-desc {
-          padding: 0.2em 0.2em 0.2em 1.2em;
+          &.shortcut-desc {
+            padding: 0.2em 0.2em 0.2em 1.2em;
+          }
         }
       }
     }

package/less/components/shortcut-menu.less

@@ -1,21 +1,26 @@
-.shortcuts-menu {
+.shortcuts-dropdown {
+  overflow: auto;
+  height: 90%;
+  .shortcuts-menu {
     padding: 5px;
     box-sizing: border-box;
     background: @background;
     width: 235px;
+
     table {
-    tr {
-      td {
-        font-size: 12px;
-        padding: 0.2em;
+      tr {
+        td {
+          font-size: 12px;
+          padding: 0.2em;
 
-        &.hotkey-cell {
-          font-weight: 600;
-          text-align: right;
-        }
+          &.hotkey-cell {
+            font-weight: 600;
+            text-align: right;
+          }
 
-        &.shortcut-desc {
-          padding: 0.2em 0.2em 0.2em 1.2em;
+          &.shortcut-desc {
+            padding: 0.2em 0.2em 0.2em 1.2em;
+          }
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.11.3-3",
+    "version": "2.11.4",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -113,7 +113,7 @@
         "less": "^4.1.2",
         "less-plugin-clean-css": "^1.5.1",
         "localforage": "^1.7.3",
-        "np": "^7.6.1",
+        "np": "^10.2.0",
         "onchange": "^7.1.0",
         "prettier": "^2.6.2",
         "react": "^17.0.1",
@@ -139,5 +139,8 @@
             "@imposium-hub/eslint-config/typescript-react"
         ]
     },
-    "prettier": "@imposium-hub/prettier-config"
+    "prettier": "@imposium-hub/prettier-config",
+    "overrides": {
+        "tmp": "^0.2.5"
+    }
 }

package/src/components/dropdown/Dropdown.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 export interface IDropdownMenuProps {
+    customClass?: string;
     toggleRef?: any;
     show: boolean;
     children: React.ReactNode;
@@ -123,7 +124,7 @@ export default class ImposiumDropdown extends React.PureComponent<
 
     public render() {
         const { build, offset } = this.state;
-        const { show, position, children } = this.props;
+        const { show, position, children, customClass } = this.props;
         const dropdownStyle: any = {
             transform: build ? 'scaleY(1)' : 'scaleY(0)',
             opacity: build ? '1' : '0'
@@ -170,7 +171,7 @@ export default class ImposiumDropdown extends React.PureComponent<
 
         return (
             <div
-                className='imposium-dropdown'
+                className={`imposium-dropdown ${customClass}`}
                 style={dropdownStyle}
                 ref={this.dropdownRef}>
                 {children}