chore: release 0.36.3

CHANGELOG.md

@@ -17,6 +17,29 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+<!--------------------------------[ v0.36.3 ]------------------------------- -->
+## [v0.36.2](https://github.com/stardust-ui/react/tree/v0.36.3) (2019-09-03)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.36.2...v0.36.3)
+
+### Fixes
+- Use a proper `document` to find nodes in `doesNodeContainClick()` @layershifter ([#1874](https://github.com/stardust-ui/react/pull/1874))
+- Correctly define current document object of the `FocusZone` and `FocusTrapZone` @sophieH29 ([#1820](https://github.com/stardust-ui/react/pull/1820))
+
+### Performance
+- Fix `Popper` positioning called when unnecessary in `Tooltip` @lucivpav ([#1882](https://github.com/stardust-ui/react/pull/1882))
+
+<!--------------------------------[ v0.36.2 ]------------------------------- -->
+## [v0.36.2](https://github.com/stardust-ui/react/tree/v0.36.2) (2019-08-19)
+[Compare changes](https://github.com/stardust-ui/react/compare/v0.36.1...v0.36.2)
+
+### Fixes
+- Update vulnerable version of `lodash` dependency @layershifter ([#1700](https://github.com/stardust-ui/react/pull/1700))
+- Use `target` from `Provider` in `ReactDOM.createPortal()` calls @layershifter ([#1810](https://github.com/stardust-ui/react/pull/1810))
+
+### Features
+- Focus indicator for additional documents @jurokapsiar ([#1816](https://github.com/stardust-ui/react/pull/1816))
+- Add possibility for a Toolbar to rearrange its items according to space available @miroslavstastny ([#1657](https://github.com/stardust-ui/react/pull/1657))
+
 <!--------------------------------[ v0.36.1 ]------------------------------- -->
 ## [v0.36.1](https://github.com/stardust-ui/react/tree/v0.36.1) (2019-08-09)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.36.0...v0.36.1)

build/dangerjs/detectNonApprovedDependencies/approvedPackages.ts

@@ -49,17 +49,22 @@ export default [
   'keyboard-key@1.0.1',
   'lodash@4.17.5',
   'lodash@4.17.11',
+  'lodash@4.17.15',
+  'lodash-es@4.17.15',
   'object-assign@4.1.1',
   'popper.js@1.15.0',
   'prop-types@15.6.2',
   'prop-types@15.7.2',
+  'raf-schd@4.0.2',
   'react-addons-shallow-compare@15.6.2',
   'react-dom@16.8.3',
   'react-fela@7.3.1',
   'react-fela@10.2.0',
   'react-fela@10.5.0',
   'react-is@16.8.2',
+  'react-resize-detector@4.2.0',
   'react@16.8.3',
+  'resize-observer-polyfill@1.5.1',
   'rtl-css-js@1.11.0',
   'scheduler@0.13.3',
   'scheduler@0.13.6',

docs/src/examples/components/Toolbar/Content/ToolbarExampleOverflow.shorthand.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import { Toolbar } from '@stardust-ui/react'
+
+const ToolbarExampleOverflow = () => {
+  const icons = ['bold', 'italic', 'underline']
+
+  const itemData = [
+    ..._.times(30, i => ({
+      key: `a${i}`,
+      content: `${icons[i % icons.length]} #${i}`,
+      icon: icons[i % icons.length],
+    })),
+  ]
+
+  const toolbarItems = itemData.map(item => ({ ...item, content: undefined }))
+  const overflowItems = itemData
+
+  const overflowMenuKey = 'overflow-menu'
+
+  const [overflowMenuOpen, setOverflowMenuOpen] = React.useState(false)
+
+  return (
+    <Toolbar
+      items={toolbarItems}
+      onReduceItems={(renderedItems, measures) => {
+        let numberOfFits = measures.findIndex(measure => !measure.leftFits || !measure.rightFits)
+
+        // if the first item which does not fit is the overflow menu, we need to remove one more regular item
+        if (numberOfFits < renderedItems.length) {
+          const firstCutItem = renderedItems[numberOfFits]
+          const firstCutItemIsOverflowMenu =
+            _.isObject(firstCutItem) && firstCutItem['key'] === overflowMenuKey
+          if (firstCutItemIsOverflowMenu) {
+            --numberOfFits
+          }
+        }
+
+        // if there is nothing more to hide, stop the reduce
+        if (numberOfFits < 0) {
+          return null
+        }
+
+        // console.log(`${numberOfFits}/${toolbarItems.length} fit`)
+
+        return [
+          ...toolbarItems.slice(0, numberOfFits),
+          {
+            key: overflowMenuKey,
+            icon: 'more',
+            menu: overflowItems.slice(numberOfFits),
+            menuOpen: overflowMenuOpen,
+            onMenuOpenChange: (_, { menuOpen }) => {
+              setOverflowMenuOpen(menuOpen)
+            },
+          },
+        ]
+      }}
+    />
+  )
+}
+
+export default ToolbarExampleOverflow

docs/src/examples/components/Toolbar/Content/index.tsx

@@ -41,6 +41,11 @@ const Content = () => (
         </p>
       </Alert>
     </ComponentExample>
+    <ComponentExample
+      title="Toolbar overflow menu"
+      description="Toolbar can rearrange its items based on its wrapping container width."
+      examplePath="components/Toolbar/Content/ToolbarExampleOverflow"
+    />
   </ExampleSection>
 )
 

lerna.json

@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*"],
-  "version": "0.36.1",
+  "version": "0.36.3",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -139,8 +139,8 @@
     "semver": "^6.2.0",
     "shallowequal": "^1.1.0",
     "simulant": "^0.2.2",
-    "snyk": "^1.110.2",
-    "syncpack": "^4.3.1",
+    "snyk": "^1.196.0",
+    "syncpack": "^4.5.4",
     "through2": "^2.0.3",
     "tmp": "^0.0.33",
     "tsconfig-paths": "^3.7.0",

packages/react-component-ref/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@stardust-ui/react-component-ref",
   "description": "A set of components and utils to deal with React refs.",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@stardust-ui/react-proptypes": "^0.36.0",
+    "@stardust-ui/react-proptypes": "^0.36.2",
     "prop-types": "^15.6.1",
     "react-is": "^16.6.3"
   },

packages/react-proptypes/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@stardust-ui/react-proptypes",
   "description": "Set of custom reusable PropTypes for React components, some of them are specific for Stardust UI.",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "author": "Oleksandr Fediashov <olfedias@microsoft.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "prop-types": "^15.6.1"
   },
   "devDependencies": {

packages/react/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@stardust-ui/react",
   "description": "A themable React component library.",
-  "version": "0.36.1",
+  "version": "0.36.3",
   "author": "Levi Thomason <me@levithomason.com>",
   "bugs": "https://github.com/stardust-ui/react/issues",
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "@stardust-ui/fela": "^10.6.1",
     "@stardust-ui/react-component-event-listener": "^0.36.0",
     "@stardust-ui/react-component-nesting-registry": "^0.36.0",
-    "@stardust-ui/react-component-ref": "^0.36.0",
+    "@stardust-ui/react-component-ref": "^0.36.2",
     "@stardust-ui/react-fela": "^10.6.2",
-    "@stardust-ui/react-proptypes": "^0.36.0",
+    "@stardust-ui/react-proptypes": "^0.36.2",
     "classnames": "^2.2.5",
     "downshift": "^3.2.10",
     "fast-memoize": "^2.5.1",
@@ -21,10 +21,11 @@
     "fela-plugin-prefixer": "^10.5.0",
     "fela-plugin-rtl": "^10.5.0",
     "keyboard-key": "^1.0.1",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "popper.js": "^1.15.0",
     "prop-types": "^15.6.1",
-    "react-is": "^16.6.3"
+    "react-is": "^16.6.3",
+    "react-resize-detector": "^4.2.0"
   },
   "devDependencies": {
     "@stardust-ui/internal-tooling": "^0.36.0",

packages/react/src/components/Dialog/Dialog.tsx

@@ -1,6 +1,6 @@
 import { Unstable_NestingAuto } from '@stardust-ui/react-component-nesting-registry'
-import { documentRef, EventListener } from '@stardust-ui/react-component-event-listener'
-import { Ref } from '@stardust-ui/react-component-ref'
+import { EventListener } from '@stardust-ui/react-component-event-listener'
+import { Ref, toRefObject } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
@@ -193,8 +193,16 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
   handleOverlayClick = (e: MouseEvent) => {
     // Dialog has different conditions to close than Popup, so we don't need to iterate across all
     // refs
-    const isInsideContentClick = doesNodeContainClick(this.contentRef.current, e)
-    const isInsideOverlayClick = doesNodeContainClick(this.overlayRef.current, e)
+    const isInsideContentClick = doesNodeContainClick(
+      this.contentRef.current,
+      e,
+      this.context.target,
+    )
+    const isInsideOverlayClick = doesNodeContainClick(
+      this.overlayRef.current,
+      e,
+      this.context.target,
+    )
 
     const shouldClose = !isInsideContentClick && isInsideOverlayClick
 
@@ -273,6 +281,8 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
         </ElementType>
       </Ref>
     )
+
+    const targetRef = toRefObject(this.context.target)
     const triggerAccessibility: TriggerAccessibility = {
       attributes: accessibility.attributes.trigger,
       keyHandlers: accessibility.keyHandlers.trigger,
@@ -306,7 +316,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               </Ref>
               <EventListener
                 listener={this.handleOverlayClick}
-                targetRef={documentRef}
+                targetRef={targetRef}
                 type="click"
                 capture
               />

packages/react/src/components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
-import { documentRef, EventListener } from '@stardust-ui/react-component-event-listener'
-import { Ref } from '@stardust-ui/react-component-ref'
+import { EventListener } from '@stardust-ui/react-component-event-listener'
+import { Ref, toRefObject } from '@stardust-ui/react-component-ref'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as _ from 'lodash'
 import cx from 'classnames'
@@ -212,10 +212,11 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
       indicator,
       disabled,
     } = this.props
-    const indicatorWithDefaults = indicator === undefined ? {} : indicator
-
     const { menuOpen } = this.state
 
+    const indicatorWithDefaults = indicator === undefined ? {} : indicator
+    const targetRef = toRefObject(this.context.target)
+
     const menuItemInner = childrenExist(children) ? (
       children
     ) : (
@@ -269,7 +270,7 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
               })}
             </Popper>
           </Ref>
-          <EventListener listener={this.outsideClickHandler} targetRef={documentRef} type="click" />
+          <EventListener listener={this.outsideClickHandler} targetRef={targetRef} type="click" />
         </>
       ) : null
 
@@ -315,8 +316,8 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
   outsideClickHandler = e => {
     if (!this.isSubmenuOpen()) return
     if (
-      !doesNodeContainClick(this.itemRef.current, e) &&
-      !doesNodeContainClick(this.menuRef.current, e)
+      !doesNodeContainClick(this.itemRef.current, e, this.context.target) &&
+      !doesNodeContainClick(this.menuRef.current, e, this.context.target)
     ) {
       this.trySetMenuOpen(false, e)
     }
@@ -326,7 +327,7 @@ class MenuItem extends AutoControlledComponent<WithAsProp<MenuItemProps>, MenuIt
     const { active, menu } = this.props
 
     if (menu) {
-      if (doesNodeContainClick(this.menuRef.current, e)) {
+      if (doesNodeContainClick(this.menuRef.current, e, this.context.target)) {
         // submenu was clicked => close it and propagate
         this.trySetMenuOpen(false, e, () => focusAsync(this.itemRef.current))
       } else {