@canonical/maas-react-components 1.0.1 → 1.2.0

package/dist/@canonical/maas-react-components.es.js

@@ -1,8 +1,8 @@
-import { jsxs as _, jsx as f, Fragment as j } from "react/jsx-runtime";
-import { useRef as k, useState as E, useEffect as O, useCallback as B } from "react";
-import { useListener as M } from "@canonical/react-components";
-function D(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+import { jsxs as _, jsx as d, Fragment as $ } from "react/jsx-runtime";
+import { useRef as E, useState as j, useEffect as O, useCallback as B } from "react";
+import { useListener as M, Link as D } from "@canonical/react-components";
+function L(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var y = { exports: {} };
 /*!
@@ -10,39 +10,39 @@ var y = { exports: {} };
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
-(function(t) {
+(function(e) {
   (function() {
-    var s = {}.hasOwnProperty;
-    function a() {
-      for (var r = [], n = 0; n < arguments.length; n++) {
-        var e = arguments[n];
-        if (e) {
-          var l = typeof e;
+    var r = {}.hasOwnProperty;
+    function s() {
+      for (var n = [], o = 0; o < arguments.length; o++) {
+        var t = arguments[o];
+        if (t) {
+          var l = typeof t;
           if (l === "string" || l === "number")
-            r.push(e);
-          else if (Array.isArray(e)) {
-            if (e.length) {
-              var i = a.apply(null, e);
-              i && r.push(i);
+            n.push(t);
+          else if (Array.isArray(t)) {
+            if (t.length) {
+              var i = s.apply(null, t);
+              i && n.push(i);
             }
           } else if (l === "object") {
-            if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]")) {
-              r.push(e.toString());
+            if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]")) {
+              n.push(t.toString());
               continue;
             }
-            for (var d in e)
-              s.call(e, d) && e[d] && r.push(d);
+            for (var u in t)
+              r.call(t, u) && t[u] && n.push(u);
           }
         }
       }
-      return r.join(" ");
+      return n.join(" ");
     }
-    t.exports ? (a.default = a, t.exports = a) : window.classNames = a;
+    e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
   })();
 })(y);
 var W = y.exports;
-const F = /* @__PURE__ */ D(W);
-const m = {
+const k = /* @__PURE__ */ L(W);
+const f = {
   caution: "#F99B11",
   light: "#F7F7F7",
   linkFaded: "#D3E4ED",
@@ -51,15 +51,15 @@ const m = {
   positiveFaded: "#B7CCB9",
   positiveMid: "#4DAB4D",
   positive: "#0E8420"
-}, H = [
-  m.link,
-  m.positive,
-  m.negative,
-  m.caution
-], A = m.linkFaded, R = m.caution, z = m.light, C = 2, w = 1, S = (t, s, a) => {
-  var e, l;
-  const r = ((l = (e = t == null ? void 0 : t.current) == null ? void 0 : e.getBoundingClientRect()) == null ? void 0 : l.width) || 0, n = r > s * C ? r / s : C;
-  a(n);
+}, J = [
+  f.link,
+  f.positive,
+  f.negative,
+  f.caution
+], A = f.linkFaded, R = f.caution, z = f.light, C = 2, w = 1, S = (e, r, s) => {
+  var t, l;
+  const n = ((l = (t = e == null ? void 0 : e.current) == null ? void 0 : t.getBoundingClientRect()) == null ? void 0 : l.width) || 0, o = n > r * C ? n / r : C;
+  s(o);
 }, p = {
   bar: "meter-bar",
   container: "meter-container",
@@ -67,122 +67,123 @@ const m = {
   label: "meter-label",
   meteroverflow: "meter-overflow",
   segments: "meter-segments"
-}, L = ({
-  data: t,
-  datumWidths: s,
-  maximum: a,
-  overColor: r,
-  segmentWidth: n,
-  separatorColor: e
+}, I = ({
+  data: e,
+  datumWidths: r,
+  maximum: s,
+  overColor: n,
+  segmentWidth: o,
+  separatorColor: t
 }) => {
-  const l = () => t.reduce((u, o) => u + o.value, 0) > a, i = (u, o) => ({
-    backgroundColor: u.color,
-    left: `${s.reduce(
-      (v, c, h) => o > h ? v + c : v,
+  const l = () => e.reduce((m, a) => m + a.value, 0) > s, i = (m, a) => ({
+    backgroundColor: m.color,
+    left: `${r.reduce(
+      (v, c, h) => a > h ? v + c : v,
       0
     )}%`,
-    width: `${s[o]}%`
-  }), d = () => ({
+    width: `${r[a]}%`
+  }), u = () => ({
     background: `repeating-linear-gradient(
       to right,
       transparent 0,
-      transparent ${n - w}px,
-      ${e} ${n - w}px,
-      ${e} ${n}px
+      transparent ${o - w}px,
+      ${t} ${o - w}px,
+      ${t} ${o}px
     )`
   });
-  return /* @__PURE__ */ _(j, { children: [
-    l() ? /* @__PURE__ */ f(
+  return /* @__PURE__ */ _($, { children: [
+    l() ? /* @__PURE__ */ d(
       "div",
       {
         className: "p-meter__filled",
         "data-testid": p.meteroverflow,
-        style: { backgroundColor: r, width: "100%" }
+        style: { backgroundColor: n, width: "100%" }
       }
-    ) : t.map((u, o) => /* @__PURE__ */ f(
+    ) : e.map((m, a) => /* @__PURE__ */ d(
       "div",
       {
         className: "p-meter__filled",
         "data-testid": p.filled,
-        style: i(u, o)
+        style: i(m, a)
       },
-      `meter-${o}`
+      `meter-${a}`
     )),
-    n > 0 && /* @__PURE__ */ f(
+    o > 0 && /* @__PURE__ */ d(
       "div",
       {
         className: "p-meter__separators",
         "data-testid": p.segments,
-        style: d()
+        style: u()
       }
     )
   ] });
-}, I = ({
-  labelClassName: t,
-  label: s
-}) => /* @__PURE__ */ f(
+}, P = ({
+  labelClassName: e,
+  label: r
+}) => /* @__PURE__ */ d(
   "div",
   {
-    className: F("p-meter__label", t),
+    className: k("p-meter__label", e),
     "data-testid": p.label,
-    children: s
+    children: r
   }
-), J = ({
-  className: t,
-  data: s,
-  emptyColor: a = A,
-  label: r,
-  labelClassName: n,
-  max: e,
+), K = ({
+  className: e,
+  data: r,
+  emptyColor: s = A,
+  label: n,
+  labelClassName: o,
+  max: t,
   overColor: l = R,
   segmented: i = !1,
-  separatorColor: d = z,
-  small: u = !1
+  separatorColor: u = z,
+  small: m = !1
 }) => {
-  const o = k(null), v = s.reduce((g, x) => g + x.value, 0), c = e || v, h = s.map((g) => g.value / c * 100), [N, b] = E(0);
+  const a = E(null), v = r.reduce((g, N) => g + N.value, 0), c = t || v, h = r.map((g) => g.value / c * 100), [F, b] = j(0);
   O(() => {
-    i && S(o, c, b);
+    i && S(a, c, b);
   }, [c, i]);
-  const $ = B(() => {
-    S(o, c, b);
-  }, [o, c, b]);
-  return M(window, $, "resize", !0, i), /* @__PURE__ */ _(
+  const x = B(() => {
+    S(a, c, b);
+  }, [a, c, b]);
+  return M(window, x, "resize", !0, i), /* @__PURE__ */ _(
     "div",
     {
-      className: F("p-meter", { "p-meter--small": u }, t),
+      className: k("p-meter", { "p-meter--small": m }, e),
       "data-testid": p.container,
-      ref: o,
+      ref: a,
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ d(
           "div",
           {
             className: "p-meter__bar",
             "data-testid": p.bar,
-            style: { backgroundColor: a },
-            children: /* @__PURE__ */ f(
-              L,
+            style: { backgroundColor: s },
+            children: /* @__PURE__ */ d(
+              I,
               {
-                data: s,
+                data: r,
                 datumWidths: h,
                 maximum: c,
                 overColor: l,
-                segmentWidth: N,
-                separatorColor: d
+                segmentWidth: F,
+                separatorColor: u
               }
             )
           }
         ),
-        r && /* @__PURE__ */ f(I, { label: r, labelClassName: n })
+        n && /* @__PURE__ */ d(P, { label: n, labelClassName: o })
       ]
     }
   );
-};
+}, Q = ({ children: e, to: r, ...s }) => /* @__PURE__ */ d(D, { ...s, href: r, rel: "noreferrer noopener", target: "_blank", children: e });
 export {
-  J as Meter,
+  Q as ExternalLink,
+  K as Meter,
   A as defaultEmptyColor,
-  H as defaultFilledColors,
+  J as defaultFilledColors,
   R as defaultOverColor,
   z as defaultSeparatorColor,
-  m as meterColor,
+  f as meterColor,
   p as testIds
 };

package/dist/@canonical/maas-react-components.umd.js

@@ -1,11 +1,11 @@
-(function(n,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react"),require("@canonical/react-components")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@canonical/react-components"],s):(n=typeof globalThis<"u"?globalThis:n||self,s(n["@canonical/maas-react-components"]={},n["react/jsx-runtime"],n.React,n.reactComponents))})(this,function(n,s,h,E){"use strict";function M(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var S={exports:{}};/*!
+(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("@canonical/react-components")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@canonical/react-components"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n["@canonical/maas-react-components"]={},n["react/jsx-runtime"],n.React,n["@canonical/react-components"]))})(this,function(n,r,h,S){"use strict";function $(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var w={exports:{}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var r={}.hasOwnProperty;function i(){for(var o=[],a=0;a<arguments.length;a++){var e=arguments[a];if(e){var c=typeof e;if(c==="string"||c==="number")o.push(e);else if(Array.isArray(e)){if(e.length){var u=i.apply(null,e);u&&o.push(u)}}else if(c==="object"){if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]")){o.push(e.toString());continue}for(var p in e)r.call(e,p)&&e[p]&&o.push(p)}}}return o.join(" ")}t.exports?(i.default=i,t.exports=i):window.classNames=i})()})(S);var k=S.exports;const w=M(k),I="",d={caution:"#F99B11",light:"#F7F7F7",linkFaded:"#D3E4ED",link:"#0066CC",negative:"#C7162B",positiveFaded:"#B7CCB9",positiveMid:"#4DAB4D",positive:"#0E8420"},B=[d.link,d.positive,d.negative,d.caution],_=d.linkFaded,F=d.caution,j=d.light,N=2,O=1,$=(t,r,i)=>{var e,c;const o=((c=(e=t==null?void 0:t.current)==null?void 0:e.getBoundingClientRect())==null?void 0:c.width)||0,a=o>r*N?o/r:N;i(a)},m={bar:"meter-bar",container:"meter-container",filled:"meter-filled",label:"meter-label",meteroverflow:"meter-overflow",segments:"meter-segments"},D=({data:t,datumWidths:r,maximum:i,overColor:o,segmentWidth:a,separatorColor:e})=>{const c=()=>t.reduce((v,l)=>v+l.value,0)>i,u=(v,l)=>({backgroundColor:v.color,left:`${r.reduce((C,f,b)=>l>b?C+f:C,0)}%`,width:`${r[l]}%`}),p=()=>({background:`repeating-linear-gradient(
+*/(function(e){(function(){var s={}.hasOwnProperty;function o(){for(var a=[],l=0;l<arguments.length;l++){var t=arguments[l];if(t){var c=typeof t;if(c==="string"||c==="number")a.push(t);else if(Array.isArray(t)){if(t.length){var u=o.apply(null,t);u&&a.push(u)}}else if(c==="object"){if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]")){a.push(t.toString());continue}for(var m in t)s.call(t,m)&&t[m]&&a.push(m)}}}return a.join(" ")}e.exports?(o.default=o,e.exports=o):window.classNames=o})()})(w);var M=w.exports;const _=$(M),I="",d={caution:"#F99B11",light:"#F7F7F7",linkFaded:"#D3E4ED",link:"#0066CC",negative:"#C7162B",positiveFaded:"#B7CCB9",positiveMid:"#4DAB4D",positive:"#0E8420"},B=[d.link,d.positive,d.negative,d.caution],k=d.linkFaded,F=d.caution,j=d.light,E=2,N=1,O=(e,s,o)=>{var t,c;const a=((c=(t=e==null?void 0:e.current)==null?void 0:t.getBoundingClientRect())==null?void 0:c.width)||0,l=a>s*E?a/s:E;o(l)},p={bar:"meter-bar",container:"meter-container",filled:"meter-filled",label:"meter-label",meteroverflow:"meter-overflow",segments:"meter-segments"},x=({data:e,datumWidths:s,maximum:o,overColor:a,segmentWidth:l,separatorColor:t})=>{const c=()=>e.reduce((v,i)=>v+i.value,0)>o,u=(v,i)=>({backgroundColor:v.color,left:`${s.reduce((b,f,C)=>i>C?b+f:b,0)}%`,width:`${s[i]}%`}),m=()=>({background:`repeating-linear-gradient(
       to right,
       transparent 0,
-      transparent ${a-O}px,
-      ${e} ${a-O}px,
-      ${e} ${a}px
-    )`});return s.jsxs(s.Fragment,{children:[c()?s.jsx("div",{className:"p-meter__filled","data-testid":m.meteroverflow,style:{backgroundColor:o,width:"100%"}}):t.map((v,l)=>s.jsx("div",{className:"p-meter__filled","data-testid":m.filled,style:u(v,l)},`meter-${l}`)),a>0&&s.jsx("div",{className:"p-meter__separators","data-testid":m.segments,style:p()})]})},x=({labelClassName:t,label:r})=>s.jsx("div",{className:w("p-meter__label",t),"data-testid":m.label,children:r}),W=({className:t,data:r,emptyColor:i=_,label:o,labelClassName:a,max:e,overColor:c=F,segmented:u=!1,separatorColor:p=j,small:v=!1})=>{const l=h.useRef(null),C=r.reduce((y,z)=>y+z.value,0),f=e||C,b=r.map(y=>y.value/f*100),[q,g]=h.useState(0);h.useEffect(()=>{u&&$(l,f,g)},[f,u]);const A=h.useCallback(()=>{$(l,f,g)},[l,f,g]);return E.useListener(window,A,"resize",!0,u),s.jsxs("div",{className:w("p-meter",{"p-meter--small":v},t),"data-testid":m.container,ref:l,children:[s.jsx("div",{className:"p-meter__bar","data-testid":m.bar,style:{backgroundColor:i},children:s.jsx(D,{data:r,datumWidths:b,maximum:f,overColor:c,segmentWidth:q,separatorColor:p})}),o&&s.jsx(x,{label:o,labelClassName:a})]})};n.Meter=W,n.defaultEmptyColor=_,n.defaultFilledColors=B,n.defaultOverColor=F,n.defaultSeparatorColor=j,n.meterColor=d,n.testIds=m,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+      transparent ${l-N}px,
+      ${t} ${l-N}px,
+      ${t} ${l}px
+    )`});return r.jsxs(r.Fragment,{children:[c()?r.jsx("div",{className:"p-meter__filled","data-testid":p.meteroverflow,style:{backgroundColor:a,width:"100%"}}):e.map((v,i)=>r.jsx("div",{className:"p-meter__filled","data-testid":p.filled,style:u(v,i)},`meter-${i}`)),l>0&&r.jsx("div",{className:"p-meter__separators","data-testid":p.segments,style:m()})]})},D=({labelClassName:e,label:s})=>r.jsx("div",{className:_("p-meter__label",e),"data-testid":p.label,children:s}),L=({className:e,data:s,emptyColor:o=k,label:a,labelClassName:l,max:t,overColor:c=F,segmented:u=!1,separatorColor:m=j,small:v=!1})=>{const i=h.useRef(null),b=s.reduce((y,z)=>y+z.value,0),f=t||b,C=s.map(y=>y.value/f*100),[q,g]=h.useState(0);h.useEffect(()=>{u&&O(i,f,g)},[f,u]);const A=h.useCallback(()=>{O(i,f,g)},[i,f,g]);return S.useListener(window,A,"resize",!0,u),r.jsxs("div",{className:_("p-meter",{"p-meter--small":v},e),"data-testid":p.container,ref:i,children:[r.jsx("div",{className:"p-meter__bar","data-testid":p.bar,style:{backgroundColor:o},children:r.jsx(x,{data:s,datumWidths:C,maximum:f,overColor:c,segmentWidth:q,separatorColor:m})}),a&&r.jsx(D,{label:a,labelClassName:l})]})},W=({children:e,to:s,...o})=>r.jsx(S.Link,{...o,href:s,rel:"noreferrer noopener",target:"_blank",children:e});n.ExternalLink=W,n.Meter=L,n.defaultEmptyColor=k,n.defaultFilledColors=B,n.defaultOverColor=F,n.defaultSeparatorColor=j,n.meterColor=d,n.testIds=p,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/dist/src/lib/components/NestedFormGroup/NestedFormGroup.d.ts

@@ -0,0 +1,2 @@
+import { AriaAttributes, PropsWithChildren } from "react";
+export declare const NestedFormGroup: ({ children, ...props }: PropsWithChildren & Pick<AriaAttributes, "aria-hidden">) => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/components/NestedFormGroup/NestedFormGroup.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta } from "@storybook/react";
+import { NestedFormGroup } from ".";
+declare const meta: Meta<typeof NestedFormGroup>;
+export default meta;
+export declare const Example: {
+    args: {
+        "aria-hidden": boolean;
+    };
+};
+export declare const ControlledExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/lib/components/NestedFormGroup/NestedFormGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/components/NestedFormGroup/index.d.ts

@@ -0,0 +1 @@
+export * from "./NestedFormGroup";

package/dist/src/lib/components/index.d.ts

@@ -0,0 +1 @@
+export * from "./NestedFormGroup";

package/dist/src/lib/elements/ExternalLink/ExternalLink.d.ts

@@ -0,0 +1,7 @@
+import { LinkProps } from "@canonical/react-components";
+import type { LinkProps as RouterLinkProps } from "react-router-dom";
+type ExternalLinkProps = Pick<LinkProps, "children"> & Omit<RouterLinkProps, "children"> & {
+    to: string;
+};
+export declare const ExternalLink: ({ children, to, ...props }: ExternalLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/lib/elements/ExternalLink/ExternalLink.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta } from "@storybook/react";
+import { ExternalLink } from ".";
+declare const meta: Meta<typeof ExternalLink>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: string;
+        to: string;
+    };
+};

package/dist/src/lib/elements/ExternalLink/ExternalLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/elements/ExternalLink/index.d.ts

@@ -0,0 +1 @@
+export * from "./ExternalLink";

package/dist/src/lib/elements/index.d.ts

@@ -1 +1,2 @@
 export * from "./Meter";
+export * from "./ExternalLink";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/canonical/maas-react-components.git"
@@ -100,6 +100,7 @@
     "@types/react-dom": "^17.0.2 || ^18.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.0.0",
     "vanilla-framework": "^4.3.0"
   }
 }