@zebra-fed/zds-react-desktop - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

baseTheme.js

@@ -12,5 +12,5 @@ var __assign = (this && this.__assign) || function () {
 };
-var _a, _b, _c, _d, _e;
+var _a, _b, _c, _d, _e, _f, _g;
 import { bodySmallFontSize, ComponentVariant, smallLabelFontSize, titleMediumFontSize } from "./interfaces/SpacingTheme";
-import { ThemeMode } from './interfaces';
+import { ThemeMode, BadgeType } from './interfaces';
 import { AccordionBaseColorTheme } from "./components/Accordion/AccordionColorTheme";
@@ -25,3 +25,6 @@ import { AccordionBaseSpacing } from "./components/Accordion/AccordionSpacingTheme";
 import { ChipBaseColorTheme } from "./components/Chip/ChipColorTheme";
+import { BaseFileUploadSpacing } from "./components/FileUpload/FileUploadSpacingTheme";
+import { BaseBadgesSpacing } from "./components/Badges/BadgesSpacing";
 import { BaseDropdownSpacing } from "./components/Dropdown/DropdownSpacingTheme";
+import { FileUploadBaseColorTheme } from "./components/FileUpload/FileUploadColorTheme";
 import { DropdownBaseColorTheme } from "./components/Dropdown/DropdownColorTheme";
@@ -279,2 +282,3 @@ import { SliderBaseSpacing } from "./components/Sliders/SliderSpacingTheme";
             textColor: tokens.colors.greyBlueSwatches[200],
+            disabledTextColor: tokens.colors.greyBlueSwatches[500],
             typingTextColor: tokens.colors.greyBlueSwatches[50],
@@ -475,2 +479,50 @@ errorColor: '#220F11',
         },
+        fileupload: FileUploadBaseColorTheme[ThemeMode.Dark],
+        badges: (_d = {},
+            _d[BadgeType.NEUTRAL] = {
+                titleColor: lightModeSurface,
+                textColor: lightModeSurface,
+                backgroundColor: primaryVariantText,
+                trailingIconColor: lightModeSurface,
+                leadingIconColor: lightModeSurface,
+                borderColor: '#3C414B',
+                tagBackgroundColor: tokens.colors.greySwatches[1000],
+            },
+            _d[BadgeType.POSITIVE] = {
+                titleColor: lightModeSurface,
+                textColor: lightModeSurface,
+                backgroundColor: '#081711',
+                trailingIconColor: lightModeSurface,
+                leadingIconColor: '#84DAB6',
+                borderColor: '#005F38',
+                tagBackgroundColor: tokens.colors.greySwatches[1000],
+            },
+            _d[BadgeType.NEGATIVE] = {
+                titleColor: lightModeSurface,
+                textColor: lightModeSurface,
+                backgroundColor: darkNegativeSurface,
+                borderColor: darkNegativeActive,
+                leadingIconColor: darkNegativeBorder,
+                trailingIconColor: lightModeSurface,
+                tagBackgroundColor: tokens.colors.greySwatches[1000],
+            },
+            _d[BadgeType.WARNING] = {
+                titleColor: lightModeSurface,
+                textColor: lightModeSurface,
+                backgroundColor: '#331D00',
+                trailingIconColor: lightModeSurface,
+                leadingIconColor: warningBorder,
+                borderColor: '#AA6300',
+                tagBackgroundColor: tokens.colors.greySwatches[1000],
+            },
+            _d[BadgeType.INFO] = {
+                titleColor: lightModeSurface,
+                textColor: lightModeSurface,
+                backgroundColor: '#180F22',
+                trailingIconColor: lightModeSurface,
+                leadingIconColor: '#CEA4FF',
+                borderColor: '#43008F',
+                tagBackgroundColor: tokens.colors.greySwatches[1000],
+            },
+            _d),
         dropdown: DropdownBaseColorTheme[ThemeMode.Dark],
@@ -703,2 +755,3 @@ chip: ChipBaseColorTheme[ThemeMode.Dark],
             textColor: tokens.colors.greyBlueSwatches[500],
+            disabledTextColor: tokens.colors.lightDisabledText,
             typingTextColor: tokens.colors.darkGray,
@@ -736,4 +789,4 @@ errorColor: '#FFF0F1',
         },
-        table: (_d = {},
-            _d[ComponentVariant.Default] = {
+        table: (_e = {},
+            _e[ComponentVariant.Default] = {
                 sortTextColor: tokens.colors.primarySwatches[800],
@@ -749,3 +802,3 @@ background: tokens.colors.white,
             },
-            _d[ComponentVariant.Striped] = {
+            _e[ComponentVariant.Striped] = {
                 sortTextColor: tokens.colors.primarySwatches[800],
@@ -762,3 +815,3 @@ background: tokens.colors.white,
             },
-            _d[ComponentVariant.Border] = {
+            _e[ComponentVariant.Border] = {
                 sortTextColor: tokens.colors.primarySwatches[800],
@@ -774,3 +827,3 @@ background: tokens.colors.white,
             },
-            _d[ComponentVariant.Dense] = {
+            _e[ComponentVariant.Dense] = {
                 sortTextColor: tokens.colors.primarySwatches[800],
@@ -786,3 +839,3 @@ background: tokens.colors.white,
             },
-            _d[ComponentVariant.XDense] = {
+            _e[ComponentVariant.XDense] = {
                 sortTextColor: tokens.colors.primarySwatches[800],
@@ -798,3 +851,3 @@ background: tokens.colors.white,
             },
-            _d),
+            _e),
         footer: {
@@ -905,2 +958,50 @@ backgroundColor: secondaryBackground,
         },
+        fileupload: FileUploadBaseColorTheme[ThemeMode.Light],
+        badges: (_f = {},
+            _f[BadgeType.NEUTRAL] = {
+                titleColor: primaryVariantText,
+                textColor: primaryVariantText,
+                backgroundColor: tokens.colors.white,
+                borderColor: lightModeBorder,
+                leadingIconColor: '#1D1E23',
+                trailingIconColor: '#1D1E23',
+                tagBackgroundColor: tokens.colors.greyBlueSwatches[50],
+            },
+            _f[BadgeType.POSITIVE] = {
+                titleColor: primaryVariantText,
+                textColor: primaryVariantText,
+                backgroundColor: '#ECFFF7',
+                borderColor: '#84DAB6',
+                leadingIconColor: '#00864F',
+                trailingIconColor: '#1D1E23',
+                tagBackgroundColor: tokens.colors.greyBlueSwatches[50],
+            },
+            _f[BadgeType.NEGATIVE] = {
+                titleColor: primaryVariantText,
+                textColor: primaryVariantText,
+                backgroundColor: '#FFF0F1',
+                borderColor: '#FF8692',
+                leadingIconColor: '#D70015',
+                trailingIconColor: '#1D1E23',
+                tagBackgroundColor: tokens.colors.greyBlueSwatches[50],
+            },
+            _f[BadgeType.WARNING] = {
+                titleColor: primaryVariantText,
+                textColor: primaryVariantText,
+                backgroundColor: '#FFFAF2',
+                borderColor: warningBorder,
+                leadingIconColor: '#FF9500',
+                trailingIconColor: '#1D1E23',
+                tagBackgroundColor: tokens.colors.greyBlueSwatches[50],
+            },
+            _f[BadgeType.INFO] = {
+                titleColor: primaryVariantText,
+                textColor: primaryVariantText,
+                backgroundColor: '#F7F0FF',
+                borderColor: '#CEA4FF',
+                leadingIconColor: '#6400D6',
+                trailingIconColor: '#1D1E23',
+                tagBackgroundColor: tokens.colors.greyBlueSwatches[50],
+            },
+            _f),
         dropdown: DropdownBaseColorTheme[ThemeMode.Light],
@@ -1047,2 +1148,4 @@ chip: ChipBaseColorTheme[ThemeMode.Light],
         },
+        fileupload: BaseFileUploadSpacing,
+        badges: BaseBadgesSpacing,
         dropdown: BaseDropdownSpacing,
@@ -1054,4 +1157,4 @@ pagination: {
         },
-        table: (_e = {},
-            _e[ComponentVariant.Default] = {
+        table: (_g = {},
+            _g[ComponentVariant.Default] = {
                 fontSize: largeLabelFontSize,
@@ -1069,3 +1172,3 @@ bodyFontSize: bodyMediumFontSize,
             },
-            _e[ComponentVariant.Striped] = {
+            _g[ComponentVariant.Striped] = {
                 fontSize: largeLabelFontSize,
@@ -1083,3 +1186,3 @@ bodyFontSize: bodyMediumFontSize,
             },
-            _e[ComponentVariant.Border] = {
+            _g[ComponentVariant.Border] = {
                 fontSize: largeLabelFontSize,
@@ -1097,3 +1200,3 @@ bodyFontSize: bodyMediumFontSize,
             },
-            _e[ComponentVariant.Dense] = {
+            _g[ComponentVariant.Dense] = {
                 fontSize: largeLabelFontSize,
@@ -1111,3 +1214,3 @@ bodyFontSize: bodyMediumFontSize,
             },
-            _e[ComponentVariant.XDense] = {
+            _g[ComponentVariant.XDense] = {
                 fontSize: largeLabelFontSize,
@@ -1125,3 +1228,3 @@ bodyFontSize: bodyMediumFontSize,
             },
-            _e),
+            _g),
         chip: ChipBaseSpacing,
@@ -1128,0 +1231,0 @@ dialog: DialogBaseSpacing,

components/Accordion/Accordion.d.ts

@@ -5,11 +5,18 @@ /// <reference types="react" />
 export interface AccordionProps {
-    children: JSX.Element | string;
-    style: Object;
+    children?: any;
+    style?: Object;
     title: string;
-    rounded: boolean;
-    disabled: boolean;
-    condensed: boolean;
+    rounded?: boolean;
+    disabled?: boolean;
+    condensed?: boolean;
 }
 export declare const Accordion: {
     ({ children, rounded, style, title, disabled, condensed }: AccordionProps): JSX.Element;
+    defaultProps: {
+        children: any;
+        style: {};
+        rounded: boolean;
+        disabled: boolean;
+        condensed: boolean;
+    };
     propTypes: {
@@ -16,0 +23,0 @@ /**

components/Accordion/Accordion.js

@@ -41,2 +41,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 };
+Accordion.defaultProps = {
+    children: null,
+    style: {},
+    rounded: false,
+    disabled: false,
+    condensed: false,
+};
 Accordion.propTypes = {
@@ -43,0 +50,0 @@ /**

components/Common/Item.d.ts

@@ -12,3 +12,3 @@ /// <reference types="react" />
     leading?: JSX.Element | string;
-    postfix?: string | string;
+    postfix?: JSX.Element | string;
     onClick?: () => void;
@@ -15,0 +15,0 @@ }

components/Dropdown/Dropdown.d.ts

@@ -0,1 +1,26 @@
+import React from 'react';
+import '@zebra-fed/icons/Navigation/index.css';
+import { PositionDirection, ShapeType, SizeType } from "../../interfaces";
+import CSS from "csstype";
+import { ItemProps } from "../Common/Item";
+export interface DropdownProps {
+    children: React.ReactElement<ItemProps>[];
+    className?: string;
+    condensed?: boolean;
+    direction?: PositionDirection.Top | PositionDirection.Bottom;
+    disabled?: boolean;
+    dropDownStyle?: CSS.Properties;
+    error?: string;
+    label?: string;
+    onBlur?: (val: string | number) => void;
+    onChange?: (val: string | number) => void;
+    placeholder?: string;
+    prefix?: JSX.Element | string;
+    readOnly?: boolean;
+    shape?: ShapeType;
+    size?: SizeType;
+    style?: CSS.Properties;
+    value?: string | number;
+    width?: string;
+}
 /**
@@ -5,39 +30,2 @@ * Dropdowns display a list of choices on temporary surfaces.
  */
-export function Dropdown(props: any): JSX.Element;
-export namespace Dropdown {
-    namespace propTypes {
-        const placeholder: PropTypes.Requireable<string>;
-        const style: PropTypes.Requireable<object>;
-        const dropDownStyle: PropTypes.Requireable<object>;
-        const defaultValue: PropTypes.Requireable<string>;
-        const items: PropTypes.Requireable<any[]>;
-        const type: PropTypes.Requireable<string>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const width: PropTypes.Requireable<string>;
-        const underline: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        const placeholder_1: string;
-        export { placeholder_1 as placeholder };
-        const style_1: {};
-        export { style_1 as style };
-        const dropDownStyle_1: {};
-        export { dropDownStyle_1 as dropDownStyle };
-        const defaultValue_1: string;
-        export { defaultValue_1 as defaultValue };
-        const items_1: any[];
-        export { items_1 as items };
-        export namespace iconName {
-            const active: string;
-            const inactive: string;
-        }
-        const type_1: string;
-        export { type_1 as type };
-        export const iconStyle: {};
-        const underline_1: boolean;
-        export { underline_1 as underline };
-        export function onChange_1(): boolean;
-        export { onChange_1 as onChange };
-    }
-}
-import PropTypes from "prop-types";
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>>;

components/Dropdown/Dropdown.js

@@ -1,95 +0,32 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dropdown = Dropdown;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _StripesTheme = require("../../StripesTheme");
-
-require("@zebra-fed/icons/Navigation/index.css");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    box-shadow: ", ";\n    cursor: pointer;\n    width: fit-content;\n    position: relative;\n    font-family: ", ";\n    color: ", ";\n    font-size: ", "rem;\n    height: ", "px;\n    > div {\n        overflow: hidden;\n    }\n    .dropDown {\n        display: inline-flex;\n        height: ", "px;\n        line-height: ", "px;\n        width: 100%;\n        background-color: ", ";\n        border-bottom: ", ";\n        position: relative;\n        > div:first-of-type:not(:empty) {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n        > div:empty:before {\n            content: attr(placeholder);\n            color: ", ";\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            position: absolute;\n            right: ", "px;\n            left: ", "px;\n        }\n    }\n    .dropDownList {\n        position: absolute;\n        top: ", "px;\n        width: 100%;\n        z-index:50;\n        background-color: ", ";\n        box-shadow: ", ";\n        height: ", ";\n        overflow-y: auto;\n        overflow-x: hidden;\n        margin: 0;\n        padding-left: 0px;\n        padding-right: 0px;\n        padding-top: ", "px;\n        padding-bottom: ", "px;\n        > li {\n            display: block;\n            overflow: hidden;\n            width: 100%;\n            height: ", "px;\n            padding-right: ", "px;\n            padding-left: ", "px;\n            line-height: ", "px;\n            text-overflow: ellipsis;\n            white-space: pre;\n            &:hover {\n                background-color: ", ";\n            }\n        }\n    }\n"])), function (props) {
-  return props.active ? props.colorObj.shadow : null;
-}, function (props) {
-  return props.fontFamilyObj;
-}, function (props) {
-  return props.colorObj.textColor;
-}, function (props) {
-  return props.spacingObj.fontSize;
-}, function (props) {
-  return props.spacingObj.height;
-}, function (props) {
-  return props.spacingObj.height;
-}, function (props) {
-  return props.spacingObj.lineHeight;
-}, function (props) {
-  return props.colorObj.backgroundColor;
-}, function (props) {
-  return props.underline ? "1px solid ".concat(props.colorObj.border) : 'none';
-}, function (props) {
-  return props.colorObj.placeholderColor;
-}, function (props) {
-  return props.spacingObj.padding * 4;
-}, function (props) {
-  return props.spacingObj.padding;
-}, function (props) {
-  return props.spacingObj.height;
-}, function (props) {
-  return props.colorObj.backgroundColor;
-}, function (props) {
-  return props.colorObj.shadow;
-}, function (props) {
-  return props.spacingObj.ulheight;
-}, function (props) {
-  return props.spacingObj.padding;
-}, function (props) {
-  return props.spacingObj.padding;
-}, function (props) {
-  return props.spacingObj.height;
-}, function (props) {
-  return props.spacingObj.padding;
-}, function (props) {
-  return props.spacingObj.padding;
-}, function (props) {
-  return props.spacingObj.lineHeight;
-}, function (props) {
-  return props.colorObj.backgroundHover;
-});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { StripesThemeContext } from '../../StripesTheme';
+// import { Icon } from 'desktop/react';
+import '@zebra-fed/icons/Navigation/index.css';
+import styled from 'styled-components';
+import * as _ from 'lodash';
+import { PositionDirection, ShapeType, SizeType } from "../../interfaces";
+import { TextField } from "../TextField/TextField";
+import { SVGIcon } from '../SVGIcon';
+import { DropdownMenu } from "./DropdownMenu";
+import { FixedPositioner } from "../Shared/FixedPositioner";
+import { ShapePropType } from "../../interfaces/ShapeType";
+import { SizePropType } from "../../interfaces/SizeType";
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  position: relative;\n  display: inline-block;\n  pointer-events: ", ";\n  .dropDownFixedPositioner {\n    z-index: 1000;\n    overflow: hidden;\n    max-height: 0;\n    &.active {\n      overflow: visible;\n      max-height: fit-content;\n    }\n    .DropDownItemList {\n      transform: translateX(-50%);\n      &.show_top {\n        transform: translateX(-50%);\n      }\n    }\n  }\n\n"], ["\n  width: ", ";\n  position: relative;\n  display: inline-block;\n  pointer-events: ", ";\n  .dropDownFixedPositioner {\n    z-index: 1000;\n    overflow: hidden;\n    max-height: 0;\n    &.active {\n      overflow: visible;\n      max-height: fit-content;\n    }\n    .DropDownItemList {\n      transform: translateX(-50%);\n      &.show_top {\n        transform: translateX(-50%);\n      }\n    }\n  }\n\n"])), function (props) { return props.width; }, function (props) { return props.disabled ? 'none' : 'auto'; });
+var SCROLL_THROTTLE = 150;
 /**
@@ -99,172 +36,164 @@ * Dropdowns display a list of choices on temporary surfaces.
  */
-
-
-function Dropdown(props) {
-  var myRef;
-  var inherit = 'dropdown';
-
-  var _useState = (0, _react.useState)(props.items),
-      _useState2 = _slicedToArray(_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      active = _useState4[0],
-      setActive = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      selected = _useState6[0],
-      setSelected = _useState6[1];
-
-  var context = (0, _react.useContext)(_StripesTheme.StripesThemeContext);
-  var spacing = context.getSpacing()[inherit][props.type];
-  var colors = context.getColors()[inherit];
-  (0, _react.useEffect)(function () {
-    var children = props.children;
-    var buildArr = [];
-
-    if (children) {
-      children.map(function (child) {
-        buildArr.push({
-          name: child.props.children,
-          value: child.props.value
-        });
-      });
-      setItems(buildArr);
-    }
-  }, [props.children]);
-  (0, _react.useEffect)(function () {
-    if (!active) {
-      return;
-    }
-
-    document.addEventListener("mousedown", listener);
-    return function () {
-      document.removeEventListener("mousedown", listener);
+export var Dropdown = forwardRef(function (props, ref) {
+    var _a = props.className, className = _a === void 0 ? '' : _a, _b = props.condensed, condensed = _b === void 0 ? false : _b, _c = props.direction, direction = _c === void 0 ? PositionDirection.Bottom : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.dropDownStyle, dropDownStyle = _e === void 0 ? {} : _e, _f = props.error, error = _f === void 0 ? null : _f, _g = props.shape, shape = _g === void 0 ? ShapeType.Sharp : _g, _h = props.label, label = _h === void 0 ? null : _h, _j = props.onBlur, onBlur = _j === void 0 ? function (val) { return false; } : _j, _k = props.onChange, onChange = _k === void 0 ? function (val) { return false; } : _k, _l = props.placeholder, placeholder = _l === void 0 ? null : _l, _m = props.prefix, prefix = _m === void 0 ? null : _m, _o = props.readOnly, readOnly = _o === void 0 ? false : _o, _p = props.size, size = _p === void 0 ? SizeType.Medium : _p, _q = props.style, style = _q === void 0 ? {} : _q, _r = props.value, value = _r === void 0 ? null : _r, _s = props.width, width = _s === void 0 ? '100%' : _s;
+    var type = 'dropdown';
+    var dropDownContainerRef = useRef(null);
+    var fixedPositionerRef = useRef(null);
+    var textFieldRef = useRef(null);
+    var parentDOMRef = useRef(null);
+    var _t = useState(false), active = _t[0], setActive = _t[1];
+    var isActiveRef = useRef(false);
+    var _u = useState('0'), yOffset = _u[0], setYOffset = _u[1];
+    var _v = useState(0), dropDownWidth = _v[0], setDropDownWidth = _v[1];
+    var _w = useState(direction), resolvedDirection = _w[0], setResolvedDirection = _w[1];
+    var _x = useState(value), currentValue = _x[0], setCurrentValue = _x[1];
+    var context = useContext(StripesThemeContext);
+    var spacing = context.getSpacing()[type];
+    var colors = context.getColors()[type];
+    useEffect(function () {
+        parentDOMRef.current = dropDownContainerRef.current.parentElement;
+        window.addEventListener("scroll", closePanel, true);
+        window.addEventListener("resize", _.debounce(function () { return calculateDropDownPosition(); }, SCROLL_THROTTLE), true);
+        calculateDropDownPosition();
+        return function () {
+            window.removeEventListener("scroll", closePanel, true);
+            window.removeEventListener("resize", calculateDropDownPosition, true);
+        };
+    }, []);
+    useEffect(function () {
+        isActiveRef.current = active;
+        document.addEventListener("mousedown", blurTest);
+        return function () {
+            document.removeEventListener("mousedown", blurTest);
+        };
+    }, [active]);
+    useEffect(function () {
+        onChange(currentValue);
+    }, [currentValue]);
+    useImperativeHandle(ref, function () { return ({
+        blur: blur
+    }); });
+    var handleDropDownItemSelect = function (val) {
+        setCurrentValue(val);
+        setActive(false);
     };
-  }, [active]);
-  (0, _react.useEffect)(function () {
-    if (props.defaultValue) {
-      setSelected(props.items.indexOf(props.items.find(function (item) {
-        return item.name === props.defaultValue;
-      })));
-    }
-  }, []);
-
-  var listener = function listener(event) {
-    if (!myRef || myRef.contains(event.target)) {
-      return;
-    }
-
-    setActive(false);
-  };
-
-  function drawSelection() {
-    if (selected == null) {
-      return '';
-    }
-
-    return items[selected].name;
-  }
-
-  function clickItem(i) {
-    if (selected !== i) {
-      setSelected(i);
-    }
-
-    setActive(!active);
-    props.onChange(i, items[i].name, items[i].value);
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(Container, {
-    fontFamilyObj: context.getFont(),
-    active: active,
-    style: _objectSpread(_objectSpread({}, props.style), {}, {
-      width: props.width || spacing.width
-    }),
-    colorObj: colors,
-    spacingObj: spacing,
-    ref: function ref(_ref) {
-      return myRef = _ref;
-    },
-    type: props.type,
-    underline: props.underline
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dropDown",
-    onClick: function onClick() {
-      return setActive(!active);
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    placeholder: props.placeholder,
-    style: {
-      width: '100%',
-      paddingLeft: spacing.padding + 'px',
-      paddingRight: spacing.padding + 'px'
-    }
-  }, drawSelection()), /*#__PURE__*/_react["default"].createElement("div", {
-    style: _objectSpread(_objectSpread({}, props.iconStyle), {}, {
-      display: 'grid',
-      lineHeight: 'normal',
-      margin: 'auto 0px auto auto',
-      paddingRight: (props.type !== 'xdense' ? spacing.padding * 2 : spacing.padding) + 'px'
-    })
-  })), active && /*#__PURE__*/_react["default"].createElement("ul", {
-    style: props.dropDownStyle,
-    className: "dropDownList"
-  }, items.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement("li", {
-      onClick: function onClick() {
-        return clickItem(index);
-      },
-      key: index
-    }, item.name || 'undefined value.');
-  })));
-}
-
+    /**
+     * This will test if the user blurred from the composite component, testing if
+     * the current target is not within the dropDown component.
+     * @param event
+     */
+    var blurTest = function (event) {
+        if (dropDownContainerRef.current.contains(event.target)) {
+            return;
+        }
+        onBlur(currentValue);
+        setActive(false);
+    };
+    var closePanel = function () {
+        if (isActiveRef.current) {
+            setActive(false);
+        }
+    };
+    /**
+     * Fired as soon as the component is rendered, and on every subsequent page
+     * scroll event, this will calculate the location of the fixedPositioner
+     * relative to the bottom of the page, forcing it to pop upwards if it will
+     * overflow off the bottom of the page.
+     */
+    var calculateDropDownPosition = function () {
+        var dropDownContainerRect = dropDownContainerRef.current.getBoundingClientRect();
+        var winHeight = window.innerHeight;
+        var dropDownDim = fixedPositionerRef.current.DOM.getElementsByTagName('ul')[0].getBoundingClientRect();
+        var dropY = (dropDownContainerRect.y + dropDownContainerRect.height);
+        if (dropY + dropDownDim.height > winHeight) {
+            setYOffset(((textFieldRef.current.DOM.offsetHeight) - dropDownDim.height + spacing.baseUnit * 2) + 'px');
+            setResolvedDirection(PositionDirection.Top);
+        }
+        else {
+            setYOffset('0');
+            setResolvedDirection(PositionDirection.Bottom);
+        }
+        fixedPositionerRef.current.resolvePanelPosition();
+    };
+    var toggleDropDown = function () {
+        calculateDropDownPosition();
+        setTimeout(function () {
+            if (readOnly || disabled) {
+                return;
+            }
+            if (!active) {
+                setDropDownWidth(textFieldRef.current.DOM.offsetWidth);
+                fixedPositionerRef.current.resolvePanelPosition();
+            }
+            setActive(!active);
+        }, 50);
+    };
+    var blur = function () {
+        dropDownContainerRef.current.blur();
+        onBlur(currentValue);
+    };
+    var getDropDownIcon = function () {
+        var iconSize = SizeType.Medium;
+        switch (size) {
+            case SizeType.XSmall:
+            case SizeType.Small:
+            case SizeType.Medium:
+                iconSize = size;
+                break;
+            case SizeType.Large:
+            case SizeType.XLarge:
+                iconSize = SizeType.Medium;
+                break;
+        }
+        return (React.createElement(SVGIcon, { iconid: active ? 'up' : 'down', color: colors.iconColor, size: iconSize }));
+    };
+    return (React.createElement(Container, { fontFamilyObj: context.getFont(condensed), active: active, width: width, disabled: disabled, style: __assign({}, style), colorObj: colors, spacingObj: spacing, className: "dropDown ".concat(className, " ").concat(active ? 'active' : ''), ref: dropDownContainerRef },
+        React.createElement(TextField, { onClick: toggleDropDown, value: currentValue, size: size, shape: shape, condensed: condensed, placeholder: placeholder, readOnly: true, error: error, style: { marginBottom: '0' }, ref: textFieldRef, label: label, disabled: disabled, postfix: getDropDownIcon(), prefix: prefix }),
+        React.createElement(FixedPositioner, { direction: resolvedDirection, className: "dropDownFixedPositioner ".concat(active ? 'active' : ''), ref: fixedPositionerRef, containingRef: dropDownContainerRef, offset: 1 - spacing.baseUnit },
+            React.createElement(DropdownMenu, { className: "DropDownItemList ".concat(resolvedDirection === PositionDirection.Top ? 'show_top' : ''), dropDownStyle: dropDownStyle, condensed: condensed, onChange: handleDropDownItemSelect, shape: shape, width: dropDownWidth + 'px', style: { marginTop: yOffset } }, props.children))));
+});
 Dropdown.propTypes = {
-  /**The default string used when no value has been set on the DropDown. */
-  placeholder: _propTypes["default"].string,
-
-  /**Extends the base styling of the dropdown element. */
-  style: _propTypes["default"].object,
-
-  /**Extends the base styling of the area where the menu items are displayed. */
-  dropDownStyle: _propTypes["default"].object,
-
-  /**The name of the initial value setting for the DropDown. This will overwrite the placeholder. Given name must be in the items array. */
-  defaultValue: _propTypes["default"].string,
-
-  /**The array of items in the dropdown */
-  items: _propTypes["default"].array,
-
-  /**Inherits styling based on the type of dropdown to display. Values are default and dense.*/
-  type: _propTypes["default"].string,
-
-  /**The callback function that is fired when the value of the dropdown is changed. */
-  onChange: _propTypes["default"].func,
-
-  /**Overrides the width of the dropdown. */
-  width: _propTypes["default"].string,
-
-  /**Removed the underline from the dropdown. */
-  underline: _propTypes["default"].bool
+    /** children props to render */
+    children: PropTypes.arrayOf(PropTypes.element),
+    /** the class to add to the root of the component */
+    className: PropTypes.string,
+    /** condensed text bool */
+    condensed: PropTypes.bool,
+    /** The direction the dropdown menu should appear by default */
+    direction: PropTypes.oneOf([PositionDirection.Top, PositionDirection.Bottom]),
+    /** Toggle to enable and disable the TextBox input. */
+    disabled: PropTypes.bool,
+    /** style object for the dropdown */
+    dropDownStyle: PropTypes.object,
+    /** The string value to show formatted as an error message below the dropdown */
+    error: PropTypes.string,
+    /**Adding a label will put the element above the input field and bind it to the input container. */
+    label: PropTypes.string,
+    /**Callback function that is fired when the input is blurred. */
+    onBlur: PropTypes.func,
+    /**Callback function that is fired when the input's value is changed, either by user input or programatically. */
+    onChange: PropTypes.func,
+    /**The default string used when no value has been set on the DropDown. */
+    placeholder: PropTypes.string,
+    /**Content to be displayed before the text in the field */
+    prefix: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+    ]),
+    /** The values will only show as read only, unchangeable, but will not be styled like disabled. */
+    readOnly: PropTypes.bool,
+    /** The shape defined for the input element */
+    shape: ShapePropType,
+    /**Determines the size of the text field */
+    size: SizePropType,
+    /**Extends the base styling of the dropdown element. */
+    style: PropTypes.object,
+    /**The current value of the input, which should be maintained by the parent element through utilizing the onChange callback. */
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+    /**Overrides the width of the dropdown. */
+    width: PropTypes.string,
 };
-Dropdown.defaultProps = {
-  placeholder: '',
-  style: {},
-  dropDownStyle: {},
-  defaultValue: '',
-  items: [],
-  iconName: {
-    active: 'up',
-    inactive: 'down'
-  },
-  type: 'default',
-  iconStyle: {},
-  underline: true,
-  onChange: function onChange() {
-    return false;
-  }
-};
+var templateObject_1;

components/Dropdown/DropdownMenu.d.ts

 import PropTypes from 'prop-types';
 import React from 'react';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ShapeType } from '../../interfaces/ShapeType';
+import { ShapeType } from '../../interfaces';
 import { ItemProps } from '../Common/Item';
@@ -16,2 +16,3 @@ export interface DropdownMenuItemInterface {
 export interface DropdownMenuProps {
+    className?: string;
     enableMultiSelect?: boolean;
@@ -22,5 +23,6 @@ dropDownStyle?: object;
     width?: string;
+    height?: string;
     shape?: ShapeType;
     children: React.ReactElement<ItemProps>[];
-    callback?: () => void;
+    onChange?: (val: string | number) => void;
 }
@@ -33,3 +35,3 @@ export declare enum DropDownMenuItem {
 export declare const DropdownMenu: {
-    ({ style, width, dropDownStyle, condensed, enableMultiSelect, children, shape, callback, }: DropdownMenuProps): JSX.Element;
+    ({ className, style, width, height, dropDownStyle, condensed, enableMultiSelect, children, shape, onChange, }: DropdownMenuProps): JSX.Element;
     propTypes: {
@@ -39,4 +41,8 @@ /**
          */
-        children: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        children: PropTypes.Requireable<PropTypes.ReactElementLike[]>;
         /**
+         * the class to add to the root of the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
          * Shape of the dropdown menu borders
@@ -69,5 +75,10 @@ * */
         width: PropTypes.Requireable<string>;
+        /**
+         * override height of the list
+         */
+        height: PropTypes.Requireable<string>;
     };
     defaultProps: {
         shape: ShapeType;
+        className: string;
         children: any;
@@ -79,3 +90,4 @@ dropDownStyle: {};
         width: string;
+        height: string;
     };
 };

components/Dropdown/DropdownMenu.js

@@ -21,4 +21,4 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled from 'styled-components';
-import { ShapeType } from '../../interfaces/ShapeType';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    cursor: pointer;\n    width: ", ";\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    .dropDownList {\n        position: initial;\n        top: ", "px;\n        border-radius ", "px;\n        width: 100%;\n        z-index:50;\n        background-color: ", ";\n        box-shadow: ", ";\n        height: ", ";\n        overflow-y: auto;\n        overflow-x: hidden;\n        margin: 0;\n        padding-left: 0px;\n        padding-right: 0px;\n        padding-top: ", "px;\n        padding-bottom: ", "px;\n    }\n"], ["\n    position: absolute;\n    cursor: pointer;\n    width: ", ";\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    .dropDownList {\n        position: initial;\n        top: ", "px;\n        border-radius ", "px;\n        width: 100%;\n        z-index:50;\n        background-color: ", ";\n        box-shadow: ", ";\n        height: ", ";\n        overflow-y: auto;\n        overflow-x: hidden;\n        margin: 0;\n        padding-left: 0px;\n        padding-right: 0px;\n        padding-top: ", "px;\n        padding-bottom: ", "px;\n    }\n"])), function (props) { return props.width ? props.width : 'fit-content'; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.colorObj.textColor; }, function (props) { return props.spacingObj.fontSize; }, function (props) { return props.spacingObj.height; }, function (props) { return props.isRounded ? props.spacingObj.padding / 2 : 0; }, function (props) { return props.colorObj.backgroundColor; }, function (props) { return props.colorObj.shadow; }, function (props) { return props.spacingObj.ulheight; }, function (props) { return props.spacingObj.padding; }, function (props) { return props.spacingObj.padding; });
+import { ShapeType } from '../../interfaces';
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    cursor: pointer;\n    width: ", ";\n    height: ", ";\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    .dropDownList {\n        position: initial;\n        top: ", "px;\n        border-radius ", "px;\n        width: 100%;\n        z-index:50;\n        background-color: ", ";\n        box-shadow: ", ";\n        height: 100%;\n        overflow-y: auto;\n        overflow-x: hidden;\n        margin: 0;\n        padding-left: 0px;\n        padding-right: 0px;\n        padding-top: ", "px;\n        padding-bottom: ", "px;\n    }\n"], ["\n    position: absolute;\n    cursor: pointer;\n    width: ", ";\n    height: ", ";\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    .dropDownList {\n        position: initial;\n        top: ", "px;\n        border-radius ", "px;\n        width: 100%;\n        z-index:50;\n        background-color: ", ";\n        box-shadow: ", ";\n        height: 100%;\n        overflow-y: auto;\n        overflow-x: hidden;\n        margin: 0;\n        padding-left: 0px;\n        padding-right: 0px;\n        padding-top: ", "px;\n        padding-bottom: ", "px;\n    }\n"])), function (props) { return props.width ? props.width : 'fit-content'; }, function (props) { return props.height ? props.height : 'fit-content'; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.colorObj.textColor; }, function (props) { return props.spacingObj.fontSize; }, function (props) { return props.spacingObj.height; }, function (props) { return props.isRounded ? props.spacingObj.padding / 2 : 0; }, function (props) { return props.colorObj.backgroundColor; }, function (props) { return props.colorObj.shadow; }, function (props) { return props.spacingObj.padding; }, function (props) { return props.spacingObj.padding; });
 var DropDownItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n  background-color: ", ";\n  height: ", "px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n  line-height: ", "px;\n  text-overflow: ellipsis;\n  white-space: pre;\n  &:hover {\n      background-color: ", ";\n  }\n  .dropDownItemPostfix {\n    margin-left: ", "px;\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n  background-color: ", ";\n  height: ", "px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n  line-height: ", "px;\n  text-overflow: ellipsis;\n  white-space: pre;\n  &:hover {\n      background-color: ", ";\n  }\n  .dropDownItemPostfix {\n    margin-left: ", "px;\n    color: ", ";\n  }\n"])), function (props) { return props.isSelected
@@ -34,5 +34,5 @@ ? props.colorObj.selectedBackgroundColor
 export var DropdownMenu = function (_a) {
-    var style = _a.style, width = _a.width, dropDownStyle = _a.dropDownStyle, condensed = _a.condensed, enableMultiSelect = _a.enableMultiSelect, children = _a.children, shape = _a.shape, callback = _a.callback;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, width = _a.width, height = _a.height, dropDownStyle = _a.dropDownStyle, condensed = _a.condensed, enableMultiSelect = _a.enableMultiSelect, children = _a.children, shape = _a.shape, _c = _a.onChange, onChange = _c === void 0 ? function (val) { return false; } : _c;
     var inherit = 'dropdown';
-    var _b = useState({}), selected = _b[0], setSelected = _b[1];
+    var _d = useState({}), selected = _d[0], setSelected = _d[1];
     var context = useContext(StripesThemeContext);
@@ -49,7 +49,8 @@ var spacing = context.getSpacing()[inherit];
         (_b = item === null || item === void 0 ? void 0 : item.props) === null || _b === void 0 ? void 0 : _b.onClick();
-        callback === null || callback === void 0 ? void 0 : callback();
+        onChange(item.props.value);
     };
     var itemsMap = children === null || children === void 0 ? void 0 : children.map(function (item, index) {
         var _a, _b, _c, _d, _e;
-        return (React.createElement(DropDownItem, { colorObj: colors, spacingObj: spacing, isSelected: selected[index], onClick: function () {
+        return (React.createElement(DropDownItem, { className: item.props.className, colorObj: colors, spacingObj: spacing, isSelected: selected[index], onClick: function () {
+                console.log('clikc????');
                 clickItem(index, item);
@@ -61,3 +62,3 @@ }, key: index },
     });
-    return (React.createElement(Container, { style: style, fontFamilyObj: context.getFont(condensed), colorObj: colors, spacingObj: spacing, width: width, isRounded: shape === ShapeType.Round || shape === ShapeType.Rounded },
+    return (React.createElement(Container, { style: style, fontFamilyObj: context.getFont(condensed), colorObj: colors, spacingObj: spacing, width: width, height: height, isRounded: shape === ShapeType.Round || shape === ShapeType.Rounded, className: className },
         React.createElement("ul", { style: dropDownStyle, className: "dropDownList" }, itemsMap)));
@@ -69,4 +70,8 @@ };
      */
-    children: PropTypes.element,
+    children: PropTypes.arrayOf(PropTypes.element),
     /**
+     * the class to add to the root of the component
+     */
+    className: PropTypes.string,
+    /**
      * Shape of the dropdown menu borders
@@ -99,5 +104,10 @@ * */
     width: PropTypes.string,
+    /**
+     * override height of the list
+     */
+    height: PropTypes.string,
 };
 DropdownMenu.defaultProps = {
     shape: ShapeType.Sharp,
+    className: '',
     children: null,
@@ -109,3 +119,4 @@ dropDownStyle: {},
     width: '',
+    height: '',
 };
 var templateObject_1, templateObject_2;

components/index.d.ts

 import Accordion from "./Accordion";
 import Avatar from "./Avatar";
+import { Badge } from "./Badges";
 import { Box } from "./Common";
@@ -17,3 +18,5 @@ import Breadcrumb from "./Breadcrumb";
 import Footer from "./Footer";
+import { FileUpload } from "./FileUpload";
 import Header from "./Header";
+import { Label } from "./Badges";
 import Loader from "./Loader";
@@ -39,2 +42,3 @@ import { MultipleColumns } from "./Common";
 import { TableFooter } from "./Table";
+import { Tag } from "./Badges";
 import TabMenu from "./TabMenu";
@@ -44,2 +48,3 @@ import TextField from "./TextField";
 import ToolTip from "./ToolTip";
-export { Accordion, Avatar, Box, Breadcrumb, Button, FAB, Card, Checkbox, CheckboxGroup, Chip, Dialog, Dropdown, DropdownMenu, Icon, Item, Footer, Header, Loader, MultipleColumns, NavDrawer, NavigationItem, NavigationRail, PageBanner, Pagination, ProgressIndicator, ProgressStepper, RadioButtonGroup, RangeSlider, RangeSliderInput, Slider, SliderInput, Snackbar, Switch, SystemBanner, SVGIcon, Table, TableFooter, TabMenu, TextField, TimePicker, ToolTip };
+import { UploadItem } from "./FileUpload";
+export { Accordion, Avatar, Badge, Box, Breadcrumb, Button, FAB, Card, Checkbox, CheckboxGroup, Chip, Dialog, Dropdown, DropdownMenu, Icon, Item, Footer, FileUpload, Header, Label, Loader, MultipleColumns, NavDrawer, NavigationItem, NavigationRail, PageBanner, Pagination, ProgressIndicator, ProgressStepper, RadioButtonGroup, RangeSlider, RangeSliderInput, Slider, SliderInput, Snackbar, Switch, SystemBanner, SVGIcon, Table, TableFooter, Tag, TabMenu, TextField, TimePicker, ToolTip, UploadItem };

components/index.js

@@ -20,2 +20,8 @@ "use strict";
 });
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function get() {
+    return _Badges.Badge;
+  }
+});
 Object.defineProperty(exports, "Box", {
@@ -87,2 +93,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "FileUpload", {
+  enumerable: true,
+  get: function get() {
+    return _FileUpload.FileUpload;
+  }
+});
 Object.defineProperty(exports, "Footer", {
@@ -112,2 +124,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _Badges.Label;
+  }
+});
 Object.defineProperty(exports, "Loader", {
@@ -239,2 +257,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Badges.Tag;
+  }
+});
 Object.defineProperty(exports, "TextField", {
@@ -258,2 +282,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "UploadItem", {
+  enumerable: true,
+  get: function get() {
+    return _FileUpload.UploadItem;
+  }
+});
 
@@ -344,2 +374,6 @@ require("@fontsource/ibm-plex-sans/100.css");
 
+var _FileUpload = require("./FileUpload");
+
+var _Badges = require("./Badges");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -346,0 +380,0 @@

components/Navigation/NavigationItem.d.ts

@@ -16,6 +16,7 @@ /// <reference types="react" />
     dropdownWidth?: DropdownWidth;
+    dropdownHeight?: string;
     size?: SizeType;
 }
 export declare const NavigationItem: {
-    ({ type, iconid, dropdown, dropdownItems, dropdownWidth, leading, children, onClick, disabled, size, }: NavigationItemProps): JSX.Element;
+    ({ type, iconid, dropdown, dropdownItems, dropdownWidth, dropdownHeight, leading, children, onClick, disabled, size, }: NavigationItemProps): JSX.Element;
     defaultProps: {
@@ -29,2 +30,3 @@ onClick: () => void;
         children: any;
+        dropdownHeight: string;
         dropdownWidth: DropdownWidth;
@@ -70,3 +72,7 @@ size: SizeType;
         dropdownWidth: PropTypes.Requireable<string>;
+        /**
+       * height of the dropdown in pixels
+       */
+        dropdownHeight: PropTypes.Requireable<string>;
     };
 };

components/Navigation/NavigationItem.js

@@ -15,6 +15,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { DropdownWidth } from '../../interfaces';
-var DropdownContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline;\n  position: relative;\n  cursor: pointer;\n\n  .dropdown_content {\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    left: ", ";\n    top: 50%;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);\n    padding: ", ";\n    width: fit-content;\n    z-index: 3000;\n    transform: translateY(-50%);\n    word-break: break-word;\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: normal;\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n\n    &.visible {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &.bottom {\n    .dropdown_content {\n      left: 50%;\n      right: auto;\n    }\n  }\n"], ["\n  display: inline;\n  position: relative;\n  cursor: pointer;\n\n  .dropdown_content {\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    left: ", ";\n    top: 50%;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);\n    padding: ", ";\n    width: fit-content;\n    z-index: 3000;\n    transform: translateY(-50%);\n    word-break: break-word;\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: normal;\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n\n    &.visible {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &.bottom {\n    .dropdown_content {\n      left: 50%;\n      right: auto;\n    }\n  }\n"])), function (props) { return 'calc(100% + ' + props.spacingObj.baseUnit * 1.5 + 'px)'; }, function (props) { return props.spacingObj.baseUnit / 2 + 'px ' + props.spacingObj.baseUnit + 'px'; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.fontSize; }, function (props) { return props.spacingObj.lineHeight; }, function (props) { return props.colors.textColor; });
+var DropdownContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline;\n  position: relative;\n  cursor: pointer;\n\n  .dropdown_content {\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    left: ", ";\n    top: 50%;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);\n    padding: ", ";\n    width: fit-content;\n    transform: translateY(-50%);\n    word-break: break-word;\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: normal;\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n\n    &.visible {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &.bottom {\n    .dropdown_content {\n      left: 50%;\n      right: auto;\n    }\n  }\n"], ["\n  display: inline;\n  position: relative;\n  cursor: pointer;\n\n  .dropdown_content {\n    visibility: hidden;\n    opacity: 0;\n    position: absolute;\n    left: ", ";\n    top: 50%;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);\n    padding: ", ";\n    width: fit-content;\n    transform: translateY(-50%);\n    word-break: break-word;\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: normal;\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n\n    &.visible {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &.bottom {\n    .dropdown_content {\n      left: 50%;\n      right: auto;\n    }\n  }\n"])), function (props) { return 'calc(100% + ' + props.spacingObj.baseUnit * 1.5 + 'px)'; }, function (props) { return props.spacingObj.baseUnit / 2 + 'px ' + props.spacingObj.baseUnit + 'px'; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.fontSize; }, function (props) { return props.spacingObj.lineHeight; }, function (props) { return props.colors.textColor; });
 export var NavigationItem = function (_a) {
     var _b, _c;
-    var type = _a.type, iconid = _a.iconid, dropdown = _a.dropdown, dropdownItems = _a.dropdownItems, dropdownWidth = _a.dropdownWidth, leading = _a.leading, children = _a.children, onClick = _a.onClick, disabled = _a.disabled, size = _a.size;
+    var type = _a.type, iconid = _a.iconid, dropdown = _a.dropdown, dropdownItems = _a.dropdownItems, dropdownWidth = _a.dropdownWidth, dropdownHeight = _a.dropdownHeight, leading = _a.leading, children = _a.children, onClick = _a.onClick, disabled = _a.disabled, size = _a.size;
     var timeoutRef = useRef(null);
@@ -46,3 +46,3 @@ var dropdownDOMRef = useRef(null);
     };
-    var onMouseLeave = function () {
+    var closeDropdown = function () {
         if (dropdown || disabled) {
@@ -57,9 +57,12 @@ clearTimeout(timeoutRef.current);
         }
-        if (dropdown) {
-            setShow(!show);
+        if (visible) {
+            closeDropdown();
         }
+        else {
+            showDropdown();
+        }
         onClick();
     };
-    return (React.createElement(DropdownContainer, { className: "Dropdown ".concat(PositionDirection.Bottom), colors: colors, spacingObj: spacing, fontFamilyObj: context.getFont(), onMouseEnter: showDropdown, onMouseLeave: onMouseLeave, ref: dropdownDOMRef },
-        React.createElement(Button, { type: type, size: size, large: true, disabled: disabled, onClick: navigationItemClick, leading: leading, trailing: dropdown ? React.createElement(SVGIcon, { size: SizeType.Small, color: colors.iconColor, iconid: iconid }) : null }, children),
+    return (React.createElement(DropdownContainer, { className: "Dropdown ".concat(PositionDirection.Bottom), colors: colors, spacingObj: spacing, fontFamilyObj: context.getFont(), onMouseEnter: showDropdown, onMouseLeave: closeDropdown, ref: dropdownDOMRef },
+        React.createElement(Button, { type: type, size: size, large: true, disabled: disabled, onClick: navigationItemClick, leading: leading, trailing: dropdown ? React.createElement(SVGIcon, { size: SizeType.Small, color: colors.iconColor, iconid: visible ? 'up' : iconid }) : null }, children),
         dropdown &&
@@ -69,3 +72,3 @@ React.createElement(FixedPositioner, { style: {
                 }, direction: PositionDirection.Bottom, className: "dropdown_content ".concat(visible ? 'visible' : ''), center: false, ref: fixedPositionerRef, containingRef: dropdownDOMRef },
-                React.createElement(DropdownMenu, { callback: function () { return setVisible(false); }, width: dropdownWidth === DropdownWidth.ParentWidth ? "".concat((_c = (_b = dropdownDOMRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0, "px")
+                React.createElement(DropdownMenu, { onChange: function () { return setVisible(false); }, height: dropdownHeight, width: dropdownWidth === DropdownWidth.ParentWidth ? "".concat((_c = (_b = dropdownDOMRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0, "px")
                         : 'max-content' }, dropdownItems === null || dropdownItems === void 0 ? void 0 : dropdownItems.map(function (item) { return item; })))));
@@ -81,2 +84,3 @@ };
     children: null,
+    dropdownHeight: '',
     dropdownWidth: DropdownWidth.ContentWidth,
@@ -122,3 +126,7 @@ size: SizeType.Medium,
     dropdownWidth: PropTypes.string,
+    /**
+   * height of the dropdown in pixels
+   */
+    dropdownHeight: PropTypes.string,
 };
 var templateObject_1;

components/Shared/FixedPositioner.d.ts

 import React, { MutableRefObject } from 'react';
-import { PositionDirection } from "../../interfaces/PositionDirection";
+import { PositionDirection } from "../../interfaces";
 export interface IFixedPositionerProps {
@@ -4,0 +4,0 @@ children: string | JSX.Element | JSX.Element[];

components/Shared/FixedPositioner.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import PropTypes from 'prop-types';
-import { PositionDirection } from "../../interfaces/PositionDirection";
+import { PositionDirection } from "../../interfaces";
 /**
@@ -31,2 +31,3 @@ * This element is a generic fixed positioning control that traverses the DOM's
         resolvePanelPosition: resolvePanelPosition,
+        DOM: positionedContentDOMRef.current,
     }); });
@@ -33,0 +34,0 @@ /**

components/TextField/InputsColorTheme.d.ts

 export interface InputsColorTheme {
     textColor: string;
+    disabledTextColor: string;
     typingTextColor: string;
@@ -4,0 +5,0 @@ errorColor: string;

components/TextField/TextField.d.ts

@@ -7,2 +7,5 @@ import React, { SyntheticEvent } from 'react';
 import { AnnotationPosition } from '../../interfaces';
+export declare const TextFieldComposition: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+}, never>;
 export interface TextFieldProps {
@@ -9,0 +12,0 @@ autoComplete?: string;

components/TextField/TextField.js

@@ -0,1 +1,5 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useContext, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
@@ -12,3 +16,5 @@ import PropTypes from 'prop-types';
 import { HintMessage, TextFieldWrapper } from "./TextFieldWrapper";
+import styled from "styled-components";
 var tabIndexVal = 1;
+export var TextFieldComposition = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  display: inline-block;\n  position: relative;\n"], ["\n  width: ", ";\n  display: inline-block;\n  position: relative;\n"])), function (props) { return props.width; });
 /**
@@ -33,2 +39,3 @@ * The Text Field component is used for text input. It has in-built error handling and displaying functionality.
     var valueApplied = useRef(null);
+    var rootTextFieldRef = useRef(null);
     var error = useErrorHandler(value, errorRequirements, type);
@@ -58,3 +65,4 @@ useEffect(function () {
     useImperativeHandle(ref, function () { return ({
-        blur: blur
+        blur: blur,
+        DOM: rootTextFieldRef.current,
     }); });
@@ -249,5 +257,8 @@ var getSize = function () {
     var height = getSize();
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(TextFieldComposition, { width: width, style: style },
         label && React.createElement(LabelWrapper, { fontFamilyObj: context.getFont(condensed), spacingObj: spacing, colors: color }, label),
-        React.createElement(TextFieldWrapper, { className: (active ? 'active ' : '') + className, style: style, shape: shape, error: !!props.error || error.props.children || invalid, colors: color, size: size, height: height, spacingObj: spacing, disabled: disabled, postfix: !!postfix, postFixWidth: postFixWidth, preFixWidth: preFixWidth, inputType: inputType, showSuggestions: showSuggestions, elementType: elementType, fontFamilyObj: context.getFont(condensed), width: width },
+        React.createElement(TextFieldWrapper, { className: (active ? 'active ' : '') + className, ref: rootTextFieldRef, shape: shape, error: !!props.error || error.props.children || invalid, colors: color, size: size, height: height, spacingObj: spacing, disabled: disabled, postfix: !!postfix, postFixWidth: postFixWidth, preFixWidth: preFixWidth, inputType: inputType, showSuggestions: showSuggestions, elementType: elementType, fontFamilyObj: context.getFont(condensed), width: width, onClick: function (e) {
+                setActive(true);
+                onClick(e);
+            } },
             prefix &&
@@ -262,6 +273,3 @@ React.createElement("div", { ref: prefixRef, className: 'prefix' },
             elementType === 'input' ?
-                React.createElement("input", { key: 'input', ref: textInput, style: inputStyle, value: value, type: inputType, name: name, disabled: disabled, readOnly: readOnly, onClick: function (e) {
-                        setActive(true);
-                        onClick(e);
-                    }, min: range && range[0], max: range && range[1], step: step, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, onKeyPress: inputKeyPress, onBlur: onCompleteInputBlur, onChange: onValueChange, tabIndex: tabIndex, maxLength: maxLength, placeholder: placeholder, autoComplete: autoComplete }) :
+                React.createElement("input", { key: 'input', ref: textInput, style: inputStyle, value: value, type: inputType, name: name, disabled: disabled, readOnly: readOnly, min: range && range[0], max: range && range[1], step: step, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, onKeyPress: inputKeyPress, onBlur: onCompleteInputBlur, onChange: onValueChange, tabIndex: tabIndex, maxLength: maxLength, placeholder: placeholder, autoComplete: autoComplete }) :
                 React.createElement("textarea", { key: 'input', ref: textInput, style: inputStyle, value: value, name: name, disabled: disabled, readOnly: readOnly, onClick: function (e) {
@@ -352,1 +360,2 @@ setActive(true);
 };
+var templateObject_1;

components/TextField/TextFieldWrapper.d.ts

 import { InputsSpacingTheme } from "../../interfaces/SpacingTheme";
 import { InputsColorTheme } from "./InputsColorTheme";
-import { ShapeType } from "../../interfaces/ShapeType";
-import { SizeType } from "../../interfaces/SizeType";
-import { InputType } from "../../interfaces/InputType";
+import { ShapeType, SizeType, InputType } from "../../interfaces";
 export declare const HintMessage: import("styled-components").StyledComponent<"div", any, {
@@ -7,0 +5,0 @@ fontFamilyObj: string;

components/TextField/TextFieldWrapper.js

@@ -9,6 +9,4 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled from "styled-components";
-import { ShapeType } from "../../interfaces/ShapeType";
-import { SizeType } from "../../interfaces/SizeType";
-import { InputType } from "../../interfaces/InputType";
-export var HintMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ndisplay: flex;\nfont-family: ", ";\n> .input_error {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n> .input_hint {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n"], ["\ndisplay: flex;\nfont-family: ", ";\n> .input_error {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n> .input_hint {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.bodySmallFontSize; }, function (props) { return props.colors.errorBorderColor; }, function (props) { return props.spacingObj.bodySmallFontSize; }, function (props) { return props.colors.textColor; });
+import { ShapeType, SizeType, InputType } from "../../interfaces";
+export var HintMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  font-family: ", ";\n  > .input_error {\n      display: flex;\n      font-size: ", ";\n      text-align: left;\n      color: ", ";\n      &:empty {\n          display:none;\n      }\n  }\n  > .input_hint {\n      display: flex;\n      font-size: ", ";\n      text-align: left;\n      color: ", ";\n      &:empty {\n          display:none;\n      }\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  font-family: ", ";\n  > .input_error {\n      display: flex;\n      font-size: ", ";\n      text-align: left;\n      color: ", ";\n      &:empty {\n          display:none;\n      }\n  }\n  > .input_hint {\n      display: flex;\n      font-size: ", ";\n      text-align: left;\n      color: ", ";\n      &:empty {\n          display:none;\n      }\n  }\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.bodySmallFontSize; }, function (props) { return props.colors.errorBorderColor; }, function (props) { return props.spacingObj.bodySmallFontSize; }, function (props) { return props.colors.textColor; });
 var calcPaddingLeft = function (preFixWidth, spacingObj) {
@@ -21,8 +19,8 @@ return preFixWidth ? spacingObj.padding + preFixWidth : spacingObj.padding * 1.5;
 };
-export var TextFieldWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(", " - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        position: relative;\n        &::-webkit-outer-spin-button,\n        &::-webkit-inner-spin-button {\n          margin-left: ", "px;\n          width: ", "px;\n        }\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"], ["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(", " - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        position: relative;\n        &::-webkit-outer-spin-button,\n        &::-webkit-inner-spin-button {\n          margin-left: ", "px;\n          width: ", "px;\n        }\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.shape !== ShapeType.Sharp ? props.spacingObj.padding / 2 : 0; }, function (props) { return props.elementType === 'textarea' ? props.height * 2.5 : props.height; }, function (props) { return props.colors.textColor; }, function (props) { return props.height; }, function (props) { return !!props.error ? props.colors.errorBorderColor : props.colors.borderColor; }, function (props) { return calcPaddingLeft(props.preFixWidth, props.spacingObj); }, function (props) { return calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj); }, function (props) { return props.width; }, function (props) { return (calcPaddingLeft(props.preFixWidth, props.spacingObj) + (calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj))); }, function (props) { return (props.showSuggestions ? '0' : props.spacingObj.margin) + 'px 0'; }, function (props) { return props.disabled ? props.colors.idleBorderColor
+export var TextFieldWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(100% - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    pointer-events: ", ";\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        position: relative;\n        &::-webkit-outer-spin-button,\n        &::-webkit-inner-spin-button {\n          margin-left: ", "px;\n          width: ", "px;\n        }\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"], ["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(100% - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    pointer-events: ", ";\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        position: relative;\n        &::-webkit-outer-spin-button,\n        &::-webkit-inner-spin-button {\n          margin-left: ", "px;\n          width: ", "px;\n        }\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.shape !== ShapeType.Sharp ? props.spacingObj.padding / 2 : 0; }, function (props) { return props.elementType === 'textarea' ? props.height * 2.5 : props.height; }, function (props) { return props.colors.textColor; }, function (props) { return props.height; }, function (props) { return !!props.error ? props.colors.errorBorderColor : props.colors.borderColor; }, function (props) { return calcPaddingLeft(props.preFixWidth, props.spacingObj); }, function (props) { return calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj); }, function (props) { return (calcPaddingLeft(props.preFixWidth, props.spacingObj) + (calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj))); }, function (props) { return (props.showSuggestions ? '0' : props.spacingObj.margin) + 'px 0'; }, function (props) { return props.disabled ? props.colors.idleBorderColor
     : (!!props.error || props.error)
         ? props.colors.errorBackgroundColor
-        : props.colors.backgroundColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.elementType === 'textarea' ? 'normal' : "".concat(props.height, "px"); }, function (props) { return props.inputType === InputType.Number ? 0 : props.postFixWidth; }, function (props) { return props.postFixWidth - (props.spacingObj.margin * 2); }, function (props) { return props.spacingObj.margin * 3; }, function (props) { return props.colors.typingTextColor; }, function (props) { return (props.size === SizeType.XSmall || props.size === SizeType.Small)
+        : props.colors.backgroundColor; }, function (props) { return props.disabled ? 'none' : 'auto'; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.elementType === 'textarea' ? 'normal' : "".concat(props.height, "px"); }, function (props) { return props.inputType === InputType.Number ? 0 : props.postFixWidth; }, function (props) { return props.postFixWidth - (props.spacingObj.margin * 2); }, function (props) { return props.spacingObj.margin * 3; }, function (props) { return props.disabled ? props.colors.disabledTextColor : props.colors.typingTextColor; }, function (props) { return (props.size === SizeType.XSmall || props.size === SizeType.Small)
     ? props.spacingObj.bodyMediumFontSize
     : props.spacingObj.bodyLargeFontSize; }, function (props) { return props.elementType === 'textarea' ? props.spacingObj.padding + 'px' : 0; }, function (props) { return props.colors.textColor; }, function (props) { return props.colors.textColor; }, function (props) { return props.spacingObj.fontSize; }, function (props) { return 2 * props.spacingObj.padding; }, function (props) { return 2 * props.spacingObj.padding; }, function (props) { return 1.5 * props.spacingObj.padding; }, function (props) { return 1.5 * props.spacingObj.padding; });
 var templateObject_1, templateObject_2;

interfaces/ColorTheme.d.ts

@@ -25,2 +25,4 @@ import { AccordionColorTheme } from "../components/Accordion/AccordionColorTheme";
 import { ProgressStepperColorTheme } from "../components/ProgressIndicator/ProgressStepperColorTheme";
+import { FileUploadColorTheme } from "../components/FileUpload/FileUploadColorTheme";
+import { BadgesBaseColorTheme } from "../components/Badges/BadgesColorTheme";
 export interface InverseColorTheme {
@@ -231,2 +233,4 @@ textColor: string;
     progressStepper: ProgressStepperColorTheme;
+    fileupload: FileUploadColorTheme;
+    badges: BadgesBaseColorTheme;
     dropdown: DropdownColorTheme;
@@ -233,0 +237,0 @@ chip: ChipColorTheme;

interfaces/index.d.ts

@@ -16,2 +16,4 @@ import { AnnotationPosition } from './AnnotationPosition';
 import { ThemeInterface } from './Theme';
-export { AnnotationPosition, ButtonType, ColorTheme, DirectionType, DropdownWidth, InputType, Position, PositionDirection, ProgressType, ShapeType, SizeType, SpacingTheme, StripesThemeContextInterface, ThemeMode, ThemeInterface };
+import { DataUnitType } from './DataUnitType';
+import { BadgeType } from './BadgeType';
+export { AnnotationPosition, BadgeType, ButtonType, ColorTheme, DataUnitType, DirectionType, DropdownWidth, InputType, Position, PositionDirection, ProgressType, ShapeType, SizeType, SpacingTheme, StripesThemeContextInterface, ThemeMode, ThemeInterface };

interfaces/index.js

@@ -11,2 +11,4 @@ import { AnnotationPosition } from './AnnotationPosition';
 import { ThemeMode } from './ThemeMode';
-export { AnnotationPosition, ButtonType, DirectionType, DropdownWidth, InputType, PositionDirection, ProgressType, ShapeType, SizeType, ThemeMode };
+import { DataUnitType } from './DataUnitType';
+import { BadgeType } from './BadgeType';
+export { AnnotationPosition, BadgeType, ButtonType, DataUnitType, DirectionType, DropdownWidth, InputType, PositionDirection, ProgressType, ShapeType, SizeType, ThemeMode };

interfaces/SpacingTheme.d.ts

@@ -21,2 +21,4 @@ import { AccordionSpacingTheme } from "../components/Accordion/AccordionSpacingTheme";
 import { NavigationItemSpacingTheme } from "../components/Navigation/NavigationItemSpacingTheme";
+import { FileUploadSpacingTheme } from "../components/FileUpload/FileUploadSpacingTheme";
+import { BadgesSpacing } from "../components/Badges/BadgesSpacing";
 export declare const bodyFontWeight = 400;
@@ -130,2 +132,4 @@ export declare const labelFontWeight = 500;
     progressIndicator: ProgressIndicatorSpacingTheme;
+    fileupload: FileUploadSpacingTheme;
+    badges: BadgesSpacing;
     dropdown: DropdownItemSpacingTheme;
@@ -132,0 +136,0 @@ pagination: PaginationSpacingTheme;

package.json

 {
   "name": "@zebra-fed/zds-react-desktop",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Zebra Desktop. A React component library.",
@@ -26,2 +26,5 @@ "main": "./index.css",
     "color": "^3.1.2",
+    "react-dnd": "^15.1.1",
+    "react-dnd-html5-backend": "^15.1.2",
+    "lodash": "^4.17.21",
     "styled-system": "^5.0.10",
@@ -28,0 +31,0 @@ "ts-node": "^9.1.1",

sandbox.js

@@ -1,7 +0,12 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Dialog, Button } from './components';
+import React, { useState, useRef } from 'react';
+import { Dropdown, Item, SVGIcon, Dialog, Button, TextField } from './components';
 import { StripesTheme } from './StripesTheme';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { icons } from './iconLibrary';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ThemeMode, SizeType, ButtonType } from './interfaces';
+import { ThemeMode, SizeType, ShapeType, ButtonType } from './interfaces';
+import FileUpload from './components/FileUpload/FileUpload';
+import UploadItem from './components/FileUpload/UploadItem';
+import { DataUnitType } from './interfaces';
 export function App() {
@@ -12,12 +17,24 @@ var themeObj = {
     var _a = useState(20), value = _a[0], setValue = _a[1];
+    var _b = useState([]), files = _b[0], setFiles = _b[1];
     var dialogRef = useRef(null);
     var dialog2Ref = useRef(null);
     var dialogHolderRef = useRef(null);
-    useEffect(function () {
-        /*setInterval(() => {
-          setValue(50);
-        }, 4000);*/
-    }, []);
+    var onFileDrop = function (file) {
+        var newArr = files;
+        newArr.push(file);
+        setFiles(file);
+    };
     return React.createElement(StripesTheme, { mode: ThemeMode.Light, theme: themeObj },
         React.createElement("div", { style: { background: 'rgba(0,0,0,.25)', position: 'relative', width: '60%', height: '70vh' } },
+            React.createElement(DndProvider, { backend: HTML5Backend },
+                React.createElement(FileUpload, { onFileDrop: onFileDrop }), files === null || files === void 0 ? void 0 :
+                files.map(function (file, index) {
+                    return (React.createElement(UploadItem
+                    // type={file.type}
+                    , { 
+                        // type={file.type}
+                        name: file.name, onClick: function () {
+                            setFiles([]);
+                        }, dataUnit: DataUnitType.MB, progress: 20, maxFileSize: 30, fileSize: 20, size: file.size.toString() }));
+                })),
             React.createElement(Button, { onClick: function () { return dialogRef.current.open(); }, size: SizeType.Large, type: ButtonType.Primary }, "Launch New Dialog"),
@@ -31,10 +48,50 @@ React.createElement(Dialog, { ref: dialogRef, leftActionItems: [
                 React.createElement("p", null, "Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua.")),
-            React.createElement(Button, { onClick: function () { return dialog2Ref.current.open(); }, size: SizeType.Large, type: ButtonType.Primary }, "Launch Modal Dialog"),
-            React.createElement(Dialog, { ref: dialog2Ref, modal: true, width: '50%', style: { minWidth: '300px' }, leftActionItems: [
-                    React.createElement(Button, { key: "but3", onClick: function () { return dialog2Ref.current.close(); }, size: SizeType.Small, type: ButtonType.Text }, "Learn More")
-                ], rightActionItems: [
-                    React.createElement(Button, { key: "but1", onClick: function () { return dialog2Ref.current.close(); }, size: SizeType.Small, type: ButtonType.PrimaryVariant }, "Cancel"),
-                    React.createElement(Button, { key: "but2", onClick: function () { return dialog2Ref.current.close(); }, size: SizeType.Small, type: ButtonType.Primary }, "Confirm")
-                ], small: true, title: "This is the Modal Dialog Title" },
-                React.createElement("p", null, "Lorem ipsum dolor sit amet, conse ctetur adipiscing elit, sed do eiusm od tempor incididunt ut labore et do lore magna aliqua."))));
+            React.createElement(Dropdown, { value: 'option_1', width: '200px', style: { marginRight: '16px' }, disabled: true },
+                React.createElement(Item, { value: 'option_1' }, "Option 1"),
+                React.createElement(Item, { value: 'option_2' }, "Option 2"),
+                React.createElement(Item, { value: 'option_3' }, "Option 3")),
+            React.createElement(TextField, { value: 'option_2', width: '30%', shape: ShapeType.Rounded, size: SizeType.Medium, style: { marginRight: '8px' }, disabled: true, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), onChange: function (val) { return console.log('new val', val); } }),
+            React.createElement("div", { style: { position: 'absolute', overflow: 'auto', top: '500px', left: '200px', width: '600px', height: '300px' } },
+                React.createElement("div", { style: { marginBottom: '16px' } },
+                    React.createElement(Dropdown, { value: 'option_2', width: '30%', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), style: { marginRight: '8px' }, error: 'XXXXXXXXXXXX', onChange: function (val) { return console.log('new val', val); } },
+                        React.createElement(Item, { value: 'option_1' }, "Option 1"),
+                        React.createElement(Item, { value: 'option_2' }, "Option 2"),
+                        React.createElement(Item, { value: 'option_3' }, "Option 3")),
+                    React.createElement(TextField, { value: 'option_2', width: '30%', shape: ShapeType.Rounded, size: SizeType.Medium, style: { marginRight: '8px' }, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), onChange: function (val) { return console.log('new val', val); } }),
+                    React.createElement(TextField, { value: 'option_2', width: '33%', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), error: 'XXXXXXXXXXXX', onChange: function (val) { return console.log('new val', val); } })),
+                React.createElement("div", null,
+                    React.createElement(Dropdown, { value: 'option_2', width: '200px', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), error: 'this has some issues!', onChange: function (val) { return console.log('new val', val); } },
+                        React.createElement(Item, { value: 'option_1' }, "Option 1"),
+                        React.createElement(Item, { value: 'option_2' }, "Option 2"),
+                        React.createElement(Item, { value: 'option_3' }, "Option 3")),
+                    React.createElement("br", null),
+                    React.createElement(TextField, { value: 'option_2', width: '200px', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), onChange: function (val) { return console.log('new val', val); } }),
+                    React.createElement("br", null),
+                    React.createElement(TextField, { value: 'option_2', width: '200px', label: 'Check This Out', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), error: 'this has some issues!', onChange: function (val) { return console.log('new val', val); } }),
+                    React.createElement(Dropdown, { value: 'option_2', width: '200px', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), error: 'this has some issues!', onChange: function (val) { return console.log('new val', val); } },
+                        React.createElement(Item, { value: 'option_1' }, "Option 1"),
+                        React.createElement(Item, { value: 'option_2' }, "Option 2"),
+                        React.createElement(Item, { value: 'option_3' }, "Option 3")),
+                    React.createElement("br", null),
+                    React.createElement(TextField, { value: 'option_2', width: '200px', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), onChange: function (val) { return console.log('new val', val); } }),
+                    React.createElement("br", null),
+                    React.createElement(TextField, { value: 'option_2', width: '200px', label: 'Check This Out', shape: ShapeType.Rounded, size: SizeType.Medium, prefix: React.createElement(SVGIcon, { iconid: 'star', size: SizeType.Medium }), error: 'this has some issues!', onChange: function (val) { return console.log('new val', val); } })))));
 }
+/*
+<Dropdown
+          value='option_2'
+          width={'200px'}
+          shape={ShapeType.Rounded}
+          size={SizeType.Medium}
+          prefix={<SVGIcon
+            iconid={'star'}
+            size={SizeType.Medium}
+          />}
+          error={'this has some issues!'}
+          onChange={(val) => console.log('new val', val)}
+        >
+          <Item value={'option_1'}>Option 1</Item>
+          <Item value={'option_2'}>Option 2</Item>
+          <Item value={'option_3'}>Option 3</Item>
+        </Dropdown>
+ */

tokens.d.ts

@@ -63,2 +63,4 @@ export namespace colors {
         60: string;
+        50: string;
+        10: string;
     };
@@ -65,0 +67,0 @@ const blueSwatches: {

tokens.js

 "use strict";
 
-var _primarySwatches, _secondarySwatches, _greySwatches, _greyBlueSwatches, _greenSwatches;
+var _primarySwatches, _secondarySwatches, _greySwatches, _greyBlueSwatches, _greenSwatches, _redSwatches;
 
@@ -19,3 +19,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
     greenSwatches: (_greenSwatches = {}, _defineProperty(_greenSwatches, 60, '#00864F'), _defineProperty(_greenSwatches, 50, '#00AB64'), _greenSwatches),
-    redSwatches: _defineProperty({}, 60, '#D70015'),
+    redSwatches: (_redSwatches = {}, _defineProperty(_redSwatches, 60, '#D70015'), _defineProperty(_redSwatches, 50, '#E12A3D'), _defineProperty(_redSwatches, 10, '#FF8692'), _redSwatches),
     blueSwatches: _defineProperty({}, 10, '#F1F8FF'),
@@ -22,0 +22,0 @@ warningColor: '#FF9500',

No alert changes

Improved metrics

Total package byte prevSize

765848

increased by6.12%

Number of package files

326

increased by8.67%

Lines of code

12342

increased by7.14%

Worsened metrics

Dependency count

14

increased by27.27%

Dependency changes

• + Addedlodash@^4.17.21

• + Addedreact-dnd@^15.1.1

• + Addedreact-dnd-html5-backend@^15.1.2

• + Added@babel/runtime@7.24.5(transitive)

• + Added@react-dnd/asap@4.0.1(transitive)

• + Added@react-dnd/invariant@3.0.1(transitive)

• + Added@react-dnd/shallowequal@3.0.1(transitive)

• + Addeddnd-core@15.1.2(transitive)

• + Addedfast-deep-equal@3.1.3(transitive)

• + Addedreact-dnd@15.1.2(transitive)

• + Addedreact-dnd-html5-backend@15.1.3(transitive)

• + Addedredux@4.2.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)