@happeouikit/buttons-ds3 - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

dist/Button.types.d.ts

@@ -82,4 +82,8 @@ /// <reference types="react" />
     "aria-label": string;
+    /**
+     * Use if you want to remove the default aria-label tooltip (and probably use your own)
+     */
+    defaultTooltip?: boolean;
 }
 export interface MediaButtonProps extends Exclude<ButtonProps, "colorScheme"> {
 }

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("react"),r=require("styled-components"),f={sm:r.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("react"),r=require("styled-components"),j=require("@happeouikit/tooltip"),x={sm:r.css`
     height: 32px;
@@ -11,3 +11,3 @@ font: var(--font-body-sm);
     font-weight: var(--font-weight-regular);
-  `},i=o=>({[`${o}Primary`]:r.css`
+  `},n=o=>({[`${o}Primary`]:r.css`
     color: var(--color-primary-text-on-dark);
@@ -97,3 +97,3 @@ fill: var(--color-primary-text-on-dark);
     }
-  `}),p={...i("active"),...i("alert"),...i("success"),...i("warning"),blankPrimary:r.css`
+  `}),h={...n("active"),...n("alert"),...n("success"),...n("warning"),blankPrimary:r.css`
     color: var(--color-primary-text-on-dark);
@@ -207,3 +207,3 @@ fill: var(--color-primary-text-on-dark);
     }
-  `},j=()=>t.jsxs(C,{children:[t.jsx(c,{}),t.jsx(c,{}),t.jsx(c,{})]}),B=r.keyframes`
+  `},B=()=>t.jsxs(T,{children:[t.jsx(s,{}),t.jsx(s,{}),t.jsx(s,{})]}),I=r.keyframes`
 0% {
@@ -218,4 +218,4 @@ opacity: 0.24;
 }
-`,c=r.div`
-  animation: ${B} 0.8s ease-in-out 0s infinite alternate;
+`,s=r.div`
+  animation: ${I} 0.8s ease-in-out 0s infinite alternate;
 
@@ -231,3 +231,3 @@ background-color: currentColor;
   }
-`,C=r.div`
+`,T=r.div`
   height: 24px !important;
@@ -239,7 +239,7 @@ width: 24px !important;
 
-  ${c} {
+  ${s} {
     width: 3px;
     height: 3px;
   }
-`,b=r.span({display:"inline-flex",alignSelf:"center",flexShrink:0,width:"20px",height:"20px"}),I=r.button`
+`,f=r.span({display:"inline-flex",alignSelf:"center",flexShrink:0,width:"20px",height:"20px"}),C=r.button`
   display: flex;
@@ -261,10 +261,10 @@ justify-content: center;
   ${({size:o})=>r.css`
-    ${f[o]}
+    ${x[o]}
   `}
 
   ${({variant:o})=>r.css`
-    ${p[o]}
+    ${h[o]}
   `}
   
-  ${({size:o,iconButton:l})=>l&&`
+  ${({size:o,iconButton:i})=>i&&`
     width: ${o==="sm"?"32px":"40px"};
@@ -278,3 +278,3 @@ `}
   }
-`,R=o=>`${o.charAt(0).toUpperCase()}${o.slice(1)}`,z=()=>{},d=g.forwardRef((o,l)=>{const{size:e="lg",colorScheme:n="active",disabled:x=!1,iconButton:s=!1,loading:a=!1,type:h="button",leadingIcon:u,trailingIcon:v,children:k,onClick:y,variant:$="primary",...m}=o,w=`${n}${R($)}`;return t.jsxs(I,{iconButton:s,ref:l,disabled:x,type:h,size:e,variant:w,onClick:a?z:y,"aria-disabled":a,...m,children:[!s&&u&&!a&&t.jsx(b,{style:{marginRight:"var(--space-xs-plus"},children:u}),a?t.jsx(j,{}):k,!s&&v&&!a&&t.jsx(b,{style:{marginLeft:"var(--space-xs-plus)"},children:v})]})}),L=g.forwardRef((o,l)=>{const{icon:e,...n}=o;return t.jsx(d,{iconButton:!0,ref:l,...n,children:e})}),P=o=>t.jsx(d,{colorScheme:"media",variant:"primary",...o});exports.Button=d;exports.IconButton=L;exports.MediaButton=P;exports.buttonSizes=f;exports.buttonVariants=p;
+`,L=o=>`${o.charAt(0).toUpperCase()}${o.slice(1)}`,R=()=>{},b=v.forwardRef((o,i)=>{const{size:d="lg",colorScheme:c="active",disabled:u=!1,iconButton:e=!1,loading:l=!1,type:a="button",leadingIcon:g,trailingIcon:p,children:k,onClick:y,variant:$="primary",...m}=o,w=`${c}${L($)}`;return t.jsxs(C,{iconButton:e,ref:i,disabled:u,type:a,size:d,variant:w,onClick:l?R:y,"aria-disabled":l,...m,children:[!e&&g&&!l&&t.jsx(f,{style:{marginRight:"var(--space-xs-plus"},children:g}),l?t.jsx(B,{}):k,!e&&p&&!l&&t.jsx(f,{style:{marginLeft:"var(--space-xs-plus)"},children:p})]})}),q=()=>Math.random().toString(36).substring(7),z=v.forwardRef((o,i)=>{const{icon:d,"aria-label":c,defaultTooltip:u,...e}=o,[l]=v.useState(()=>`tooltip-${q()}`),a=u!==!1;return t.jsxs(t.Fragment,{children:[t.jsx(b,{iconButton:!0,ref:i,"data-tip":a?c:void 0,"data-for":a?l:void 0,"data-tooltip-content":a?c:void 0,"data-tooltip-id":a?l:void 0,...e,children:d}),a&&t.jsx(j.Tooltip,{id:l})]})}),F=o=>t.jsx(b,{colorScheme:"media",variant:"primary",...o});exports.Button=b;exports.IconButton=z;exports.MediaButton=F;exports.buttonSizes=x;exports.buttonVariants=h;
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

@@ -1,4 +0,5 @@
-import { jsxs as g, jsx as l } from "react/jsx-runtime";
-import w, { forwardRef as B } from "react";
-import e, { css as r, keyframes as C } from "styled-components";
+import { jsxs as b, jsx as l, Fragment as w } from "react/jsx-runtime";
+import B, { forwardRef as C, useState as I } from "react";
+import s, { css as r, keyframes as T } from "styled-components";
+import { Tooltip as L } from "@happeouikit/tooltip";
 const j = {
@@ -17,3 +18,3 @@ sm: r`
   `
-}, i = (o) => ({
+}, c = (o) => ({
   [`${o}Primary`]: r`
@@ -108,7 +109,7 @@ color: var(--color-primary-text-on-dark);
   `
-}), I = {
-  ...i("active"),
-  ...i("alert"),
-  ...i("success"),
-  ...i("warning"),
+}), F = {
+  ...c("active"),
+  ...c("alert"),
+  ...c("success"),
+  ...c("warning"),
   blankPrimary: r`
@@ -228,7 +229,7 @@ color: var(--color-primary-text-on-dark);
   `
-}, L = () => /* @__PURE__ */ g(z, { children: [
-  /* @__PURE__ */ l(c, {}),
-  /* @__PURE__ */ l(c, {}),
-  /* @__PURE__ */ l(c, {})
-] }), R = C`
+}, R = () => /* @__PURE__ */ b(E, { children: [
+  /* @__PURE__ */ l(d, {}),
+  /* @__PURE__ */ l(d, {}),
+  /* @__PURE__ */ l(d, {})
+] }), z = T`
 0% {
@@ -243,4 +244,4 @@ opacity: 0.24;
 }
-`, c = e.div`
-  animation: ${R} 0.8s ease-in-out 0s infinite alternate;
+`, d = s.div`
+  animation: ${z} 0.8s ease-in-out 0s infinite alternate;
 
@@ -256,3 +257,3 @@ background-color: currentColor;
   }
-`, z = e.div`
+`, E = s.div`
   height: 24px !important;
@@ -264,7 +265,7 @@ width: 24px !important;
 
-  ${c} {
+  ${d} {
     width: 3px;
     height: 3px;
   }
-`, b = e.span({
+`, f = s.span({
   display: "inline-flex",
@@ -275,3 +276,3 @@ alignSelf: "center",
   height: "20px"
-}), F = e.button`
+}), P = s.button`
   display: flex;
@@ -297,6 +298,6 @@ justify-content: center;
   ${({ variant: o }) => r`
-    ${I[o]}
+    ${F[o]}
   `}
   
-  ${({ size: o, iconButton: t }) => t && `
+  ${({ size: o, iconButton: i }) => i && `
     width: ${o === "sm" ? "32px" : "40px"};
@@ -310,37 +311,37 @@ `}
   }
-`, P = (o) => `${o.charAt(0).toUpperCase()}${o.slice(1)}`, V = () => {
-}, f = w.forwardRef(
-  (o, t) => {
+`, V = (o) => `${o.charAt(0).toUpperCase()}${o.slice(1)}`, M = () => {
+}, h = B.forwardRef(
+  (o, i) => {
     const {
-      size: n = "lg",
-      colorScheme: d = "active",
-      disabled: p = !1,
-      iconButton: s = !1,
-      loading: a = !1,
-      type: h = "button",
-      leadingIcon: v,
-      trailingIcon: u,
+      size: v = "lg",
+      colorScheme: n = "active",
+      disabled: u = !1,
+      iconButton: e = !1,
+      loading: t = !1,
+      type: a = "button",
+      leadingIcon: g,
+      trailingIcon: p,
       children: x,
       onClick: k,
       variant: y = "primary",
-      ...$
-    } = o, m = `${d}${P(
+      ...m
+    } = o, $ = `${n}${V(
       y
     )}`;
-    return /* @__PURE__ */ g(
-      F,
+    return /* @__PURE__ */ b(
+      P,
       {
-        iconButton: s,
-        ref: t,
-        disabled: p,
-        type: h,
-        size: n,
-        variant: m,
-        onClick: a ? V : k,
-        "aria-disabled": a,
-        ...$,
+        iconButton: e,
+        ref: i,
+        disabled: u,
+        type: a,
+        size: v,
+        variant: $,
+        onClick: t ? M : k,
+        "aria-disabled": t,
+        ...m,
         children: [
-          !s && v && !a && /* @__PURE__ */ l(b, { style: { marginRight: "var(--space-xs-plus" }, children: v }),
-          a ? /* @__PURE__ */ l(L, {}) : x,
-          !s && u && !a && /* @__PURE__ */ l(b, { style: { marginLeft: "var(--space-xs-plus)" }, children: u })
+          !e && g && !t && /* @__PURE__ */ l(f, { style: { marginRight: "var(--space-xs-plus" }, children: g }),
+          t ? /* @__PURE__ */ l(R, {}) : x,
+          !e && p && !t && /* @__PURE__ */ l(f, { style: { marginLeft: "var(--space-xs-plus)" }, children: p })
         ]
@@ -350,15 +351,30 @@ }
   }
-), A = B(
-  (o, t) => {
-    const { icon: n, ...d } = o;
-    return /* @__PURE__ */ l(f, { iconButton: !0, ref: t, ...d, children: n });
+), O = () => Math.random().toString(36).substring(7), q = C(
+  (o, i) => {
+    const { icon: v, "aria-label": n, defaultTooltip: u, ...e } = o, [t] = I(() => `tooltip-${O()}`), a = u !== !1;
+    return /* @__PURE__ */ b(w, { children: [
+      /* @__PURE__ */ l(
+        h,
+        {
+          iconButton: !0,
+          ref: i,
+          "data-tip": a ? n : void 0,
+          "data-for": a ? t : void 0,
+          "data-tooltip-content": a ? n : void 0,
+          "data-tooltip-id": a ? t : void 0,
+          ...e,
+          children: v
+        }
+      ),
+      a && /* @__PURE__ */ l(L, { id: t })
+    ] });
   }
-), D = (o) => /* @__PURE__ */ l(f, { colorScheme: "media", variant: "primary", ...o });
+), G = (o) => /* @__PURE__ */ l(h, { colorScheme: "media", variant: "primary", ...o });
 export {
-  f as Button,
-  A as IconButton,
-  D as MediaButton,
+  h as Button,
+  q as IconButton,
+  G as MediaButton,
   j as buttonSizes,
-  I as buttonVariants
+  F as buttonVariants
 };
 //# sourceMappingURL=index.es.js.map

package.json

 {
   "name": "@happeouikit/buttons-ds3",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "",
@@ -20,2 +20,3 @@ "type": "module",
     "@happeouikit/theme": "^1.9.3",
+    "@happeouikit/tooltip": "^1.0.12",
     "react": "^17.0.2",
@@ -27,3 +28,3 @@ "styled-components": "^5.3.1"
   },
-  "gitHead": "c90fc7e4266fcc3ef398c8a1afc5bff4013e7fc1"
+  "gitHead": "38b4b339965051df1267c8a8b9a19c9071e3ac9b"
 }

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

58938

increased by6.56%

Lines of code

740

increased by2.92%

Worsened metrics

Dependency count

4

increased by33.33%

No dependency changes