@openfin/ui-library 0.1.19-alpha.1623880773 → 0.1.19

package/dist/components/controls/Toggle/toggle.js

@@ -48,10 +48,10 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   height: var(--px-toggle);
   width: calc(2 * var(--px-toggle));
   border: 1px solid
-    ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.background6};
+    ${({ isChecked, theme }) => (isChecked ? theme.palette.brandPrimary : theme.palette.inputBg)};
   border-radius: calc(0.5 * var(--px-toggle));
 
-  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.background6};
+  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
   transition: background var(--openfin-ui-globalTransition),
     border-color var(---openfin-ui-globalTransition);
 

package/dist/components/input/BaseInput/baseInput.d.ts

@@ -3,7 +3,6 @@ import { WithStatusProps } from '../../system/HOC';
 export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
     message?: string;
     label?: string;
-    type?: string;
     renderInput?: Function;
     isFullWidth?: true;
 } & WithStatusProps;
@@ -13,7 +12,6 @@ export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
 export declare const BaseInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     message?: string | undefined;
     label?: string | undefined;
-    type?: string | undefined;
     renderInput?: Function | undefined;
     isFullWidth?: true | undefined;
 } & WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/input/BaseInput/baseInput.js

@@ -25,28 +25,13 @@ const Text_1 = require("../../typography/Text");
  * @private This should not be exposed beyond the ui-library.
  */
 exports.BaseInput = react_1.forwardRef((_a, ref) => {
-    var { className, renderInput, message, label, status, name, type } = _a, inputProps = __rest(_a, ["className", "renderInput", "message", "label", "status", "name", "type"]);
-    const displayLabelInline = type === 'checkbox' || type === 'radio';
-    return (jsx_runtime_1.jsxs(InputContainer, Object.assign({ flexDirection: "column", alignItems: "flex-start" }, { children: [jsx_runtime_1.jsxs(LabelWrapper, Object.assign({ inline: displayLabelInline }, { children: [!!label && (jsx_runtime_1.jsx(InputLabel, Object.assign({ as: "label", htmlFor: name, weight: "bold" }, { children: label }), void 0)),
-                    !!renderInput && renderInput(Object.assign({ name, status }, inputProps)),
-                    !renderInput && (jsx_runtime_1.jsx(exports.StyledInputField, Object.assign({ className: className, name: name, status: status }, inputProps, { ref: ref }), void 0))] }), void 0),
+    var { className, renderInput, message, label, status, name } = _a, inputProps = __rest(_a, ["className", "renderInput", "message", "label", "status", "name"]);
+    return (jsx_runtime_1.jsxs(InputContainer, Object.assign({ flexDirection: "column", alignItems: "flex-start" }, { children: [!!label && (jsx_runtime_1.jsx(InputLabel, Object.assign({ as: "label", htmlFor: name, weight: "bold" }, { children: label }), void 0)),
+            !!renderInput && renderInput(Object.assign({ name, status }, inputProps)),
+            !renderInput && (jsx_runtime_1.jsx(exports.StyledInputField, Object.assign({ className: className, name: name, status: status }, inputProps, { ref: ref }), void 0)),
             !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
 });
 exports.BaseInput.displayName = 'BaseInput';
-const LabelWrapper = styled_components_1.default(Box_1.Box) `
-  align-items: ${({ inline }) => (inline ? 'center' : 'flex-start')};
-  flex-direction: ${({ inline }) => (inline ? 'row-reverse' : 'column')};
-
-  ${({ inline, theme }) => inline &&
-    `
-    ${InputLabel} {
-      cursor: pointer;
-      margin-bottom: 0;
-      margin-left: ${theme.px.small};
-      font-weight: ${theme.fontWeight.normal};
-    }
-  `}
-`;
 const InputLabel = styled_components_1.default(Text_1.Text) `
   margin-bottom: ${({ theme }) => theme.px.small};
 `;
@@ -58,8 +43,8 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   font-size: ${({ theme }) => theme.fontSize.base};
 `;
 exports.StyledInputField = styled_components_1.default.input `
-  background: ${({ theme }) => theme.palette.background5};
-  border: 1px solid ${({ theme }) => theme.palette.background6};
+  background: ${({ theme }) => theme.palette.inputBg};
+  border: 1px solid ${({ theme }) => theme.palette.inputBg};
   border-color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'inputBg')};
   border-radius: ${({ theme }) => theme.radius.small};
   box-shadow: ${({ theme }) => theme.shadow.base};

package/dist/components/input/NumberInput/numberInput.js

@@ -58,7 +58,7 @@ const StyledNumberInput = react_1.forwardRef((_a, ref) => {
             jsx_runtime_1.jsxs(ControlContainer, Object.assign({ flexDirection: "column", disabled: props.disabled }, { children: [jsx_runtime_1.jsx(ArrowControl, Object.assign({ onClick: onIncrement, disabled: props.disabled }, { children: jsx_runtime_1.jsx(Icon_1.Icon, { icon: "TriangleUpIcon" }, void 0) }), void 0),
                     jsx_runtime_1.jsx(ArrowControl, Object.assign({ onClick: onDecrement, disabled: props.disabled }, { children: jsx_runtime_1.jsx(Icon_1.Icon, { icon: "TriangleDownIcon" }, void 0) }), void 0)] }), void 0)] }, void 0));
 });
-StyledNumberInput.displayName = 'StyledNumberInput';
+StyledNumberInput.displayName = "StyledNumberInput";
 const StyledInputContainer = styled_components_1.default.div `
   position: relative;
   overflow: hidden;

package/dist/components/input/TextInput/textInput.d.ts

@@ -4,7 +4,6 @@ export declare type TextInputProps = BaseInputProps;
 export declare const TextInput: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
     message?: string | undefined;
     label?: string | undefined;
-    type?: string | undefined;
     renderInput?: Function | undefined;
     isFullWidth?: true | undefined;
 } & import("../../system/HOC").WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -17,8 +17,8 @@ export declare const Color: {
     readonly neutralGray: "#7D808A";
     readonly darkGray1: "#53565F";
     readonly darkGray2: "#383A40";
-    readonly darkGray3: "#2F3136";
-    readonly darkGray4: "#24262B";
+    readonly darkGray3: "#24262B";
+    readonly darkGray4: "#2F3136";
     readonly darkGray5: "#1E1F23";
     readonly darkGray6: "#111214";
     readonly openFinDarkest: "#3D39CD";

package/dist/components/system/ThemeProvider/lib/constants.js

@@ -41,8 +41,8 @@ exports.Color = {
     neutralGray: '#7D808A',
     darkGray1: '#53565F',
     darkGray2: '#383A40',
-    darkGray3: '#2F3136',
-    darkGray4: '#24262B',
+    darkGray3: '#24262B',
+    darkGray4: '#2F3136',
     darkGray5: '#1E1F23',
     darkGray6: '#111214',
     openFinDarkest: '#3D39CD',

package/dist/components/system/ThemeProvider/themes/openfin.js

@@ -34,6 +34,6 @@ exports.OpenFinDarkTheme = createTheme_1.createTheme(Object.assign(Object.assign
     // Brand
     [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray2, 
     // Inputs
-    [palette_1.Palette.inputBg]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray5, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray5, 
+    [palette_1.Palette.inputBg]: constants_1.Color.darkGray3, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray5, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray5, 
     // Text
     [palette_1.Palette.textDefault]: constants_1.Color.white, [palette_1.Palette.textHelp]: constants_1.Color.lightGray5, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }));

package/dist/index.d.ts

@@ -6,7 +6,6 @@ export * from './components/elements/Loader';
 export * from './components/input/RawInput';
 export * from './components/input/TextInput';
 export * from './components/input/NumberInput';
-export * from './components/input/Checkbox';
 export * from './components/layout/Box';
 export * from './components/layout/DefinitionList';
 export * from './components/system/GlobalStyles';

package/dist/index.js

@@ -31,7 +31,6 @@ __exportStar(require("./components/elements/Loader"), exports);
 __exportStar(require("./components/input/RawInput"), exports);
 __exportStar(require("./components/input/TextInput"), exports);
 __exportStar(require("./components/input/NumberInput"), exports);
-__exportStar(require("./components/input/Checkbox"), exports);
 __exportStar(require("./components/layout/Box"), exports);
 __exportStar(require("./components/layout/DefinitionList"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.19-alpha.1623880773",
+  "version": "0.1.19",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -128,9 +128,6 @@
       "@typescript-eslint/no-unused-vars": "error",
       "@typescript-eslint/no-explicit-any": "error"
     },
-    "globals": {
-      "JSX": "readonly"
-    },
     "settings": {
       "react": {
         "version": "detect"

package/dist/components/input/Checkbox/checkbox.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { BaseInputProps } from '../BaseInput';
-import { WithStatusProps } from '../../system/HOC';
-export declare type CheckboxProps = BaseInputProps;
-export declare const Checkbox: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    message?: string | undefined;
-    label?: string | undefined;
-    type?: string | undefined;
-    renderInput?: Function | undefined;
-    isFullWidth?: true | undefined;
-} & WithStatusProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/Checkbox/checkbox.js

@@ -1,96 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const BaseInput_1 = require("../BaseInput");
-const Icon_1 = require("../../elements/Icon");
-const ThemeProvider_1 = require("../../system/ThemeProvider");
-exports.Checkbox = React.forwardRef((_a, ref) => {
-    var { status } = _a, props = __rest(_a, ["status"]);
-    return (jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({}, props, { type: "checkbox", status: status, renderInput: (_a) => {
-            var inputProps = __rest(_a, []);
-            return (jsx_runtime_1.jsxs(Container, { children: [jsx_runtime_1.jsx(Input, Object.assign({ ref: ref, id: inputProps.name, type: "checkbox" }, inputProps), void 0),
-                    jsx_runtime_1.jsx(Fauxbox, Object.assign({ status: status }, { children: jsx_runtime_1.jsx(CheckIcon, {}, void 0) }), void 0)] }, void 0));
-        } }), void 0));
-});
-exports.Checkbox.displayName = 'Checkbox';
-const Container = styled_components_1.default.div `
-  display: inline-block;
-  position: relative;
-`;
-const Fauxbox = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${({ theme }) => theme.px.base};
-  width: ${({ theme }) => theme.px.base};
-  border: 1px solid ${({ theme }) => theme.palette.textDefault};
-  border-color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'textDefault')};
-  border-radius: 2px;
-  pointer-events: none;
-`;
-const CheckIcon = styled_components_1.default(Icon_1.Icon).attrs({ icon: 'CheckIcon', size: 'small' }) `
-  opacity: 0;
-`;
-const Input = styled_components_1.default.input `
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-
-  &:checked + ${Fauxbox + ' ' + CheckIcon} {
-    opacity: 1;
-  }
-
-  &:hover + ${Fauxbox} {
-    box-shadow: 0 0 1px 1px ${({ theme }) => theme.palette.inputFocused};
-  }
-
-  &:focus + ${Fauxbox} {
-    box-shadow: 0 0 1px 1px ${({ theme }) => theme.palette.inputFocused};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &:disabled + ${Fauxbox} {
-    opacity: 0.5;
-  }
-`;

package/dist/components/input/Checkbox/index.d.ts

@@ -1 +0,0 @@
-export * from './checkbox';

package/dist/components/input/Checkbox/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./checkbox"), exports);