@openfin/ui-library 0.1.10-alpha.1619028249 → 0.1.10

package/dist/components/input/RawInput/rawInput.d.ts

@@ -1,3 +1,5 @@
+import { InputHTMLAttributes } from 'react';
+export declare type RawInputProps = InputHTMLAttributes<HTMLInputElement>;
 /**
  * Unstyled input extended by other components
  */

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

@@ -1,4 +1,7 @@
-import { FC } from 'react';
-import { BaseInputProps } from '../BaseInput';
-export declare type TextInputProps = BaseInputProps;
-export declare const TextInput: FC<TextInputProps>;
+import { FC, InputHTMLAttributes } from 'react';
+import { WithStatusProps } from '../../system/HOC';
+export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    message?: string;
+    label?: string;
+};
+export declare const TextInput: FC<TextInputProps & WithStatusProps>;

package/dist/components/input/TextInput/textInput.js

@@ -10,12 +10,55 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const BaseInput_1 = require("../BaseInput");
-const TextInput = (_a) => {
-    var props = __rest(_a, []);
-    return jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ type: "text" }, props), void 0);
-};
-exports.TextInput = TextInput;
+const styled_components_1 = __importDefault(require("styled-components"));
+const RawInput_1 = require("../RawInput");
+const HOC_1 = require("../../system/HOC");
+const Box_1 = require("../../layout/Box");
+const Text_1 = require("../../typography/Text");
+const ThemeProvider_1 = require("../../system/ThemeProvider");
+exports.TextInput = HOC_1.withStatus((_a) => {
+    var { className, message, label, status, name } = _a, inputProps = __rest(_a, ["className", "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)),
+            jsx_runtime_1.jsx(StyledInputField, Object.assign({ className: className, type: "text", name: name, status: status }, inputProps), void 0),
+            !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
+});
+const InputLabel = styled_components_1.default(Text_1.Text) `
+  margin-bottom: ${({ theme }) => theme.px.small};
+`;
+const InputMessage = styled_components_1.default(Text_1.Text) `
+  color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'textHelp')};
+  margin-top: ${({ theme }) => theme.px.small};
+`;
+const InputContainer = styled_components_1.default(Box_1.Box) `
+  font-size: ${({ theme }) => theme.fontSize.base};
+`;
+const StyledInputField = styled_components_1.default(RawInput_1.RawInput) `
+  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: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  color: ${({ theme }) => theme.palette.inputColor};
+  font-size: ${({ theme }) => theme.fontSize.base};
+  padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
+  transition: border-color var(--openfin-ui-globalTransition);
+
+  &:focus {
+    outline: 0;
+    border-color: ${({ theme }) => theme.palette.inputFocused};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:disabled::placeholder {
+    color: ${({ theme }) => theme.palette.inputDisabled};
+  }
+`;

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export * from './components/typography/Heading';
 export * from './components/typography/Text';
 export * from './hooks/useColorScheme';
 export * from './hooks/useMediaQuery';
+export * from './assets/fonts';
 export * as StoryHelpers from './storybookHelpers';

package/dist/index.js

@@ -37,4 +37,5 @@ __exportStar(require("./components/typography/Heading"), exports);
 __exportStar(require("./components/typography/Text"), exports);
 __exportStar(require("./hooks/useColorScheme"), exports);
 __exportStar(require("./hooks/useMediaQuery"), exports);
+__exportStar(require("./assets/fonts"), exports);
 exports.StoryHelpers = __importStar(require("./storybookHelpers"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.10-alpha.1619028249",
+  "version": "0.1.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -153,7 +153,6 @@
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
-    "arrowParens": "always",
-    "printWidth": 100
+    "arrowParens": "always"
   }
 }

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

@@ -1,9 +0,0 @@
-import { FC, InputHTMLAttributes } from 'react';
-import { WithStatusProps } from '../../system/HOC';
-export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
-    message?: string;
-    label?: string;
-    renderInput?: Function;
-} & WithStatusProps;
-export declare const BaseInput: FC<BaseInputProps>;
-export declare const StyledInputField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputHTMLAttributes<HTMLInputElement> & WithStatusProps, never>;

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

@@ -1,64 +0,0 @@
-"use strict";
-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.StyledInputField = exports.BaseInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Box_1 = require("../../layout/Box");
-const HOC_1 = require("../../system/HOC");
-const ThemeProvider_1 = require("../../system/ThemeProvider");
-const Text_1 = require("../../typography/Text");
-exports.BaseInput = HOC_1.withStatus((_a) => {
-    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), void 0)),
-            !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
-});
-const InputLabel = styled_components_1.default(Text_1.Text) `
-  margin-bottom: ${({ theme }) => theme.px.small};
-`;
-const InputMessage = styled_components_1.default(Text_1.Text) `
-  color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'textHelp')};
-  margin-top: ${({ theme }) => theme.px.small};
-`;
-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.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: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  color: ${({ theme }) => theme.palette.inputColor};
-  font-size: ${({ theme }) => theme.fontSize.base};
-  padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
-  transition: border-color var(--openfin-ui-globalTransition);
-
-  &:focus {
-    outline: 0;
-    border-color: ${({ theme }) => theme.palette.inputFocused};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &:disabled::placeholder {
-    color: ${({ theme }) => theme.palette.inputDisabled};
-  }
-`;

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

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

package/dist/components/input/BaseInput/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("./baseInput"), exports);

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

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

package/dist/components/input/NumberInput/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("./numberInput"), exports);

package/dist/components/input/NumberInput/numberInput.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-import { BaseInputProps } from '../BaseInput';
-export declare const NumberInput: FC<BaseInputProps>;

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

@@ -1,106 +0,0 @@
-"use strict";
-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.NumberInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const math_1 = require("../../../lib/math");
-const Icon_1 = require("../../elements/Icon");
-const Box_1 = require("../../layout/Box");
-const BaseInput_1 = require("../BaseInput");
-var Direction;
-(function (Direction) {
-    Direction[Direction["Up"] = 1] = "Up";
-    Direction[Direction["Down"] = -1] = "Down";
-})(Direction || (Direction = {}));
-const NumberInput = (_a) => {
-    var { min, max, onChange, step = 1, value = '' } = _a, props = __rest(_a, ["min", "max", "onChange", "step", "value"]);
-    // Since we are recreating the +/- buttons, we need to capture the value state at this level.
-    const stepInterval = Number(step);
-    const [num, setNum] = react_1.useState(value);
-    react_1.useEffect(() => setNum(value), []);
-    const takeStep = (direction) => {
-        const base = num ? Number(num) : 0;
-        const lower = min ? Number(min) : undefined;
-        const upper = max ? Number(max) : undefined;
-        const newNum = math_1.clamp(base + stepInterval * direction, lower, upper);
-        setNum(newNum);
-    };
-    return (jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ type: "number" }, props, { renderInput: (_a) => {
-            var inputProps = __rest(_a, []);
-            return (jsx_runtime_1.jsx(StyledNumberInput, Object.assign({ onIncrement: () => takeStep(Direction.Up), onDecrement: () => takeStep(Direction.Down), onChange: (event) => {
-                    const { value } = event === null || event === void 0 ? void 0 : event.target;
-                    if (value) {
-                        setNum(Number(value));
-                    }
-                    onChange && onChange(event);
-                }, min: min, max: max, step: step }, inputProps, { value: num }), void 0));
-        } }), void 0));
-};
-exports.NumberInput = NumberInput;
-const StyledNumberInput = (_a) => {
-    var { onIncrement, onDecrement } = _a, props = __rest(_a, ["onIncrement", "onDecrement"]);
-    return (jsx_runtime_1.jsxs(StyledInputContainer, { children: [jsx_runtime_1.jsx(Input, Object.assign({}, props), void 0),
-            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));
-};
-const StyledInputContainer = styled_components_1.default.div `
-  position: relative;
-  overflow: hidden;
-  border-radius: ${({ theme }) => theme.radius.small};
-`;
-const ControlContainer = styled_components_1.default(Box_1.Box) `
-  align-items: center;
-  position: absolute;
-  right: 1px;
-  top: 1px;
-  gap: 1px;
-  height: calc(100% - 2px);
-  border-radius: ${({ theme }) => `0 ${theme.radius.small} ${theme.radius.small} 0`};
-  overflow: hidden;
-
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
-`;
-const ArrowControl = styled_components_1.default(Box_1.Box) `
-  cursor: pointer;
-  background: ${({ theme }) => theme.palette.inputDisabled};
-  padding: 0 ${({ theme }) => theme.px.xsmall};
-  user-select: none;
-  height: 50%;
-  align-items: center;
-  justify-content: center;
-
-  color: ${({ disabled, theme }) => disabled ? theme.palette.textHelp : theme.palette.textDefault};
-
-  &:hover {
-    background: ${({ theme }) => theme.palette.inputFocused};
-  }
-
-  &:active {
-    background: ${({ theme }) => theme.palette.inputColor};
-  }
-`;
-const Input = styled_components_1.default(BaseInput_1.StyledInputField) `
-  appearance: textfield;
-  padding-right: ${({ theme }) => theme.px.xxxlarge};
-
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    appearance: none;
-    margin: 0;
-  }
-`;

package/dist/lib/math.d.ts

@@ -1,9 +0,0 @@
-/**
- * Returns a number whose value is limited to the given range.
- *
- * @param {Number} min The lower boundary of the output range
- * @param {Number} max The upper boundary of the output range
- * @returns A number in the range [min, max]
- * @type Number
- */
-export declare const clamp: (num: number, min?: number | undefined, max?: number | undefined) => number;

package/dist/lib/math.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.clamp = void 0;
-/**
- * Returns a number whose value is limited to the given range.
- *
- * @param {Number} min The lower boundary of the output range
- * @param {Number} max The upper boundary of the output range
- * @returns A number in the range [min, max]
- * @type Number
- */
-const clamp = (num, min, max) => {
-    if (min && max) {
-        return Math.min(Math.max(num, min), max);
-    }
-    if (max && !min) {
-        return Math.min(num, max);
-    }
-    if (min && !max) {
-        return Math.max(num, min);
-    }
-    return num;
-};
-exports.clamp = clamp;