@alixpartners/ui-components 2.5.7 → 2.6.0

package/dist/components/Toggle/Toggle.js

@@ -1,159 +1,244 @@
-import { jsxs as k, jsx as d } from "react/jsx-runtime";
-import * as m from "react";
-import { useId as D, useEffect as M, useState as j } from "react";
-import { c as F } from "../../clsx-OuTLNxxd.js";
-import { d as y, u as H, P, c as K, b as A } from "../../index-z_kiwVc3.js";
-import { u as U } from "../../index-BZPx6jYI.js";
-import { u as q } from "../../index-Nyh2Wa71.js";
-import '../../assets/Toggle.css';var v = "Switch", [z] = A(v), [L, O] = z(v), T = m.forwardRef(
-  (r, c) => {
+import { jsx as i, jsxs as T, Fragment as K } from "react/jsx-runtime";
+import * as f from "react";
+import { useId as U, useEffect as z, useState as G } from "react";
+import { c as L } from "../../clsx-OuTLNxxd.js";
+import { P, u as O, a as E, c as W, b as X } from "../../index-B4szHVNJ.js";
+import { u as Y } from "../../index-BZPx6jYI.js";
+import { u as J } from "../../index-6j3vTf--.js";
+import '../../assets/Toggle.css';var C = "Switch", [Q] = X(C), [V, R] = Q(C);
+function Z(e) {
+  const {
+    __scopeSwitch: r,
+    checked: c,
+    children: a,
+    defaultChecked: t,
+    disabled: s,
+    form: n,
+    name: l,
+    onCheckedChange: u,
+    required: h,
+    value: d = "on",
+    // @ts-expect-error
+    internal_do_not_use_render: p
+  } = e, [o, m] = O({
+    prop: c,
+    defaultProp: t ?? !1,
+    onChange: u,
+    caller: C
+  }), [b, _] = f.useState(null), [g, S] = f.useState(null), k = f.useRef(!1), v = b ? !!n || !!b.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    !0
+  ), y = {
+    checked: o,
+    setChecked: m,
+    disabled: s,
+    control: b,
+    setControl: _,
+    name: l,
+    form: n,
+    value: d,
+    hasConsumerStoppedPropagationRef: k,
+    required: h,
+    defaultChecked: t,
+    isFormControl: v,
+    bubbleInput: g,
+    setBubbleInput: S
+  };
+  return /* @__PURE__ */ i(V, { scope: r, ...y, children: $(p) ? p(y) : a });
+}
+var N = "SwitchTrigger", x = f.forwardRef(
+  ({ __scopeSwitch: e, onClick: r, ...c }, a) => {
+    const {
+      value: t,
+      disabled: s,
+      checked: n,
+      required: l,
+      setControl: u,
+      setChecked: h,
+      hasConsumerStoppedPropagationRef: d,
+      isFormControl: p,
+      bubbleInput: o
+    } = R(N, e), m = E(a, u);
+    return /* @__PURE__ */ i(
+      P.button,
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": n,
+        "aria-required": l,
+        "data-state": j(n),
+        "data-disabled": s ? "" : void 0,
+        disabled: s,
+        value: t,
+        ...c,
+        ref: m,
+        onClick: W(r, (b) => {
+          h((_) => !_), o && p && (d.current = b.isPropagationStopped(), d.current || b.stopPropagation());
+        })
+      }
+    );
+  }
+);
+x.displayName = N;
+var B = f.forwardRef(
+  (e, r) => {
     const {
-      __scopeSwitch: e,
-      name: n,
-      checked: o,
-      defaultChecked: p,
-      required: s,
-      disabled: a,
-      value: i = "on",
+      __scopeSwitch: c,
+      name: a,
+      checked: t,
+      defaultChecked: s,
+      required: n,
+      disabled: l,
+      value: u,
       onCheckedChange: h,
-      form: l,
-      ..._
-    } = r, [t, u] = m.useState(null), S = y(c, (w) => u(w)), C = m.useRef(!1), g = t ? l || !!t.closest("form") : !0, [b, I] = H({
-      prop: o,
-      defaultProp: p ?? !1,
-      onChange: h,
-      caller: v
-    });
-    return /* @__PURE__ */ k(L, { scope: e, checked: b, disabled: a, children: [
-      /* @__PURE__ */ d(
-        P.button,
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": b,
-          "aria-required": s,
-          "data-state": R(b),
-          "data-disabled": a ? "" : void 0,
-          disabled: a,
-          value: i,
-          ..._,
-          ref: S,
-          onClick: K(r.onClick, (w) => {
-            I((B) => !B), g && (C.current = w.isPropagationStopped(), C.current || w.stopPropagation());
-          })
-        }
-      ),
-      g && /* @__PURE__ */ d(
-        x,
-        {
-          control: t,
-          bubbles: !C.current,
-          name: n,
-          value: i,
-          checked: b,
-          required: s,
-          disabled: a,
-          form: l,
-          style: { transform: "translateX(-100%)" }
-        }
-      )
-    ] });
+      form: d,
+      ...p
+    } = e;
+    return /* @__PURE__ */ i(
+      Z,
+      {
+        __scopeSwitch: c,
+        checked: t,
+        defaultChecked: s,
+        disabled: l,
+        required: n,
+        onCheckedChange: h,
+        name: a,
+        form: d,
+        value: u,
+        internal_do_not_use_render: ({ isFormControl: o }) => /* @__PURE__ */ T(K, { children: [
+          /* @__PURE__ */ i(
+            x,
+            {
+              ...p,
+              ref: r,
+              __scopeSwitch: c
+            }
+          ),
+          o && /* @__PURE__ */ i(
+            q,
+            {
+              __scopeSwitch: c
+            }
+          )
+        ] })
+      }
+    );
   }
 );
-T.displayName = v;
-var E = "SwitchThumb", N = m.forwardRef(
-  (r, c) => {
-    const { __scopeSwitch: e, ...n } = r, o = O(E, e);
-    return /* @__PURE__ */ d(
+B.displayName = C;
+var F = "SwitchThumb", M = f.forwardRef(
+  (e, r) => {
+    const { __scopeSwitch: c, ...a } = e, t = R(F, c);
+    return /* @__PURE__ */ i(
       P.span,
       {
-        "data-state": R(o.checked),
-        "data-disabled": o.disabled ? "" : void 0,
-        ...n,
-        ref: c
+        "data-state": j(t.checked),
+        "data-disabled": t.disabled ? "" : void 0,
+        ...a,
+        ref: r
       }
     );
   }
 );
-N.displayName = E;
-var W = "SwitchBubbleInput", x = m.forwardRef(
-  ({
-    __scopeSwitch: r,
-    control: c,
-    checked: e,
-    bubbles: n = !0,
-    ...o
-  }, p) => {
-    const s = m.useRef(null), a = y(s, p), i = U(e), h = q(c);
-    return m.useEffect(() => {
-      const l = s.current;
-      if (!l) return;
-      const _ = window.HTMLInputElement.prototype, u = Object.getOwnPropertyDescriptor(
-        _,
+M.displayName = F;
+var D = "SwitchBubbleInput", q = f.forwardRef(
+  ({ __scopeSwitch: e, ...r }, c) => {
+    const {
+      control: a,
+      hasConsumerStoppedPropagationRef: t,
+      checked: s,
+      defaultChecked: n,
+      required: l,
+      disabled: u,
+      name: h,
+      value: d,
+      form: p,
+      bubbleInput: o,
+      setBubbleInput: m
+    } = R(D, e), b = E(c, m), _ = Y(s), g = J(a);
+    f.useEffect(() => {
+      const k = o;
+      if (!k) return;
+      const v = window.HTMLInputElement.prototype, I = Object.getOwnPropertyDescriptor(
+        v,
         "checked"
-      ).set;
-      if (i !== e && u) {
-        const S = new Event("click", { bubbles: n });
-        u.call(l, e), l.dispatchEvent(S);
+      ).set, A = !t.current;
+      if (_ !== s && I) {
+        const H = new Event("click", { bubbles: A });
+        I.call(k, s), k.dispatchEvent(H);
       }
-    }, [i, e, n]), /* @__PURE__ */ d(
-      "input",
+    }, [o, _, s, t]);
+    const S = f.useRef(s);
+    return /* @__PURE__ */ i(
+      P.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: e,
-        ...o,
+        defaultChecked: n ?? S.current,
+        required: l,
+        disabled: u,
+        name: h,
+        value: d,
+        form: p,
+        ...r,
         tabIndex: -1,
-        ref: a,
+        ref: b,
         style: {
-          ...o.style,
-          ...h,
+          ...r.style,
+          ...g,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
-          margin: 0
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
         }
       }
     );
   }
 );
-x.displayName = W;
-function R(r) {
-  return r ? "checked" : "unchecked";
+q.displayName = D;
+function $(e) {
+  return typeof e == "function";
+}
+function j(e) {
+  return e ? "checked" : "unchecked";
 }
-var X = T, Y = N;
-const G = "Toggle-module__wrapper___rjhvi", J = "Toggle-module__root___mhwY4", Q = "Toggle-module__thumb___mWKFb", V = "Toggle-module__label___DMfcr", Z = "Toggle-module__disabled___sxlCk", f = {
-  wrapper: G,
-  root: J,
-  thumb: Q,
-  label: V,
-  disabled: Z
+const ee = "Toggle-module__wrapper___rjhvi", te = "Toggle-module__root___mhwY4", oe = "Toggle-module__thumb___mWKFb", re = "Toggle-module__label___DMfcr", ce = "Toggle-module__disabled___sxlCk", w = {
+  wrapper: ee,
+  root: te,
+  thumb: oe,
+  label: re,
+  disabled: ce
 };
-function ae({
-  label: r,
-  checked: c = !1,
-  disabled: e = !1,
-  labelPosition: n = "left",
-  onChange: o,
-  className: p,
-  ...s
+function ue({
+  label: e,
+  checked: r = !1,
+  disabled: c = !1,
+  labelPosition: a = "left",
+  onChange: t,
+  className: s,
+  ...n
 }) {
-  const a = D();
-  M(() => {
-    h(c);
-  }, [c]);
-  const [i, h] = j(c), l = (t) => {
-    h(t), o == null || o(t);
-  }, _ = (t) => {
-    var u;
-    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), l(!i)), (u = s.onKeyDown) == null || u.call(s, t);
+  const l = U();
+  z(() => {
+    h(r);
+  }, [r]);
+  const [u, h] = G(r), d = (o) => {
+    h(o), t == null || t(o);
+  }, p = (o) => {
+    var m;
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), d(!u)), (m = n.onKeyDown) == null || m.call(n, o);
   };
-  return /* @__PURE__ */ k("div", { className: F(f.wrapper, e && f.disabled, p), children: [
-    n === "left" && /* @__PURE__ */ d("label", { className: f.label, htmlFor: a, children: r }),
-    /* @__PURE__ */ d(X, { className: f.root, checked: i, disabled: e, onCheckedChange: l, id: a, onKeyDown: _, ...s, children: /* @__PURE__ */ d(Y, { className: f.thumb }) }),
-    n === "right" && /* @__PURE__ */ d("label", { className: f.label, htmlFor: a, children: r })
+  return /* @__PURE__ */ T("div", { className: L(w.wrapper, c && w.disabled, s), children: [
+    a === "left" && /* @__PURE__ */ i("label", { className: w.label, htmlFor: l, children: e }),
+    /* @__PURE__ */ i(B, { className: w.root, checked: u, disabled: c, onCheckedChange: d, id: l, onKeyDown: p, ...n, children: /* @__PURE__ */ i(M, { className: w.thumb }) }),
+    a === "right" && /* @__PURE__ */ i("label", { className: w.label, htmlFor: l, children: e })
   ] });
 }
 export {
-  ae as default
+  ue as default
 };

package/dist/components/Toggle/Toggle.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { d, i as n, r as g, g as t, s as l, v as b, f as r } from "../../vi.bdSIJ99Y-017e_Pkz.js";
+import { d, i as n, r as g, g as t, s as l, v as b, f as r } from "../../vi.bdSIJ99Y-DWCVXj6K.js";
 import a from "./Toggle.js";
 d("Toggle", () => {
   d("Rendering", () => {

package/dist/components/Tooltip/Tooltip.d.ts

@@ -33,4 +33,4 @@ export type TooltipProps = {
  * @param {() => void} [props.onClose] - Callback fired when the tooltip is closed (only available for 'md' size)
  * @returns {JSX.Element} The rendered Tooltip component
  */
-export default function Tooltip({ children, content, disabled, size, theme, tipSide, tipAlignment, keepVisible, startVisible, onClose, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export default function Tooltip({ children, content, disabled, size, theme, tipSide, tipAlignment, keepVisible, startVisible, onClose, className, }: TooltipProps): import("react").JSX.Element;