Update deps

UNRELEASED.md

@@ -24,6 +24,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Dependency upgrades
 
+- Updated most dependencies and dev dependencies ([#1187](https://github.com/Shopify/polaris-react/pull/1187))
+
 ### Code quality
 
 Removed an unneeded media query from Modal's `Header` component ([#1272](https://github.com/Shopify/polaris-react/pull/1272))

examples/cdn-styles/README.md

@@ -9,7 +9,10 @@ The CDN hosted CSS file needs to be included in your HTML document.
 ## Getting Started
 
 ```html
-<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/latest/polaris.css" />
+<link
+  rel="stylesheet"
+  href="https://sdks.shopifycdn.com/polaris/latest/polaris.css"
+/>
 ```
 
 Refer to the [Polaris Style Guide](https://polaris.shopify.com/) for more HTML sample implementations of our components.

package.json

@@ -91,70 +91,70 @@
     "ios >= 9"
   ],
   "devDependencies": {
-    "@babel/core": "^7.1.6",
+    "@babel/core": "^7.3.4",
     "@percy-io/percy-storybook": "^2.1.0",
     "@shopify/jest-dom-mocks": "^2.1.1",
     "@shopify/js-uploader": "github:shopify/js-uploader",
-    "@shopify/sewing-kit": "0.69.0",
+    "@shopify/sewing-kit": "^0.79.2",
     "@storybook/addon-a11y": "^4.1.6",
     "@storybook/addon-actions": "^4.1.6",
     "@storybook/addon-console": "^1.1.0",
     "@storybook/addon-notes": "^4.1.6",
     "@storybook/addon-options": "^4.1.6",
     "@storybook/react": "^4.1.6",
     "@types/enzyme": "^3.1.14",
-    "@types/enzyme-adapter-react-16": "^1.0.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/lodash": "^4.14.108",
-    "@types/node": "^8.10.17",
-    "archiver": "^2.1.0",
-    "aws-sdk": "^2.58.0",
+    "@types/node": "^11.11.2",
+    "archiver": "^3.0.0",
+    "aws-sdk": "^2.420.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^8.0.5",
     "babel-preset-shopify": "^17.0.1",
-    "chalk": "^2.4.1",
-    "change-case": "^3.0.1",
-    "codecov": "^3.0.4",
-    "copyfiles": "^1.2.0",
+    "chalk": "^2.4.2",
+    "change-case": "^3.1.0",
+    "codecov": "^3.2.0",
+    "copyfiles": "^2.1.0",
     "crypto": "^1.0.1",
-    "cssnano": "^4.1.8",
+    "cssnano": "^4.1.10",
     "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.6.0",
-    "fs-extra": "^4.0.2",
-    "generic-names": "^1.0.2",
-    "glob": "^7.1.2",
-    "gray-matter": "^4.0.1",
+    "enzyme-adapter-react-16": "^1.10.0",
+    "fs-extra": "^7.0.1",
+    "generic-names": "^2.0.1",
+    "glob": "^7.1.3",
+    "gray-matter": "^4.0.2",
     "in-publish": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
-    "js-yaml": "^3.12.1",
-    "marked": "^0.6.0",
-    "node-sass": "^4.10.0",
-    "npm-run-all": "^4.0.2",
-    "object-hash": "^1.3.0",
-    "pa11y": "^5.0.4",
-    "postcss": "^7.0.8",
+    "js-yaml": "^3.12.2",
+    "marked": "^0.6.1",
+    "node-sass": "^4.11.0",
+    "npm-run-all": "^4.1.5",
+    "object-hash": "^1.3.1",
+    "pa11y": "^5.1.0",
+    "postcss": "^7.0.14",
     "postcss-modules-extract-imports": "^2.0.0",
-    "postcss-modules-local-by-default": "^2.0.4",
+    "postcss-modules-local-by-default": "^2.0.6",
     "postcss-modules-parser": "^1.1.1",
-    "postcss-modules-scope": "^2.0.1",
+    "postcss-modules-scope": "^2.1.0",
     "postcss-modules-values": "^2.0.0",
-    "postcss-shopify": "^2.2.0",
-    "puppeteer": "^1.5.0",
+    "postcss-shopify": "^2.2.1",
+    "puppeteer": "^1.13.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-test-renderer": "^16.3.1",
-    "rimraf": "^2.6.1",
-    "rollup": "^1.0.2",
-    "rollup-plugin-babel": "^4.2.0",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.6.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.2.1",
     "rollup-plugin-json": "^3.1.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-pluginutils": "^2.3.3",
-    "semver": "^5.4.1",
-    "shelljs": "^0.7.7",
-    "shx": "^0.2.2",
-    "svgo": "^0.7.2",
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-pluginutils": "^2.4.1",
+    "semver": "^5.6.0",
+    "shelljs": "^0.8.3",
+    "shx": "^0.3.2",
+    "svgo": "^1.2.0",
     "typescript": "~3.1.6",
-    "yargs": "^12.0.1"
+    "yargs": "^13.2.2"
   },
   "peerDependencies": {
     "react": "^16.3.1",
@@ -174,23 +174,23 @@
     "styles.scss"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.1.6",
-    "@shopify/app-bridge": "^1.1.2",
-    "@shopify/images": "^1.1.0",
-    "@shopify/javascript-utilities": "^2.2.1",
-    "@shopify/polaris-icons": "^3.0.0",
+    "@babel/runtime": "^7.3.4",
+    "@shopify/app-bridge": "^1.2.0-0",
+    "@shopify/images": "^1.1.5",
+    "@shopify/javascript-utilities": "^2.4.0",
+    "@shopify/polaris-icons": "^3.1.0",
     "@shopify/polaris-tokens": "^2.3.0",
-    "@shopify/react-compose": "^0.1.6",
+    "@shopify/react-compose": "^0.1.10",
     "@shopify/react-utilities": "^2.0.3",
     "@types/prop-types": "^15.5.5",
     "@types/react": "^16.4.7",
     "@types/react-dom": "^16.0.6",
     "@types/react-transition-group": "^2.0.7",
-    "core-js": "^2.5.1",
+    "core-js": "^2.6.5",
     "hoist-non-react-statics": "^2.5.0",
     "lodash": "^4.17.4",
-    "prop-types": "^15.6.1",
-    "react-transition-group": "^2.4.0",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^2.6.0",
     "tslib": "^1.9.3"
   }
 }

scripts/optimize.js

@@ -21,17 +21,14 @@ glob(resolvePath(__dirname, '../src/**/*.svg'), (error, files) => {
 });
 
 function optimizeFile(file) {
-  return new Promise((resolve) => {
-    const data = readFileSync(file, 'utf8');
-    svgo.optimize(data, (result) => {
-      removeSync(file);
+  const data = readFileSync(file, 'utf8');
+  return svgo.optimize(data).then((result) => {
+    removeSync(file);
 
-      const newFile = resolvePath(
-        dirname(file),
-        `${paramCase(basename(file, '.svg'))}.svg`,
-      );
-      writeFileSync(newFile, `${result.data}\n`);
-      resolve();
-    });
+    const newFile = resolvePath(
+      dirname(file),
+      `${paramCase(basename(file, '.svg'))}.svg`,
+    );
+    writeFileSync(newFile, `${result.data}\n`);
   });
 }

scripts/readme-update-version.js

@@ -9,12 +9,14 @@ const {semverRegExp, readmes} = require('./utilities');
 const root = resolve(__dirname, '..');
 
 console.log(`🆕 Updating version in ${readmes.join(', ')}...`);
-readmes.map((readme) => resolve(root, readme)).forEach((file) => {
-  writeFileSync(
-    file,
-    readFileSync(file, 'utf8').replace(semverRegExp, newVersion),
-  );
-});
+readmes
+  .map((readme) => resolve(root, readme))
+  .forEach((file) => {
+    writeFileSync(
+      file,
+      readFileSync(file, 'utf8').replace(semverRegExp, newVersion),
+    );
+  });
 
 console.log(`🏃‍♂️ Running \`git add -A ${readmes.join(' ')}\`...`);
 const execOpts = {stdio: 'inherit'};

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -206,15 +206,13 @@ export default class ComboBox extends React.PureComponent<Props, State> {
       emptyState,
     } = this.props;
 
-    const actionsBeforeMarkup = actionsBefore &&
-      actionsBefore.length > 0 && (
-        <ActionList actionRole="option" items={actionsBefore} />
-      );
-
-    const actionsAfterMarkup = actionsAfter &&
-      actionsAfter.length > 0 && (
-        <ActionList actionRole="option" items={actionsAfter} />
-      );
+    const actionsBeforeMarkup = actionsBefore && actionsBefore.length > 0 && (
+      <ActionList actionRole="option" items={actionsBefore} />
+    );
+
+    const actionsAfterMarkup = actionsAfter && actionsAfter.length > 0 && (
+      <ActionList actionRole="option" items={actionsAfter} />
+    );
 
     const optionsMarkup = options.length > 0 && (
       <OptionList

src/components/Choice/Choice.tsx

@@ -54,12 +54,11 @@ export default function Choice({
     </div>
   ) : null;
 
-  const errorMarkup = error &&
-    typeof error !== 'boolean' && (
-      <div className={styles.Error}>
-        <InlineError message={error} fieldID={id} />
-      </div>
-    );
+  const errorMarkup = error && typeof error !== 'boolean' && (
+    <div className={styles.Error}>
+      <InlineError message={error} fieldID={id} />
+    </div>
+  );
 
   const descriptionMarkup =
     helpTextMarkup || errorMarkup ? (

src/components/Labelled/Labelled.tsx

@@ -48,12 +48,11 @@ export default function Labelled({
     </div>
   ) : null;
 
-  const errorMarkup = error &&
-    typeof error !== 'boolean' && (
-      <div className={styles.Error}>
-        <InlineError message={error} fieldID={id} />
-      </div>
-    );
+  const errorMarkup = error && typeof error !== 'boolean' && (
+    <div className={styles.Error}>
+      <InlineError message={error} fieldID={id} />
+    </div>
+  );
 
   const labelMarkup = label ? (
     <div className={styles.LabelWrapper}>

src/components/Navigation/components/Section/Section.tsx

@@ -95,23 +95,22 @@ export default class Section extends React.Component<Props, State> {
     const toggleClassName = classNames(styles.Item, styles.RollupToggle);
     const ariaLabel = rollup && (expanded ? rollup.hide : rollup.view);
 
-    const toggleRollup = rollup &&
-      items.length > rollup.after && (
-        <div className={styles.ListItem} key="List Item">
-          <button
-            type="button"
-            className={toggleClassName}
-            onClick={this.toggleViewAll}
-            aria-label={ariaLabel}
-            testID="ToggleViewAll"
-          >
-            <span className={styles.Icon}>
-              <Icon source={HorizontalDotsMinor} />
-            </span>
-            {ariaLabel}
-          </button>
-        </div>
-      );
+    const toggleRollup = rollup && items.length > rollup.after && (
+      <div className={styles.ListItem} key="List Item">
+        <button
+          type="button"
+          className={toggleClassName}
+          onClick={this.toggleViewAll}
+          aria-label={ariaLabel}
+          testID="ToggleViewAll"
+        >
+          <span className={styles.Icon}>
+            <Icon source={HorizontalDotsMinor} />
+          </span>
+          {ariaLabel}
+        </button>
+      </div>
+    );
 
     const activeItemIndex = items.findIndex((item: ItemProps) => {
       if (!rollup) {
@@ -147,15 +146,14 @@ export default class Section extends React.Component<Props, State> {
 
     const additionalItemsId = createAdditionalItemsId();
 
-    const activeItemsMarkup = rollup &&
-      additionalItems.length > 0 && (
-        <li className={styles.RollupSection}>
-          <Collapsible id={additionalItemsId} open={expanded}>
-            <ul className={styles.List}>{additionalItems}</ul>
-          </Collapsible>
-          {toggleRollup}
-        </li>
-      );
+    const activeItemsMarkup = rollup && additionalItems.length > 0 && (
+      <li className={styles.RollupSection}>
+        <Collapsible id={additionalItemsId} open={expanded}>
+          <ul className={styles.List}>{additionalItems}</ul>
+        </Collapsible>
+        {toggleRollup}
+      </li>
+    );
 
     return (
       <ul className={className}>

src/components/Page/components/Header/Header.tsx

@@ -257,9 +257,8 @@ class Header extends React.PureComponent<CombinedProps, State> {
   };
 
   private handleActionGroupClose = (group: string) => {
-    this.setState(
-      ({openActionGroup}) =>
-        openActionGroup === group ? {openActionGroup: undefined} : {},
+    this.setState(({openActionGroup}) =>
+      openActionGroup === group ? {openActionGroup: undefined} : {},
     );
   };
 

src/components/RangeSlider/RangeSlider.tsx

@@ -117,14 +117,13 @@ export class RangeSlider extends React.PureComponent<CombinedProps, State> {
       ),
     };
 
-    const outputMarkup = !disabled &&
-      output && (
-        <output htmlFor={id} className={styles.Output}>
-          <div className={styles.OutputBubble}>
-            <span className={styles.OutputText}>{value}</span>
-          </div>
-        </output>
-      );
+    const outputMarkup = !disabled && output && (
+      <output htmlFor={id} className={styles.Output}>
+        <div className={styles.OutputBubble}>
+          <span className={styles.OutputText}>{value}</span>
+        </div>
+      </output>
+    );
 
     const prefixMarkup = prefix && (
       <div className={styles.Prefix}>{prefix}</div>