@workday/canvas-kit-react-core - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

dist/commonjs/lib/InputProvider.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
     mousePosY: number | null;
+    nested: boolean;
 }
@@ -62,2 +63,3 @@ export declare enum InputType {
     private eventTimer;
+    private ref;
     constructor(props: any);
@@ -74,4 +76,4 @@ provideIntent: boolean | undefined;
     detectScrolling(event: React.MouseEvent): void;
-    render(): JSX.Element;
+    render(): {} | null | undefined;
 }
 export {};

dist/commonjs/lib/InputProvider.js

@@ -22,5 +22,9 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
+var element_closest_1 = __importDefault(require("element-closest"));
 var InputType;
@@ -97,2 +101,3 @@ (function (InputType) {
 };
+var containerClass = 'wdc-input-provider';
 var InputProvider = (function (_super) {
@@ -102,2 +107,3 @@ __extends(InputProvider, _super);
         var _this = _super.call(this, props) || this;
+        _this.ref = React.createRef();
         _this.provideIntent = _this.props.provideIntent;
@@ -136,2 +142,3 @@ var storedInput, storedIntent;
             mousePosY: null,
+            nested: false,
         };
@@ -144,2 +151,9 @@ _this.setInput = _this.setInput.bind(_this);
     InputProvider.prototype.componentDidMount = function () {
+        element_closest_1.default(window);
+        if (this.ref.current &&
+            this.ref.current.parentElement &&
+            this.ref.current.parentElement.closest("." + containerClass)) {
+            this.setState({ nested: true });
+            return;
+        }
         this.enableListeners(true);
@@ -162,2 +176,3 @@ };
         if (nextProps !== this.props ||
+            nextState.nested !== this.state.nested ||
             nextState.currentInput !== this.state.currentInput ||
@@ -265,4 +280,7 @@ nextState.currentIntent !== this.state.currentIntent) {
     InputProvider.prototype.render = function () {
+        if (this.state.nested) {
+            return this.props.children;
+        }
         var intent = this.provideIntent ? this.state.currentIntent : null;
-        return (React.createElement("div", { "data-whatinput": this.state.currentInput, "data-whatintent": intent }, this.props.children));
+        return (React.createElement("div", { className: containerClass, ref: this.ref, "data-whatinput": this.state.currentInput, "data-whatintent": intent }, this.props.children));
     };
@@ -269,0 +287,0 @@ return InputProvider;

dist/es6/lib/InputProvider.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
     mousePosY: number | null;
+    nested: boolean;
 }
@@ -62,2 +63,3 @@ export declare enum InputType {
     private eventTimer;
+    private ref;
     constructor(props: any);
@@ -74,4 +76,4 @@ provideIntent: boolean | undefined;
     detectScrolling(event: React.MouseEvent): void;
-    render(): JSX.Element;
+    render(): {} | null | undefined;
 }
 export {};

dist/es6/lib/InputProvider.js

@@ -16,2 +16,3 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
+import elementClosestPolyfill from 'element-closest';
 export var InputType;
@@ -88,2 +89,3 @@ (function (InputType) {
 };
+var containerClass = 'wdc-input-provider';
 var InputProvider = (function (_super) {
@@ -93,2 +95,3 @@ __extends(InputProvider, _super);
         var _this = _super.call(this, props) || this;
+        _this.ref = React.createRef();
         _this.provideIntent = _this.props.provideIntent;
@@ -127,2 +130,3 @@ var storedInput, storedIntent;
             mousePosY: null,
+            nested: false,
         };
@@ -135,2 +139,9 @@ _this.setInput = _this.setInput.bind(_this);
     InputProvider.prototype.componentDidMount = function () {
+        elementClosestPolyfill(window);
+        if (this.ref.current &&
+            this.ref.current.parentElement &&
+            this.ref.current.parentElement.closest("." + containerClass)) {
+            this.setState({ nested: true });
+            return;
+        }
         this.enableListeners(true);
@@ -153,2 +164,3 @@ };
         if (nextProps !== this.props ||
+            nextState.nested !== this.state.nested ||
             nextState.currentInput !== this.state.currentInput ||
@@ -256,4 +268,7 @@ nextState.currentIntent !== this.state.currentIntent) {
     InputProvider.prototype.render = function () {
+        if (this.state.nested) {
+            return this.props.children;
+        }
         var intent = this.provideIntent ? this.state.currentIntent : null;
-        return (React.createElement("div", { "data-whatinput": this.state.currentInput, "data-whatintent": intent }, this.props.children));
+        return (React.createElement("div", { className: containerClass, ref: this.ref, "data-whatinput": this.state.currentInput, "data-whatintent": intent }, this.props.children));
     };
@@ -260,0 +275,0 @@ return InputProvider;

package.json

 {
   "name": "@workday/canvas-kit-react-core",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "A group of core primitives (i.e. colors, text, etc.)",
@@ -45,5 +45,6 @@ "author": "Workday, Inc. (https://www.workday.com)",
     "@workday/canvas-depth-web": "^0.16.4",
-    "@workday/canvas-space-web": "^0.15.5"
+    "@workday/canvas-space-web": "^0.15.5",
+    "element-closest": "^3.0.2"
   },
-  "gitHead": "8b971e83c41d211f9dadcda2f1f3afaecd575871"
+  "gitHead": "93ec9384729867c2555904031d6e3cfec5d57106"
 }

README.md

@@ -12,3 +12,3 @@ # Canvas Kit Core
 - [Type](#type)
-- [Input Provider](#input-provider)
+- [Providers](#providers)
 
@@ -212,2 +212,10 @@ ## Installation
 
+## Fonts
+
+To use the Canvas Kit font
+[install and import the `@workday/canvas-kit-react-fonts` module](https://github.com/Workday/canvas-kit/tree/master/modules/fonts/react).
+Note that this module sources fonts from the Workday CDN.
+
+## Hierarchy
+
 Our type module is a combination of hierarchy and variants. The hierarchy has the font size, weight,
@@ -280,4 +288,9 @@ etc. for different levels of type (e.g. `canvas.type.h1`, `canvas.type.body`, etc.). The variants
 
-# Input Provider
+# Providers
 
+Providers are higher order (wrapping) components used to provide global configuration to Canvas
+components.
+
+## Input Provider
+
 This is a higher order (wrapping) component for providing css-referencable data attributes for the
@@ -288,5 +301,6 @@ users current input. Focus outlines are required for accesibility, but they can be unnecessary
 begins. This logic is heavily influenced by [what-input](https://github.com/ten1seven/what-input).
+You can use it to style your own components as well using the examples below.
 
-**We strongly encourage you to use this in your application to wrap all Canvas components**. You can
-use it to style your own components as well.
+Preferably you would use the `CanvasProvider` as `InputProvider` functionality is included within
+it. However, if you want `InputProvider` functionality on it's own, you can use this.
 
@@ -319,3 +333,3 @@ ### Definitions
 
-## Usage
+### Usage
 
@@ -325,8 +339,8 @@ As an external consumer, you should reference the following example.
 If you are contributing a component, you must add the necessary styling (see below) and use the
-[`InputProviderDecorator`](#storybook-decorator) in your stories. _DO NOT_ wrap any canvas kit
-components in an `InputProvider`.
+[`InputProviderDecorator`](#storybook-decorator) in your stories. _DO NOT_ use an `InputProvider`
+directly within any Canvas Kit components.
 
 ```tsx
 import * as React from 'react';
-import {InputProvider} from '../../../../utils/storybook';
+import {InputProvider} from '@workday/canvas-kit-react';
 
@@ -375,4 +389,7 @@ <InputProvider>{/* All your components containing any Canvas components */}</InputProvider>;
 
-## Static Properties
+**Note:** Multiple InputProviders in the same tree are not supported. Any nested `InputProvider`
+will remove itself from the DOM (rendering only its children) and not attach any event listeners.
 
+### Static Properties
+
 #### `InputTypes`
@@ -389,11 +406,11 @@
 
-## Component Props
+### Component Props
 
-### Required
+#### Required
 
 > None
 
-### Optional
+#### Optional
 
-#### `provideIntent: boolean`
+##### `provideIntent: boolean`
 
@@ -404,26 +421,23 @@ > Whether you would like the attribute `data-whatintent` rendered (see definition of intent above).
 
-## Storybook Decorator
+### Storybook Decorator
 
-We provide a [storybook decorator](../../utils/storybook/InputProviderDecorator.tsx) to wrap your
+We provide a [storybook decorator](../../utils/storybook/CanvasProviderDecorator.tsx) to wrap your
 stories in an `InputProvider` automatically.
 
-Example:
+Add this decorator to your `/.storybook/config.js` configuration file to apply to all stories:
 
 ```js
-import {InputProviderDecorator} from '../../../../utils/storybook';
+import {InputProviderDecorator} from '../utils/storybook';
 
-storiesOf('My Story', module)
-  .addDecorator(InputProviderDecorator)
-  .add('All', () => <YourJSX />);
+addDecorator(InputProviderDecorator);
 ```
 
-You can also add this [storybook decorator](../../utils/storybook/InputProviderDecorator.tsx) to
-your `/.storybook/config.js` configuration file so it wraps all your stories automatically.
+Or, add it to stories individually:
 
-Example:
-
 ```js
-import {InputProviderDecorator} from '../utils/storybook';
+import {InputProviderDecorator} from '../../../../utils/storybook';
 
-addDecorator(InputProviderDecorator);
+storiesOf('My Story', module)
+  .addDecorator(InputProviderDecorator)
+  .add('All', () => <YourJSX />);
 ```

No alert changes

Improved metrics

Total package byte prevSize

174152

increased by1.69%

Lines of code

3512

increased by1.8%

Number of lines in readme file

435

increased by3.33%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedelement-closest@^3.0.2

• + Addedelement-closest@3.0.2(transitive)