reakit-system - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [0.8.0](https://github.com/reakit/reakit/tree/master/packages/reakit-system/compare/reakit-system@0.7.2...reakit-system@0.8.0) (2020-02-05)
+
+
+### Features
+
+* Add `modal` state to `useDialogState` ([#535](https://github.com/reakit/reakit/tree/master/packages/reakit-system/issues/535)) ([f3953ad](https://github.com/reakit/reakit/tree/master/packages/reakit-system/commit/f3953ad)), closes [#404](https://github.com/reakit/reakit/tree/master/packages/reakit-system/issues/404)
+* Replace `unstable_wrap` by `wrapElement` ([#538](https://github.com/reakit/reakit/tree/master/packages/reakit-system/issues/538)) ([17a12fb](https://github.com/reakit/reakit/tree/master/packages/reakit-system/commit/17a12fb))
+
+
+
+
+
 ## [0.7.2](https://github.com/reakit/reakit/tree/master/packages/reakit-system/compare/reakit-system@0.7.1...reakit-system@0.7.2) (2019-12-18)
@@ -8,0 +20,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 a(e,r){for(var t={},n={},o=0,u=Object.keys(e);o<u.length;o++){var a=u[o];r.indexOf(a)>=0?t[a]=e[a]:n[a]=e[a]}return[t,n]}var i=r.createContext({}),s=function(e,t,n){void 0===n&&(n=t.children);var o=r.useContext(i);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(i);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 a=f(u);return a?o({},t,{},a(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 a;if(o){if(u>=n.length)break;a=n[u++]}else{if((u=n.next()).done)break;a=u.value}for(var i=a,s=0,c=Object.keys(i);s<c.length;s++){var f=c[s];if(!r||r(i[f],f)){var l=t[f]||[];t[f]=[].concat(l,[i[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],a=r[u];t[u]=1===a.length?a[0]:a.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 b(e){for(var r=v(e,c),t={},n=0,o=Object.keys(r);n<o.length;n++){var u=o[n],a=r[u];t[u]=Object.assign.apply(Object,[{}].concat(a))}return t}e.SystemContext=i,e.SystemProvider=function(e){var t=e.children,n=e.unstable_system;return r.createElement(i.Provider,{value:n},t)},e.createComponent=function(e){var t,n=e.as,i=e.useHook,c=e.keys,f=void 0===c?i&&i.__keys||[]:c,l=e.propsAreEqual,p=void 0===l?i&&i.__propsAreEqual:l,v=e.useCreateElement,y=void 0===v?s:v,b=function(e,r){var t=e.as,s=void 0===t?n:t,c=u(e,["as"]);if(i){var l=a(c,f),p=l[0],v=l[1],b=i(p,o({ref:r},v)),d=b.unstable_wrap,O=u(b,["unstable_wrap"]),m=s.render?s.render.__keys:s.__keys,_=m?a(c,m)[0]:{},g=y(s,o({},O,{},_));return d?d(g):g}return y(s,c)};return b.__keys=f,function(e,t){return r.memo(e,t)}((t=b,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,a=Array.isArray(u),i=0;for(u=a?u:u[Symbol.iterator]();;){var s;if(a){if(i>=u.length)break;s=u[i++]}else{if((i=u.next()).done)break;s=i.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),a=o.length;if(u.length!==a)return!1;for(var i=0,s=o;i<s.length;i++){var f=s[i];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,[b(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,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})}));

es/createComponent.js

@@ -15,2 +15,12 @@ import { memo as memo$1, forwardRef as forwardRef$1 } from 'react';
 
+/**
+ * Creates a React component.
+ *
+ * @example
+ * import { createComponent } from "reakit-system";
+ *
+ * const A = createComponent({ as: "a" });
+ *
+ * @param options
+ */
 function createComponent(_ref) {
@@ -39,4 +49,4 @@ var type = _ref.as,
       }, htmlProps)),
-          unstable_wrap = _useHook.unstable_wrap,
-          elementProps = _objectWithoutPropertiesLoose(_useHook, ["unstable_wrap"]); // @ts-ignore
+          wrapElement = _useHook.wrapElement,
+          elementProps = _objectWithoutPropertiesLoose(_useHook, ["wrapElement"]); // @ts-ignore
 
@@ -46,9 +56,10 @@
       var asOptions = asKeys ? splitProps(props, asKeys)[0] : {};
-      var element = useCreateElement$1(as, _objectSpread2({}, elementProps, {}, asOptions));
 
-      if (unstable_wrap) {
-        return unstable_wrap(element);
+      var _element = useCreateElement$1(as, _objectSpread2({}, elementProps, {}, asOptions));
+
+      if (wrapElement) {
+        return wrapElement(_element);
       }
 
-      return element;
+      return _element;
     }
@@ -55,0 +66,0 @@

es/createHook.js

@@ -35,2 +35,26 @@ import 'react';
 
+/**
+ * Creates a React custom hook that will return component props.
+ *
+ * @example
+ * import { createHook } from "reakit-system";
+ *
+ * const useA = createHook({
+ *   name: "A",
+ *   keys: ["url"], // custom props/options keys
+ *   useProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * });
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useA({ url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * @param options
+ */
 function createHook(options) {
@@ -37,0 +61,0 @@ var composedHooks = toArray(options.compose);

es/mergeSystem.js

@@ -75,3 +75,26 @@ import { isObject } from 'reakit-utils/isObject';
 }
+/**
+ * Merges multiple system objects into a single system object.
+ *
+ * @example
+ * import { Provider } from "reakit";
+ * import { mergeSystem } from "reakit-system";
+ * import * as bootstrapSystem from "reakit-system-bootstrap";
+ *
+ * const mySystem = {
+ *   useHiddenProps() {}
+ * };
+ *
+ * const system = mergeSystem(bootstrapSystem, mySystem);
+ *
+ * function App() {
+ *   return (
+ *     <Provider unstable_system={system}>
+ *       <div>App</div>
+ *     </Provider>
+ *   );
+ * }
+ */
 
+
 function mergeSystem() {
@@ -78,0 +101,0 @@ for (var _len2 = arguments.length, systems = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {

es/SystemProvider.js

 import { createElement } from 'react';
 import { SystemContext } from './SystemContext.js';
 
+/**
+ * Provider component that is used by `reakit`'s `Provider` underneath.
+ *
+ * @example
+ * // instead of using
+ * import { Provider } from "reakit";
+ * // you can use this
+ * import { SystemProvider } from "reakit-system";
+ * // reakit's Provider has more features, such as ID generation
+ * import * as system from "reakit-system-bootstrap";
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <div>App</div>
+ *     </SystemProvider>
+ *   );
+ * }
+ *
+ * @param props
+ */
 function SystemProvider(_ref) {
@@ -5,0 +26,0 @@ var children = _ref.children,

es/useCreateElement.js

@@ -9,2 +9,34 @@ import { useContext, createElement } from 'react';
 
+/**
+ * Custom hook that will call `children` if it's a function. If
+ * `useCreateElement` has been passed to the context, it'll be used instead.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useCreateElement } from "reakit-system";
+ *
+ * const system = {
+ *   useCreateElement(type, props, children = props.children) {
+ *     // very similar to what `useCreateElement` does already
+ *     if (typeof children === "function") {
+ *       const { children: _, ...rest } = props;
+ *       return children(rest);
+ *     }
+ *     return React.createElement(type, props, children);
+ *   }
+ * };
+ *
+ * function Component(props) {
+ *   return useCreateElement("div", props);
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component url="url">{({ url }) => <a href={url}>link</a>}</Component>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 var useCreateElement = function useCreateElement(type, props, children) {
@@ -11,0 +43,0 @@ if (children === void 0) {

es/useOptions.js

@@ -6,2 +6,35 @@ import { useDebugValue } from 'react';
 
+/**
+ * React custom hook that returns the options returned by a given
+ * `use${name}Options` in the SystemContext.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useOptions } from "reakit-system";
+ *
+ * const system = {
+ *   useAOptions(options, htmlProps) {
+ *     return {
+ *       ...options,
+ *       url: htmlProps.href
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const options = useOptions("A", { url }, htmlProps);
+ *   return <a href={options.url} {...htmlProps} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A href="url">
+ *         It will convert href into url in useAOptions and then url into href in A
+ *       </A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 function useOptions(name, options, htmlProps) {
@@ -8,0 +41,0 @@ if (options === void 0) {

es/useProps.js

@@ -5,2 +5,32 @@ import { useDebugValue } from 'react';
 
+/**
+ * React custom hook that returns the props returned by a given
+ * `use${name}Props` in the SystemContext.
+ *
+ * @example
+ * import { SystemProvider, useProps } from "reakit-system";
+ *
+ * const system = {
+ *   useAProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useProps("A", { url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A url="url">It will convert url into href in useAProps</A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 function useProps(name, options, htmlProps) {
@@ -7,0 +37,0 @@ if (options === void 0) {

es/useToken.js

 import { useDebugValue, useContext } from 'react';
 import { SystemContext } from './SystemContext.js';
 
+/**
+ * React custom hook that returns the value of any token defined in the
+ * SystemContext. It's mainly used internally in [`useOptions`](#useoptions)
+ * and [`useProps`](#useprops).
+ *
+ * @example
+ * import { SystemProvider, useToken } from "reakit-system";
+ *
+ * const system = {
+ *   token: "value"
+ * };
+ *
+ * function Component(props) {
+ *   const token = useToken("token", "default value");
+ *   return <div {...props}>{token}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component />
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 function useToken(token, defaultValue) {
@@ -5,0 +31,0 @@ useDebugValue(token);

lib/createComponent.js

@@ -19,2 +19,12 @@ 'use strict';
 
+/**
+ * Creates a React component.
+ *
+ * @example
+ * import { createComponent } from "reakit-system";
+ *
+ * const A = createComponent({ as: "a" });
+ *
+ * @param options
+ */
 function createComponent(_ref) {
@@ -43,4 +53,4 @@ var type = _ref.as,
       }, htmlProps)),
-          unstable_wrap = _useHook.unstable_wrap,
-          elementProps = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_useHook, ["unstable_wrap"]); // @ts-ignore
+          wrapElement = _useHook.wrapElement,
+          elementProps = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_useHook, ["wrapElement"]); // @ts-ignore
 
@@ -50,9 +60,10 @@
       var asOptions = asKeys ? splitProps.splitProps(props, asKeys)[0] : {};
-      var element = useCreateElement$1(as, _rollupPluginBabelHelpers._objectSpread2({}, elementProps, {}, asOptions));
 
-      if (unstable_wrap) {
-        return unstable_wrap(element);
+      var _element = useCreateElement$1(as, _rollupPluginBabelHelpers._objectSpread2({}, elementProps, {}, asOptions));
+
+      if (wrapElement) {
+        return wrapElement(_element);
       }
 
-      return element;
+      return _element;
     }
@@ -59,0 +70,0 @@

lib/createHook.js

@@ -39,2 +39,26 @@ 'use strict';
 
+/**
+ * Creates a React custom hook that will return component props.
+ *
+ * @example
+ * import { createHook } from "reakit-system";
+ *
+ * const useA = createHook({
+ *   name: "A",
+ *   keys: ["url"], // custom props/options keys
+ *   useProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * });
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useA({ url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * @param options
+ */
 function createHook(options) {
@@ -41,0 +65,0 @@ var composedHooks = toArray.toArray(options.compose);

lib/mergeSystem.js

@@ -79,3 +79,26 @@ 'use strict';
 }
+/**
+ * Merges multiple system objects into a single system object.
+ *
+ * @example
+ * import { Provider } from "reakit";
+ * import { mergeSystem } from "reakit-system";
+ * import * as bootstrapSystem from "reakit-system-bootstrap";
+ *
+ * const mySystem = {
+ *   useHiddenProps() {}
+ * };
+ *
+ * const system = mergeSystem(bootstrapSystem, mySystem);
+ *
+ * function App() {
+ *   return (
+ *     <Provider unstable_system={system}>
+ *       <div>App</div>
+ *     </Provider>
+ *   );
+ * }
+ */
 
+
 function mergeSystem() {
@@ -82,0 +105,0 @@ for (var _len2 = arguments.length, systems = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {

lib/SystemProvider.js

@@ -8,2 +8,23 @@ 'use strict';
 
+/**
+ * Provider component that is used by `reakit`'s `Provider` underneath.
+ *
+ * @example
+ * // instead of using
+ * import { Provider } from "reakit";
+ * // you can use this
+ * import { SystemProvider } from "reakit-system";
+ * // reakit's Provider has more features, such as ID generation
+ * import * as system from "reakit-system-bootstrap";
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <div>App</div>
+ *     </SystemProvider>
+ *   );
+ * }
+ *
+ * @param props
+ */
 function SystemProvider(_ref) {
@@ -10,0 +31,0 @@ var children = _ref.children,

lib/useCreateElement.js

@@ -13,2 +13,34 @@ 'use strict';
 
+/**
+ * Custom hook that will call `children` if it's a function. If
+ * `useCreateElement` has been passed to the context, it'll be used instead.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useCreateElement } from "reakit-system";
+ *
+ * const system = {
+ *   useCreateElement(type, props, children = props.children) {
+ *     // very similar to what `useCreateElement` does already
+ *     if (typeof children === "function") {
+ *       const { children: _, ...rest } = props;
+ *       return children(rest);
+ *     }
+ *     return React.createElement(type, props, children);
+ *   }
+ * };
+ *
+ * function Component(props) {
+ *   return useCreateElement("div", props);
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component url="url">{({ url }) => <a href={url}>link</a>}</Component>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 var useCreateElement = function useCreateElement(type, props, children) {
@@ -15,0 +47,0 @@ if (children === void 0) {

lib/useOptions.js

@@ -10,2 +10,35 @@ 'use strict';
 
+/**
+ * React custom hook that returns the options returned by a given
+ * `use${name}Options` in the SystemContext.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useOptions } from "reakit-system";
+ *
+ * const system = {
+ *   useAOptions(options, htmlProps) {
+ *     return {
+ *       ...options,
+ *       url: htmlProps.href
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const options = useOptions("A", { url }, htmlProps);
+ *   return <a href={options.url} {...htmlProps} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A href="url">
+ *         It will convert href into url in useAOptions and then url into href in A
+ *       </A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 function useOptions(name, options, htmlProps) {
@@ -12,0 +45,0 @@ if (options === void 0) {

lib/useProps.js

@@ -9,2 +9,32 @@ 'use strict';
 
+/**
+ * React custom hook that returns the props returned by a given
+ * `use${name}Props` in the SystemContext.
+ *
+ * @example
+ * import { SystemProvider, useProps } from "reakit-system";
+ *
+ * const system = {
+ *   useAProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useProps("A", { url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A url="url">It will convert url into href in useAProps</A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 function useProps(name, options, htmlProps) {
@@ -11,0 +41,0 @@ if (options === void 0) {

lib/useToken.js

@@ -8,2 +8,28 @@ 'use strict';
 
+/**
+ * React custom hook that returns the value of any token defined in the
+ * SystemContext. It's mainly used internally in [`useOptions`](#useoptions)
+ * and [`useProps`](#useprops).
+ *
+ * @example
+ * import { SystemProvider, useToken } from "reakit-system";
+ *
+ * const system = {
+ *   token: "value"
+ * };
+ *
+ * function Component(props) {
+ *   const token = useToken("token", "default value");
+ *   return <div {...props}>{token}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component />
+ *     </SystemProvider>
+ *   );
+ * }
+ */
+
 function useToken(token, defaultValue) {
@@ -10,0 +36,0 @@ React.useDebugValue(token);

package.json

 {
   "name": "reakit-system",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Reakit System utils",
@@ -24,4 +24,4 @@ "sideEffects": false,
     "build": "../../scripts/build/build.js",
-    "docs": "../../scripts/build/docs.js",
-    "preversion": "yarn lint && yarn test && yarn build",
+    "docs": "documentation readme src/*.{ts,tsx} --section=API --parse-extension ts --parse-extension tsx",
+    "preversion": "yarn lint && yarn test && yarn docs && yarn build",
     "postpublish": "yarn clean"
@@ -35,3 +35,3 @@ },
   "devDependencies": {
-    "reakit-utils": "^0.7.3"
+    "reakit-utils": "^0.8.0"
   },
@@ -44,3 +44,3 @@ "peerDependencies": {
   },
-  "gitHead": "63114a85bbd57ab969763d5d7755969ea2d25c85"
+  "gitHead": "fe9685838d8dbc746122bbfff6b8630b7d4d6b9e"
 }

README.md

@@ -10,2 +10,3 @@ # reakit-system
 npm:
+
 ```sh
@@ -16,2 +17,3 @@ npm i reakit-system
 Yarn:
+
 ```sh
@@ -30,4 +32,309 @@ yarn add reakit-system
 
+## API
+
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+#### Table of Contents
+
+-   [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)
+
+### createComponent
+
+Creates a React component.
+
+#### Parameters
+
+-   `options` **Options&lt;T, O>** 
+    -   `options.as`  
+    -   `options.useHook`  
+    -   `options.keys`   (optional, default `useHook&&useHook.__keys||[]`)
+    -   `options.propsAreEqual`   (optional, default `useHook&&useHook.__propsAreEqual`)
+    -   `options.useCreateElement`   (optional, default `defaultUseCreateElement`)
+
+#### Examples
+
+```javascript
+import { createComponent } from "reakit-system";
+
+const A = createComponent({ as: "a" });
+```
+
+### createHook
+
+Creates a React custom hook that will return component props.
+
+#### Parameters
+
+-   `options` **CreateHookOptions&lt;O, P>** 
+
+#### Examples
+
+```javascript
+import { createHook } from "reakit-system";
+
+const useA = createHook({
+  name: "A",
+  keys: ["url"], // custom props/options keys
+  useProps(options, htmlProps) {
+    return {
+      ...htmlProps,
+      href: options.url
+    };
+  }
+});
+
+function A({ url, ...htmlProps }) {
+  const props = useA({ url }, htmlProps);
+  return <a {...props} />;
+}
+```
+
+### mergeSystem
+
+Merges multiple system objects into a single system object.
+
+#### Parameters
+
+-   `systems` **...T** 
+
+#### Examples
+
+```javascript
+import { Provider } from "reakit";
+import { mergeSystem } from "reakit-system";
+import * as bootstrapSystem from "reakit-system-bootstrap";
+
+const mySystem = {
+  useHiddenProps() {}
+};
+
+const system = mergeSystem(bootstrapSystem, mySystem);
+
+function App() {
+  return (
+    <Provider unstable_system={system}>
+      <div>App</div>
+    </Provider>
+  );
+}
+```
+
+### SystemProvider
+
+Provider component that is used by `reakit`'s `Provider` underneath.
+
+#### Parameters
+
+-   `props` **SystemProviderProps** 
+    -   `props.children`  
+    -   `props.unstable_system`  
+
+#### Examples
+
+```javascript
+// instead of using
+import { Provider } from "reakit";
+// you can use this
+import { SystemProvider } from "reakit-system";
+// reakit's Provider has more features, such as ID generation
+import * as system from "reakit-system-bootstrap";
+
+function App() {
+  return (
+    <SystemProvider unstable_system={system}>
+      <div>App</div>
+    </SystemProvider>
+  );
+}
+```
+
+### useCreateElement
+
+Custom hook that will call `children` if it's a function. If
+`useCreateElement` has been passed to the context, it'll be used instead.
+
+#### Parameters
+
+-   `type` **T** 
+-   `props` **Record&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), any>** 
+-   `children` **React.ReactNode**  (optional, default `props.children`)
+
+#### Examples
+
+```javascript
+import React from "react";
+import { SystemProvider, useCreateElement } from "reakit-system";
+
+const system = {
+  useCreateElement(type, props, children = props.children) {
+    // very similar to what `useCreateElement` does already
+    if (typeof children === "function") {
+      const { children: _, ...rest } = props;
+      return children(rest);
+    }
+    return React.createElement(type, props, children);
+  }
+};
+
+function Component(props) {
+  return useCreateElement("div", props);
+}
+
+function App() {
+  return (
+    <SystemProvider unstable_system={system}>
+      <Component url="url">{({ url }) => <a href={url}>link</a>}</Component>
+    </SystemProvider>
+  );
+}
+```
+
+Returns **JSX.Element** 
+
+### useOptions
+
+React custom hook that returns the options returned by a given
+`use${name}Options` in the SystemContext.
+
+#### Parameters
+
+-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+-   `options` **T**  (optional, default `{}as T`)
+-   `htmlProps` **any**  (optional, default `{}`)
+
+#### Examples
+
+```javascript
+import React from "react";
+import { SystemProvider, useOptions } from "reakit-system";
+
+const system = {
+  useAOptions(options, htmlProps) {
+    return {
+      ...options,
+      url: htmlProps.href
+    };
+  }
+};
+
+function A({ url, ...htmlProps }) {
+  const options = useOptions("A", { url }, htmlProps);
+  return <a href={options.url} {...htmlProps} />;
+}
+
+function App() {
+  return (
+    <SystemProvider unstable_system={system}>
+      <A href="url">
+        It will convert href into url in useAOptions and then url into href in A
+      </A>
+    </SystemProvider>
+  );
+}
+```
+
+Returns **T** 
+
+### useProps
+
+React custom hook that returns the props returned by a given
+`use${name}Props` in the SystemContext.
+
+#### Parameters
+
+-   `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+-   `options` **Record&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), any>**  (optional, default `{}`)
+-   `htmlProps` **any**  (optional, default `{}`)
+
+#### Examples
+
+```javascript
+import { SystemProvider, useProps } from "reakit-system";
+
+const system = {
+  useAProps(options, htmlProps) {
+    return {
+      ...htmlProps,
+      href: options.url
+    };
+  }
+};
+
+function A({ url, ...htmlProps }) {
+  const props = useProps("A", { url }, htmlProps);
+  return <a {...props} />;
+}
+
+function App() {
+  return (
+    <SystemProvider unstable_system={system}>
+      <A url="url">It will convert url into href in useAProps</A>
+    </SystemProvider>
+  );
+}
+```
+
+Returns **any** 
+
+### useToken
+
+React custom hook that returns the value of any token defined in the
+SystemContext. It's mainly used internally in [`useOptions`](#useoptions)
+and [`useProps`](#useprops).
+
+#### Parameters
+
+-   `token` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+-   `defaultValue` **T?** 
+
+#### Examples
+
+```javascript
+import { SystemProvider, useToken } from "reakit-system";
+
+const system = {
+  token: "value"
+};
+
+function Component(props) {
+  const token = useToken("token", "default value");
+  return <div {...props}>{token}</div>;
+}
+
+function App() {
+  return (
+    <SystemProvider unstable_system={system}>
+      <Component />
+    </SystemProvider>
+  );
+}
+```
+
+Returns **T** 
+
 ## License
 
 MIT © [Diego Haz](https://github.com/diegohaz)

src/createComponent.ts

@@ -11,3 +11,3 @@ // TODO: Refactor
   React.RefAttributes<any> & {
-    unstable_wrap?: (children: React.ReactNode) => JSX.Element;
+    wrapElement?: (element: React.ReactNode) => React.ReactNode;
   };
@@ -29,3 +29,3 @@
 
-export interface Component<T extends As, O> {
+export type Component<T extends As, O> = {
   // This is the desired type
@@ -39,4 +39,14 @@ // <TT extends As = T>(props: PropsWithAs<O, TT>): JSX.Element;
   (props: PropsWithAs<O, T>): JSX.Element;
-}
+};
 
+/**
+ * Creates a React component.
+ *
+ * @example
+ * import { createComponent } from "reakit-system";
+ *
+ * const A = createComponent({ as: "a" });
+ *
+ * @param options
+ */
 export function createComponent<T extends As, O>({
@@ -55,3 +65,3 @@ as: type,
       const [options, htmlProps] = splitProps(props, keys);
-      const { unstable_wrap, ...elementProps } = useHook(options, {
+      const { wrapElement, ...elementProps } = useHook(options, {
         ref,
@@ -64,4 +74,4 @@ ...htmlProps
       const element = useCreateElement(as, { ...elementProps, ...asOptions });
-      if (unstable_wrap) {
-        return unstable_wrap(element);
+      if (wrapElement) {
+        return wrapElement(element);
       }
@@ -68,0 +78,0 @@ return element;

src/createHook.ts

@@ -24,2 +24,26 @@ import { toArray } from "reakit-utils/toArray";
 
+/**
+ * Creates a React custom hook that will return component props.
+ *
+ * @example
+ * import { createHook } from "reakit-system";
+ *
+ * const useA = createHook({
+ *   name: "A",
+ *   keys: ["url"], // custom props/options keys
+ *   useProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * });
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useA({ url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * @param options
+ */
 export function createHook<O, P>(options: CreateHookOptions<O, P>) {
@@ -26,0 +50,0 @@ const composedHooks = toArray(options.compose) as Hook[];

src/mergeSystem.ts

@@ -37,2 +37,24 @@ import { isObject } from "reakit-utils/isObject";
 
+/**
+ * Merges multiple system objects into a single system object.
+ *
+ * @example
+ * import { Provider } from "reakit";
+ * import { mergeSystem } from "reakit-system";
+ * import * as bootstrapSystem from "reakit-system-bootstrap";
+ *
+ * const mySystem = {
+ *   useHiddenProps() {}
+ * };
+ *
+ * const system = mergeSystem(bootstrapSystem, mySystem);
+ *
+ * function App() {
+ *   return (
+ *     <Provider unstable_system={system}>
+ *       <div>App</div>
+ *     </Provider>
+ *   );
+ * }
+ */
 export function mergeSystem<T extends SystemContextType[]>(...systems: T) {
@@ -39,0 +61,0 @@ return Object.assign(

src/useCreateElement.ts

@@ -6,2 +6,33 @@ import * as React from "react";
 
+/**
+ * Custom hook that will call `children` if it's a function. If
+ * `useCreateElement` has been passed to the context, it'll be used instead.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useCreateElement } from "reakit-system";
+ *
+ * const system = {
+ *   useCreateElement(type, props, children = props.children) {
+ *     // very similar to what `useCreateElement` does already
+ *     if (typeof children === "function") {
+ *       const { children: _, ...rest } = props;
+ *       return children(rest);
+ *     }
+ *     return React.createElement(type, props, children);
+ *   }
+ * };
+ *
+ * function Component(props) {
+ *   return useCreateElement("div", props);
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component url="url">{({ url }) => <a href={url}>link</a>}</Component>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export const useCreateElement = <T extends As>(
@@ -8,0 +39,0 @@ type: T,

src/useOptions.ts

 import * as React from "react";
 import { useToken } from "./useToken";
 
+/**
+ * React custom hook that returns the options returned by a given
+ * `use${name}Options` in the SystemContext.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useOptions } from "reakit-system";
+ *
+ * const system = {
+ *   useAOptions(options, htmlProps) {
+ *     return {
+ *       ...options,
+ *       url: htmlProps.href
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const options = useOptions("A", { url }, htmlProps);
+ *   return <a href={options.url} {...htmlProps} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A href="url">
+ *         It will convert href into url in useAOptions and then url into href in A
+ *       </A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export function useOptions<T = {}>(
@@ -5,0 +37,0 @@ name: string,

src/useProps.ts

 import * as React from "react";
 import { useToken } from "./useToken";
 
+/**
+ * React custom hook that returns the props returned by a given
+ * `use${name}Props` in the SystemContext.
+ *
+ * @example
+ * import { SystemProvider, useProps } from "reakit-system";
+ *
+ * const system = {
+ *   useAProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useProps("A", { url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A url="url">It will convert url into href in useAProps</A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export function useProps(
@@ -5,0 +34,0 @@ name: string,

src/useToken.ts

 import * as React from "react";
 import { SystemContext } from "./SystemContext";
 
+/**
+ * React custom hook that returns the value of any token defined in the
+ * SystemContext. It's mainly used internally in [`useOptions`](#useoptions)
+ * and [`useProps`](#useprops).
+ *
+ * @example
+ * import { SystemProvider, useToken } from "reakit-system";
+ *
+ * const system = {
+ *   token: "value"
+ * };
+ *
+ * function Component(props) {
+ *   const token = useToken("token", "default value");
+ *   return <div {...props}>{token}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component />
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export function useToken<T = any>(token: string, defaultValue?: T): T {
@@ -5,0 +30,0 @@ React.useDebugValue(token);

ts/createComponent.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
 declare type BoxHTMLProps = React.HTMLAttributes<any> & React.RefAttributes<any> & {
-    unstable_wrap?: (children: React.ReactNode) => JSX.Element;
+    wrapElement?: (element: React.ReactNode) => React.ReactNode;
 };
@@ -20,3 +20,3 @@ declare type Hook<O> = {
 };
-export interface Component<T extends As, O> {
+export declare type Component<T extends As, O> = {
     <TT extends As>(props: PropsWithAs<O, TT> & {
@@ -26,4 +26,14 @@ as: TT;
     (props: PropsWithAs<O, T>): JSX.Element;
-}
+};
+/**
+ * Creates a React component.
+ *
+ * @example
+ * import { createComponent } from "reakit-system";
+ *
+ * const A = createComponent({ as: "a" });
+ *
+ * @param options
+ */
 export declare function createComponent<T extends As, O>({ as: type, useHook, keys, propsAreEqual, useCreateElement }: Options<T, O>): Component<T, O>;
 export {};

ts/createHook.d.ts

@@ -20,3 +20,27 @@ declare type Hook<O = any, P = any> = {
 };
+/**
+ * Creates a React custom hook that will return component props.
+ *
+ * @example
+ * import { createHook } from "reakit-system";
+ *
+ * const useA = createHook({
+ *   name: "A",
+ *   keys: ["url"], // custom props/options keys
+ *   useProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * });
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useA({ url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * @param options
+ */
 export declare function createHook<O, P>(options: CreateHookOptions<O, P>): Hook<O, P>;
 export {};

ts/mergeSystem.d.ts

 import { UnionToIntersection } from "reakit-utils/types";
 import { SystemContextType } from "./SystemContext";
+/**
+ * Merges multiple system objects into a single system object.
+ *
+ * @example
+ * import { Provider } from "reakit";
+ * import { mergeSystem } from "reakit-system";
+ * import * as bootstrapSystem from "reakit-system-bootstrap";
+ *
+ * const mySystem = {
+ *   useHiddenProps() {}
+ * };
+ *
+ * const system = mergeSystem(bootstrapSystem, mySystem);
+ *
+ * function App() {
+ *   return (
+ *     <Provider unstable_system={system}>
+ *       <div>App</div>
+ *     </Provider>
+ *   );
+ * }
+ */
 export declare function mergeSystem<T extends SystemContextType[]>(...systems: T): UnionToIntersection<T[number]>;

ts/SystemProvider.d.ts

@@ -7,2 +7,23 @@ import * as React from "react";
 };
+/**
+ * Provider component that is used by `reakit`'s `Provider` underneath.
+ *
+ * @example
+ * // instead of using
+ * import { Provider } from "reakit";
+ * // you can use this
+ * import { SystemProvider } from "reakit-system";
+ * // reakit's Provider has more features, such as ID generation
+ * import * as system from "reakit-system-bootstrap";
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <div>App</div>
+ *     </SystemProvider>
+ *   );
+ * }
+ *
+ * @param props
+ */
 export declare function SystemProvider({ children, unstable_system: system }: SystemProviderProps): JSX.Element;

ts/useCreateElement.d.ts

 import * as React from "react";
+/**
+ * Custom hook that will call `children` if it's a function. If
+ * `useCreateElement` has been passed to the context, it'll be used instead.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useCreateElement } from "reakit-system";
+ *
+ * const system = {
+ *   useCreateElement(type, props, children = props.children) {
+ *     // very similar to what `useCreateElement` does already
+ *     if (typeof children === "function") {
+ *       const { children: _, ...rest } = props;
+ *       return children(rest);
+ *     }
+ *     return React.createElement(type, props, children);
+ *   }
+ * };
+ *
+ * function Component(props) {
+ *   return useCreateElement("div", props);
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component url="url">{({ url }) => <a href={url}>link</a>}</Component>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export declare const useCreateElement: <T extends React.ElementType<any>>(type: T, props: Record<string, any>, children?: React.ReactNode) => JSX.Element;

ts/useOptions.d.ts

 import * as React from "react";
+/**
+ * React custom hook that returns the options returned by a given
+ * `use${name}Options` in the SystemContext.
+ *
+ * @example
+ * import React from "react";
+ * import { SystemProvider, useOptions } from "reakit-system";
+ *
+ * const system = {
+ *   useAOptions(options, htmlProps) {
+ *     return {
+ *       ...options,
+ *       url: htmlProps.href
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const options = useOptions("A", { url }, htmlProps);
+ *   return <a href={options.url} {...htmlProps} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A href="url">
+ *         It will convert href into url in useAOptions and then url into href in A
+ *       </A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export declare function useOptions<T = {}>(name: string, options?: T, htmlProps?: React.HTMLAttributes<any> & React.RefAttributes<any>): T;

ts/useProps.d.ts

 import * as React from "react";
+/**
+ * React custom hook that returns the props returned by a given
+ * `use${name}Props` in the SystemContext.
+ *
+ * @example
+ * import { SystemProvider, useProps } from "reakit-system";
+ *
+ * const system = {
+ *   useAProps(options, htmlProps) {
+ *     return {
+ *       ...htmlProps,
+ *       href: options.url
+ *     };
+ *   }
+ * };
+ *
+ * function A({ url, ...htmlProps }) {
+ *   const props = useProps("A", { url }, htmlProps);
+ *   return <a {...props} />;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <A url="url">It will convert url into href in useAProps</A>
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export declare function useProps(name: string, options?: Record<string, any>, htmlProps?: React.HTMLAttributes<any> & React.RefAttributes<any>): React.HTMLAttributes<any> & React.RefAttributes<any>;

ts/useToken.d.ts

@@ -0,1 +1,26 @@
+/**
+ * React custom hook that returns the value of any token defined in the
+ * SystemContext. It's mainly used internally in [`useOptions`](#useoptions)
+ * and [`useProps`](#useprops).
+ *
+ * @example
+ * import { SystemProvider, useToken } from "reakit-system";
+ *
+ * const system = {
+ *   token: "value"
+ * };
+ *
+ * function Component(props) {
+ *   const token = useToken("token", "default value");
+ *   return <div {...props}>{token}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <SystemProvider unstable_system={system}>
+ *       <Component />
+ *     </SystemProvider>
+ *   );
+ * }
+ */
 export declare function useToken<T = any>(token: string, defaultValue?: T): T;

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

Total package byte prevSize

334822

increased by10.87%

Lines of code

2586

increased by42.87%

Number of lines in readme file

338

increased by990.32%

No dependency changes