@openfin/ui-library 0.1.11 → 0.1.12-alpha.1620307785

package/README.md

@@ -1,8 +1,18 @@
 # OpenFin UI Library
 
-**[openfin-ui.netlify.com](https://openfin-ui.netlify.com)** `pw: pizza`
+> React component library for OpenFin Workspace products – Informed by [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components).
+
+**Storybook:** [openfin-ui.netlify.com](https://openfin-ui.netlify.com) (pw: pizza)
+**NPM Package:** [@openfin/ui-library](https://www.npmjs.com/package/@openfin/ui-library)
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/8fc15443-c69c-473b-b5cf-c5dbc516b0bf/deploy-status)](https://app.netlify.com/sites/openfin-ui/deploys)
+![Release Package](https://github.com/openfin/ui-library/actions/workflows/release-package.yml/badge.svg)
+
+## What is this for?
+
+**TL;DR** – Use this library and write less CSS.
+
+This is an opinionated React component library, which aims to provide the basic building blocks that you can use in any OpenFin environment. It was built w/ our [Spatial Design System](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components) in mind, so it should always reflect OpenFin's latest branding and designs.
 
 ## Installation
 
@@ -23,101 +33,140 @@ $ yarn add @openfin/ui-library
 $ yarn add @openfin/ui-library@v1.0.1
 ```
 
-## Working in tandem on UI Library and Application
+## Usage
 
-Sometimes you may need to work on the `ui-library` alongside your own application. We use [yalc](https://www.npmjs.com/package/yalc) for this. It solves a few problems that `yarn link` creates and it's pretty intuitive
+### ThemeProvider
 
-### 1. Install and setup yalc
-
-```bash
-# Make sure yalc is installed globally
-$ npm i yalc -g
+`ThemeProvider` is the component that provides theme information to the `ui-library` components nested deeply within your application. Make sure to include this above your application so your components will be styled properly.
 
-# Set up yalc in ui-library
-$ cd ui-library/
-$ yalc publish
+```javascript
+import { ThemeProvider } from '@openfin/ui-library';
+import MyApp from 'some/cool/place';
 
-# Add local ui-library package to your app
-$ cd ../myCoolApp/
-$ yalc add @openfin/ui-library
+const MyCoolAppContainer = () => (
+  <ThemeProvider>
+    <MyApp />
+  </ThemeProvider>
+);
 ```
 
-This links your local copy of UI Library to your app using symlinks and `package.json`.
-
-### 2. Working with yalc
+### Basic Usage
 
-Once you're setup, subsequent changes in UI Library can be propagated across easily.
+```javascript
+import { Box, H1, Icon, TextInput } from '@openfin/ui-library';
 
-After making changes in `ui-library`, run `yarn build && yalc push`. This will apply a version bump to the local yalc package respository. It will also update the package in your app directory, but you will most likely need to restart any development servers to see the changes.
+export const MyApp = () => (
+  <Box flexDirection="column">
+    <H1>
+      <Icon icon="OpenFinIcon" /> Cool heading
+    </H1>
 
-```sh
-# push updates from ui-library side to your app
-$ yarn build && yalc push
+    <TextInput placeholder="Cool stuff goes here" />
+  </Box>
+);
 ```
 
-#### Known Issues
-
-- Storybook does not pick up changes after a `yalc push` and must be restarted
+**View the [Full Component Docs](./src/components) for more usage info.**
 
-## Using UI Library
+### Extending Components
 
-### Theme Provider
+Whenever possible, it is prefereable to use the components as-is. However – using [styled-components](https://styled-components.com/docs), it is very easy. Try using the following guiding principles when doing so:
 
-The `ThemeProvider` is a component that provides theme information to the `ui-library` components nested deeply within your application. Make sure to include this above your application so your components will be styled properly.
+- Familiarize yourself w/ the `theme` prop, and use it whenever possible.
+- Avoid hard-coded pixel values.
+- Don't _ever_ use hard-coded color values.
 
 ```javascript
-import { ThemeProvider } from '@openfin/ui-library';
-import MyApp from 'some/cool/place';
-
-const MyCoolAppContainer = () => (
-  <ThemeProvider>
-    <MyApp />
-  </ThemeProvider>
+import { Box, Text } from '@openfin/ui-library';
+import styled from 'styled-components';
+
+export const MyCoolComponent = () => (
+  <Container flexDirection="column">
+    <ImportantText>How cool is this?</ImportantText>
+    <Text weight="bold">Super cool</Text>
+  </Container>
 );
+
+const Container = styled(Box)`
+  background: ${({ theme }) => theme.palette.background6};
+  border-radius: ${({ theme }) => theme.radius.small};
+  margin: ${({ theme }) => `${theme.px.small} 0 ${theme.px.base}`};
+`;
+
+const ImportantText = styled(Text)`
+  color: ${({ theme }) => theme.palette.statusWarning};
+  cursor: pointer;
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+`;
 ```
 
-## [Storybook](https://storybook.js.org)
+## Contributing
+
+### Open a pull request 😎
 
-Great for exploring and experimenting with UI Library components. It's also a used for [testing our components](https://storybook.js.org/docs/react/workflows/unit-testing).
+Pull requests are a great way to express an idea or need, if it's easier to "show" instead of "tell", go for it, propose a change!
+
+Also keep in mind, UI Library is a home of centralized common components, **used by several products**. It's reasonable to expect PRs may spark conversations about the **essence of the change** and it's benefits and impact across the application ecosystem.
+
+Meaning: While there are no hard rules about what belongs in _our_ library, if a change is too opinionated or too specialized, it may make sense to leave it out. **A library that does less, is a lot easier to know and work with**.
+
+### Storybook
 
-### Storybook For Developers
+Great for exploring and experimenting with UI Library components. It's also used for [testing our components](https://storybook.js.org/docs/react/workflows/unit-testing).
 
 ```bash
+# Run it locally
 $ yarn storybook
 ```
 
-### Storybook For Designers
-
-Great for a quick look at the latest build, [check it out](https://openfin-ui.netlify.com)
-
-## UI Lib @ Codesandbox.io
+### Codesandbox.io
 
 Great for developer experimentation without all of the overhead.
 
 The sandbox is currently **private**, request access and [give it a try](https://codesandbox.io/s/openfin-ui-library-39y7c).
 
-## How to test
+### Working locally w/ other apps
 
-```sh
-yarn test
+Sometimes you may need to work on the `ui-library` alongside your own application. We use [yalc](https://www.npmjs.com/package/yalc) for this. It solves a few problems that `yarn link` creates, and it's pretty intuitive.
+
+#### 1. Install and setup yalc
+
+```bash
+# Make sure yalc is installed globally
+$ npm i yalc -g
+
+# Set up yalc in ui-library
+$ cd ui-library/
+$ yalc publish
+
+# Add local ui-library package to your app
+$ cd ../myCoolApp/
+$ yalc add @openfin/ui-library
 ```
 
-## How to Contribute
+This links your local copy of UI Library to your app using symlinks and `package.json`.
+
+#### 2. Working with yalc
+
+Once you're setup, subsequent changes in UI Library can be propagated across easily.
 
-### 1. Git pre-push hook is handled by Husky automatically
+After making changes in `ui-library`, run `yarn build && yalc push`. This will apply a version bump to the local yalc package respository. It will also update the package in your app directory, but you will most likely need to restart any development servers to see the changes.
 
 ```sh
-$ yarn git:pre-push
-# Husky should runs this command automatically before pushing
+# push updates from ui-library side to your app
+$ yarn build && yalc push
 ```
 
-### 2. Open a pull request 😎
+#### Known Issues
 
-Pull requests are a great way to express an idea or need, if it's easier to "show" instead of "tell", go for it, propose a change!
+- Storybook does not pick up changes after a `yalc push` and must be restarted
 
-Also keep in mind, UI Library is a home of centralized common components, **used by several products**. It's reasonable to expect PRs may spark conversations about the **essence of the change** and it's benefits and impact across the application ecosystem.
+### Linting
 
-Meaning: While there are no hard rules about what belongs in _our_ library, if a change is too opinionated or too specialized, it may make sense to leave it out. **A library that does less, is a lot easier to know and work with**.
+```sh
+# Husky runs this command automatically before pushing
+$ yarn git:pre-push
+```
 
 ## Compiling the Library
 
@@ -133,6 +182,12 @@ Extending base config used by `tsc` when bundling the library for a new release.
 
 Extending base config used by `Storybook` to quiet some extraneous warnings.
 
+## Testing
+
+```sh
+yarn test
+```
+
 ## Versioning & Releasing
 
 ### 1. Create a release branch
@@ -166,96 +221,3 @@ Once your release branch is merged into main, you should now create a release th
 - Enter a description that includes all feature ticket numbers that were included since the previous release. Don't worry, you can always go back and edit it later.
 
 This triggers a Github Action to automatically build the latest version of the `ui-library` and package it for remote installation. Check the status of this task within this repo's actions tab.
-
-## Components
-
-### Controls
-
-- [Button](./src/components/controls/Button)
-- [Icon](./src/components/controls/Icon)
-- [Input](./src/components/input/Input)
-- [Toggle](./src/components/controls/Toggle)
-- [Badge](./src/components/controls/Badge)
-
-### Layout
-
-- [Box](./src/components/layout/Box)
-
-### List
-
-- [DefinitionList](./src/components/list/DefinitionList)
-
-### System
-
-- [GlobalStyles](./src/components/system/GlobalStyles)
-- [ThemeProvider](./src/components/system/ThemeProvider)
-- [Themes](./src/components/system/ThemeProvider/themes) (included OpenFin Themes)
-
-### [Typography](./src/components/typography)
-
-- Text
-- Heading
-
-## [Hooks](./src/hooks)
-
-- useMediaQuery
-- useLayoutMediaQuery
-- useColorScheme
-- useTheme
-
-## [Mixins](./src/components/system/ThemeProvider/lib/mixins.ts)
-
-CSS fragments that you can include in any styled component
-
-- `${Mixins.noSelect}`
-- `${Mixins.textOverflow}`
-- `${Mixins.scrollbar.base}`
-- `${Mixins.scrollbar.small}`
-
-## Variants
-
-### What are variants?
-
-Variants as a concept is shared with the Design team and [Spatial](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial) and it's a way of describing the _variations_ of a given component.
-
-**In Figma**, variants are represented as a matrix of options mapped / instrumented into the design itself.
-
-**In UI Library**, variants are represented as a matrix of component props key:values mapped / instrumented into Styled Component css partials.
-
-This isn't a new idea, or proprietary to Figma, but it is a built-in first class construct in that software. It's **not** built into the Styled Components as a first class construct, we are creating it here in the UI Library as a novel way to mirror that visual mapping in component builds. It's syntactic sugar, an opinion for working with fragments of style using Styled Components.
-
-_It may be slightly more verbose with a bit of initial cognitive cost to represent component variations this way._ Let's commit to this pattern for now, to see it at scale, "in the wild". And let's also commit to continuing to evaluate it's usefulness. The goal is to offer a **semantic symmetry with design and build** that hopefuly translates to more consistent and stable products over a longer timeline.
-
-### Can I see an example of variants?
-
-Yes! [Button](./src/components/Button), [Icon](./src/components/Icon), and [Toggle](./src/components/Toggle) all implement variants in the UI Library mirroring the variants in Figma.
-
-### How does it work?
-
-```tsx
-// component.variants.ts
-export const variants = {
-  propName: {
-    propValueA: css`
-      /* CSS... */
-      color: red;
-    `,
-    propValueB: css`
-      /* CSS... */
-      color: blue;
-    `,
-  },
-};
-
-// component.tsx
-const Component = styled.div<{ propName: string }>`
-  /* Injects a CSS Partial matching prop name -> value */
-  ${getVariantCSS(variants, 'propName')};
-`;
-
-// Component with red text
-<Component someProp="propValueA" />
-
-// Component with blue text
-<Component someProp="propValueB" />
-```

package/dist/components/elements/Badge/badge.js

@@ -37,5 +37,5 @@ const BadgeElement = styled_components_1.default(Box_1.Box) `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  box-shadow: ${({ theme }) => theme.shadow.base};
 `;

package/dist/components/elements/Icon/icon.d.ts

@@ -8,8 +8,9 @@ export declare type PropsWithChild = {
     icon?: never;
     children: ReactNode;
 };
-export declare type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & {
+export declare type IconSizeProps = {
     size?: IconSizeType;
     containerSize?: IconSizeType;
 };
+export declare type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & IconSizeProps;
 export declare const Icon: import("styled-components").StyledComponent<({ icon, children, size, containerSize, ...props }: IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/elements/Loader/index.d.ts

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

package/dist/components/elements/Loader/index.js

@@ -0,0 +1,13 @@
+"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("./loader"), exports);

package/dist/components/elements/Loader/loader.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+import { IconSizeProps } from '../Icon';
+export declare type LoaderProps = IconSizeProps & HTMLAttributes<HTMLDivElement>;
+export declare const Loader: import("styled-components").StyledComponent<({ ...props }: LoaderProps) => JSX.Element, import("styled-components").DefaultTheme, IconSizeProps & HTMLAttributes<HTMLDivElement>, never>;

package/dist/components/elements/Loader/loader.js

@@ -0,0 +1,25 @@
+"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.Loader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon_1 = require("../Icon");
+exports.Loader = styled_components_1.default((_a) => {
+    var props = __rest(_a, []);
+    return (jsx_runtime_1.jsx(Icon_1.Icon, Object.assign({}, props, { children: jsx_runtime_1.jsx("svg", Object.assign({ width: "100%", height: "100%", viewBox: "0 0 38 38", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor" }, { children: jsx_runtime_1.jsx("g", Object.assign({ fill: "none", fillRule: "evenodd" }, { children: jsx_runtime_1.jsxs("g", Object.assign({ transform: "translate(1 1)", strokeWidth: "2" }, { children: [jsx_runtime_1.jsx("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }, void 0),
+                        jsx_runtime_1.jsx("path", Object.assign({ d: "M36 18c0-9.94-8.06-18-18-18" }, { children: jsx_runtime_1.jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 18 18", to: "360 18 18", dur: "1s", repeatCount: "indefinite" }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
+}) ``;

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

@@ -1,9 +1,13 @@
-import { FC, InputHTMLAttributes } from 'react';
+import { 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 BaseInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    message?: string | undefined;
+    label?: string | undefined;
+    renderInput?: Function | undefined;
+} & WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;
 export declare const StyledInputField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputHTMLAttributes<HTMLInputElement> & WithStatusProps, never>;

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

@@ -16,18 +16,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledInputField = exports.BaseInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 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) => {
+exports.BaseInput = react_1.forwardRef((_a, ref) => {
     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)),
+            !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 InputLabel = styled_components_1.default(Text_1.Text) `
   margin-bottom: ${({ theme }) => theme.px.small};
 `;
@@ -43,7 +44,7 @@ exports.StyledInputField = styled_components_1.default.input `
   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);
+  box-shadow: ${({ theme }) => theme.shadow.base};
   color: ${({ theme }) => theme.palette.inputColor};
   font-size: ${({ theme }) => theme.fontSize.base};
   padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};

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

@@ -1,3 +1,14 @@
-import { FC } from 'react';
+import { ChangeEventHandler } from 'react';
 import { BaseInputProps } from '../BaseInput';
-export declare const NumberInput: FC<BaseInputProps>;
+interface NumberInputProps extends Omit<BaseInputProps, 'value'> {
+    min?: number;
+    max?: number;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * @default 1
+     */
+    step?: number;
+    value?: number;
+}
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -27,12 +27,12 @@ var 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"]);
+exports.NumberInput = react_1.forwardRef((_a, ref) => {
+    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 [num, setNum] = react_1.useState(Number(value));
+    react_1.useEffect(() => setNum(Number(value)), []);
     const takeStep = (direction) => {
         const base = num ? Number(num) : 0;
         const lower = min ? Number(min) : undefined;
@@ -42,7 +42,7 @@ const NumberInput = (_a) => {
     };
     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) => {
+            return (jsx_runtime_1.jsx(StyledNumberInput, Object.assign({ ref: ref, 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));
@@ -50,14 +50,15 @@ const NumberInput = (_a) => {
                     onChange && onChange(event);
                 }, min: min, max: max, step: step }, inputProps, { value: num }), void 0));
         } }), void 0));
-};
-exports.NumberInput = NumberInput;
-const StyledNumberInput = (_a) => {
+});
+exports.NumberInput.displayName = 'NumberInput';
+const StyledNumberInput = react_1.forwardRef((_a, ref) => {
     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),
+    return (jsx_runtime_1.jsxs(StyledInputContainer, { children: [jsx_runtime_1.jsx(Input, Object.assign({ ref: ref }, 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));
-};
+});
+StyledNumberInput.displayName = "StyledNumberInput";
 const StyledInputContainer = styled_components_1.default.div `
   position: relative;
   overflow: hidden;

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

@@ -1,4 +1,8 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import { BaseInputProps } from '../BaseInput';
 export declare type TextInputProps = BaseInputProps;
-export declare const TextInput: FC<TextInputProps>;
+export declare const TextInput: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+    message?: string | undefined;
+    label?: string | undefined;
+    renderInput?: Function | undefined;
+} & import("../../system/HOC").WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,21 +1,10 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 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;
+exports.TextInput = react_1.forwardRef((props, ref) => {
+    return jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ ref: ref, type: "text" }, props), void 0);
+});
+exports.TextInput.displayName = 'TextInput';

package/dist/components/system/HOC/index.d.ts

@@ -1,11 +1,4 @@
-import { ComponentType, FC } from 'react';
 export declare type StatusType = 'success' | 'warning' | 'critical' | 'active';
 export declare type WithStatusProps = {
     status?: StatusType;
 };
-/**
- * withStatus HOC
- * Takes a component and applies the status prop to it.
- * @returns Instantiated component w/ status and other props applied.
- */
-export declare const withStatus: <P extends object>(Component: ComponentType<P>) => FC<P & WithStatusProps>;

package/dist/components/system/HOC/index.js

@@ -1,25 +1,2 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withStatus = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * withStatus HOC
- * Takes a component and applies the status prop to it.
- * @returns Instantiated component w/ status and other props applied.
- */
-const withStatus = (Component) => function withStatus(_a) {
-    var { status } = _a, props = __rest(_a, ["status"]);
-    return jsx_runtime_1.jsx(Component, Object.assign({ status: status }, props), void 0);
-};
-exports.withStatus = withStatus;

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

@@ -136,9 +136,7 @@ export declare const Radius: {
  * Note: This does not include any `text-shadow`
  */
 export declare const Shadow: {
-    small: string;
     base: string;
-    large: string;
 };
 /**
  * FontStack --

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

@@ -161,9 +161,7 @@ exports.Radius = {
  * Note: This does not include any `text-shadow`
  */
 exports.Shadow = {
-    [exports.Size.small]: `0 0 ${exports.UnitPx.base} rgba(0,0,0,0.5)`,
-    [exports.Size.base]: `0 0 ${exports.UnitPx.large} rgba(0,0,0,0.5)`,
-    [exports.Size.large]: `0 0 ${exports.UnitPx.xlarge} rgba(0,0,0,0.5)`,
+    [exports.Size.base]: `0 4px 4px rgba(0, 0, 0, 0.25)`,
 };
 const fonts = [
     'Inter',

package/dist/index.d.ts

@@ -2,11 +2,12 @@ export * from './components/controls/Button';
 export * from './components/controls/Toggle';
 export * from './components/elements/Badge';
 export * from './components/elements/Icon';
+export * from './components/elements/Loader';
 export * from './components/input/RawInput';
 export * from './components/input/TextInput';
 export * from './components/input/NumberInput';
 export * from './components/layout/Box';
-export * from './components/list/DefinitionList';
+export * from './components/layout/DefinitionList';
 export * from './components/system/GlobalStyles';
 export * from './components/system/ThemeProvider';
 export * from './components/typography/Heading';

package/dist/index.js

@@ -27,11 +27,12 @@ __exportStar(require("./components/controls/Button"), exports);
 __exportStar(require("./components/controls/Toggle"), exports);
 __exportStar(require("./components/elements/Badge"), exports);
 __exportStar(require("./components/elements/Icon"), exports);
+__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/layout/Box"), exports);
-__exportStar(require("./components/list/DefinitionList"), exports);
+__exportStar(require("./components/layout/DefinitionList"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);
 __exportStar(require("./components/system/ThemeProvider"), exports);
 __exportStar(require("./components/typography/Heading"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.11",
+  "version": "0.1.12-alpha.1620307785",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -10,7 +10,7 @@
     "dist/**/*"
   ],
   "engines": {
-    "node": "14",
+    "node": "12",
     "yarn": "1"
   },
   "license": "MIT",
@@ -19,19 +19,19 @@
     "tinycolor2": "^1.4.2"
   },
   "peerDependencies": {
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.2.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.10",
     "@babel/core": "^7.13.10",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-actions": "^6.2.8",
-    "@storybook/addon-essentials": "^6.2.8",
-    "@storybook/addon-links": "^6.2.8",
-    "@storybook/node-logger": "^6.2.8",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/node-logger": "^6.2.9",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.8",
+    "@storybook/react": "^6.2.9",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
@@ -42,7 +42,7 @@
     "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "@types/styled-components": "^5.1.8",
+    "@types/styled-components": "^5.1.9",
     "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
@@ -61,13 +61,13 @@
     "react-scripts": "4.0.1",
     "rimraf": "^3.0.2",
     "storybook-addon-performance": "^0.15.2",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.2.3",
     "stylelint": "^13.12.0",
     "stylelint-config-recommended": "^4.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "typescript": "^4.1.3",
+    "typescript": "^4.2.4",
     "web-vitals": "^1.1.0"
   },
   "scripts": {