gestalt - npm Package Compare versions

Comparing version 0.17.1-beta2 to 0.18.0

package.json

 {
   "name": "gestalt",
-  "version": "0.17.1-beta2",
+  "version": "0.18.0",
   "license": "SEE LICENSE IN LICENSE",
@@ -61,3 +61,3 @@ "homepage": "https://pinterest.github.io/gestalt",
     "extract-text-webpack-plugin": "^1.0.1",
-    "flow-bin": "^0.39.0",
+    "flow-bin": "0.42.0",
     "flow-status-webpack-plugin": "^0.1.5",
@@ -64,0 +64,0 @@ "ghost-axe": "^0.0.3",

src/Box/Box.js

@@ -379,2 +379,8 @@ // @flow
 
+type DisableFocusStyles = boolean;
+
+const disableFocusStyles = (value: DisableFocusStyles): Style => (
+  value ? fromClassName(styles.disableFocusStyles) : identity()
+);
+
 // --
@@ -397,2 +403,3 @@
   fit?: Fit,
+  disableFocusStyles?: DisableFocusStyles,
   grow?: Grow,
@@ -424,2 +431,3 @@ justifyContent?: JustifyContent,
   fit,
+  disableFocusStyles,
   grow,
@@ -553,2 +561,3 @@ justifyContent,
   fit: PropTypes.bool,
+  disableFocusStyles: PropTypes.bool,
   grow: PropTypes.bool,
@@ -555,0 +564,0 @@ justifyContent: PropTypes.oneOf([

src/BoxGrid/BoxGrid.js

@@ -160,17 +160,20 @@ // @flow
     /* eslint react/no-find-dom-node: 0 */
-    const parentNode = ReactDOM.findDOMNode(this).parentNode;
-    const gridWidth = parentNode.clientWidth;
+    const el = ReactDOM.findDOMNode(this);
+    if (el && el.parentNode instanceof HTMLElement) {
+      const gridWidth = el.parentNode.clientWidth;
 
-    const colCount = Math.floor(gridWidth / this.props.minItemWidth);
-    const itemWidth = gridWidth / colCount;
+      const colCount = Math.floor(gridWidth / this.props.minItemWidth);
+      const itemWidth = gridWidth / colCount;
 
-    this.setState({
-      gridWidth,
-      itemWidth,
-    });
-    return {
-      colCount,
-      gridWidth,
-      itemWidth,
-    };
+      this.setState({
+        gridWidth,
+        itemWidth,
+      });
+      return {
+        colCount,
+        gridWidth,
+        itemWidth,
+      };
+    }
+    throw new Error('could not calculate columns');
   }
@@ -183,10 +186,13 @@
   reflowIfNeeded() {
-    const gridWidth = ReactDOM.findDOMNode(this).parentNode.clientWidth;
-    this.setState({
-      // Recalculate width with new col count.
-      gridWidth,
-    }, () => {
-      // Reflow after setting grid width, needed for calculating columns.
-      this.reflow(this.calculateColumns());
-    });
+    const el = ReactDOM.findDOMNode(this);
+    if (el && el.parentNode instanceof HTMLElement) {
+      const gridWidth = el.parentNode.clientWidth;
+      this.setState({
+        // Recalculate width with new col count.
+        gridWidth,
+      }, () => {
+        // Reflow after setting grid width, needed for calculating columns.
+        this.reflow(this.calculateColumns());
+      });
+    }
   }
@@ -193,0 +199,0 @@

src/Button/__docs__/Button-doc.js

@@ -5,2 +5,3 @@ // @flow
 import Button from '../Button';
+import GestaltProvider from '../../GestaltProvider/GestaltProvider';
 import { ns } from '../../../.corkboard/cards';
@@ -51,3 +52,3 @@
 `,
-  <div>
+  <GestaltProvider>
     <div className="p2">
@@ -71,3 +72,3 @@ <Button
     </div>
-  </div>);
+  </GestaltProvider>);
 
@@ -98,3 +99,3 @@ card('Widths',
 `,
-  <div>
+  <GestaltProvider>
     <div className="p2">
@@ -117,3 +118,3 @@ <Button
     </div>
-  </div>);
+  </GestaltProvider>);
 
@@ -139,3 +140,3 @@ card('Types',
 `,
-  <div>
+  <GestaltProvider>
     <div className="p2">
@@ -155,3 +156,3 @@ <Button
     </div>
-  </div>);
+  </GestaltProvider>);
 
@@ -175,3 +176,3 @@ card('Disabled',
 `,
-  <div>
+  <GestaltProvider>
     <div className="p2">
@@ -190,2 +191,2 @@ <Button
     </div>
-  </div>);
+  </GestaltProvider>);

src/Button/Button.js

@@ -18,3 +18,7 @@ // @flow
 
-export default function Button(props: Props) {
+type GestaltContext = {
+  inputDevice: '' | 'key' | 'mouse' | 'touch'
+}
+
+export default function Button(props: Props, context: GestaltContext) {
   const {
@@ -31,3 +35,6 @@ ariaExpanded,
 
+  const { inputDevice = 'key' } = context;
+
   const classes = classnames(styles.button, {
+    [styles.disableFocusOutline]: inputDevice !== 'key',
     [styles.disabled]: disabled,
@@ -54,2 +61,6 @@ [styles.enabled]: !disabled,
 
+Button.contextTypes = {
+  inputDevice: React.PropTypes.string
+};
+
 Button.propTypes = {
@@ -56,0 +67,0 @@ ariaExpanded: PropTypes.bool,

src/Card/__docs__/Card-doc.js

@@ -8,2 +8,3 @@ // @flow
 import Card from '../Card';
+import GestaltProvider from '../../GestaltProvider/GestaltProvider';
 import Link from '../../Link/Link';
@@ -50,5 +51,9 @@ import Text from '../../Text/Text';
 `,
-  <div>
+  <GestaltProvider>
     <Box xs={{ display: 'flex' }} wrap>
-      <Box padding={2} dangerouslySetInlineStyle={{ __style: { maxWidth: 236 } }}>
+      <Box
+        dangerouslySetInlineStyle={{ __style: { maxWidth: 236 } }}
+        padding={2}
+        xs={{ column: 12 }}
+      >
         <Card ariaLabel="Ben Silbermann - Pinterest CEO">
@@ -68,3 +73,7 @@ <Link color="darkGray" href="https://pinterest.com">
       </Box>
-      <Box padding={2} dangerouslySetInlineStyle={{ __style: { maxWidth: 236 } }}>
+      <Box
+        dangerouslySetInlineStyle={{ __style: { maxWidth: 236 } }}
+        padding={2}
+        xs={{ column: 12 }}
+      >
         <Card ariaLabel="Evan Sharp - Pinterest Co-Founder">
@@ -85,2 +94,2 @@ <Link color="darkGray" href="https://pinterest.com">
     </Box>
-  </div>);
+  </GestaltProvider>);

src/Card/Card.js

@@ -15,2 +15,10 @@ // @flow
 
+  static contextTypes = {
+    inputDevice: React.PropTypes.string
+  }
+
+  static context: {
+    inputDevice: '' | 'key' | 'mouse' | 'touch'
+  }
+
   static props: {
@@ -54,5 +62,7 @@ ariaLabel: String,
 
+    const { inputDevice = 'key' } = this.context;
+
     const classes = classnames(styles.card, {
       [styles.hover]: hovered,
-      [styles.focus]: focused,
+      [styles.focus]: focused
     });
@@ -63,2 +73,3 @@
         aria-label={ariaLabel}
+        disableFocusStyles={inputDevice !== 'key'}
         onBlur={this.handleBlur}
@@ -65,0 +76,0 @@ onFocus={this.handleFocus}

src/ClassicGrid/ClassicGrid.js

@@ -148,11 +148,14 @@ // @flow
     /* eslint react/no-find-dom-node: 0 */
-    const parentNode = ReactDOM.findDOMNode(this).parentNode;
-    const parentWidth = parentNode.clientWidth;
+    const el = ReactDOM.findDOMNode(this);
+    if (el && el.parentNode instanceof HTMLElement) {
+      const parentWidth = el.parentNode.clientWidth;
 
-    let newColCount = Math.floor(parentWidth / eachItemWidth);
+      let newColCount = Math.floor(parentWidth / eachItemWidth);
 
-    if (newColCount < this.props.minCols) {
-      newColCount = this.props.minCols;
+      if (newColCount < this.props.minCols) {
+        newColCount = this.props.minCols;
+      }
+      return newColCount;
     }
-    return newColCount;
+    throw new Error('could not calculate columns');
   }
@@ -159,0 +162,0 @@

src/index.js

@@ -21,2 +21,3 @@ // @flow
 import Flyout from './Flyout/Flyout';
+import GestaltProvider from './GestaltProvider/GestaltProvider';
 import GroupAvatar from './GroupAvatar/GroupAvatar';
@@ -43,2 +44,3 @@ import Heading from './Heading/Heading';
 import TextField from './TextField/TextField';
+import Toast from './Toast/Toast';
 import Tooltip from './Tooltip/Tooltip';
@@ -58,2 +60,3 @@
   Flyout,
+  GestaltProvider,
   GroupAvatar,
@@ -80,3 +83,4 @@ Heading,
   TextField,
+  Toast,
   Tooltip,
 };

src/Link/__docs__/Link-doc.js

@@ -6,4 +6,5 @@ // @flow
 import { ns } from '../../../.corkboard/cards';
+import GestaltProvider from '../../GestaltProvider/GestaltProvider';
+import Icon from '../../Icon/Icon';
 import Text from '../../Text/Text';
-import Icon from '../../Icon/Icon';
 
@@ -38,37 +39,47 @@ ns('Link');
 card(
-  <div className="bg-gray">
-    <Text>
-      <Link color="white" href="https://pinterest.com">
-        <div className="p2">Pinterest.com</div>
-      </Link>
-    </Text>
-  </div>,
+  <GestaltProvider>
+    <div className="bg-gray">
+      <Text>
+        <Link color="white" href="https://pinterest.com">
+          <div className="p2">Pinterest.com</div>
+        </Link>
+      </Text>
+    </div>
+  </GestaltProvider>,
   { heading: false },
 );
 card(
-  <Text>
-    <Link color="gray" href="https://pinterest.com">Pinterest.com</Link>
-  </Text>,
+  <GestaltProvider>
+    <Text>
+      <Link color="gray" href="https://pinterest.com">Pinterest.com</Link>
+    </Text>
+  </GestaltProvider>,
   { heading: false },
 );
 card(
-  <Text>
-    <Link color="darkGray" href="https://pinterest.com">Pinterest.com</Link>
-  </Text>,
+  <GestaltProvider>
+    <Text>
+      <Link color="darkGray" href="https://pinterest.com">Pinterest.com</Link>
+    </Text>
+  </GestaltProvider>,
   { heading: false },
 );
 card(
-  <Text>
-    <Link color="red" href="https://pinterest.com">Pinterest.com</Link>
-  </Text>,
+  <GestaltProvider>
+    <Text>
+      <Link color="red" href="https://pinterest.com">Pinterest.com</Link>
+    </Text>
+  </GestaltProvider>,
   { heading: false },
 );
 card(
-  <Text>
-    <Link color="blue" href="https://pinterest.com">
-      <Icon icon="pin" color="blue" inline ariaLabel="pin" />
-      Pinterest.com
-    </Link>
-  </Text>,
+  <GestaltProvider>
+    <Text>
+      <Link color="blue" href="https://pinterest.com">
+        <Icon icon="pin" color="blue" inline ariaLabel="pin" />
+        Pinterest.com
+      </Link>
+    </Text>
+  </GestaltProvider>,
   { heading: false },
 );

src/Link/Link.js

@@ -34,3 +34,8 @@ // @flow
 
-export default function Link(props: LinkProps) {
+type GestaltContext = {
+  inputDevice: '' | 'key' | 'mouse' | 'touch'
+};
+
+export default function Link(props: LinkProps, context: GestaltContext) {
+  const { inputDevice = 'key' } = context;
   const { color = 'darkGray', inline = false } = props;
@@ -46,2 +51,3 @@ return (
           (inline ? styles.inline : styles.block),
+          (inputDevice !== 'key' ? styles.disableFocusOutline : '')
         )
@@ -53,2 +59,6 @@ }
 
+Link.contextTypes = {
+  inputDevice: React.PropTypes.string
+};
+
 Link.propTypes = {
@@ -60,3 +70,3 @@ // eslint-disable-next-line react/no-unused-prop-types
   href: PropTypes.string.isRequired,
-  inline: PropTypes.bool,
+  inline: PropTypes.bool
 };

src/Masonry/Masonry.js

@@ -94,6 +94,8 @@ // @flow
     const { columnWidth, flexible } = this.props;
-    const gridWidth = ReactDOM.findDOMNode(this).parentNode.clientWidth;
-    this.columnCount = this.calculateColumns();
-    this.itemWidth = flexible ? (gridWidth / this.columnCount) : (columnWidth + this.gutterWidth);
-
+    const el = ReactDOM.findDOMNode(this);
+    if (el && el.parentNode instanceof HTMLElement) {
+      const gridWidth = el.parentNode.clientWidth;
+      this.columnCount = this.calculateColumns();
+      this.itemWidth = flexible ? (gridWidth / this.columnCount) : (columnWidth + this.gutterWidth);
+    }
     this.updateItems(this.props.items);
@@ -463,6 +465,10 @@ this.updateVirtualBounds();
       const { columnWidth, flexible } = this.props;
-      const gridWidth = ReactDOM.findDOMNode(this).parentNode.clientWidth;
-      this.columnCount = this.calculateColumns();
-      this.itemWidth = flexible ? (gridWidth / this.columnCount) : (columnWidth + this.gutterWidth);
-      this.reflow();
+      const el = ReactDOM.findDOMNode(this);
+      if (el && el.parentNode instanceof HTMLElement) {
+        const gridWidth = el.parentNode.clientWidth;
+        this.columnCount = this.calculateColumns();
+        this.itemWidth = flexible ? (gridWidth / this.columnCount)
+          : (columnWidth + this.gutterWidth);
+        this.reflow();
+      }
     }, 100);
@@ -494,11 +500,14 @@ }
     /* eslint react/no-find-dom-node: 0 */
-    const parentNode = ReactDOM.findDOMNode(this).parentNode;
-    const parentWidth = parentNode.clientWidth;
+    const el = ReactDOM.findDOMNode(this);
+    if (el && el.parentNode instanceof HTMLElement) {
+      const parentWidth = el.parentNode.clientWidth;
 
-    let newColCount = Math.floor(parentWidth / eachItemWidth);
+      let newColCount = Math.floor(parentWidth / eachItemWidth);
 
-    if (newColCount < this.props.minCols) {
-      newColCount = this.props.minCols;
+      if (newColCount < this.props.minCols) {
+        newColCount = this.props.minCols;
+      }
+      return newColCount;
     }
-    return newColCount;
+    throw new Error('could not calculate columns');
   }
@@ -509,9 +518,12 @@
     this.containerHeight = this.getContainerHeight();
-    if (typeof window !== 'undefined' && scrollContainer === window) {
-      this.containerOffset = ReactDOM.findDOMNode(this).getBoundingClientRect().top
-        + window.scrollY;
-    } else {
-      this.containerOffset = (ReactDOM.findDOMNode(this).getBoundingClientRect().top
-        + scrollContainer.scrollTop)
-        - scrollContainer.getBoundingClientRect().top;
+    const el = ReactDOM.findDOMNode(this);
+    if (el instanceof HTMLElement) {
+      if (typeof window !== 'undefined' && scrollContainer === window) {
+        this.containerOffset = el.getBoundingClientRect().top
+          + window.scrollY;
+      } else {
+        this.containerOffset = (el.getBoundingClientRect().top
+          + scrollContainer.scrollTop)
+          - scrollContainer.getBoundingClientRect().top;
+      }
     }
@@ -518,0 +530,0 @@ this.scrollBuffer = this.containerHeight * 2;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1805127

increased by20.22%

Number of package files

291

increased by28.76%

Lines of code

31838

increased by26.51%

Number of lines in readme file

84

increased by189.66%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of low supply chain risk alerts

40

increased by3900%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes