reakit-system - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

CHANGELOG.md

@@ -6,2 +6,43 @@ # Change Log
 
+# [0.10.0](https://github.com/reakit/reakit/tree/master/packages/reakit-system/compare/reakit-system@0.9.0...reakit-system@0.10.0) (2020-03-30)
+
+
+### Features
+
+* Automatically check `Radio` on focus ([#599](https://github.com/reakit/reakit/tree/master/packages/reakit-system/issues/599)) ([6edc689](https://github.com/reakit/reakit/tree/master/packages/reakit-system/commit/6edc68980de142686bdbdceecc8769e2a6265001))
+* Select the first `Tab` by default and don't require `stopId` prop ([#597](https://github.com/reakit/reakit/tree/master/packages/reakit-system/issues/597)) ([528b016](https://github.com/reakit/reakit/tree/master/packages/reakit-system/commit/528b016304f381b171cdc96598201deb54fb53c8))
+
+
+### BREAKING CHANGES
+
+* The first `Tab` is now selected by default. There's no need to pass `selectedId` to `useTabState` anymore.
+
+  If you're already using `selectedId` to select a tab in the initial render, you don't need to change anything as this still works. But, if you want to render tabs with none selected, you should now pass `null` to `selectedId`:
+
+  ```js
+  // if you're already using selectedId, there's no need to change anything
+  const tab = useTabState({ selectedId: "tab-1" });
+  ```
+
+  ```diff
+  // when there's no tab selected by default, you now need to explicitly specify it
+  - const tab = useTabState();
+  + const tab = useTabState({ selectedId: null });
+  ```
+* **Most users will not be affected by this**, but `stops`, `register` and `unregister` on the returned object of state hooks have been renamed to `items`, `registerItem` and `unregisterItem`, respectively.
+
+  ```diff
+  const tab = useTabState();
+  - tab.stops.map(...);
+  + tab.items.map(...);
+  - tab.register(...);
+  + tab.registerItem(...);
+  - tab.unregister(...);
+  + tab.unregisterItem(...);
+  ```
+
+
+
+
+
 # [0.9.0](https://github.com/reakit/reakit/tree/master/packages/reakit-system/compare/reakit-system@0.8.0...reakit-system@0.9.0) (2020-02-10)
@@ -8,0 +49,0 @@

dist/reakit-system.min.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e=e||self).ReakitSystem={},e.React)}(this,(function(e,r){"use strict";function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function n(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function o(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?n(Object(o),!0).forEach((function(r){t(e,r,o[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))}))}return e}function u(e,r){if(null==e)return{};var t,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)t=u[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}function i(e,r){for(var t={},n={},o=0,u=Object.keys(e);o<u.length;o++){var i=u[o];r.indexOf(i)>=0?t[i]=e[i]:n[i]=e[i]}return[t,n]}var a=r.createContext({}),s=function(e,t,n){void 0===n&&(n=t.children);var o=r.useContext(a);if(o.useCreateElement)return o.useCreateElement(e,t,n);if(function(e){return"function"==typeof e}(n)){t.children;return n(u(t,["children"]))}return r.createElement(e,t,n)};function c(e){return"object"==typeof e&&null!=e}function f(e,t){r.useDebugValue(e);var n=r.useContext(a);return null!=n[e]?n[e]:t}function l(e,t,n){void 0===t&&(t={}),void 0===n&&(n={});var u="use"+e+"Options";r.useDebugValue(u);var i=f(u);return i?o({},t,{},i(t,n)):t}function p(e,t,n){void 0===t&&(t={}),void 0===n&&(n={});var o="use"+e+"Props";r.useDebugValue(o);var u=f(o);return u?u(t,n):n}function v(e,r){var t={},n=e,o=Array.isArray(n),u=0;for(n=o?n:n[Symbol.iterator]();;){var i;if(o){if(u>=n.length)break;i=n[u++]}else{if((u=n.next()).done)break;i=u.value}for(var a=i,s=0,c=Object.keys(a);s<c.length;s++){var f=c[s];if(!r||r(a[f],f)){var l=t[f]||[];t[f]=[].concat(l,[a[f]])}}}return t}function y(e){for(var r=v(e,(function(e){return"function"==typeof e})),t={},n=0,o=Object.keys(r);n<o.length;n++){var u=o[n],i=r[u];t[u]=1===i.length?i[0]:i.reduce((function(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return r.apply(void 0,n.slice(0,-1).concat([e.apply(void 0,n)]))}}))}return t}function d(e){for(var r=v(e,c),t={},n=0,o=Object.keys(r);n<o.length;n++){var u=o[n],i=r[u];t[u]=Object.assign.apply(Object,[{}].concat(i))}return t}e.SystemContext=a,e.SystemProvider=function(e){var t=e.children,n=e.unstable_system;return r.createElement(a.Provider,{value:n},t)},e.createComponent=function(e){var t,n=e.as,a=e.useHook,c=e.keys,f=void 0===c?a&&a.__keys||[]:c,l=e.propsAreEqual,p=void 0===l?a&&a.__propsAreEqual:l,v=e.useCreateElement,y=void 0===v?s:v,d=function(e,r){var t=e.as,s=void 0===t?n:t,c=u(e,["as"]);if(a){var l=i(c,f),p=l[0],v=l[1],d=a(p,o({ref:r},v)),b=d.wrapElement,O=u(d,["wrapElement"]),m=s.render?s.render.__keys:s.__keys,_=m?i(c,m)[0]:{},g=y(s,o({},O,{},_));return b?b(g):g}return y(s,c)};return d.__keys=f,function(e,t){return r.memo(e,t)}((t=d,r.forwardRef(t)),p)},e.createHook=function(e){var r,t=(r=e.compose,Array.isArray(r)?r:void 0!==r?[r]:[]),n=function(r,t){return e.useOptions&&(r=e.useOptions(r,t)),e.name&&(r=l(e.name,r,t)),r},o=function(r,o,u){return void 0===r&&(r={}),void 0===o&&(o={}),void 0===u&&(u=!1),u||(r=n(r,o)),e.compose&&t.forEach((function(e){r=e.__useOptions(r,o)})),e.useProps&&(o=e.useProps(r,o)),e.name&&(o=p(e.name,r,o)),e.compose&&(e.useComposeOptions&&(r=e.useComposeOptions(r,o)),t.forEach((function(e){o=e(r,o,!0)}))),o};return o.__useOptions=n,o.__keys=[].concat(t.reduce((function(e,r){return e.push.apply(e,r.__keys||[]),e}),[]),e.useState?e.useState.__keys:[],e.keys||[]),Boolean(e.propsAreEqual||t.find((function(e){return Boolean(e.__propsAreEqual)})))&&(o.__propsAreEqual=function(r,n){var o=e.propsAreEqual&&e.propsAreEqual(r,n);if(null!=o)return o;var u=t,i=Array.isArray(u),a=0;for(u=i?u:u[Symbol.iterator]();;){var s;if(i){if(a>=u.length)break;s=u[a++]}else{if((a=u.next()).done)break;s=a.value}var f=s.__propsAreEqual,l=f&&f(r,n);if(null!=l)return l}return function e(r,t,n){if(void 0===n&&(n=1),r===t)return!0;if(!r||!t)return!1;var o=Object.keys(r),u=Object.keys(t),i=o.length;if(u.length!==i)return!1;for(var a=0,s=o;a<s.length;a++){var f=s[a];if(r[f]!==t[f]&&!(n&&c(r[f])&&c(t[f])&&e(r[f],t[f],n-1)))return!1}return!0}(r,n)}),o},e.mergeSystem=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return Object.assign.apply(Object,[{}].concat(r,[d(r),y(r)]))},e.useCreateElement=s,e.useOptions=l,e.useProps=p,e.useToken=f,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e=e||self).ReakitSystem={},e.React)}(this,(function(e,r){"use strict";function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function n(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function o(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?n(Object(o),!0).forEach((function(r){t(e,r,o[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))}))}return e}function u(e,r){if(null==e)return{};var t,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)t=u[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}function i(e,r){for(var t={},n={},o=0,u=Object.keys(e);o<u.length;o++){var i=u[o];r.indexOf(i)>=0?t[i]=e[i]:n[i]=e[i]}return[t,n]}var a=r.createContext({}),s=function(e,t,n){void 0===n&&(n=t.children);var o=r.useContext(a);if(o.useCreateElement)return o.useCreateElement(e,t,n);if(function(e){return"function"==typeof e}(n)){t.children;return n(u(t,["children"]))}return r.createElement(e,t,n)};function c(e){return"object"==typeof e&&null!=e}function f(e,t){r.useDebugValue(e);var n=r.useContext(a);return null!=n[e]?n[e]:t}function l(e,t,n){void 0===t&&(t={}),void 0===n&&(n={});var u="use"+e+"Options";r.useDebugValue(u);var i=f(u);return i?o({},t,{},i(t,n)):t}function p(e,t,n){void 0===t&&(t={}),void 0===n&&(n={});var o="use"+e+"Props";r.useDebugValue(o);var u=f(o);return u?u(t,n):n}function v(e,r){var t={},n=e,o=Array.isArray(n),u=0;for(n=o?n:n[Symbol.iterator]();;){var i;if(o){if(u>=n.length)break;i=n[u++]}else{if((u=n.next()).done)break;i=u.value}for(var a=i,s=0,c=Object.keys(a);s<c.length;s++){var f=c[s];if(!r||r(a[f],f)){var l=t[f]||[];t[f]=[].concat(l,[a[f]])}}}return t}function y(e){for(var r=v(e,(function(e){return"function"==typeof e})),t={},n=0,o=Object.keys(r);n<o.length;n++){var u=o[n],i=r[u];t[u]=1===i.length?i[0]:i.reduce((function(e,r){return function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return r.apply(void 0,n.slice(0,-1).concat([e.apply(void 0,n)]))}}))}return t}function d(e){for(var r=v(e,c),t={},n=0,o=Object.keys(r);n<o.length;n++){var u=o[n],i=r[u];t[u]=Object.assign.apply(Object,[{}].concat(i))}return t}e.SystemContext=a,e.SystemProvider=function(e){var t=e.children,n=e.unstable_system;return r.createElement(a.Provider,{value:n},t)},e.createComponent=function(e){var t,n=e.as,a=e.useHook,c=e.keys,f=void 0===c?a&&a.__keys||[]:c,l=e.propsAreEqual,p=void 0===l?a&&a.__propsAreEqual:l,v=e.useCreateElement,y=void 0===v?s:v,d=function(e,r){var t=e.as,s=void 0===t?n:t,c=u(e,["as"]);if(a){var l=i(c,f),p=l[0],v=l[1],d=a(p,o({ref:r},v)),b=d.wrapElement,O=u(d,["wrapElement"]),m=s.render?s.render.__keys:s.__keys,_=m?i(c,m)[0]:{},g=y(s,o({},O,{},_));return b?b(g):g}return y(s,c)};return d.__keys=f,function(e,t){return r.memo(e,t)}((t=d,r.forwardRef(t)),p)},e.createHook=function(e){var r,t=(r=e.compose,Array.isArray(r)?r:void 0!==r?[r]:[]),n=function(r,n){return e.useOptions&&(r=e.useOptions(r,n)),e.name&&(r=l(e.name,r,n)),e.compose&&t.forEach((function(e){r=e.__useOptions(r,n)})),r},o=function(r,o,u){return void 0===r&&(r={}),void 0===o&&(o={}),void 0===u&&(u=!1),u||(r=n(r,o)),e.useProps&&(o=e.useProps(r,o)),e.name&&(o=p(e.name,r,o)),e.compose&&(e.useComposeOptions&&(r=e.useComposeOptions(r,o)),e.useComposeProps?o=e.useComposeProps(r,o):t.forEach((function(e){o=e(r,o,!0)}))),o};return o.__useOptions=n,o.__keys=[].concat(t.reduce((function(e,r){return e.push.apply(e,r.__keys||[]),e}),[]),e.useState?e.useState.__keys:[],e.keys||[]),Boolean(e.propsAreEqual||t.find((function(e){return Boolean(e.__propsAreEqual)})))&&(o.__propsAreEqual=function(r,n){var o=e.propsAreEqual&&e.propsAreEqual(r,n);if(null!=o)return o;var u=t,i=Array.isArray(u),a=0;for(u=i?u:u[Symbol.iterator]();;){var s;if(i){if(a>=u.length)break;s=u[a++]}else{if((a=u.next()).done)break;s=a.value}var f=s.__propsAreEqual,l=f&&f(r,n);if(null!=l)return l}return r.children===n.children&&function e(r,t,n){if(void 0===n&&(n=1),r===t)return!0;if(!r||!t)return!1;var o=Object.keys(r),u=Object.keys(t),i=o.length;if(u.length!==i)return!1;for(var a=0,s=o;a<s.length;a++){var f=s[a];if(r[f]!==t[f]&&!(n&&c(r[f])&&c(t[f])&&e(r[f],t[f],n-1)))return!1}return!0}(r,n)}),o},e.mergeSystem=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return Object.assign.apply(Object,[{}].concat(r,[d(r),y(r)]))},e.useCreateElement=s,e.useOptions=l,e.useProps=p,e.useToken=f,Object.defineProperty(e,"__esModule",{value:!0})}));

es/createHook.js

@@ -71,2 +71,9 @@ import 'react';
       hookOptions = useOptions(options.name, hookOptions, htmlProps);
+    } // Run composed hooks useOptions
+
+
+    if (options.compose) {
+      composedHooks.forEach(function (hook) {
+        hookOptions = hook.__useOptions(hookOptions, htmlProps);
+      });
     }
@@ -93,10 +100,2 @@
       hookOptions = __useOptions(hookOptions, htmlProps);
-    } // We're already calling composed useOptions here
-    // That's why we ignoreUseOptions for composed hooks
-
-
-    if (options.compose) {
-      composedHooks.forEach(function (hook) {
-        hookOptions = hook.__useOptions(hookOptions, htmlProps);
-      });
     } // Call the current hook's useProps
@@ -119,6 +118,9 @@
 
-      composedHooks.forEach(function (hook) {
-        // @ts-ignore The third option is only used internally
-        htmlProps = hook(hookOptions, htmlProps, true);
-      });
+      if (options.useComposeProps) {
+        htmlProps = options.useComposeProps(hookOptions, htmlProps);
+      } else {
+        composedHooks.forEach(function (hook) {
+          htmlProps = hook(hookOptions, htmlProps, true);
+        });
+      }
     }
@@ -172,2 +174,7 @@
         }
+      } // @ts-ignore
+
+
+      if (prev.children !== next.children) {
+        return false;
       }
@@ -174,0 +181,0 @@

lib/createHook.js

@@ -75,2 +75,9 @@ 'use strict';
       hookOptions = useOptions.useOptions(options.name, hookOptions, htmlProps);
+    } // Run composed hooks useOptions
+
+
+    if (options.compose) {
+      composedHooks.forEach(function (hook) {
+        hookOptions = hook.__useOptions(hookOptions, htmlProps);
+      });
     }
@@ -97,10 +104,2 @@
       hookOptions = __useOptions(hookOptions, htmlProps);
-    } // We're already calling composed useOptions here
-    // That's why we ignoreUseOptions for composed hooks
-
-
-    if (options.compose) {
-      composedHooks.forEach(function (hook) {
-        hookOptions = hook.__useOptions(hookOptions, htmlProps);
-      });
     } // Call the current hook's useProps
@@ -123,6 +122,9 @@
 
-      composedHooks.forEach(function (hook) {
-        // @ts-ignore The third option is only used internally
-        htmlProps = hook(hookOptions, htmlProps, true);
-      });
+      if (options.useComposeProps) {
+        htmlProps = options.useComposeProps(hookOptions, htmlProps);
+      } else {
+        composedHooks.forEach(function (hook) {
+          htmlProps = hook(hookOptions, htmlProps, true);
+        });
+      }
     }
@@ -176,2 +178,7 @@
         }
+      } // @ts-ignore
+
+
+      if (prev.children !== next.children) {
+        return false;
       }
@@ -178,0 +185,0 @@

package.json

 {
   "name": "reakit-system",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Reakit System utils",
@@ -24,3 +24,3 @@ "sideEffects": false,
     "build": "../../scripts/build/build.js",
-    "docs": "documentation readme src/*.{ts,tsx} --section=API --parse-extension ts --parse-extension tsx",
+    "docs": "documentation readme src/*.{ts,tsx} --markdown-toc-max-depth=2 --section=API --parse-extension ts --parse-extension tsx",
     "preversion": "yarn lint && yarn test && yarn docs && yarn build",
@@ -34,12 +34,10 @@ "postpublish": "yarn clean"
   ],
-  "devDependencies": {
-    "reakit-utils": "^0.9.0"
+  "dependencies": {
+    "reakit-utils": "^0.10.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "reakit": "^1.0.0-beta.16",
-    "reakit-utils": "^0.9.0"
+    "react-dom": "^16.8.0"
   },
-  "gitHead": "843dd4312fe21f3d7c18b94bd6b60182d306f946"
+  "gitHead": "49db6c007ea82fddf959448328b5f5d572defa40"
 }

README.md

@@ -37,25 +37,9 @@ # reakit-system
 -   [createComponent](#createcomponent)
-    -   [Parameters](#parameters)
-    -   [Examples](#examples)
 -   [createHook](#createhook)
-    -   [Parameters](#parameters-1)
-    -   [Examples](#examples-1)
 -   [mergeSystem](#mergesystem)
-    -   [Parameters](#parameters-2)
-    -   [Examples](#examples-2)
 -   [SystemProvider](#systemprovider)
-    -   [Parameters](#parameters-3)
-    -   [Examples](#examples-3)
 -   [useCreateElement](#usecreateelement)
-    -   [Parameters](#parameters-4)
-    -   [Examples](#examples-4)
 -   [useOptions](#useoptions)
-    -   [Parameters](#parameters-5)
-    -   [Examples](#examples-5)
 -   [useProps](#useprops)
-    -   [Parameters](#parameters-6)
-    -   [Examples](#examples-6)
 -   [useToken](#usetoken)
-    -   [Parameters](#parameters-7)
-    -   [Examples](#examples-7)
 
@@ -62,0 +46,0 @@ ### createComponent

src/createHook.ts

@@ -7,3 +7,3 @@ import { toArray } from "reakit-utils/toArray";
 type Hook<O = any, P = any> = {
-  (options?: O, htmlProps?: P): P;
+  (options?: O, htmlProps?: P, unstable_ignoreUseOptions?: boolean): P;
   __keys: ReadonlyArray<any>;
@@ -21,2 +21,3 @@ __useOptions: (options: O, htmlProps: P) => O;
   useComposeOptions?: (options: O, htmlProps: P) => O;
+  useComposeProps?: (options: O, htmlProps: P) => P;
   propsAreEqual?: (prev: O & P, next: O & P) => boolean | undefined | null;
@@ -62,2 +63,9 @@ keys?: ReadonlyArray<keyof O>;
     }
+    // Run composed hooks useOptions
+    if (options.compose) {
+      composedHooks.forEach(hook => {
+        hookOptions = hook.__useOptions(hookOptions, htmlProps);
+      });
+    }
+
     return hookOptions;
@@ -75,9 +83,2 @@ };
     }
-    // We're already calling composed useOptions here
-    // That's why we ignoreUseOptions for composed hooks
-    if (options.compose) {
-      composedHooks.forEach(hook => {
-        hookOptions = hook.__useOptions(hookOptions, htmlProps);
-      });
-    }
     // Call the current hook's useProps
@@ -91,3 +92,2 @@ if (options.useProps) {
     }
-
     if (options.compose) {
@@ -97,6 +97,9 @@ if (options.useComposeOptions) {
       }
-      composedHooks.forEach(hook => {
-        // @ts-ignore The third option is only used internally
-        htmlProps = hook(hookOptions, htmlProps, true);
-      });
+      if (options.useComposeProps) {
+        htmlProps = options.useComposeProps(hookOptions, htmlProps);
+      } else {
+        composedHooks.forEach(hook => {
+          htmlProps = hook(hookOptions, htmlProps, true);
+        });
+      }
     }
@@ -144,2 +147,7 @@ return htmlProps;
 
+      // @ts-ignore
+      if (prev.children !== next.children) {
+        return false;
+      }
+
       return deepEqual(prev, next);
@@ -146,0 +154,0 @@ };

ts/createHook.d.ts

 declare type Hook<O = any, P = any> = {
-    (options?: O, htmlProps?: P): P;
+    (options?: O, htmlProps?: P, unstable_ignoreUseOptions?: boolean): P;
     __keys: ReadonlyArray<any>;
@@ -17,2 +17,3 @@ __useOptions: (options: O, htmlProps: P) => O;
     useComposeOptions?: (options: O, htmlProps: P) => O;
+    useComposeProps?: (options: O, htmlProps: P) => P;
     propsAreEqual?: (prev: O & P, next: O & P) => boolean | undefined | null;
@@ -19,0 +20,0 @@ keys?: ReadonlyArray<keyof O>;

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

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

Dependency count

3

decreased by-25%

Dev dependency count

0

decreased by-100%

Lines of code

2604

increased by0.7%

Worsened metrics

Total package byte prevSize

101308

decreased by-72.5%

Number of package files

86

decreased by-1.15%

Number of lines in readme file

322

decreased by-4.73%

Dependency changes

• + Addedreakit-utils@^0.10.0

• + Addedreakit-utils@0.10.0(transitive)

• - Removed@popperjs/core@2.11.8(transitive)

• - Removedbody-scroll-lock@3.1.5(transitive)

• - Removedreakit@1.3.11(transitive)

• - Removedreakit-system@0.15.2(transitive)

• - Removedreakit-utils@0.15.20.9.0(transitive)

• - Removedreakit-warning@0.6.2(transitive)