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

Comparing version 0.9.0 to 0.9.1

components/Banner/PageBanner.js

@@ -11,2 +11,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { SizeType } from "../../interfaces/SizeType";
+import { ButtonType } from "../../interfaces";
 var PageBannerNode = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    padding-right: ", "px;\n"], ["\n    padding-top: ", "px;\n    padding-left: ", "px;\n    padding-right: ", "px;\n"])), function (props) { return props.spacingObj.padding / 4; }, function (props) { return props.spacingObj.padding * 1.5; }, function (props) { return props.spacingObj.padding * 1.5; });
@@ -28,3 +29,3 @@ var PageBannerContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  overflow: hidden;\n  word-break: break-all;\n  color: ", ";\n  .page-banner--title {\n    font-size: ", ";\n    font-weight: ", ";\n  }\n"], ["\n  width: 100%;\n  overflow: hidden;\n  word-break: break-all;\n  color: ", ";\n  .page-banner--title {\n    font-size: ", ";\n    font-weight: ", ";\n  }\n"])), function (props) { return props.colorObj.textColor; }, function (props) { return props.spacingObj.titleSize; }, function (props) { return props.spacingObj.titleWeight; });
             (actionItems === null || actionItems === void 0 ? void 0 : actionItems.length) > 0 && React.createElement(ButtonRailWrapper, { spacingObj: spacing }, actionItems.map(function (item, i) {
-                return React.createElement(Button, { size: SizeType.Large, key: "banner_button".concat(i), type: 'outlineSubtle', onClick: item.onClick }, item === null || item === void 0 ? void 0 : item.title);
+                return React.createElement(Button, { size: SizeType.Large, key: "banner_button".concat(i), type: ButtonType.OutlineSubtle, onClick: item.onClick }, item === null || item === void 0 ? void 0 : item.title);
             }))),
@@ -31,0 +32,0 @@ React.createElement(PageBannerNode, { spacingObj: spacing },

components/Button/Button.d.ts

 import { CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ShapeType } from "../../interfaces/ShapeType";
-import { SizeType } from '../../interfaces/SizeType';
-interface FABProps {
-    type: string;
-    children: JSX.Element | string;
-    shape?: ShapeType;
-    style?: object;
-    size?: SizeType;
-    condensed?: boolean;
-    disabled?: boolean;
-    iconid?: string;
-}
-export declare const FAB: {
-    ({ type, shape, children, style, size, condensed, disabled, iconid }: FABProps): JSX.Element;
-    propTypes: {
-        /**
-         * icon id as type string , i.e. 'alert'
-         */
-        iconid: PropTypes.Requireable<string>;
-        /**
-         * small FAB
-         */
-        small: PropTypes.Requireable<boolean>;
-        /**
-         * large FAB (is always true if small is false)
-         */
-        large: PropTypes.Requireable<boolean>;
-        /**
-         * Theme of button */
-        type: PropTypes.Requireable<string>;
-        /**
-         * Shape can be round, rounded or sharp */
-        shape: PropTypes.Requireable<string>;
-        /**
-         * leading node before text
-         */
-        leading: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * trailing node after text
-         */
-        trailing: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        /**
-         * children node
-         */
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-};
+import { SizeType, ButtonType } from '../../interfaces';
 interface ButtonProps {
-    type?: string;
+    type?: ButtonType;
     condensed?: boolean;
@@ -62,3 +16,3 @@ size?: SizeType;
     trailing?: JSX.Element;
-    children: JSX.Element;
+    children: JSX.Element | JSX.Element[] | string | number;
     iconid?: string;
@@ -111,3 +65,3 @@ }
     defaultProps: {
-        type: string;
+        type: ButtonType;
         condensed: boolean;
@@ -114,0 +68,0 @@ large: boolean;

components/Button/Button.js

@@ -1,103 +0,8 @@
-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, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { StripesThemeContext } from '../../StripesTheme';
-import styled from 'styled-components';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ShapeType } from "../../interfaces/ShapeType";
-import { SizeType } from '../../interfaces/SizeType';
-import { SVGIcon } from '../SVGIcon/SVGIcon';
-var ImageButtonWrapper = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    background-color: ", ";\n    color: ", ";\n    height: ", "px;\n    width: ", "px;\n    border-radius: ", "px;\n    border: ", ";\n    cursor: ", ";\n    padding: 0px;\n    >:hover * {\n        color: ", "\n    }\n    &: hover {\n        color: ", "\n        background: ", ";\n    }\n        &: active {\n        background: ", "\n    }\n"], ["\n    display: flex;\n    background-color: ", ";\n    color: ", ";\n    height: ", "px;\n    width: ", "px;\n    border-radius: ", "px;\n    border: ", ";\n    cursor: ", ";\n    padding: 0px;\n    >:hover * {\n        color: ", "\n    }\n    &: hover {\n        color: ", "\n        background: ", ";\n    }\n        &: active {\n        background: ", "\n    }\n"])), function (props) { return props.disabled ? props.colors.disabledColor : props.colors.backgroundColor; }, function (props) { return props.disabled ? props.colors.disabledTextColor : props.colors.textColor; }, function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.rounded ? '4' : '0'; }, function (props) { return props.borderColor; }, function (props) { return props.disabled ? 'default' : 'pointer'; }, function (props) { return props.disabled ? props.colors.disabledTextColor : props.outline ? props.colors.hoverText : props.colors.textColor; }, function (props) { return props.disabled ? props.colors.disabledTextColor : props.outline ? props.colors.hoverText : props.colors.textColor; }, function (props) { return !props.disabled ? props.colors.backgroundHover : props.colors.disabledColor; }, function (props) { return !props.disabled ? props.colors.backgroundActive : props.colors.disabledColor; });
-var ButtonWrapper = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-flex;\n    background-color: ", ";\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    height: ", "px;\n    width: max-content;\n    border: ", ";\n    outline: none;\n    cursor: ", ";\n    overflow: hidden;\n    padding: 0px;\n    align-items: center;\n    border-radius: ", "px;\n\n    line-height: ", ";\n        &: hover {\n        color: ", "\n        background: ", ";\n    }\n        &: active {\n        background: ", "\n    }\n"], ["\n    display: inline-flex;\n    background-color: ", ";\n    color: ", ";\n    font-size: ", ";\n    font-family: ", ";\n    font-weight: ", ";\n    height: ", "px;\n    width: max-content;\n    border: ", ";\n    outline: none;\n    cursor: ", ";\n    overflow: hidden;\n    padding: 0px;\n    align-items: center;\n    border-radius: ", "px;\n\n    line-height: ", ";\n        &: hover {\n        color: ", "\n        background: ", ";\n    }\n        &: active {\n        background: ", "\n    }\n"])), function (props) { return props.disabled ? props.colors.disabledColor : props.colors.backgroundColor; }, function (props) { return props.disabled ? props.colors.disabledTextColor : props.colors.textColor; }, function (props) { return props.large ? props.spacingObj.largeFontSize : props.spacingObj.mediumLabelFontSize; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.labelWeight; }, function (props) { return props.height; }, function (props) { return props.borderColor; }, function (props) { return props.disabled ? 'default' : 'pointer'; }, function (props) { return props.rounded ? '4' : '0'; }, function (props) { return props.small ? props.spacingObj.padding * 4 + 'px' : props.medium ? props.spacingObj.padding * 5 + 'px' : props.spacingObj.padding * 6 + 'px'; }, function (props) { return props.disabled ? props.colors.disabledTextColor : props.outline ? props.colors.hoverText : props.colors.textColor; }, function (props) { return !props.disabled ? props.colors.backgroundHover : props.colors.disabledColor; }, function (props) { return !props.disabled ? props.colors.backgroundActive : props.colors.disabledColor; });
-var FABWrapper = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\nfont-family: ", ";\nfont-weight: ", ";\nfont-size: ", ";\nz-index: 500;\nborder-radius: ", ";\nborder: none;\nbackground-color: ", ";\ncolor: ", ";\nheight: ", ";\nwidth: ", ";\n\n&: hover {\n    color: ", "\n    background: ", ";\n}\n    &: active {\n    background: ", "\n}\n"], ["\nfont-family: ", ";\nfont-weight: ", ";\nfont-size: ", ";\nz-index: 500;\nborder-radius: ", ";\nborder: none;\nbackground-color: ", ";\ncolor: ", ";\nheight: ", ";\nwidth: ", ";\n\n&: hover {\n    color: ", "\n    background: ", ";\n}\n    &: active {\n    background: ", "\n}\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.labelWeight; }, function (props) { return props.spacingObj.mediumLabelFontSize; }, function (props) { return props.borderRadius; }, function (props) { return props.colors.backgroundColor; }, function (props) { return props.colors.textColor; }, function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.disabled ? props.colors.disabledTextColor : props.colors.textColor; }, function (props) { return !props.disabled ? props.colors.backgroundHover : props.colors.disabledColor; }, function (props) { return !props.disabled ? props.colors.backgroundActive : props.colors.disabledColor; });
-var BUTTON_TYPES = {
-    outline: 'outline',
-    outlineSubtle: 'outlineSubtle',
-};
-export var FAB = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'primary' : _b, _c = _a.shape, shape = _c === void 0 ? ShapeType.Sharp : _c, children = _a.children, style = _a.style, size = _a.size, condensed = _a.condensed, disabled = _a.disabled, iconid = _a.iconid;
-    var context = useContext(StripesThemeContext);
-    var spacing = context.getSpacing()[type];
-    var colors = context.getColors()[type];
-    var large = size === SizeType.Large;
-    var small = size === SizeType.Small;
-    var getBorderRadius = useMemo(function () {
-        if (children) {
-            switch (shape) {
-                case ShapeType.Round:
-                    return '500px';
-                case ShapeType.Rounded:
-                    return '8px';
-            }
-            return '0%';
-        }
-        switch (shape) {
-            case ShapeType.Sharp:
-                return '0%';
-            case ShapeType.Round:
-                return '50%';
-            case ShapeType.Rounded:
-                return '25%';
-        }
-    }, [shape]);
-    var getButtonHeight = function () {
-        if (children) { //FAB is smaller if it has text
-            return '48px';
-        }
-        else if (small) { //Small with no text
-            return '56px';
-        }
-        return '96px'; //Large with no text
-    };
-    var width = children ? 'max-content' : getButtonHeight();
-    var iconSize = (small || condensed) ? SizeType.Small : SizeType.Medium;
-    var icon = React.createElement(SVGIcon, { style: { display: 'inline-flex' }, color: colors.iconColor, iconid: iconid || 'add', size: iconSize, onClick: function () { alert('would perform an action...'); } });
-    return React.createElement(FABWrapper, { fontFamilyObj: context.getFont(condensed), disabled: disabled, style: style, spacingObj: spacing, colors: colors, width: width, height: getButtonHeight(), borderRadius: function () { return getBorderRadius; } },
-        React.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center', width: '100%',
-                justifyContent: 'center'
-            } },
-            icon && React.createElement("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    paddingLeft: children ? condensed ? '17px' : '21px' : '0'
-                } }, icon),
-            children && React.createElement("div", { style: { display: 'flex', alignItems: 'center', flexGrow: 1, textAlign: 'left', paddingLeft: '13px', paddingRight: spacing.padding * 3 + 'px' } }, children)));
-};
-FAB.propTypes = {
-    /**
-     * icon id as type string , i.e. 'alert'
-     */
-    iconid: PropTypes.string,
-    /**
-     * small FAB
-     */
-    small: PropTypes.bool,
-    /**
-     * large FAB (is always true if small is false)
-     */
-    large: PropTypes.bool,
-    /**
-     * Theme of button */
-    type: PropTypes.string,
-    /**
-     * Shape can be round, rounded or sharp */
-    shape: PropTypes.string,
-    /**
-     * leading node before text
-     */
-    leading: PropTypes.node,
-    /**
-     * trailing node after text
-     */
-    trailing: PropTypes.node,
-    /**
-     * children node
-     */
-    children: PropTypes.node
-};
+import { SizeType, ButtonType } from '../../interfaces';
+import { SVGIcon } from '../SVGIcon';
+import { ButtonWrapper, ImageButtonWrapper } from "./ButtonWrapper";
 export var Button = function (props) {
@@ -123,9 +28,9 @@ var context = useContext(StripesThemeContext);
     var getBorderColor = useMemo(function () {
-        if (props.disabled && props.type != BUTTON_TYPES.outlineSubtle && props.type != BUTTON_TYPES.outline) {
+        if (props.disabled && props.type != ButtonType.OutlineSubtle && props.type != ButtonType.Outline) {
             return 'none';
         }
-        if (props.disabled && (props.type == BUTTON_TYPES.outline || props.type == BUTTON_TYPES.outlineSubtle)) {
+        if (props.disabled && (props.type == ButtonType.Outline || props.type == ButtonType.OutlineSubtle)) {
             return '1px solid ' + colors.disabledBorderColor;
         }
-        if (props.type == BUTTON_TYPES.outline || props.type == BUTTON_TYPES.outlineSubtle) {
+        if (props.type == ButtonType.Outline || props.type == ButtonType.OutlineSubtle) {
             return '1px solid ' + colors.borderColor;
@@ -135,3 +40,3 @@ }
     }, [props.type]);
-    return props.iconid ? React.createElement(ImageButtonWrapper, { style: props.style, colors: colors, height: function () { return getButtonHeight; }, rounded: props.rounded, borderColor: function () { return getBorderColor; }, outline: props.type === BUTTON_TYPES.outline, id: props.id },
+    return props.iconid ? React.createElement(ImageButtonWrapper, { style: props.style, colors: colors, height: getButtonHeight, rounded: props.rounded, borderColor: getBorderColor, outline: props.type === ButtonType.Outline, id: props.id },
         React.createElement("div", { style: { display: 'flex', height: '100%', width: '100%' } },
@@ -141,3 +46,3 @@ React.createElement("div", { style: {
                 } },
-                React.createElement(SVGIcon, { iconid: props.iconid, size: SizeType.Medium, color: colors.iconColor })))) : (React.createElement(ButtonWrapper, { style: props.style, spacingObj: spacing, colors: colors, fontFamilyObj: context.getFont(props.condensed), onClick: props.onClick, height: function () { return getButtonHeight; }, small: small, medium: medium, large: large, rounded: props.rounded, borderColor: function () { return getBorderColor; }, outline: props.type === BUTTON_TYPES.outline, disabled: props.disabled, id: props.id },
+                React.createElement(SVGIcon, { iconid: props.iconid, size: SizeType.Medium, color: colors.iconColor })))) : (React.createElement(ButtonWrapper, { style: props.style, spacingObj: spacing, colors: colors, fontFamilyObj: context.getFont(props.condensed), onClick: props.onClick, height: getButtonHeight, small: small, medium: medium, large: large, rounded: props.rounded, borderColor: function () { return getBorderColor; }, outline: props.type === ButtonType.Outline, disabled: props.disabled, id: props.id },
         props.leading && React.createElement("div", { style: { paddingTop: '-5px', paddingLeft: spacing.padding * 1.5,
@@ -191,3 +96,3 @@ paddingRight: (!props.children && !props.trailing) ? spacing.padding * 1.5 : spacing.padding } }, props.leading),
 Button.defaultProps = {
-    type: 'default',
+    type: ButtonType.Default,
     condensed: false,
@@ -206,2 +111,1 @@ large: false,
 };
-var templateObject_1, templateObject_2, templateObject_3;

components/Button/index.d.ts

 import { Button } from "./Button";
-import { FAB } from "./Button";
+import { FAB } from "./FAB";
 export { Button, FAB };

components/Button/index.js

@@ -15,6 +15,8 @@ "use strict";
   get: function get() {
-    return _Button.FAB;
+    return _FAB.FAB;
   }
 });
 
-var _Button = require("./Button");
+var _Button = require("./Button");
+
+var _FAB = require("./FAB");

components/Card/Card.js

@@ -15,6 +15,8 @@ "use strict";
 var SubtitleWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", "px;\n    \n    //TODO: IBM Plex Sans Weight 400\n"], ["\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", "px;\n    \n    //TODO: IBM Plex Sans Weight 400\n"])), function (props) { return props.colorObj.textColor; }, function (props) { return props.spacingObj.bodySize; }, function (props) { return props.spacingObj.bodyWeight; }, function (props) { return props.spacingObj.padding * 2.5; });
-var HeadlineWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    width: 100%;\n    height: ", "px;\n\n    .header-content {\n        white-space: nowrap;\n        overflow: hidden;\n        width: 100%;\n\n        ", "\n}\n\n    .header-icon--leading {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n    }\n\n    .header-icon--trailing {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n        padding-left: ", "px;\n    }\n"], ["\n    display: flex;\n    width: 100%;\n    height: ", "px;\n\n    .header-content {\n        white-space: nowrap;\n        overflow: hidden;\n        width: 100%;\n\n        ", "\n}\n\n    .header-icon--leading {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n    }\n\n    .header-icon--trailing {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n        padding-left: ", "px;\n    }\n"])), function (props) { return props.spacingObj.headlineSize; }, function (props) { return !props.isHeaderFull && "\n        display: flex;\n        align-items: center;\n        "; }, function (props) { return props.spacingObj.padding * 1.5; }, function (props) { return props.spacingObj.padding * 1.5; }, function (props) { return props.spacingObj.padding * 3; });
+var HeadlineWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    width: 100%;\n    height: ", ";\n\n    .header-content {\n        white-space: nowrap;\n        overflow: hidden;\n        width: 100%;\n\n        ", "\n}\n\n    .header-icon--leading {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n    }\n\n    .header-icon--trailing {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n        padding-left: ", "px;\n    }\n"], ["\n    display: flex;\n    width: 100%;\n    height: ", ";\n\n    .header-content {\n        white-space: nowrap;\n        overflow: hidden;\n        width: 100%;\n\n        ", "\n}\n\n    .header-icon--leading {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n    }\n\n    .header-icon--trailing {\n        display: flex;\n        align-items: center;\n        height: 100%;\n        padding-right: ", "px;\n        padding-left: ", "px;\n    }\n"])), function (props) { return props.spacingObj.headlineSize; }, function (props) { return !props.isHeaderFull && "\n        display: flex;\n        align-items: center;\n        "; }, function (props) { return props.spacingObj.padding * 1.5; }, function (props) { return props.spacingObj.padding * 1.5; }, function (props) { return props.spacingObj.padding * 3; });
 export var CardHeadline = function (_a) {
     var colors = _a.colors, spacing = _a.spacing, title = _a.title, subtitle = _a.subtitle, trailing = _a.trailing, leading = _a.leading;
-    var isHeaderFull = title.length > 0 && subtitle.length > 0;
+    if (!title && !subtitle && !leading && !trailing)
+        return null;
+    var isHeaderFull = (title === null || title === void 0 ? void 0 : title.length) > 0 && (subtitle === null || subtitle === void 0 ? void 0 : subtitle.length) > 0;
     return (React.createElement(HeadlineWrapper, { spacingObj: spacing, isHeaderFull: isHeaderFull },
@@ -21,0 +23,0 @@ leading && React.createElement("div", { className: 'header-icon--leading' }, leading),

components/Dialog/Dialog.d.ts

@@ -14,16 +14,18 @@ import React from 'react';
     children: JSX.Element | string;
-    small: boolean;
-    sharp: boolean;
-    style: object;
-    id: string;
-    className: string;
-    title: string;
-    width: string;
-    anchorTo: object;
-    onClose: () => void;
-    iconAlignment: string;
-    textAlignment: string;
-    leftActionItems: Array<JSX.Element | string>;
-    rightActionItems: Array<JSX.Element | string>;
+    className?: string;
+    condensed?: boolean;
+    id?: string;
+    icon?: string;
+    iconAlignment?: string;
+    leftActionItems?: Array<JSX.Element | string>;
+    modal?: boolean;
+    onClose?: () => void;
+    rightActionItems?: Array<JSX.Element | string>;
+    sharp?: boolean;
+    small?: boolean;
+    style?: object;
+    textAlignment?: string;
+    title?: string;
+    width?: string;
 }
 export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;

components/Dialog/Dialog.js

@@ -1,36 +0,16 @@
-"use strict";
-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, { useState, useEffect, useContext, useImperativeHandle, forwardRef } from 'react';
+import React, { useState, useContext, useImperativeHandle, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import { StripesThemeContext } from '../../StripesTheme';
 import { CardFooterWrapper } from '../Shared/Card';
-import styled from 'styled-components';
 import '@zebra-fed/icons/Alert/index.css';
-import { SVGIcon } from '../SVGIcon/SVGIcon';
-import { SizeType } from '../../interfaces/SizeType';
-var DialogWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    opacity: ", ";\n    visibility: ", ";\n    z-index: ", ";\n    width: ", ";\n    margin: auto;\n    padding: ", "px;\n    background-color: ", ";\n    box-shadow: ", ";\n    border-radius: ", "px;\n    color: ", ";\n"], ["\n    font-family: ", ";\n    opacity: ", ";\n    visibility: ", ";\n    z-index: ", ";\n    width: ", ";\n    margin: auto;\n    padding: ", "px;\n    background-color: ", ";\n    box-shadow: ", ";\n    border-radius: ", "px;\n    color: ", ";\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.spacingObj.menuZIndex; }, function (props) { return props.width ? props.width : props.small ? "".concat(props.spacingObj.smallDialogSize, "px") : "".concat(props.spacingObj.largeDialogSize, "px"); }, function (props) { return props.spacingObj.padding * 3; }, function (props) { return props.colorObj.backgroundColor; }, function (props) { return props.colorObj.boxShadow; }, function (props) { return props.sharp ? '0' : '12'; }, function (props) { return props.colorObj.textColor; });
-var DialogBodyWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  padding-bottom: ", "px;\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  padding-bottom: ", "px;\n"])), function (props) { return props.spacingObj.bodySize; }, function (props) { return props.spacingObj.bodyWeight; }, function (props) { return props.spacingObj.padding * 2; });
-var HeaderWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n\n    .header-title {\n      font-size: ", ";\n      font-weight: ", ";\n      display: block;\n      text-align: ", ";\n    }\n    .header-icon {\n      display: flex;\n      justify-content: ", ";  \n      padding-bottom: ", "px;\n    }\n"], ["\n    display: block;\n\n    .header-title {\n      font-size: ", ";\n      font-weight: ", ";\n      display: block;\n      text-align: ", ";\n    }\n    .header-icon {\n      display: flex;\n      justify-content: ", ";  \n      padding-bottom: ", "px;\n    }\n"])), function (props) { return props.spacingObj.headlineSize; }, function (props) { return props.spacingObj.headlineFontWeight; }, function (props) { return props.textPosition; }, function (props) { return props.iconPosition; }, function (props) { return props.spacingObj.padding * 1.5; });
-export var Dialog = forwardRef(function (props, ref) {
-    var _a, _b;
-    var inherit = "dialog";
+import { DialogBodyWrapper, DialogModalWrapper, DialogWrapper, HeaderWrapper } from './DialogWrapper';
+import { SVGIcon } from '../SVGIcon';
+import { SizeType } from '../../interfaces';
+export var Dialog = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.condensed, condensed = _c === void 0 ? false : _c, _d = _a.id, id = _d === void 0 ? null : _d, _e = _a.icon, icon = _e === void 0 ? null : _e, _f = _a.iconAlignment, iconAlignment = _f === void 0 ? 'center' : _f, _g = _a.leftActionItems, leftActionItems = _g === void 0 ? null : _g, _h = _a.modal, modal = _h === void 0 ? false : _h, _j = _a.onClose, onClose = _j === void 0 ? function () { return false; } : _j, _k = _a.rightActionItems, rightActionItems = _k === void 0 ? null : _k, _l = _a.sharp, sharp = _l === void 0 ? false : _l, _m = _a.small, small = _m === void 0 ? false : _m, _o = _a.style, style = _o === void 0 ? {} : _o, _p = _a.textAlignment, textAlignment = _p === void 0 ? 'center' : _p, _q = _a.title, title = _q === void 0 ? null : _q, _r = _a.width, width = _r === void 0 ? null : _r;
+    var inherit = 'dialog';
     var context = useContext(StripesThemeContext);
     var spacing = context.getSpacing()[inherit];
     var colors = context.getColors()[inherit];
-    var _c = useState(false), openState = _c[0], setOpen = _c[1];
-    var _d = useState('50%'), top = _d[0], setTop = _d[1];
-    useEffect(function () {
-        setTop(props.anchorTo ? getElementTop(props.anchorTo) : '50%');
-    }, []);
-    function getElementTop(element) {
-        if (typeof element === 'string') {
-            return element;
-        }
-        var elRect = ReactDOM.findDOMNode(element).getBoundingClientRect();
-        return elRect.top + elRect.height + 'px';
-    }
+    var _s = useState(false), openState = _s[0], setOpen = _s[1];
     useImperativeHandle(ref, function () { return ({
@@ -41,19 +21,19 @@ toggleDialog: toggleDialog,
     }); });
-    function toggleDialog(value) {
+    var toggleDialog = function (value) {
         setOpen(value !== undefined ? value : !openState);
         if (!value) {
-            props.onClose();
+            onClose();
         }
-    }
-    function open() {
+    };
+    var open = function () {
         toggleDialog(true);
-    }
-    function close() {
+    };
+    var close = function () {
         toggleDialog(false);
-    }
-    var titleNode = (React.createElement(HeaderWrapper, { spacingObj: spacing, iconPosition: props.iconAlignment, textPosition: props.textAlignment },
-        React.createElement("div", { className: 'header-icon' },
-            React.createElement(SVGIcon, { iconid: 'alert', color: colors.iconColor, size: SizeType.Small, onClick: function () { return setOpen(false); } })),
-        React.createElement("div", { className: 'header-title' }, props.title)));
-    var itemCount = ((_a = props.leftActionItems) === null || _a === void 0 ? void 0 : _a.length) + ((_b = props.rightActionItems) === null || _b === void 0 ? void 0 : _b.length);
+    };
+    var titleNode = (React.createElement(HeaderWrapper, { spacingObj: spacing, iconPosition: iconAlignment, textPosition: textAlignment },
+        icon && React.createElement("div", { className: 'header-icon' },
+            React.createElement(SVGIcon, { iconid: 'alert', color: colors.iconColor, size: SizeType.Large })),
+        React.createElement("div", { className: 'header-title' }, title)));
+    var itemCount = (leftActionItems === null || leftActionItems === void 0 ? void 0 : leftActionItems.length) + (rightActionItems === null || rightActionItems === void 0 ? void 0 : rightActionItems.length);
     var actionItemStyle = itemCount === 2 ? {
@@ -64,15 +44,24 @@ flex: '1',
     } : {};
-    return (React.createElement(DialogWrapper, { fontFamilyObj: context.getFont(), small: props.small, colorObj: colors, width: props.width, id: props.id, className: "Dialog " + props.className, open: openState, style: props.style, spacingObj: spacing, sharp: props.sharp },
-        titleNode,
-        React.createElement(DialogBodyWrapper, { spacingObj: spacing }, props.children),
-        React.createElement(CardFooterWrapper, { spacingObj: spacing, footerItemMargin: itemCount === 2 },
-            React.createElement("div", { className: 'action-items--left', style: actionItemStyle }, props.leftActionItems.map(function (item) { return item; })),
-            React.createElement("div", { className: 'action-items--right', style: actionItemStyle }, props.rightActionItems.map(function (item) { return item; })))));
+    return (React.createElement(DialogModalWrapper, { modal: modal, open: openState, spacingObj: spacing },
+        React.createElement(DialogWrapper, { fontFamilyObj: context.getFont(condensed), small: small, colorObj: colors, width: width, id: id, className: "Dialog " + className, open: openState, style: style, spacingObj: spacing, sharp: sharp, modal: modal },
+            titleNode,
+            React.createElement(DialogBodyWrapper, { spacingObj: spacing }, children),
+            React.createElement(CardFooterWrapper, { spacingObj: spacing, footerItemMargin: itemCount === 2 },
+                React.createElement("div", { className: 'action-items--left', style: actionItemStyle }, leftActionItems === null || leftActionItems === void 0 ? void 0 : leftActionItems.map(function (item) { return item; })),
+                React.createElement("div", { className: 'action-items--right', style: actionItemStyle }, rightActionItems === null || rightActionItems === void 0 ? void 0 : rightActionItems.map(function (item) { return item; }))))));
 });
 Dialog.propTypes = {
-    width: PropTypes.string,
     /**
+     * Defines if the font is condensed or not */
+    condensed: PropTypes.bool,
+    /**
      * Alignment of the Header's icon */
     iconAlignment: PropTypes.string,
     /**
+     * The header icon id, if none supplied, no icon will show in the header */
+    icon: PropTypes.string,
+    /**
+     * Will render the dialog as a modal */
+    modal: PropTypes.bool,
+    /**
      * Alignment of the Header's text */
@@ -105,14 +94,16 @@ textAlignment: PropTypes.string,
     /**
-     * Pass through a react component reference, or a css top position value (this.ref.NavBar or "0px"). */
-    anchorTo: PropTypes.object,
+     * A callback function that is fired when the dialog is closed. */
+    onClose: PropTypes.func,
     /**
-     * A callback function that is fired when the dialog is closed. */
-    onClose: PropTypes.func
+     * user set width of the dialog */
+    width: PropTypes.string
 };
 Dialog.defaultProps = {
-    width: '',
+    condensed: false,
     /** values can be left, right or center */
     iconAlignment: 'center',
+    icon: null,
     /** values can be left, right or center */
     textAlignment: 'center',
+    modal: false,
     sharp: false,
@@ -123,6 +114,5 @@ small: false,
     title: null,
-    className: "",
-    anchorTo: null,
+    className: '',
     onClose: function () { return false; },
+    width: null,
 };
-var templateObject_1, templateObject_2, templateObject_3;

components/Navigation/NavigationItem.d.ts

 /// <reference types="react" />
 import PropTypes from 'prop-types';
-import { SizeType } from '../../interfaces/SizeType';
-import { DropdownWidth } from '../../interfaces/DropdownWidth';
+import { SizeType } from '../../interfaces';
+import { DropdownWidth } from '../../interfaces';
+import { ButtonType } from '../../interfaces';
 export interface NavigationItemProps {
-    type?: string;
+    type?: ButtonType;
     iconid?: string;
@@ -8,0 +9,0 @@ dropdown?: boolean;

components/Navigation/NavigationItem.js

@@ -7,11 +7,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import PropTypes from 'prop-types';
-import { Button } from '../Button/Button';
-import { SVGIcon } from '../SVGIcon/SVGIcon';
-import { SizeType } from '../../interfaces/SizeType';
+import { Button } from '../Button';
+import { SVGIcon } from '../SVGIcon';
+import { SizeType, PositionDirection } from '../../interfaces';
 import { FixedPositioner } from '../Shared/FixedPositioner';
-import { PositionDirection } from '../../interfaces/PositionDirection';
 import { StripesThemeContext } from "../../StripesTheme";
 import styled from 'styled-components';
-import { DropdownMenu } from '../Dropdown/DropdownMenu';
-import { DropdownWidth } from '../../interfaces/DropdownWidth';
+import { DropdownMenu } from '../Dropdown';
+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; });
@@ -18,0 +17,0 @@ export var NavigationItem = function (_a) {

components/Pagination/Pagination.d.ts

 /// <reference types="react" />
 import PropTypes from 'prop-types';
 import '@zebra-fed/icons/Keyboard/index.css';
-import { ShapeType } from '../../interfaces/ShapeType';
+import { ShapeType } from '../../interfaces';
 export interface PaginationProps {
@@ -6,0 +6,0 @@ dropdown?: boolean;

components/Pagination/Pagination.js

@@ -10,9 +10,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled from 'styled-components';
-import { SizeType } from '../../interfaces/SizeType';
-import { DropdownWidth } from '../../interfaces/DropdownWidth';
-import { ShapeType } from '../../interfaces/ShapeType';
+import { SizeType, ShapeType, DropdownWidth } from '../../interfaces';
 import Item from '../Common/Item';
-import { SVGIcon } from '../SVGIcon/SVGIcon';
+import { SVGIcon } from '../SVGIcon';
 import { NavigationItem } from '../index';
-var PaginationWrapper = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding-top: ", "px;\n    display:flex;\n    justify-content: ", ";\n    overflow-wrap: break-word;\n    flex-wrap: wrap;\n    list-style-type: none; \n    font-family: ", ";\n"], ["\n    padding-top: ", "px;\n    display:flex;\n    justify-content: ", ";\n    overflow-wrap: break-word;\n    flex-wrap: wrap;\n    list-style-type: none; \n    font-family: ", ";\n"])), function (props) { return props.spacingObj.basePadding; }, function (props) { return props.direction; }, function (props) { return props.fontFamilyObj; });
+import { ButtonType } from "../../interfaces";
+var PaginationWrapper = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding-top: ", "px;\n    display:flex;\n    justify-content: ", ";\n    overflow-wrap: break-word;\n    flex-wrap: wrap;\n    list-style-type: none;\n    font-family: ", ";\n"], ["\n    padding-top: ", "px;\n    display:flex;\n    justify-content: ", ";\n    overflow-wrap: break-word;\n    flex-wrap: wrap;\n    list-style-type: none;\n    font-family: ", ";\n"])), function (props) { return props.spacingObj.basePadding; }, function (props) { return props.direction; }, function (props) { return props.fontFamilyObj; });
 var PageItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    border-radius: ", "px;\n    justify-content: center;\n    align-items: center;\n    font-size: ", ";\n    font-weight: ", ";\n    margin-left  ", "px;\n    margin-right: ", "px;\n    &:first-child {\n        margin-left: 0px;\n    }\n    &:last-child {\n        margin-right: 0px;\n    }\n    cursor: ", ";\n    color: ", ";\n    background-color: ", ";\n    font-size: ", ";\n    min-width: ", "px;\n    height: ", "px;\n    outline: none;\n\n    &:hover {\n        background-color: ", "\n    }\n\n    &:active {\n        background-color: ", "\n    }\n"], ["\n    display: flex;\n    border-radius: ", "px;\n    justify-content: center;\n    align-items: center;\n    font-size: ", ";\n    font-weight: ", ";\n    margin-left  ", "px;\n    margin-right: ", "px;\n    &:first-child {\n        margin-left: 0px;\n    }\n    &:last-child {\n        margin-right: 0px;\n    }\n    cursor: ", ";\n    color: ", ";\n    background-color: ", ";\n    font-size: ", ";\n    min-width: ", "px;\n    height: ", "px;\n    outline: none;\n\n    &:hover {\n        background-color: ", "\n    }\n\n    &:active {\n        background-color: ", "\n    }\n"])), function (props) { return props.shape !== ShapeType.Sharp ? props.spacingObj.basePadding / 2 : 0; }, function (props) { return props.spacingObj.bodyFontSize; }, function (props) { return props.spacingObj.bodyFontWeight; }, function (props) { return props.spacingObj.basePadding / 2; }, function (props) { return props.spacingObj.basePadding / 2; }, function (props) { return props.noHover ? 'cursor' : 'pointer'; }, function (props) { return props.disabled ? props.colorObj.textDisabledColor
@@ -49,3 +48,2 @@ : props.selected
     var lowerbound = 0; // initial value of the most left page
-    numClicked = numClicked - 1; // start point is at 1 and not index 0
     if ((numClicked - midpt) > 0) { // if (true) then shift the pages visible. 
@@ -69,6 +67,6 @@ lowerbound = numClicked - midpt;
         if (dropdown) {
-            items.push(React.createElement(Item, { onClick: function () { return callback(i - 1); } }, "".concat(i)));
+            items.push(React.createElement(Item, { onClick: function () { return callback(i); } }, "".concat(i)));
         }
         else {
-            pages.push(React.createElement(PageItem, { shape: shape, noHover: false, style: styles, id: 'Page' + i + 'Button' + (numClicked === i - 1 ? 'Clicked' : ''), colorObj: colors, spacingObj: spacing, selected: selected, key: i - 1, onClick: function () { return callback(i - 1); } }, i));
+            pages.push(React.createElement(PageItem, { shape: shape, noHover: false, style: styles, id: 'Page' + i + 'Button' + (numClicked === i ? 'Clicked' : ''), colorObj: colors, spacingObj: spacing, selected: selected, key: i, onClick: function () { return callback(i - 1); } }, i));
         }
@@ -94,3 +92,3 @@ };
         dropdown ?
-            React.createElement(NavigationItem, { size: SizeType.Small, dropdownWidth: DropdownWidth.ParentWidth, dropdown: true, dropdownItems: items, type: 'inverse', iconid: 'down' },
+            React.createElement(NavigationItem, { size: SizeType.Small, dropdownWidth: DropdownWidth.ParentWidth, dropdown: true, dropdownItems: items, type: ButtonType.Inverse, iconid: 'down' },
                 React.createElement("div", null, numClicked + 1))
@@ -106,3 +104,11 @@ : pages,
         !dropdown &&
-            React.createElement(PageItem, { colorObj: colors, spacingObj: spacing, onClick: function () { return callback(numClicked += (midpt * 2)); }, shape: shape },
+            React.createElement(PageItem, { colorObj: colors, spacingObj: spacing, onClick: function () {
+                    var isLimited = numClicked + 1 === count || count >= (numClicked + (midpt * 2));
+                    if (isLimited) {
+                        callback(count - 1);
+                    }
+                    else {
+                        callback(numClicked += (midpt * 2));
+                    }
+                }, shape: shape },
                 React.createElement(SVGIcon, { color: colors.textColor, id: 'PaginationLastArrow', size: SizeType.XSmall, iconid: 'pagination_last' }))));
@@ -109,0 +115,0 @@ }

components/Shared/Card.js

@@ -6,3 +6,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled from 'styled-components';
-export var CardFooterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  .action-items--right {\n    flex: 1;\n    margin-left: auto;\n    ", "\n\n    & > :not(:first-child) {\n      margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n\n\n  .action-items--left {\n    flex: 1;\n    ", "\n    & > :not(:first-child) {\n      margin-right: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-left: ", "px;\n    }\n      \n  }\n"], ["\n  display: flex;\n  width: 100%;\n  .action-items--right {\n    flex: 1;\n    margin-left: auto;\n    ", "\n\n    & > :not(:first-child) {\n      margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n\n\n  .action-items--left {\n    flex: 1;\n    ", "\n    & > :not(:first-child) {\n      margin-right: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-left: ", "px;\n    }\n      \n  }\n"])), function (props) { return props.footerItemMargin && "\n    margin-left: ".concat(props.spacingObj.padding / 2, "px;\n    "); }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.footerItemMargin && "\n    margin-right: ".concat(props.spacingObj.padding / 2, "px;\n    "); }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.spacingObj.padding / 2; });
+export var CardFooterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  .action-items--right {\n    flex: 1;\n    margin-left: auto;\n    text-align: right;\n    ", "\n\n    & > :not(:first-child) {\n      margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n\n\n  .action-items--left {\n    flex: 1;\n    ", "\n    & > :not(:first-child) {\n      margin-right: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-left: ", "px;\n    }\n\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  .action-items--right {\n    flex: 1;\n    margin-left: auto;\n    text-align: right;\n    ", "\n\n    & > :not(:first-child) {\n      margin-left: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n\n\n  .action-items--left {\n    flex: 1;\n    ", "\n    & > :not(:first-child) {\n      margin-right: ", "px;\n    }\n\n    & > :not(:last-child) {\n      margin-left: ", "px;\n    }\n\n  }\n"])), function (props) { return props.footerItemMargin && "\n    margin-left: ".concat(props.spacingObj.padding / 2, "px;\n    "); }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.footerItemMargin && "\n    margin-right: ".concat(props.spacingObj.padding / 2, "px;\n    "); }, function (props) { return props.spacingObj.padding / 2; }, function (props) { return props.spacingObj.padding / 2; });
 var templateObject_1;

components/SVGIcon/SVGIcon.js

@@ -45,3 +45,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
             case SizeType.Large:
-                iconSize = "".concat(spacing.baseIconSize * 1.25, "px");
+                iconSize = "".concat(spacing.baseIconSize * 1.5, "px");
                 break;
@@ -48,0 +48,0 @@ default:

components/Table/Table.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import { SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
@@ -7,9 +7,9 @@ import '@zebra-fed/icons/Navigation/index.css';
     onSelectedChanged?: (selected?: any) => void;
-    onRowClicked?: (e?: any, index?: any) => void;
-    onRowHovered?: (e?: any, index?: any) => void;
+    onRowClicked?: (e: SyntheticEvent, data: any, itemIndex: number) => void;
+    onRowHovered?: (e: SyntheticEvent, data: any, itemIndex: number) => void;
     onSort?: (item: any, order: any) => void;
     initialSort?: string;
     id?: string;
-    defaultData?: Array<any>;
-    defaultHeaders?: Array<any>;
+    data?: Array<any>;
+    headers?: Array<any>;
     rowActions?: Array<any>;
@@ -21,3 +21,2 @@ style?: object;
     singleSort?: boolean;
-    showSort?: boolean;
     checkbox?: boolean;
@@ -28,7 +27,7 @@ type?: ComponentVariant;
 }
-export declare function Table({ defaultHeaders, defaultData, type, pageSize, checkbox, rowActions, onSelectedChanged, onSort, onRowClicked, onRowHovered, style, headerStyle, showSort, stickyFirstColumn, firstColumnStyle, id, singleSort, initialSort, numClicked, }: TableProps): JSX.Element;
+export declare function Table({ headers, data, type, pageSize, checkbox, rowActions, onSelectedChanged, onSort, onRowClicked, onRowHovered, style, headerStyle, stickyFirstColumn, firstColumnStyle, id, singleSort, initialSort, numClicked, }: TableProps): JSX.Element;
 export declare namespace Table {
     var defaultProps: {
-        defaultData: any[];
-        defaultHeaders: any[];
+        data: any[];
+        headers: any[];
         type: ComponentVariant;
@@ -41,3 +40,2 @@ pageSize: number;
         headerStyle: {};
-        showSort: boolean;
         onSelectedChanged: () => boolean;
@@ -63,5 +61,5 @@ onRowClicked: () => boolean;
         /**A data object containing an array of column objects. */
-        defaultData: PropTypes.Requireable<any[]>;
+        data: PropTypes.Requireable<any[]>;
         /**An array of objects that defines the table headers. Accepted attributes are 'name', 'style', 'hideSort', 'onSortChange', and 'columnStyle. */
-        defaultHeaders: PropTypes.Requireable<any[]>;
+        headers: PropTypes.Requireable<any[]>;
         /**The type of table to display. Options are border, striped, default, dense, xDense. */
@@ -81,4 +79,2 @@ type: PropTypes.Requireable<string>;
         headerStyle: PropTypes.Requireable<object>;
-        /**Shows the sorting icons on the header */
-        showSort: PropTypes.Requireable<boolean>;
         /**A callback function that's fired whenever the selected values change. Receives an array of indexes of the selected rows. */
@@ -85,0 +81,0 @@ onSelectedChanged: PropTypes.Requireable<(...args: any[]) => any>;

components/Table/Table.js

@@ -23,4 +23,4 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { ComponentVariant } from '../../interfaces/SpacingTheme';
-var TableWrapper = styled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-spacing: 0;\n    display: block;\n    width: auto;\n    border-collapse: collapse;\n    font-family: ", ";\n    color: ", ";\n"], ["\n    border-spacing: 0;\n    display: block;\n    width: auto;\n    border-collapse: collapse;\n    font-family: ", ";\n    color: ", ";\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.colorObj.textColor; });
-var Tr = styled.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: ", ";\n    height: ", "px;\n    width: ", "px;\n    background: ", ";\n\n    ", ";\n\n    &:nth-child(even) {\n        &:hover {\n            background: ", ";\n        }\n        background: ", ";\n    &:hover .action-container {     \n        visibility: visible;\n        opacity: 100;\n    }\n\n\n    &:nth-child(odd) {\n        td, th{\n            background: ", ";\n        }\n    }\n\n    td, th{\n        &:first-child{\n            position:", ";\n            z-index:2;\n            left: 0;\n      \n            &:after{\n                background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.0000) 100%);\n                transform: matrix(-1, 0, 0, 1, 0, 0);\n                right: 0;\n                height: 100%;\n                position: absolute;\n                width: 8px;\n                top: 0px;\n            }\n            ", ";\n        }\n    }\n"], ["\n    font-size: ", ";\n    font-weight: ", ";\n    height: ", "px;\n    width: ", "px;\n    background: ", ";\n\n    ", ";\n\n    &:nth-child(even) {\n        &:hover {\n            background: ", ";\n        }\n        background: ", ";\n    &:hover .action-container {     \n        visibility: visible;\n        opacity: 100;\n    }\n\n\n    &:nth-child(odd) {\n        td, th{\n            background: ", ";\n        }\n    }\n\n    td, th{\n        &:first-child{\n            position:", ";\n            z-index:2;\n            left: 0;\n      \n            &:after{\n                background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.0000) 100%);\n                transform: matrix(-1, 0, 0, 1, 0, 0);\n                right: 0;\n                height: 100%;\n                position: absolute;\n                width: 8px;\n                top: 0px;\n            }\n            ", ";\n        }\n    }\n"])), function (props) { return props.spacingObj.bodyFontSize; }, function (props) { return props.spacingObj.bodyFontWeight; }, function (props) { return props.spacingObj.height; }, function (props) { return props.spacingObj.width; }, function (props) { return props.checked ? props.colorObj.checkedBackground : props.colorObj.background; }, function (props) { return props.isHeaders === false &&
+var TableWrapper = styled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-spacing: 0;\n    display: block;\n    width: 100%;\n    border-collapse: collapse;\n    font-family: ", ";\n    color: ", ";\n"], ["\n    border-spacing: 0;\n    display: block;\n    width: 100%;\n    border-collapse: collapse;\n    font-family: ", ";\n    color: ", ";\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.colorObj.textColor; });
+var Tr = styled.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: ", ";\n    height: ", "px;\n    // width: ", "px;\n    background: ", ";\n\n    ", ";\n\n    &:nth-child(even) {\n        &:hover {\n            background: ", ";\n        }\n        background: ", ";\n    &:hover .action-container {\n        visibility: visible;\n        opacity: 100;\n    }\n\n\n    &:nth-child(odd) {\n        td, th{\n            background: ", ";\n        }\n    }\n\n    td, th{\n        &:first-child{\n            position:", ";\n            z-index:2;\n            left: 0;\n\n            &:after{\n                background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.0000) 100%);\n                transform: matrix(-1, 0, 0, 1, 0, 0);\n                right: 0;\n                height: 100%;\n                position: absolute;\n                width: 8px;\n                top: 0;\n            }\n            ", ";\n        }\n    }\n"], ["\n    font-size: ", ";\n    font-weight: ", ";\n    height: ", "px;\n    // width: ", "px;\n    background: ", ";\n\n    ", ";\n\n    &:nth-child(even) {\n        &:hover {\n            background: ", ";\n        }\n        background: ", ";\n    &:hover .action-container {\n        visibility: visible;\n        opacity: 100;\n    }\n\n\n    &:nth-child(odd) {\n        td, th{\n            background: ", ";\n        }\n    }\n\n    td, th{\n        &:first-child{\n            position:", ";\n            z-index:2;\n            left: 0;\n\n            &:after{\n                background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.0000) 100%);\n                transform: matrix(-1, 0, 0, 1, 0, 0);\n                right: 0;\n                height: 100%;\n                position: absolute;\n                width: 8px;\n                top: 0;\n            }\n            ", ";\n        }\n    }\n"])), function (props) { return props.spacingObj.bodyFontSize; }, function (props) { return props.spacingObj.bodyFontWeight; }, function (props) { return props.spacingObj.height; }, function (props) { return props.spacingObj.width; }, function (props) { return props.checked ? props.colorObj.checkedBackground : props.colorObj.background; }, function (props) { return props.isHeaders === false &&
     "\n    &:hover {\n        cursor: pointer;\n        background: ".concat(props.checked ? props.colorObj.checkedBackground : props.colorObj.backgroundHover, ";\n    }\n  "); }, function (props) { return props.checked ? props.colorObj.checkedBackground : props.colorObj.backgroundHover; }, function (props) { return props.checked ? props.colorObj.checkedBackground :
@@ -31,11 +31,11 @@ props.type === 'striped' ?
 var Td = styled.td(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    text-align: left;\n    width: ", "px;\n    height: ", "px;\n    border-top: ", ";\n    border-bottom: ", "; //TODO: Border bottom does not move with z-index\n    padding-left: ", "px;\n"], ["\n    text-align: left;\n    width: ", "px;\n    height: ", "px;\n    border-top: ", ";\n    border-bottom: ", "; //TODO: Border bottom does not move with z-index\n    padding-left: ", "px;\n"])), function (props) { return props.spacingObj.cellWidth; }, function (props) { return props.spacingObj.cellHeight; }, function (props) { return props.type === 'border' ? "1px solid ".concat(props.colorObj.border) : 'none'; }, function (props) { return props.type !== 'border' && !props.stickyFirstColumn ? "1px solid ".concat(props.colorObj.border) : ''; }, function (props) { return props.spacingObj.basePadding; });
-var Th = styled.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    text-align: left;\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    width: ", "px;\n    height: ", "px;\n    border-top: ", ";\n    border-bottom: ", ";\n    padding-left: ", "px;\n "], ["\n    position: relative;\n    text-align: left;\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    width: ", "px;\n    height: ", "px;\n    border-top: ", ";\n    border-bottom: ", ";\n    padding-left: ", "px;\n "])), function (props) { return props.isHeaderSortingData ? props.colorObj.sortTextColor : props.colorObj.textColor; }, function (props) { return props.spacingObj.labelFontSize; }, function (props) { return props.spacingObj.labelFontWeight; }, function (props) { return props.spacingObj.cellWidth; }, function (props) { return props.spacingObj.cellHeight; }, function (props) { return props.type === 'border' ? "1px solid ".concat(props.colorObj.border) : 'none'; }, function (props) { return props.type !== 'border' ? "1px solid ".concat(props.colorObj.border) : 'none'; }, function (props) { return props.spacingObj.basePadding; });
+var Th = styled.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    position: relative;\n    text-align: left;\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    // width: ", "px;\n    height: ", "px;\n    border-top: ", ";\n    border-bottom: ", ";\n    padding-left: ", "px;\n "], ["\n    position: relative;\n    text-align: left;\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    // width: ", "px;\n    height: ", "px;\n    border-top: ", ";\n    border-bottom: ", ";\n    padding-left: ", "px;\n "])), function (props) { return props.isHeaderSortingData ? props.colorObj.sortTextColor : props.colorObj.textColor; }, function (props) { return props.spacingObj.labelFontSize; }, function (props) { return props.spacingObj.labelFontWeight; }, function (props) { return props.spacingObj.cellWidth; }, function (props) { return props.spacingObj.cellHeight; }, function (props) { return props.type === 'border' ? "1px solid ".concat(props.colorObj.border) : 'none'; }, function (props) { return props.type !== 'border' ? "1px solid ".concat(props.colorObj.border) : 'none'; }, function (props) { return props.spacingObj.basePadding; });
 var SortIconsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-block;\n    flex-direction: column;\n    margin-left: 12px;\n"], ["\n    display: inline-block;\n    flex-direction: column;\n    margin-left: 12px;\n"])));
-var ActionRow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;    \n    align-items: center;\n    height: 100%;\n    margin-right: auto;\n    width: initial;\n "], ["\n    display: flex;\n    flex-direction: row;    \n    align-items: center;\n    height: 100%;\n    margin-right: auto;\n    width: initial;\n "])));
+var ActionRow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 100%;\n    margin-right: auto;\n    width: initial;\n "], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 100%;\n    margin-right: auto;\n    width: initial;\n "])));
 var ActionContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: fit-content;\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    height: fit-content;\n    margin-left: auto;\n    transition: all 0.5s;\n "], ["\n    width: fit-content;\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    height: fit-content;\n    margin-left: auto;\n    transition: all 0.5s;\n "])));
 export function Table(_a) {
-    var defaultHeaders = _a.defaultHeaders, defaultData = _a.defaultData, type = _a.type, pageSize = _a.pageSize, checkbox = _a.checkbox, rowActions = _a.rowActions, onSelectedChanged = _a.onSelectedChanged, onSort = _a.onSort, onRowClicked = _a.onRowClicked, onRowHovered = _a.onRowHovered, style = _a.style, headerStyle = _a.headerStyle, showSort = _a.showSort, stickyFirstColumn = _a.stickyFirstColumn, firstColumnStyle = _a.firstColumnStyle, id = _a.id, singleSort = _a.singleSort, initialSort = _a.initialSort, numClicked = _a.numClicked;
-    var _b = useState(defaultData), data = _b[0], setData = _b[1];
+    var headers = _a.headers, data = _a.data, type = _a.type, pageSize = _a.pageSize, checkbox = _a.checkbox, rowActions = _a.rowActions, onSelectedChanged = _a.onSelectedChanged, onSort = _a.onSort, onRowClicked = _a.onRowClicked, onRowHovered = _a.onRowHovered, style = _a.style, headerStyle = _a.headerStyle, stickyFirstColumn = _a.stickyFirstColumn, firstColumnStyle = _a.firstColumnStyle, id = _a.id, singleSort = _a.singleSort, initialSort = _a.initialSort, numClicked = _a.numClicked;
+    var _b = useState(data), dataSet = _b[0], setDataSet = _b[1];
     var _c = useState([]), selected = _c[0], setSelected = _c[1];
-    var _d = useState(defaultHeaders), headers = _d[0], setHeaders = _d[1];
+    var _d = useState(headers), headerSet = _d[0], setHeaderSet = _d[1];
     var _e = useState([]), sortedHeaders = _e[0], setSortedHeaders = _e[1];
@@ -51,10 +51,10 @@ var inherit = 'table';
     useEffect(function () {
-        setData(defaultData);
+        setDataSet(data);
         if (!selected.length) {
             setSelected([]);
         }
-    }, [defaultData]);
+    }, [data]);
     useEffect(function () {
-        setHeaders(defaultHeaders);
-    }, [defaultHeaders]);
+        setHeaderSet(headers);
+    }, [headers]);
     //here
@@ -98,36 +98,27 @@ function onSortChange(item, order) {
     }
-    function Headers(selected, headers, type, checkbox) {
-        function expensive(headers, type, checkbox) {
-            return headers.map(function (item, index) {
-                var _a, _b;
-                var sortInfo = sortedHeaders.filter(function (val) { return val.name === item.name; })[0];
-                // Set Initial Sort
-                useEffect(function () {
-                    if (index == 0 && initialSort === 'asc' || index == 0 && initialSort === 'desc') {
-                        onSortChange(item, initialSort);
-                    }
-                }, []);
-                return (React.createElement(Th, { colorObj: colors, spacingObj: spacing, isHeaderSortingData: sortInfo === null || sortInfo === void 0 ? void 0 : sortInfo.name, type: type, key: index, style: index === 0 ? __assign(__assign({}, item.style), firstColumnStyle) : item.style },
+    var ColumnHeaders = function () {
+        return headerSet.map(function (header, index) {
+            var _a, _b;
+            var sortInfo = sortedHeaders.filter(function (val) { return val.name === header.name; })[0];
+            return (React.createElement(Th, { colorObj: colors, spacingObj: spacing, isHeaderSortingData: sortInfo === null || sortInfo === void 0 ? void 0 : sortInfo.name, type: type, key: index, style: index === 0 ? __assign(__assign({}, header.style), firstColumnStyle) : header.style },
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center'
+                    } },
+                    (!index && checkbox) &&
+                        React.createElement(Checkbox, { checked: dataSet.length === selected.length, style: header.style, noHover: true, partiallySelected: selected.length > 0 && selected.length < dataSet.length, key: "headinginput".concat(index), onChange: function (event) { return setSelected(selectAll(dataSet, selected.length === dataSet.length)); } }),
                     React.createElement("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center'
-                        } },
-                        (!index && checkbox) &&
-                            React.createElement(Checkbox, { checked: data.length === selected.length, style: item.style, noHover: true, partiallySelected: selected.length > 0 && selected.length < data.length, key: "headinginput".concat(index), onChange: function (event) { return setSelected(selectAll(data, selected.length === data.length)); } }),
-                        React.createElement("div", { style: {
-                                overflow: 'hidden'
-                            } }, item.name),
-                        (showSort && !item.hideSort) &&
-                            React.createElement(SortIconsContainer, { id: "SortArrowsContainer" },
-                                React.createElement(Icon, { id: (_a = "SortArrowUp-".concat(item.name)) !== null && _a !== void 0 ? _a : 'SortArrowUp', category: 'navigation', name: 'drop-down-up', size: 8, type: null, color: sortInfo ? (sortInfo.order === 'asc' ? colors.sortTextColor : colors.sortIconColor) : colors.sortIconColor, style: { cursor: 'pointer' }, onClick: function () {
-                                        onSortChange(item, 'asc');
-                                    } }),
-                                React.createElement(Icon, { id: (_b = "SortArrowDown-".concat(item.name)) !== null && _b !== void 0 ? _b : 'SortArrowDown', category: 'navigation', name: 'drop-down-down', type: null, size: 8, color: sortInfo ? (sortInfo.order === 'desc' ? colors.sortTextColor : colors.sortIconColor) : colors.sortIconColor, style: { cursor: 'pointer' }, onClick: function () {
-                                        console.log('clicked');
-                                        onSortChange(item, 'desc');
-                                    } })))));
-            });
-        }
-        return expensive(headers, type, checkbox);
-    }
+                            overflow: 'hidden'
+                        } }, header.name),
+                    (header.sortable) &&
+                        React.createElement(SortIconsContainer, { id: "SortArrowsContainer" },
+                            React.createElement(Icon, { id: (_a = "SortArrowUp-".concat(header.name)) !== null && _a !== void 0 ? _a : 'SortArrowUp', category: 'navigation', name: 'drop-down-up', size: 8, type: null, color: sortInfo ? (sortInfo.order === 'asc' ? colors.sortTextColor : colors.sortIconColor) : colors.sortIconColor, style: { cursor: 'pointer' }, onClick: function () {
+                                    onSortChange(header, 'asc');
+                                } }),
+                            React.createElement(Icon, { id: (_b = "SortArrowDown-".concat(header.name)) !== null && _b !== void 0 ? _b : 'SortArrowDown', category: 'navigation', name: 'drop-down-down', type: null, size: 8, color: sortInfo ? (sortInfo.order === 'desc' ? colors.sortTextColor : colors.sortIconColor) : colors.sortIconColor, style: { cursor: 'pointer' }, onClick: function () {
+                                    console.log('clicked');
+                                    onSortChange(header, 'desc');
+                                } })))));
+        });
+    };
     function computeSelection(index, pageSize, numClicked, sel) {
@@ -145,5 +136,5 @@ var arr = selected.slice(0);
     }
-    function selectAll(data, sel) {
+    function selectAll(dataSet, sel) {
         var arr = [];
-        if (selected.length < data.length && selected.length > 0) {
+        if (selected.length < dataSet.length && selected.length > 0) {
             return arr;
@@ -154,3 +145,3 @@ }
         }
-        for (var i = 0; i < data.length; i++) {
+        for (var i = 0; i < dataSet.length; i++) {
             arr.push(i);
@@ -160,65 +151,68 @@ }
     }
-    function Rows(data, type, pageSize, numClicked) {
-        if (!data)
-            return;
+    /**
+     * The data object is returned, not the index, when we click a row to allow the end user to
+     * act on the model.
+     * @param e
+     * @param data
+     * @param itemIndex
+     */
+    var rowClick = function (e, data, itemIndex) {
+        onRowClicked(e, data, itemIndex);
+    };
+    /**
+     *
+     * @param e
+     * @param data
+     * @param itemIndex
+     */
+    var rowHover = function (e, data, itemIndex) {
+        onRowHovered(e, data, itemIndex);
+    };
+    var TableCell = function (_a) {
+        var _b;
+        var headerInfo = _a.headerInfo, data = _a.data, index = _a.index, itemIndex = _a.itemIndex, columnStyle = _a.columnStyle;
+        var splitFields = (_b = headerInfo === null || headerInfo === void 0 ? void 0 : headerInfo.filter[0]) === null || _b === void 0 ? void 0 : _b.split('.');
+        var rowItem = data;
+        splitFields.map(function (field) {
+            rowItem = rowItem[field];
+        });
+        var sel = selected.includes(itemIndex);
+        return (React.createElement(Td, { key: index, colorObj: colors, spacingObj: spacing, type: type, style: index === 0 ? __assign(__assign({}, columnStyle), firstColumnStyle) : columnStyle, stickyFirstColumn: stickyFirstColumn }, (!index && checkbox) ?
+            React.createElement(Checkbox, { key: "checkbox_".concat(index), checked: selected.includes(itemIndex), label: rowItem, style: columnStyle }) :
+            React.createElement(ActionRow, { style: columnStyle, key: "action" },
+                rowItem,
+                React.createElement(ActionContainer, { className: 'action-container' }, rowActions.map(function (action, i) {
+                    return (React.createElement("div", { key: "action ".concat(i) }, action));
+                })))));
+    };
+    var Rows = function () {
+        if (!dataSet)
+            return [];
         var start = numClicked * pageSize;
         var end = start + pageSize;
-        var condensed = [];
-        for (var i = start; i < end; i++) {
-            if (data[i]) {
-                condensed.push(data[i]);
-            }
-            else {
-                condensed.push({ blank: true });
-            }
-        }
-        return condensed.map(function (row, index) {
-            var _a;
-            if (index >= pageSize)
-                return;
-            // debugger;
-            var columnStyle = {};
-            if (headers[index] !== undefined) {
-                columnStyle = headers[index].columnStyle;
-            }
-            if (row.blank) {
-                var columnStyle_1 = (_a = headers[index]) === null || _a === void 0 ? void 0 : _a.columnStyle;
-                console.log(index);
-                return (React.createElement(Tr, { key: index, colorObj: colors, spacingObj: spacing, type: type, style: index === 0 ? __assign(__assign({}, columnStyle_1), firstColumnStyle) : columnStyle_1, stickyFirstColumn: stickyFirstColumn, isHeaders: false },
-                    React.createElement(Td, { colorObj: colors, spacingObj: spacing, type: type, stickyFirstColumn: stickyFirstColumn }),
-                    headers.slice(0, headers.length - 1).map(function (_, ind) { return React.createElement(Td, { key: ind, colorObj: colors, spacingObj: spacing, type: type, stickyFirstColumn: stickyFirstColumn }); })));
-            }
-            var itemIndex = index + ((numClicked - 1) * pageSize);
-            function rowClick(e) {
-                onRowClicked(e, itemIndex);
-            }
-            function rowHover(e) {
-                onRowHovered(e, itemIndex);
-            }
+        var paginatedData = dataSet.slice(start, end);
+        var tableRowDOM = [];
+        paginatedData.forEach(function (tableRowData, index) {
+            var itemIndex = index + (numClicked * pageSize);
             var sel = selected.includes(itemIndex);
-            return (React.createElement(Tr, { key: index, checked: selected.includes(itemIndex), stickyFirstColumn: stickyFirstColumn, colorObj: colors, spacingObj: spacing, isHeaders: false, type: type, onMouseDown: function (e) { return rowClick(e); }, onMouseEnter: function (e) { return rowHover(e); }, onClick: function () { return setSelected(computeSelection(index, pageSize, numClicked - 1, !sel)); } }, Object.values(row).map(function (item, i) {
-                var sel = selected.includes(itemIndex);
-                var columnStyle = headers[i].columnStyle;
-                // if(columnStyle != undefined) debugger;
-                return (React.createElement(Td, { key: i, colorObj: colors, spacingObj: spacing, type: type, style: i === 0 ? __assign(__assign({}, columnStyle), firstColumnStyle) : columnStyle, stickyFirstColumn: stickyFirstColumn }, i !== Object.values(row).length - 1 ?
-                    !i && checkbox &&
-                        React.createElement(Checkbox, { key: "checkbox ".concat(i), checked: selected.includes(itemIndex), label: item, style: columnStyle, onChange: function () { return setSelected(computeSelection(index, pageSize, numClicked - 1, !sel)); } })
-                        || item
-                    :
-                        React.createElement(ActionRow, { style: columnStyle, key: "action" },
-                            item,
-                            React.createElement(ActionContainer, { className: 'action-container' }, rowActions.map(function (action, i) {
-                                return (React.createElement("div", { key: "action ".concat(i) }, action));
-                            })))));
+            tableRowDOM.push(React.createElement(Tr, { key: "tableRow".concat(index), checked: selected.includes(itemIndex), stickyFirstColumn: stickyFirstColumn, colorObj: colors, spacingObj: spacing, isHeaders: false, type: type, onMouseDown: function (e) { return rowClick(e, tableRowData, itemIndex); }, onMouseEnter: function (e) { return rowHover(e, tableRowData, itemIndex); }, onClick: function () {
+                    setSelected(computeSelection(index, pageSize, numClicked, !sel));
+                } }, headerSet.map(function (header, i) {
+                var columnStyle = {};
+                if (header !== undefined) {
+                    columnStyle = header.columnStyle;
+                }
+                return React.createElement(TableCell, { key: "tableCell_".concat(index, "_").concat(i), headerInfo: header, data: tableRowData, index: i, itemIndex: itemIndex, columnStyle: columnStyle });
             })));
         });
-    }
+        return tableRowDOM;
+    };
     return (React.createElement(TableWrapper, { id: id !== null && id !== void 0 ? id : type, fontFamilyObj: context.getFont(), style: style, colorObj: colors },
-        React.createElement("tbody", null,
-            React.createElement(Tr, { isHeaders: true, colorObj: colors, spacingObj: spacing, type: type, style: headerStyle, stickyFirstColumn: stickyFirstColumn }, Headers(selected, headers, type, checkbox)),
-            Rows(data, type, pageSize, numClicked - 1))));
+        React.createElement("tbody", { style: { width: '100%', display: 'table' } },
+            React.createElement(Tr, { isHeaders: true, colorObj: colors, spacingObj: spacing, type: type, style: headerStyle, stickyFirstColumn: stickyFirstColumn }, ColumnHeaders()),
+            Rows())));
 }
 Table.defaultProps = {
-    defaultData: [],
-    defaultHeaders: [],
+    data: [],
+    headers: [],
     type: ComponentVariant.Default,
@@ -231,3 +225,2 @@ pageSize: 10,
     headerStyle: {},
-    showSort: true,
     onSelectedChanged: function () { return false; },
@@ -253,5 +246,5 @@ onRowClicked: function () { return false; },
     /**A data object containing an array of column objects. */
-    defaultData: PropTypes.array,
+    data: PropTypes.array,
     /**An array of objects that defines the table headers. Accepted attributes are 'name', 'style', 'hideSort', 'onSortChange', and 'columnStyle. */
-    defaultHeaders: PropTypes.array,
+    headers: PropTypes.array,
     /**The type of table to display. Options are border, striped, default, dense, xDense. */
@@ -271,4 +264,2 @@ type: PropTypes.string,
     headerStyle: PropTypes.object,
-    /**Shows the sorting icons on the header */
-    showSort: PropTypes.bool,
     /**A callback function that's fired whenever the selected values change. Receives an array of indexes of the selected rows. */
@@ -275,0 +266,0 @@ onSelectedChanged: PropTypes.func,

interfaces/index.d.ts

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

interfaces/index.js

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

package.json

 {
   "name": "@zebra-fed/zds-react-desktop",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Zebra Desktop. A React component library.",
@@ -5,0 +5,0 @@ "main": "./index.css",

sandbox.js

@@ -1,7 +0,7 @@
-import React, { useState, useEffect } from 'react';
-import { SVGIcon, TextField } from './components';
+import React, { useState, useEffect, useRef } from 'react';
+import { Dialog, Button } from './components';
 import { StripesTheme } from './StripesTheme';
 import { icons } from './iconLibrary';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ThemeMode, ShapeType, InputType } from './interfaces';
+import { ThemeMode, SizeType, ButtonType } from './interfaces';
 export function App() {
@@ -12,34 +12,28 @@ var themeObj = {
     var _a = useState(20), value = _a[0], setValue = _a[1];
+    var dialogRef = useRef(null);
+    var dialog2Ref = useRef(null);
+    var dialogHolderRef = useRef(null);
     useEffect(function () {
-        setInterval(function () {
-            setValue(50);
-        }, 4000);
+        /*setInterval(() => {
+          setValue(50);
+        }, 4000);*/
     }, []);
-    // const headers = [
-    //   { name: 'Header 1', style: {} },
-    //   { name: 'Header 2', style: {} },
-    //   { name: 'Header 3', style: {} },
-    // ];
-    // let size = Math.random() * 0 + 2000;
-    // let randomArr = [];
-    // let content = 'Row';
-    // for (let i = 0; i < size; i++) {
-    //   randomArr.push({
-    //     'Heading 1': `${content} ${i}`,
-    //     'Heading 2': `${content} ${i}`,
-    //     'Heading 3': `${content} ${i}`,
-    //   });
-    // }
-    // let width = Object.values(randomArr[0]).length * 280;
-    // let MAX_WIDTH = 1080;
-    var requirements = { symbol: true, uppercase: true, length: 10 };
-    var suggestionData = ['term1', 'term2', 'term3', 'term4'];
     return React.createElement(StripesTheme, { mode: ThemeMode.Light, theme: themeObj },
-        React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-            React.createElement(SVGIcon, { iconid: 'home', size: '50px', style: { marginRight: '10px' } }),
-            React.createElement("span", null, "Get Started")),
-        React.createElement("div", { style: { margin: '50px' } },
-            React.createElement(TextField, { shape: ShapeType.Sharp, postfix: React.createElement(SVGIcon, { iconid: 'email' }), width: '100px', inputType: InputType.Number, placeholder: "Enter a Number" })),
-        React.createElement("div", { style: { margin: '50px' } },
-            React.createElement(TextField, { shape: ShapeType.Sharp, postfix: React.createElement(SVGIcon, { iconid: 'email' }), width: '100px', placeholder: "Enter a Number" })));
+        React.createElement("div", { style: { background: 'rgba(0,0,0,.25)', position: 'relative', width: '60%', height: '70vh' } },
+            React.createElement(Button, { onClick: function () { return dialogRef.current.open(); }, size: SizeType.Large, type: ButtonType.Primary }, "Launch New Dialog"),
+            React.createElement(Dialog, { ref: dialogRef, leftActionItems: [
+                    React.createElement(Button, { key: "but3", onClick: function () { return dialogRef.current.close(); }, size: SizeType.Small, type: ButtonType.Text }, "Learn More")
+                ], rightActionItems: [
+                    React.createElement(Button, { key: "but1", onClick: function () { return dialogRef.current.close(); }, size: SizeType.Small, type: ButtonType.PrimaryVariant }, "Cancel"),
+                    React.createElement(Button, { key: "but2", onClick: function () { return dialogRef.current.close(); }, size: SizeType.Small, type: ButtonType.Primary }, "Confirm")
+                ], small: true, title: "This is the 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(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."))));
 }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

721709

increased by0.8%

Number of package files

300

increased by2.74%

Lines of code

11519

increased by0.69%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes