@dhis2-ui/node 9.11.0 → 9.11.1-beta.10

package/build/cjs/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a closed Node with children is rendered', () => {
   cy.visitStory('Node', 'Closed with children');
   cy.get('[data-test="dhis2-uicore-node"]').should('be.visible');

package/build/cjs/features/accepts_component/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Node with component prop is rendered', () => {
   cy.visitStory('Node', 'With component');
   cy.get('[data-test="dhis2-uicore-node"]').should('be.visible');

package/build/cjs/features/accepts_icon/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Node with icon prop is rendered', () => {
   cy.visitStory('Node', 'With icon');
   cy.get('[data-test="dhis2-uicore-node"]').should('be.visible');

package/build/cjs/features/can_be_closed/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an open Node with an onClose handler is rendered', () => {
-  cy.visitStory('Node', 'Open with onClose');
+  cy.visitStory('Node', 'Open with on close');
 });
 (0, _cypressCucumberPreprocessor.When)('the arrow is clicked', () => {
   cy.get('[data-test="dhis2-uicore-node-toggle"]').click();

package/build/cjs/features/can_be_opened/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a closed Node with an onOpen handler is rendered', () => {
-  cy.visitStory('Node', 'Closed with onOpen');
+  cy.visitStory('Node', 'Closed with on open');
 });
 (0, _cypressCucumberPreprocessor.When)('the arrow is clicked', () => {
   cy.get('[data-test="dhis2-uicore-node-toggle"]').click();

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Node", {
     return _node.Node;
   }
 });
-
 var _node = require("./node.js");

package/build/cjs/leaves.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Leaves = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Leaves = _ref => {
   let {
     children,
@@ -30,7 +24,6 @@ const Leaves = _ref => {
     id: "3677374542"
   }, ["div.jsx-3677374542{height:0;overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".open.jsx-3677374542{height:auto;}"]));
 };
-
 exports.Leaves = Leaves;
 Leaves.propTypes = {
   children: _propTypes.default.node,

package/build/cjs/node.e2e.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithIcon = exports.WithComponent = exports.OpenWithOnClose = exports.OpenWithChildren = exports.ClosedWithOnOpen = exports.ClosedWithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _node = require("./node.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onClose = window.Cypress && window.Cypress.cy.stub();
+window.onOpen = window.Cypress && window.Cypress.cy.stub();
+var _default = exports.default = {
+  title: 'Node'
+};
+const OpenWithOnClose = () => /*#__PURE__*/_react.default.createElement(_node.Node, {
+  open: true,
+  onClose: window.onClose,
+  component: /*#__PURE__*/_react.default.createElement("div", null, "Component")
+}, "Children");
+exports.OpenWithOnClose = OpenWithOnClose;
+const ClosedWithOnOpen = () => /*#__PURE__*/_react.default.createElement(_node.Node, {
+  onOpen: window.onOpen,
+  component: /*#__PURE__*/_react.default.createElement("div", null, "Component")
+}, "Children");
+exports.ClosedWithOnOpen = ClosedWithOnOpen;
+const ClosedWithChildren = () => /*#__PURE__*/_react.default.createElement(_node.Node, {
+  component: /*#__PURE__*/_react.default.createElement("div", null, "Component")
+}, "I am a child");
+exports.ClosedWithChildren = ClosedWithChildren;
+const OpenWithChildren = () => /*#__PURE__*/_react.default.createElement(_node.Node, {
+  open: true,
+  component: /*#__PURE__*/_react.default.createElement("div", null, "Component")
+}, "I am a child");
+exports.OpenWithChildren = OpenWithChildren;
+const WithComponent = () => /*#__PURE__*/_react.default.createElement(_node.Node, {
+  component: /*#__PURE__*/_react.default.createElement("div", null, "I am a component")
+}, "Children");
+exports.WithComponent = WithComponent;
+const WithIcon = () => /*#__PURE__*/_react.default.createElement(_node.Node, {
+  component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
+  icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon")
+}, "Children");
+exports.WithIcon = WithIcon;

package/build/cjs/node.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Node = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _leaves = require("./leaves.js");
-
 var _spacer = require("./spacer.js");
-
 var _toggle = require("./toggle.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Node = _ref => {
   let {
     open,
@@ -39,27 +30,26 @@ const Node = _ref => {
     "data-test": dataTest,
     className: "jsx-1433072554" + " " + ((0, _classnames.default)('node', className) || "")
   }, icon && /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": "".concat(dataTest, "-icon"),
+    "data-test": `${dataTest}-icon`,
     className: "jsx-1433072554"
   }, icon), showArrow && /*#__PURE__*/_react.default.createElement(_toggle.Toggle, {
     open: open,
     onOpen: onOpen,
     onClose: onClose,
-    dataTest: "".concat(dataTest, "-toggle")
+    dataTest: `${dataTest}-toggle`
   }), showSpacer && /*#__PURE__*/_react.default.createElement(_spacer.Spacer, null), /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": "".concat(dataTest, "-content"),
+    "data-test": `${dataTest}-content`,
     className: "jsx-1433072554"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": "".concat(dataTest, "-label"),
+    "data-test": `${dataTest}-label`,
     className: "jsx-1433072554"
   }, label), /*#__PURE__*/_react.default.createElement(_leaves.Leaves, {
     open: open,
-    dataTest: "".concat(dataTest, "-leaves")
+    dataTest: `${dataTest}-leaves`
   }, children)), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1433072554"
   }, [".node.jsx-1433072554{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}"]));
 };
-
 exports.Node = Node;
 Node.defaultProps = {
   dataTest: 'dhis2-uicore-node'
@@ -68,11 +58,9 @@ Node.propTypes = {
   /** Content below this level of the hierarchy; children are revealed when this leaf is 'open' */
   children: _propTypes.default.node,
   className: _propTypes.default.string,
-
   /** Content/label for this leaf, for example a checkbox */
   component: _propTypes.default.element,
   dataTest: _propTypes.default.string,
-
   /** A custom icon to use instead of a toggle arrow */
   icon: _propTypes.default.node,
   open: _propTypes.default.bool,

package/build/cjs/{node.stories.js → node.prod.stories.js}

@@ -4,44 +4,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports._2LevelsOpen = exports.TextLeaves = exports.RTL = exports.MultipleRoots = exports.CustomIcon = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _checkbox = require("@dhis2-ui/checkbox");
-
 var _loader = require("@dhis2-ui/loader");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _node = require("./node.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const description = `
+A tool for creating hierarchical, multi-level selectors.  Applied in the Organisation Unit Tree component, for example.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const description = "\nA tool for creating hierarchical, multi-level selectors.  Applied in the Organisation Unit Tree component, for example.\n\n```js\nimport { Node } from '@dhis2/ui'\n```\n";
-
+\`\`\`js
+import { Node } from '@dhis2/ui'
+\`\`\`
+`;
 const say = something => () => alert(something);
-
 window.onOpen = (payload, event) => {
   console.log('onOpen payload', payload);
   console.log('onOpen event', event);
 };
-
 window.onClose = (payload, event) => {
   console.log('onClose payload', payload);
   console.log('onClose event', event);
 };
-
 const onOpen = function () {
   return window.onOpen(...arguments);
 };
-
 const onClose = function () {
   return window.onClose(...arguments);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Node',
   component: _node.Node,
   parameters: {
@@ -52,10 +44,7 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const CustomIcon = args => /*#__PURE__*/_react.default.createElement(_node.Node, args);
-
 exports.CustomIcon = CustomIcon;
 CustomIcon.args = {
   icon: /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
@@ -73,7 +62,6 @@ CustomIcon.args = {
   })
 };
 CustomIcon.storyName = 'Custom icon';
-
 const MultipleRoots = args => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_node.Node, _extends({}, args, {
   component: /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
     label: "Node label 1.1",
@@ -91,7 +79,6 @@ const MultipleRoots = args => /*#__PURE__*/_react.default.createElement("div", n
     checked: false
   })
 }), /*#__PURE__*/_react.default.createElement("span", null, "Placeholder content")));
-
 exports.MultipleRoots = MultipleRoots;
 MultipleRoots.args = {
   open: false,
@@ -99,7 +86,6 @@ MultipleRoots.args = {
   onClose
 };
 MultipleRoots.storyName = 'Multiple roots';
-
 const _2LevelsOpen = () => /*#__PURE__*/_react.default.createElement(_node.Node, {
   open: true,
   onOpen: onOpen,
@@ -226,10 +212,8 @@ const _2LevelsOpen = () => /*#__PURE__*/_react.default.createElement(_node.Node,
     checked: false
   })
 }, false && 'Foo'));
-
 exports._2LevelsOpen = _2LevelsOpen;
 _2LevelsOpen.storyName = '2 Levels open';
-
 const TextLeaves = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "jsx-3948139656"
 }, /*#__PURE__*/_react.default.createElement(_node.Node, {
@@ -296,12 +280,9 @@ const TextLeaves = () => /*#__PURE__*/_react.default.createElement("div", {
 }, "Dummy content")))), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "3948139656"
 }, ["div.jsx-3948139656{font-size:16px;line-height:24px;}", "h2.jsx-3948139656{font-size:24px;line-height:32px;margin:0 0 10px;}", ".sub-tree.jsx-3948139656{margin-top:10px;}", ".sub-tree--open.jsx-3948139656{margin-bottom:20px;}", "div.jsx-3948139656 .tree__arrow > span{padding-top:4px;}", "div.jsx-3948139656 .tree__arrow.open:after{top:17px;height:calc(100% - 28px);}"]));
-
 exports.TextLeaves = TextLeaves;
 TextLeaves.storyName = 'Text leaves';
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(MultipleRoots, args));
-
 exports.RTL = RTL;

package/build/cjs/spacer.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Spacer = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Spacer = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "jsx-2503342345"
 }, /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "2503342345"
 }, ["div.jsx-2503342345{width:24px;}"]));
-
 exports.Spacer = Spacer;

package/build/cjs/toggle.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Toggle = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ArrowDown = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "nodeArrow"
 }, /*#__PURE__*/_react.default.createElement("svg", {
@@ -29,7 +22,6 @@ const ArrowDown = () => /*#__PURE__*/_react.default.createElement("div", {
 }), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "4098137027"
 }, ["svg.jsx-4098137027{fill:inherit;height:24px;width:24px;vertical-align:middle;pointer-events:none;}"])));
-
 const Toggle = _ref => {
   let {
     open,
@@ -51,9 +43,8 @@ const Toggle = _ref => {
   }, /*#__PURE__*/_react.default.createElement(ArrowDown, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "375729792",
     dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.colors.grey100]
-  }, ["div.__jsx-style-dynamic-selector{width:24px;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", "div.__jsx-style-dynamic-selector:after{background:".concat(_uiConstants.colors.grey400, ";height:calc(100% - 24px);inset-inline-start:12px;position:absolute;top:15px;width:1px;z-index:1;}"), ".open.__jsx-style-dynamic-selector:after{content:'';}", "span.__jsx-style-dynamic-selector{display:block;position:relative;z-index:2;fill:".concat(_uiConstants.colors.grey900, ";}"), "div.__jsx-style-dynamic-selector .nodeArrow{vertical-align:top;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform 0.1s ease-out;-webkit-transition:transform 0.1s ease-out;transition:transform 0.1s ease-out;}", "div.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".open.__jsx-style-dynamic-selector .nodeArrow{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", ".open.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", "div.__jsx-style-dynamic-selector:hover{cursor:pointer;border-radius:3px;background:".concat(_uiConstants.colors.grey100, ";}"), "div.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:after{background:#bcc8d4;}"]));
+  }, ["div.__jsx-style-dynamic-selector{width:24px;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", `div.__jsx-style-dynamic-selector:after{background:${_uiConstants.colors.grey400};height:calc(100% - 24px);inset-inline-start:12px;position:absolute;top:15px;width:1px;z-index:1;}`, ".open.__jsx-style-dynamic-selector:after{content:'';}", `span.__jsx-style-dynamic-selector{display:block;position:relative;z-index:2;fill:${_uiConstants.colors.grey900};}`, "div.__jsx-style-dynamic-selector .nodeArrow{vertical-align:top;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform 0.1s ease-out;-webkit-transition:transform 0.1s ease-out;transition:transform 0.1s ease-out;}", "div.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".open.__jsx-style-dynamic-selector .nodeArrow{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", ".open.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", `div.__jsx-style-dynamic-selector:hover{cursor:pointer;border-radius:3px;background:${_uiConstants.colors.grey100};}`, "div.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:after{background:#bcc8d4;}"]));
 };
-
 exports.Toggle = Toggle;
 Toggle.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/es/features/can_be_closed/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an open Node with an onClose handler is rendered', () => {
-  cy.visitStory('Node', 'Open with onClose');
+  cy.visitStory('Node', 'Open with on close');
 });
 When('the arrow is clicked', () => {
   cy.get('[data-test="dhis2-uicore-node-toggle"]').click();

package/build/es/features/can_be_opened/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a closed Node with an onOpen handler is rendered', () => {
-  cy.visitStory('Node', 'Closed with onOpen');
+  cy.visitStory('Node', 'Closed with on open');
 });
 When('the arrow is clicked', () => {
   cy.get('[data-test="dhis2-uicore-node-toggle"]').click();

package/build/es/{node.stories.e2e.js → node.e2e.stories.js}

@@ -1,23 +1,30 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Node } from './node.js';
 window.onClose = window.Cypress && window.Cypress.cy.stub();
 window.onOpen = window.Cypress && window.Cypress.cy.stub();
-storiesOf('Node', module).add('Open with onClose', () => /*#__PURE__*/React.createElement(Node, {
+export default {
+  title: 'Node'
+};
+export const OpenWithOnClose = () => /*#__PURE__*/React.createElement(Node, {
   open: true,
   onClose: window.onClose,
   component: /*#__PURE__*/React.createElement("div", null, "Component")
-}, "Children")).add('Closed with onOpen', () => /*#__PURE__*/React.createElement(Node, {
+}, "Children");
+export const ClosedWithOnOpen = () => /*#__PURE__*/React.createElement(Node, {
   onOpen: window.onOpen,
   component: /*#__PURE__*/React.createElement("div", null, "Component")
-}, "Children")).add('Closed with children', () => /*#__PURE__*/React.createElement(Node, {
+}, "Children");
+export const ClosedWithChildren = () => /*#__PURE__*/React.createElement(Node, {
   component: /*#__PURE__*/React.createElement("div", null, "Component")
-}, "I am a child")).add('Open with children', () => /*#__PURE__*/React.createElement(Node, {
+}, "I am a child");
+export const OpenWithChildren = () => /*#__PURE__*/React.createElement(Node, {
   open: true,
   component: /*#__PURE__*/React.createElement("div", null, "Component")
-}, "I am a child")).add('With component', () => /*#__PURE__*/React.createElement(Node, {
+}, "I am a child");
+export const WithComponent = () => /*#__PURE__*/React.createElement(Node, {
   component: /*#__PURE__*/React.createElement("div", null, "I am a component")
-}, "Children")).add('With icon', () => /*#__PURE__*/React.createElement(Node, {
+}, "Children");
+export const WithIcon = () => /*#__PURE__*/React.createElement(Node, {
   component: /*#__PURE__*/React.createElement("div", null, "Component"),
   icon: /*#__PURE__*/React.createElement("div", null, "Icon")
-}, "Children"));
+}, "Children");

package/build/es/node.js

@@ -23,22 +23,22 @@ export const Node = _ref => {
     "data-test": dataTest,
     className: "jsx-1433072554" + " " + (cx('node', className) || "")
   }, icon && /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-icon"),
+    "data-test": `${dataTest}-icon`,
     className: "jsx-1433072554"
   }, icon), showArrow && /*#__PURE__*/React.createElement(Toggle, {
     open: open,
     onOpen: onOpen,
     onClose: onClose,
-    dataTest: "".concat(dataTest, "-toggle")
+    dataTest: `${dataTest}-toggle`
   }), showSpacer && /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-content"),
+    "data-test": `${dataTest}-content`,
     className: "jsx-1433072554"
   }, /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-label"),
+    "data-test": `${dataTest}-label`,
     className: "jsx-1433072554"
   }, label), /*#__PURE__*/React.createElement(Leaves, {
     open: open,
-    dataTest: "".concat(dataTest, "-leaves")
+    dataTest: `${dataTest}-leaves`
   }, children)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1433072554"
   }, [".node.jsx-1433072554{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}"]));
@@ -50,11 +50,9 @@ Node.propTypes = {
   /** Content below this level of the hierarchy; children are revealed when this leaf is 'open' */
   children: PropTypes.node,
   className: PropTypes.string,
-
   /** Content/label for this leaf, for example a checkbox */
   component: PropTypes.element,
   dataTest: PropTypes.string,
-
   /** A custom icon to use instead of a toggle arrow */
   icon: PropTypes.node,
   open: PropTypes.bool,

package/build/es/{node.stories.js → node.prod.stories.js}

@@ -1,33 +1,31 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { Checkbox } from '@dhis2-ui/checkbox';
 import { CircularLoader } from '@dhis2-ui/loader';
 import React from 'react';
 import { Node } from './node.js';
-const description = "\nA tool for creating hierarchical, multi-level selectors.  Applied in the Organisation Unit Tree component, for example.\n\n```js\nimport { Node } from '@dhis2/ui'\n```\n";
+const description = `
+A tool for creating hierarchical, multi-level selectors.  Applied in the Organisation Unit Tree component, for example.
 
+\`\`\`js
+import { Node } from '@dhis2/ui'
+\`\`\`
+`;
 const say = something => () => alert(something);
-
 window.onOpen = (payload, event) => {
   console.log('onOpen payload', payload);
   console.log('onOpen event', event);
 };
-
 window.onClose = (payload, event) => {
   console.log('onClose payload', payload);
   console.log('onClose event', event);
 };
-
 const onOpen = function () {
   return window.onOpen(...arguments);
 };
-
 const onClose = function () {
   return window.onClose(...arguments);
 };
-
 export default {
   title: 'Node',
   component: Node,

package/build/es/toggle.js

@@ -3,7 +3,6 @@ import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const ArrowDown = () => /*#__PURE__*/React.createElement("div", {
   className: "nodeArrow"
 }, /*#__PURE__*/React.createElement("svg", {
@@ -16,7 +15,6 @@ const ArrowDown = () => /*#__PURE__*/React.createElement("div", {
 }), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "4098137027"
 }, ["svg.jsx-4098137027{fill:inherit;height:24px;width:24px;vertical-align:middle;pointer-events:none;}"])));
-
 export const Toggle = _ref => {
   let {
     open,
@@ -38,7 +36,7 @@ export const Toggle = _ref => {
   }, /*#__PURE__*/React.createElement(ArrowDown, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "375729792",
     dynamic: [colors.grey400, colors.grey900, colors.grey100]
-  }, ["div.__jsx-style-dynamic-selector{width:24px;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", "div.__jsx-style-dynamic-selector:after{background:".concat(colors.grey400, ";height:calc(100% - 24px);inset-inline-start:12px;position:absolute;top:15px;width:1px;z-index:1;}"), ".open.__jsx-style-dynamic-selector:after{content:'';}", "span.__jsx-style-dynamic-selector{display:block;position:relative;z-index:2;fill:".concat(colors.grey900, ";}"), "div.__jsx-style-dynamic-selector .nodeArrow{vertical-align:top;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform 0.1s ease-out;-webkit-transition:transform 0.1s ease-out;transition:transform 0.1s ease-out;}", "div.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".open.__jsx-style-dynamic-selector .nodeArrow{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", ".open.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", "div.__jsx-style-dynamic-selector:hover{cursor:pointer;border-radius:3px;background:".concat(colors.grey100, ";}"), "div.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:after{background:#bcc8d4;}"]));
+  }, ["div.__jsx-style-dynamic-selector{width:24px;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", `div.__jsx-style-dynamic-selector:after{background:${colors.grey400};height:calc(100% - 24px);inset-inline-start:12px;position:absolute;top:15px;width:1px;z-index:1;}`, ".open.__jsx-style-dynamic-selector:after{content:'';}", `span.__jsx-style-dynamic-selector{display:block;position:relative;z-index:2;fill:${colors.grey900};}`, "div.__jsx-style-dynamic-selector .nodeArrow{vertical-align:top;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:-webkit-transform 0.1s ease-out;-webkit-transition:transform 0.1s ease-out;transition:transform 0.1s ease-out;}", "div.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".open.__jsx-style-dynamic-selector .nodeArrow{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", ".open.__jsx-style-dynamic-selector .nodeArrow:dir(rtl){-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}", `div.__jsx-style-dynamic-selector:hover{cursor:pointer;border-radius:3px;background:${colors.grey100};}`, "div.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:after{background:#bcc8d4;}"]));
 };
 Toggle.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/node",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.10",
     "description": "UI Node",
     "repository": {
         "type": "git",
@@ -22,19 +22,19 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/loader": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2-ui/loader": "9.11.1-beta.10",
+        "@dhis2/ui-constants": "9.11.1-beta.10",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/node.stories.e2e.js

@@ -1,30 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _node = require("./node.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onClose = window.Cypress && window.Cypress.cy.stub();
-window.onOpen = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('Node', module).add('Open with onClose', () => /*#__PURE__*/_react2.default.createElement(_node.Node, {
-  open: true,
-  onClose: window.onClose,
-  component: /*#__PURE__*/_react2.default.createElement("div", null, "Component")
-}, "Children")).add('Closed with onOpen', () => /*#__PURE__*/_react2.default.createElement(_node.Node, {
-  onOpen: window.onOpen,
-  component: /*#__PURE__*/_react2.default.createElement("div", null, "Component")
-}, "Children")).add('Closed with children', () => /*#__PURE__*/_react2.default.createElement(_node.Node, {
-  component: /*#__PURE__*/_react2.default.createElement("div", null, "Component")
-}, "I am a child")).add('Open with children', () => /*#__PURE__*/_react2.default.createElement(_node.Node, {
-  open: true,
-  component: /*#__PURE__*/_react2.default.createElement("div", null, "Component")
-}, "I am a child")).add('With component', () => /*#__PURE__*/_react2.default.createElement(_node.Node, {
-  component: /*#__PURE__*/_react2.default.createElement("div", null, "I am a component")
-}, "Children")).add('With icon', () => /*#__PURE__*/_react2.default.createElement(_node.Node, {
-  component: /*#__PURE__*/_react2.default.createElement("div", null, "Component"),
-  icon: /*#__PURE__*/_react2.default.createElement("div", null, "Icon")
-}, "Children"));