@interop-ui/react-collapsible - npm Package Compare versions

Comparing version 0.0.1-11 to 0.0.1-12

dist/index.d.ts

@@ -32,4 +32,3 @@ import * as React from "react";
 };
-export const styles: import("@interop-ui/react-utils").PrimitiveStyles<"button" | "root" | "content">;
 
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,2 +0,2 @@
-var e,t,r=require("@interop-ui/react-utils"),n=r.createContext,o=r.createStyleObj,i=r.forwardRef,l=r.useId,a=r.composeEventHandlers,u=r.useControlledState,c=require("@interop-ui/utils").cssReset,s=(e={},t=require("react"),Object.keys(t).forEach((function(r){"default"!==r&&"__esModule"!==r&&Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),e);function f(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?f(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(){return(b=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function y(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var l,a=e[Symbol.iterator]();!(n=(l=a.next()).done)&&(r.push(l.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==a.return||a.return()}finally{if(o)throw i}}return r}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return v(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return v(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var g=O(n("CollapsibleContext","Collapsible"),2),m=g[0],h=g[1],j=i((function(e,t){var r=e.as,n=void 0===r?"button":r,o=e.onClick,i=y(e,["as","onClick"]),l=h("Collapsible.Button");return s.createElement(n,b({},E("button"),{ref:t,"aria-controls":l.contentId,"aria-expanded":l.isOpen||!1,"data-state":I(l.isOpen)},i,{onClick:a(o,l.toggle),disabled:l.isDisabled}))})),C=i((function(e,t){var r=e.as,n=void 0===r?"div":r,o=e.id,i=e.children,a=y(e,["as","id","children"]),u=h("Collapsible.Content"),c=u.setContentId,f=u.isOpen,p="collapsible-".concat(l()),d=o||p;return s.useEffect((function(){c(d)}),[d,c]),s.createElement(n,b({},E("content"),{ref:t},a,{id:d,hidden:!f}),f&&i)})),w=i((function(e,t){var r=e.as,n=void 0===r?"div":r,o=(e.id,e.children),i=e.isOpen,l=e.defaultIsOpen,a=e.disabled,c=e.onToggle,f=y(e,["as","id","children","isOpen","defaultIsOpen","disabled","onToggle"]),p=O(u({prop:i,defaultProp:l,onChange:c}),2),d=p[0],v=p[1],g=O(s.useState(),2),h=g[0],j=g[1],C=s.useMemo((function(){return{contentId:h,isOpen:d,isDisabled:a,toggle:function(){return v((function(e){return!e}))},setContentId:j}}),[h,a,d,v]);return s.createElement(n,b({},E("root"),f,{"data-state":I(C.isOpen),ref:t}),s.createElement(m.Provider,{value:C},o))}));exports.Collapsible=w,w.Button=j,w.Content=C,w.displayName="Collapsible",w.Button.displayName="Collapsible.Button",w.Content.displayName="Collapsible.Content";var P=O(o("Collapsible",{root:p({},c("div")),button:p(p({},c("button")),{},{display:"block",width:"100%",textAlign:"inherit",userSelect:"none","&:disabled":{pointerEvents:"none"}}),content:p({},c("div"))}),2),S=P[0],E=P[1];function I(e){return e?"open":"closed"}exports.styles=S;
+var e,t,n=require("@interop-ui/utils").getPartDataAttrObj,r=require("@interop-ui/react-utils"),o=r.createContext,i=r.forwardRef,l=r.useId,a=r.composeEventHandlers,u=r.useControlledState,s=(e={},t=require("react"),Object.keys(t).forEach((function(n){"default"!==n&&"__esModule"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})),e);function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function d(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function f(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var l,a=e[Symbol.iterator]();!(r=(l=a.next()).done)&&(n.push(l.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==a.return||a.return()}finally{if(o)throw i}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var b=f(o("CollapsibleContext","Collapsible"),2),y=b[0],v=b[1],C=i((function(e,t){var r=e.as,o=void 0===r?"button":r,i=e.onClick,l=d(e,["as","onClick"]),u=v("Collapsible.Button");return s.createElement(o,c({},n("Collapsible.Button"),{ref:t,"aria-controls":u.contentId,"aria-expanded":u.isOpen||!1,"data-state":g(u.isOpen)},l,{onClick:a(i,u.toggle),disabled:u.isDisabled}))})),O=i((function(e,t){var r=e.as,o=void 0===r?"div":r,i=e.id,a=e.children,u=d(e,["as","id","children"]),f=v("Collapsible.Content"),p=f.setContentId,b=f.isOpen,y="collapsible-".concat(l()),C=i||y;return s.useEffect((function(){p(C)}),[C,p]),s.createElement(o,c({},n("Collapsible.Content"),{ref:t},u,{id:C,hidden:!b}),b&&a)})),m=i((function(e,t){var r=e.as,o=void 0===r?"div":r,i=(e.id,e.children),l=e.isOpen,a=e.defaultIsOpen,p=e.disabled,b=e.onToggle,v=d(e,["as","id","children","isOpen","defaultIsOpen","disabled","onToggle"]),C=f(u({prop:l,defaultProp:a,onChange:b}),2),O=C[0],m=C[1],h=f(s.useState(),2),j=h[0],I=h[1],S=s.useMemo((function(){return{contentId:j,isOpen:O,isDisabled:p,toggle:function(){return m((function(e){return!e}))},setContentId:I}}),[j,p,O,m]);return s.createElement(o,c({},n("Collapsible"),v,{"data-state":g(S.isOpen),ref:t}),s.createElement(y.Provider,{value:S},i))}));function g(e){return e?"open":"closed"}exports.Collapsible=m,m.Button=C,m.Content=O,m.displayName="Collapsible",m.Button.displayName="Collapsible.Button",m.Content.displayName="Collapsible.Content";
 //# sourceMappingURL=index.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-import{createContext as e,createStyleObj as t,forwardRef as n,useId as r,composeEventHandlers as o,useControlledState as l}from"@interop-ui/react-utils";import{cssReset as i}from"@interop-ui/utils";import*as a from"react";function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){p(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function b(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const[d,f]=e("CollapsibleContext","Collapsible"),O="button",y=n(((e,t)=>{const{as:n=O,onClick:r}=e,l=b(e,["as","onClick"]),i=f("Collapsible.Button");return a.createElement(n,u({},h("button"),{ref:t,"aria-controls":i.contentId,"aria-expanded":i.isOpen||!1,"data-state":v(i.isOpen)},l,{onClick:o(r,i.toggle),disabled:i.isDisabled}))})),C="div",g=n(((e,t)=>{const{as:n=C,id:o,children:l}=e,i=b(e,["as","id","children"]),{setContentId:s,isOpen:c}=f("Collapsible.Content"),p="collapsible-".concat(r()),d=o||p;return a.useEffect((()=>{s(d)}),[d,s]),a.createElement(n,u({},h("content"),{ref:t},i,{id:d,hidden:!c}),c&&l)})),m="div";export const Collapsible=n(((e,t)=>{const{as:n=m,id:r,children:o,isOpen:i,defaultIsOpen:s,disabled:c,onToggle:p}=e,f=b(e,["as","id","children","isOpen","defaultIsOpen","disabled","onToggle"]),[O,y]=l({prop:i,defaultProp:s,onChange:p}),[C,g]=a.useState(),j=a.useMemo((()=>({contentId:C,isOpen:O,isDisabled:c,toggle:()=>y((e=>!e)),setContentId:g})),[C,c,O,y]);return a.createElement(n,u({},h("root"),f,{"data-state":v(j.isOpen),ref:t}),a.createElement(d.Provider,{value:j},o))}));Collapsible.Button=y,Collapsible.Content=g,Collapsible.displayName="Collapsible",Collapsible.Button.displayName="Collapsible.Button",Collapsible.Content.displayName="Collapsible.Content";const[j,h]=t("Collapsible",{root:c({},i(m)),button:c(c({},i(O)),{},{display:"block",width:"100%",textAlign:"inherit",userSelect:"none","&:disabled":{pointerEvents:"none"}}),content:c({},i(C))});export{j as styles};function v(e){return e?"open":"closed"}
+import{getPartDataAttrObj as e}from"@interop-ui/utils";import{createContext as t,forwardRef as l,useId as n,composeEventHandlers as o,useControlledState as i}from"@interop-ui/react-utils";import*as a from"react";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var l,n,o=function(e,t){if(null==e)return{};var l,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||(o[l]=e[l]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)l=i[n],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(o[l]=e[l])}return o}const[p,c]=t("CollapsibleContext","Collapsible"),d="button",u=l(((t,l)=>{const{as:n=d,onClick:i}=t,p=s(t,["as","onClick"]),u=c("Collapsible.Button");return a.createElement(n,r({},e("Collapsible.Button"),{ref:l,"aria-controls":u.contentId,"aria-expanded":u.isOpen||!1,"data-state":O(u.isOpen)},p,{onClick:o(i,u.toggle),disabled:u.isDisabled}))})),b="div",C=l(((t,l)=>{const{as:o=b,id:i,children:p}=t,d=s(t,["as","id","children"]),{setContentId:u,isOpen:C}=c("Collapsible.Content"),f="collapsible-".concat(n()),O=i||f;return a.useEffect((()=>{u(O)}),[O,u]),a.createElement(o,r({},e("Collapsible.Content"),{ref:l},d,{id:O,hidden:!C}),C&&p)})),f="div";export const Collapsible=l(((t,l)=>{const{as:n=f,id:o,children:c,isOpen:d,defaultIsOpen:u,disabled:b,onToggle:C}=t,m=s(t,["as","id","children","isOpen","defaultIsOpen","disabled","onToggle"]),[g,y]=i({prop:d,defaultProp:u,onChange:C}),[h,v]=a.useState(),I=a.useMemo((()=>({contentId:h,isOpen:g,isDisabled:b,toggle:()=>y((e=>!e)),setContentId:v})),[h,b,g,y]);return a.createElement(n,r({},e("Collapsible"),m,{"data-state":O(I.isOpen),ref:l}),a.createElement(p.Provider,{value:I},c))}));function O(e){return e?"open":"closed"}Collapsible.Button=u,Collapsible.Content=C,Collapsible.displayName="Collapsible",Collapsible.Button.displayName="Collapsible.Button",Collapsible.Content.displayName="Collapsible.Content";
 //# sourceMappingURL=index.module.js.map

package.json

 {
   "name": "@interop-ui/react-collapsible",
-  "version": "0.0.1-11",
+  "version": "0.0.1-12",
   "license": "MIT",
@@ -14,4 +14,3 @@ "source": "src/index.ts",
   "scripts": {
-    "build": "parcel build src/index.ts --no-cache && yarn build:styles",
-    "build:styles": "node ../../../scripts/build-styles collapsible",
+    "build": "parcel build src/index.ts --no-cache",
     "clean": "rm -rf dist",
@@ -22,4 +21,4 @@ "version": "yarn version",
   "dependencies": {
-    "@interop-ui/react-utils": "0.0.1-11",
-    "@interop-ui/utils": "0.0.1-3"
+    "@interop-ui/react-utils": "0.0.1-12",
+    "@interop-ui/utils": "0.0.1-4"
   },
@@ -26,0 +25,0 @@ "devDependencies": {

README.md

@@ -15,9 +15,9 @@ # `react-collapsible`
 import * as React from 'react';
-import { Collapsible, styles } from '@interop-ui/react-collapsible';
+import { Collapsible } from '@interop-ui/react-collapsible';
 
-function MyComponent(props) {
+function MyComponent() {
   return (
-    <Collapsible style={{ ...styles.root, ...props.style }}>
-      <Collapsible.Button style={styles.button}>Button</Collapsible.Button>
-      <Collapsible.Content style={styles.content}>Content 1</Collapsible.Content>
+    <Collapsible>
+      <Collapsible.Button>Button</Collapsible.Button>
+      <Collapsible.Content>Content 1</Collapsible.Content>
     </Collapsible>
@@ -24,0 +24,0 @@ );

No alert changes

Worsened metrics

Total package byte prevSize

36594

decreased by-10.3%

Number of package files

8

decreased by-11.11%

Lines of code

89

decreased by-12.75%

Dependency changes

• + Added@interop-ui/react-utils@0.0.1-12(transitive)

• + Added@interop-ui/utils@0.0.1-4(transitive)

• - Removed@interop-ui/react-utils@0.0.1-11(transitive)

• - Removed@interop-ui/utils@0.0.1-3(transitive)

• - Removedlodash.camelcase@4.3.0(transitive)

• - Removedlodash.kebabcase@4.1.1(transitive)

• Updated@interop-ui/react-utils@0.0.1-12

• Updated@interop-ui/utils@0.0.1-4