@5ive-souls/controls 0.0.9 → 0.0.10

package/dist/components/Section/Section.js

@@ -1,9 +1,9 @@
 import { jsxs as Z, jsx as x } from "react/jsx-runtime";
-import { makeStyles as Te, tokens as B, mergeClasses as V, Button as be, Divider as xe, Spinner as we } from "@fluentui/react-components";
+import { makeStyles as Te, tokens as U, mergeClasses as Y, Button as be, Divider as xe, Spinner as we } from "@fluentui/react-components";
 import * as m from "react";
 import re from "react";
 import { FlexBox as oe } from "../FlexBox/FlexBox.js";
-import { FlexBoxItem as G } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import { FlexBoxItem as V } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
 import { ClassNames as q } from "../ClassNames.js";
 import { SectionUtils as ie } from "./SectionUtils.js";
@@ -113,20 +113,20 @@ function de() {
     const u = Array.isArray(o) ? o : [
       o
     ], { isReducedMotion: d } = i, l = u.map((c) => {
-      const { keyframes: h, reducedMotion: p = Ve, ...f } = c, { keyframes: S = h, ...C } = p, y = d ? S : h, w = {
+      const { keyframes: h, reducedMotion: p = Ve, ...f } = c, { keyframes: y = h, ...g } = p, S = d ? y : h, w = {
         ...Ye,
         ...f,
         // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
-        ...d && C
+        ...d && g
       };
       try {
-        const s = n.animate(y, w);
+        const s = n.animate(S, w);
         if (r)
           s == null || s.persist();
         else {
-          const R = y[y.length - 1];
+          const C = S[S.length - 1];
           var b;
-          Object.assign((b = n.style) !== null && b !== void 0 ? b : {}, R);
+          Object.assign((b = n.style) !== null && b !== void 0 ? b : {}, C);
         }
         return s;
       } catch {
@@ -140,8 +140,8 @@ function de() {
         });
       },
       setMotionEndCallbacks(c, h) {
-        const p = l.map((f) => new Promise((S, C) => {
-          f.onfinish = () => S(), f.oncancel = () => C();
+        const p = l.map((f) => new Promise((y, g) => {
+          f.onfinish = () => y(), f.oncancel = () => g();
         }));
         Promise.all(p).then(() => {
           c();
@@ -269,15 +269,15 @@ var ae;
 function Ke() {
   if (ae) return v;
   ae = 1;
-  var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, h = 60120, p = 60115, f = 60116, S = 60121, C = 60122, y = 60117, w = 60129, b = 60131;
+  var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, h = 60120, p = 60115, f = 60116, y = 60121, g = 60122, S = 60117, w = 60129, b = 60131;
   if (typeof Symbol == "function" && Symbol.for) {
     var s = Symbol.for;
-    e = s("react.element"), r = s("react.portal"), n = s("react.fragment"), o = s("react.strict_mode"), i = s("react.profiler"), u = s("react.provider"), d = s("react.context"), l = s("react.forward_ref"), c = s("react.suspense"), h = s("react.suspense_list"), p = s("react.memo"), f = s("react.lazy"), S = s("react.block"), C = s("react.server.block"), y = s("react.fundamental"), w = s("react.debug_trace_mode"), b = s("react.legacy_hidden");
+    e = s("react.element"), r = s("react.portal"), n = s("react.fragment"), o = s("react.strict_mode"), i = s("react.profiler"), u = s("react.provider"), d = s("react.context"), l = s("react.forward_ref"), c = s("react.suspense"), h = s("react.suspense_list"), p = s("react.memo"), f = s("react.lazy"), y = s("react.block"), g = s("react.server.block"), S = s("react.fundamental"), w = s("react.debug_trace_mode"), b = s("react.legacy_hidden");
   }
-  function R(t) {
+  function C(t) {
     if (typeof t == "object" && t !== null) {
-      var g = t.$$typeof;
-      switch (g) {
+      var R = t.$$typeof;
+      switch (R) {
         case e:
           switch (t = t.type, t) {
             case n:
@@ -295,44 +295,44 @@ function Ke() {
                 case u:
                   return t;
                 default:
-                  return g;
+                  return R;
               }
           }
         case r:
-          return g;
+          return R;
       }
     }
   }
-  var T = u, M = e, D = l, P = n, N = f, _ = p, z = r, k = i, O = o, I = c;
-  return v.ContextConsumer = d, v.ContextProvider = T, v.Element = M, v.ForwardRef = D, v.Fragment = P, v.Lazy = N, v.Memo = _, v.Portal = z, v.Profiler = k, v.StrictMode = O, v.Suspense = I, v.isAsyncMode = function() {
+  var T = u, M = e, L = l, P = n, N = f, _ = p, z = r, I = i, k = o, O = c;
+  return v.ContextConsumer = d, v.ContextProvider = T, v.Element = M, v.ForwardRef = L, v.Fragment = P, v.Lazy = N, v.Memo = _, v.Portal = z, v.Profiler = I, v.StrictMode = k, v.Suspense = O, v.isAsyncMode = function() {
     return !1;
   }, v.isConcurrentMode = function() {
     return !1;
   }, v.isContextConsumer = function(t) {
-    return R(t) === d;
+    return C(t) === d;
   }, v.isContextProvider = function(t) {
-    return R(t) === u;
+    return C(t) === u;
   }, v.isElement = function(t) {
     return typeof t == "object" && t !== null && t.$$typeof === e;
   }, v.isForwardRef = function(t) {
-    return R(t) === l;
+    return C(t) === l;
   }, v.isFragment = function(t) {
-    return R(t) === n;
+    return C(t) === n;
   }, v.isLazy = function(t) {
-    return R(t) === f;
+    return C(t) === f;
   }, v.isMemo = function(t) {
-    return R(t) === p;
+    return C(t) === p;
   }, v.isPortal = function(t) {
-    return R(t) === r;
+    return C(t) === r;
   }, v.isProfiler = function(t) {
-    return R(t) === i;
+    return C(t) === i;
   }, v.isStrictMode = function(t) {
-    return R(t) === o;
+    return C(t) === o;
   }, v.isSuspense = function(t) {
-    return R(t) === c;
+    return C(t) === c;
   }, v.isValidElementType = function(t) {
-    return typeof t == "string" || typeof t == "function" || t === n || t === i || t === w || t === o || t === c || t === h || t === b || typeof t == "object" && t !== null && (t.$$typeof === f || t.$$typeof === p || t.$$typeof === u || t.$$typeof === d || t.$$typeof === l || t.$$typeof === y || t.$$typeof === S || t[0] === C);
-  }, v.typeOf = R, v;
+    return typeof t == "string" || typeof t == "function" || t === n || t === i || t === w || t === o || t === c || t === h || t === b || typeof t == "object" && t !== null && (t.$$typeof === f || t.$$typeof === p || t.$$typeof === u || t.$$typeof === d || t.$$typeof === l || t.$$typeof === S || t.$$typeof === y || t[0] === g);
+  }, v.typeOf = C, v;
 }
 var E = {};
 /** @license React v17.0.2
@@ -346,14 +346,14 @@ var E = {};
 var se;
 function Xe() {
   return se || (se = 1, process.env.NODE_ENV !== "production" && function() {
-    var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, h = 60120, p = 60115, f = 60116, S = 60121, C = 60122, y = 60117, w = 60129, b = 60131;
+    var e = 60103, r = 60106, n = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, c = 60113, h = 60120, p = 60115, f = 60116, y = 60121, g = 60122, S = 60117, w = 60129, b = 60131;
     if (typeof Symbol == "function" && Symbol.for) {
       var s = Symbol.for;
-      e = s("react.element"), r = s("react.portal"), n = s("react.fragment"), o = s("react.strict_mode"), i = s("react.profiler"), u = s("react.provider"), d = s("react.context"), l = s("react.forward_ref"), c = s("react.suspense"), h = s("react.suspense_list"), p = s("react.memo"), f = s("react.lazy"), S = s("react.block"), C = s("react.server.block"), y = s("react.fundamental"), s("react.scope"), s("react.opaque.id"), w = s("react.debug_trace_mode"), s("react.offscreen"), b = s("react.legacy_hidden");
+      e = s("react.element"), r = s("react.portal"), n = s("react.fragment"), o = s("react.strict_mode"), i = s("react.profiler"), u = s("react.provider"), d = s("react.context"), l = s("react.forward_ref"), c = s("react.suspense"), h = s("react.suspense_list"), p = s("react.memo"), f = s("react.lazy"), y = s("react.block"), g = s("react.server.block"), S = s("react.fundamental"), s("react.scope"), s("react.opaque.id"), w = s("react.debug_trace_mode"), s("react.offscreen"), b = s("react.legacy_hidden");
     }
-    var R = !1;
+    var C = !1;
     function T(a) {
-      return !!(typeof a == "string" || typeof a == "function" || a === n || a === i || a === w || a === o || a === c || a === h || a === b || R || typeof a == "object" && a !== null && (a.$$typeof === f || a.$$typeof === p || a.$$typeof === u || a.$$typeof === d || a.$$typeof === l || a.$$typeof === y || a.$$typeof === S || a[0] === C));
+      return !!(typeof a == "string" || typeof a == "function" || a === n || a === i || a === w || a === o || a === c || a === h || a === b || C || typeof a == "object" && a !== null && (a.$$typeof === f || a.$$typeof === p || a.$$typeof === u || a.$$typeof === d || a.$$typeof === l || a.$$typeof === S || a.$$typeof === y || a[0] === g));
     }
     function M(a) {
       if (typeof a == "object" && a !== null) {
@@ -386,12 +386,12 @@ function Xe() {
         }
       }
     }
-    var D = d, P = u, N = e, _ = l, z = n, k = f, O = p, I = r, t = i, g = o, $ = c, L = !1, U = !1;
-    function F(a) {
-      return L || (L = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
+    var L = d, P = u, N = e, _ = l, z = n, I = f, k = p, O = r, t = i, R = o, D = c, $ = !1, F = !1;
+    function G(a) {
+      return $ || ($ = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
-    function Y(a) {
-      return U || (U = !0, console.warn("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.")), !1;
+    function B(a) {
+      return F || (F = !0, console.warn("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.")), !1;
     }
     function H(a) {
       return M(a) === d;
@@ -408,10 +408,10 @@ function Xe() {
     function he(a) {
       return M(a) === n;
     }
-    function Re(a) {
+    function Ce(a) {
       return M(a) === f;
     }
-    function Ce(a) {
+    function Re(a) {
       return M(a) === p;
     }
     function ge(a) {
@@ -426,7 +426,7 @@ function Xe() {
     function Me(a) {
       return M(a) === c;
     }
-    E.ContextConsumer = D, E.ContextProvider = P, E.Element = N, E.ForwardRef = _, E.Fragment = z, E.Lazy = k, E.Memo = O, E.Portal = I, E.Profiler = t, E.StrictMode = g, E.Suspense = $, E.isAsyncMode = F, E.isConcurrentMode = Y, E.isContextConsumer = H, E.isContextProvider = X, E.isElement = ve, E.isForwardRef = Ee, E.isFragment = he, E.isLazy = Re, E.isMemo = Ce, E.isPortal = ge, E.isProfiler = Se, E.isStrictMode = ye, E.isSuspense = Me, E.isValidElementType = T, E.typeOf = M;
+    E.ContextConsumer = L, E.ContextProvider = P, E.Element = N, E.ForwardRef = _, E.Fragment = z, E.Lazy = I, E.Memo = k, E.Portal = O, E.Profiler = t, E.StrictMode = R, E.Suspense = D, E.isAsyncMode = G, E.isConcurrentMode = B, E.isContextConsumer = H, E.isContextProvider = X, E.isElement = ve, E.isForwardRef = Ee, E.isFragment = he, E.isLazy = Ce, E.isMemo = Re, E.isPortal = ge, E.isProfiler = Se, E.isStrictMode = ye, E.isSuspense = Me, E.isValidElementType = T, E.typeOf = M;
   }()), E;
 }
 process.env.NODE_ENV === "production" ? ee.exports = Ke() : ee.exports = Xe();
@@ -472,19 +472,19 @@ function K(e) {
     const o = {
       ...m.useContext(et),
       ...r
-    }, i = Je() === "skip", { appear: u, children: d, imperativeRef: l, onExit: c, onMotionFinish: h, onMotionStart: p, onMotionCancel: f, visible: S, unmountOnExit: C, ...y } = o, w = y, [b, s] = tt(S, C), R = Ze(d), T = je(l), M = m.useRef(), D = Ue(M, R.ref), P = m.useRef({
+    }, i = Je() === "skip", { appear: u, children: d, imperativeRef: l, onExit: c, onMotionFinish: h, onMotionStart: p, onMotionCancel: f, visible: y, unmountOnExit: g, ...S } = o, w = S, [b, s] = tt(y, g), C = Ze(d), T = je(l), M = m.useRef(), L = Ue(M, C.ref), P = m.useRef({
       appear: u,
       params: w,
       skipMotions: i
-    }), N = He(), _ = Le(), z = We(), k = J((t) => {
+    }), N = He(), _ = Le(), z = We(), I = J((t) => {
       p == null || p(null, {
         direction: t
       });
-    }), O = J((t) => {
+    }), k = J((t) => {
       h == null || h(null, {
         direction: t
-      }), t === "exit" && C && (s(!1), c == null || c());
-    }), I = J((t) => {
+      }), t === "exit" && g && (s(!1), c == null || c());
+    }), O = J((t) => {
       f == null || f(null, {
         direction: t
       });
@@ -500,20 +500,20 @@ function K(e) {
         const t = M.current;
         if (!t)
           return;
-        let g;
-        function $() {
-          g && (U && g.isRunning() || (g.cancel(), T.current = void 0));
+        let R;
+        function D() {
+          R && (F && R.isRunning() || (R.cancel(), T.current = void 0));
         }
-        const L = typeof e == "function" ? e({
+        const $ = typeof e == "function" ? e({
           element: t,
           ...P.current.params
-        }) : e, U = L[rt];
-        if (U && (g = T.current, g && g.isRunning()))
-          return g.reverse(), $;
-        const F = S ? L.enter : L.exit, Y = S ? "enter" : "exit", H = !P.current.appear && _, X = P.current.skipMotions;
-        return H || k(Y), g = N(t, F, {
+        }) : e, F = $[rt];
+        if (F && (R = T.current, R && R.isRunning()))
+          return R.reverse(), D;
+        const G = y ? $.enter : $.exit, B = y ? "enter" : "exit", H = !P.current.appear && _, X = P.current.skipMotions;
+        return H || I(B), R = N(t, G, {
           isReducedMotion: z()
-        }), H ? (g.finish(), $) : (T.current = g, g.setMotionEndCallbacks(() => O(Y), () => I(Y)), X && g.finish(), $);
+        }), H ? (R.finish(), D) : (T.current = R, R.setMotionEndCallbacks(() => k(B), () => O(B)), X && R.finish(), D);
       },
       // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -521,13 +521,13 @@ function K(e) {
         N,
         T,
         z,
-        O,
         k,
         I,
-        S
+        O,
+        y
       ]
-    ), b ? m.cloneElement(R, {
-      ref: D
+    ), b ? m.cloneElement(C, {
+      ref: L
     }) : null;
   }, {
     // Heads up!
@@ -656,12 +656,12 @@ const me = (e, r) => {
     delay: o,
     fill: "both"
   });
-  const S = [];
-  return h && S.push(ue({
+  const y = [];
+  return h && y.push(ue({
     direction: "exit",
     duration: u,
     easing: d
-  })), S.push(it({
+  })), y.push(it({
     orientation: p,
     duration: i,
     easing: d,
@@ -675,7 +675,7 @@ const me = (e, r) => {
     delay: l
   })), {
     enter: f,
-    exit: S
+    exit: y
   };
 }, te = ({ enterDuration: e = A.durationNormal, enterEasing: r = A.curveEasyEaseMax, exitDuration: n = e, exitEasing: o = r } = {}) => (
   // Implement a regular collapse as a special case of the delayed collapse,
@@ -702,20 +702,20 @@ K(pe({
 }));
 const ct = Te({
   root: {
-    backgroundColor: B.colorNeutralBackground1,
+    backgroundColor: U.colorNeutralBackground1,
     boxSizing: "border-box",
     overflow: "hidden"
   },
   default: {
-    border: "1px solid " + B.colorNeutralForeground1,
-    borderRadius: B.borderRadiusMedium,
-    boxShadow: B.shadow16Brand,
-    transitionDuration: B.durationNormal,
+    border: "1px solid " + U.colorNeutralForeground1,
+    borderRadius: U.borderRadiusMedium,
+    boxShadow: U.shadow16Brand,
+    transitionDuration: U.durationNormal,
     transitionTimingFunction: "ease",
     transitionProperty: "box-shadow, border",
     ":hover": {
-      boxShadow: B.shadow28Brand,
-      border: "1px solid " + B.colorBrandForeground2Hover
+      boxShadow: U.shadow28Brand,
+      border: "1px solid " + U.colorBrandForeground2Hover
     }
   },
   divider: {
@@ -738,36 +738,37 @@ const ct = Te({
   }
 }), ut = (e) => {
   var _;
-  const { children: r, icon: n, header: o, collapsible: i, collapseDirection: u, className: d, fill: l, ref: c, id: h, appearance: p, isBusy: f, isBusyMessage: S } = e, C = ct(), [y, w] = re.useState(!0), [b, s] = re.useState();
-  let R = V(q.Section, C.root, d);
-  (l || (_ = e.cellProps) != null && _.resizable) && (R = V(R, C.fill)), (p == null || p == "default") && (R = V(R, C.default));
+  const { children: r, icon: n, header: o, collapsible: i, collapseDirection: u, className: d, fill: l, ref: c, id: h, appearance: p, isBusy: f, isBusyMessage: y } = e, g = ct(), [S, w] = re.useState(!0), [b, s] = re.useState();
+  let C = Y(q.Section, g.root, d);
+  (l || (_ = e.cellProps) != null && _.resizable) && (C = Y(C, g.fill)), (p == null || p == "default") && (C = Y(C, g.default));
   const T = ie.buildSectionStyles(e), M = ie.buildSectionContentStyles(e);
-  y || (u == "horizontal" ? (T.height = "100%", T.width = "50px", T.maxWidth = "50px") : T.height = "fit-content");
-  const D = u == "horizontal" ? y ? /* @__PURE__ */ x(Ae, {}) : /* @__PURE__ */ x(Ie, {}) : y ? /* @__PURE__ */ x(Ne, {}) : /* @__PURE__ */ x(_e, {});
+  S || (u == "horizontal" ? (T.height = "100%", T.width = "50px", T.maxWidth = "50px") : T.height = "fit-content");
+  const L = u == "horizontal" ? S ? /* @__PURE__ */ x(Ae, {}) : /* @__PURE__ */ x(Ie, {}) : S ? /* @__PURE__ */ x(Ne, {}) : /* @__PURE__ */ x(_e, {});
   let P = q.SectionHeader;
-  u == "horizontal" && (y || (P = V(P, C.collapsedHorizontalHeader)));
+  u == "horizontal" && (S || (P = Y(P, g.collapsedHorizontalHeader)));
   const N = (z) => {
+    var I;
     if (e.cellProps) {
-      const { column: k, row: O } = e.cellProps, I = u == "horizontal", t = z.currentTarget.closest("." + q.Grid), g = I ? k : O;
-      if (y) {
-        const F = (I ? t.style.gridTemplateColumns : t.style.gridTemplateRows).split(" ")[g - 1];
-        s(F);
+      const { column: k, row: O } = e.cellProps, t = u == "horizontal", R = z.currentTarget.closest("." + q.Grid), D = t ? k : O;
+      if (S) {
+        const B = (t ? R.style.gridTemplateColumns : R.style.gridTemplateRows).split(" ")[D - 1];
+        s(B);
       }
-      const $ = y ? "min-content" : b;
-      Pe.UpdateLayoutGrid(t, I, g, $);
+      const $ = S ? "min-content" : b;
+      Pe.UpdateLayoutGrid(R, t, D, $);
     }
-    w(!y);
+    w(!S), (I = e.onCollapseChanged) == null || I.call(e, !S);
   };
-  return /* @__PURE__ */ Z(oe, { id: h, className: R, style: T, ref: c, role: e.role, children: [
-    /* @__PURE__ */ x(G, { className: P, children: /* @__PURE__ */ Z(oe, { fill: !0, alignItems: "center", horizontal: !0, children: [
-      n && /* @__PURE__ */ x(G, { padding: 8, children: n }),
-      /* @__PURE__ */ x(G, { grow: 1, children: o && o }),
-      i && /* @__PURE__ */ x(G, { children: /* @__PURE__ */ x(be, { appearance: "transparent", icon: D, onClick: N }) })
+  return /* @__PURE__ */ Z(oe, { id: h, className: C, style: T, ref: c, role: e.role, children: [
+    /* @__PURE__ */ x(V, { className: P, children: /* @__PURE__ */ Z(oe, { fill: !0, alignItems: "center", horizontal: !0, children: [
+      n && /* @__PURE__ */ x(V, { padding: 8, children: n }),
+      /* @__PURE__ */ x(V, { grow: 1, children: o && o }),
+      i && /* @__PURE__ */ x(V, { children: /* @__PURE__ */ x(be, { appearance: "transparent", icon: L, onClick: N }) })
     ] }) }),
-    (n || o || i) && /* @__PURE__ */ x(xe, { className: C.divider }),
-    /* @__PURE__ */ x(G, { className: q.SectionContent, grow: 1, style: M, children: /* @__PURE__ */ x(st, { visible: y, children: /* @__PURE__ */ Z("div", { className: V(C.fill, C.content), children: [
+    (n || o || i) && /* @__PURE__ */ x(xe, { className: g.divider }),
+    /* @__PURE__ */ x(V, { className: q.SectionContent, grow: 1, style: M, children: /* @__PURE__ */ x(st, { visible: S, children: /* @__PURE__ */ Z("div", { className: Y(g.fill, g.content), children: [
       !f && r,
-      f && /* @__PURE__ */ x(we, { className: C.spinner, label: S, labelPosition: "below" })
+      f && /* @__PURE__ */ x(we, { className: g.spinner, label: y, labelPosition: "below" })
     ] }) }) })
   ] });
 };

package/dist/main.d.ts

@@ -452,9 +452,14 @@ export declare interface ISectionProps extends IComponentProps {
      */
     collapsible?: boolean;
     /**
-     *
+     * Determines which direction to collapse the content.
      */
     collapseDirection?: "vertical" | "horizontal";
+    /**
+     * Callback invoked when the collapsed state changes.
+     * @param isExpanded Value representing is the content is expanded or not.
+     */
+    onCollapseChanged?: (isExpanded: boolean) => void;
     /**
      * Applies styling to have the section consume 100% of it's parent's height and width.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5ive-souls/controls",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Collection of react components built on the Fluent UI framework.",
   "keywords": [
     "react",