@bizapps/ui 1.4.2 → 1.5.0

package/dist/main.cjs

@@ -5143,6 +5143,8 @@ function AbilityProvider({ children, permissions }) {
   const [permissionSet, setPermissionSet] = react.useState(
     () => new Set(permissions ?? [])
   );
+  const [imperativelyResolved, setImperativelyResolved] = react.useState(false);
+  const status = permissions !== void 0 || imperativelyResolved ? "ready" : "loading";
   const can = react.useCallback(
     (perms, mode = "any") => {
       const list = Array.isArray(perms) ? perms : [perms];
@@ -5157,21 +5159,23 @@ function AbilityProvider({ children, permissions }) {
   );
   const setAbilities = react.useCallback((perms) => {
     setPermissionSet(new Set(perms));
+    setImperativelyResolved(true);
   }, []);
   const clearAbilities = react.useCallback(() => {
     setPermissionSet(/* @__PURE__ */ new Set());
+    setImperativelyResolved(true);
   }, []);
-  const syncedKey = react.useRef(permissions ? permissions.join("|") : null);
+  const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
+  const syncedKey = react.useRef(permissionKey);
   react.useEffect(() => {
-    if (permissions === void 0) return;
-    const key = permissions.join("|");
-    if (key === syncedKey.current) return;
-    syncedKey.current = key;
+    if (permissionKey === null) return;
+    if (permissionKey === syncedKey.current) return;
+    syncedKey.current = permissionKey;
     setPermissionSet(new Set(permissions));
-  }, [permissions]);
+  }, [permissionKey, permissions]);
   const value = react.useMemo(
-    () => ({ can, setAbilities, clearAbilities }),
-    [can, setAbilities, clearAbilities]
+    () => ({ can, setAbilities, clearAbilities, status }),
+    [can, setAbilities, clearAbilities, status]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AbilityContext.Provider, { value, children });
 }
@@ -5186,18 +5190,173 @@ function useCan(permissions, mode = "any") {
   const { can } = useAbility();
   return can(permissions, mode);
 }
-function Can({ permission, mode = "any", negate = false, fallback = null, children }) {
-  const { can } = useAbility();
-  const hasPermission = can(permission, mode);
+function useAbilityStatus() {
+  return useAbility().status;
+}
+
+// src/components/authorization/permissions.generated.ts
+var KNOWN_PERMISSIONS = [];
+
+// src/components/authorization/permission-catalog.ts
+var CATALOG = new Set(KNOWN_PERMISSIONS);
+var warned = /* @__PURE__ */ new Set();
+function warnUnknownPermission(permission) {
+  if (process.env.NODE_ENV === "production") return;
+  if (CATALOG.size === 0) return;
+  const requested = Array.isArray(permission) ? permission : [permission];
+  for (const entry of requested) {
+    if (entry.includes("*")) continue;
+    if (CATALOG.has(entry) || warned.has(entry)) continue;
+    warned.add(entry);
+    console.warn(
+      `[Can] Unknown permission "${entry}". It is not in the generated permission catalog. Check for a typo, or regenerate the catalog with \`pnpm generate-permissions\`.`
+    );
+  }
+}
+var FOCUS_TRAVERSAL_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape"]);
+function blockInteraction(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function blockNonTraversalKey(event) {
+  if (!FOCUS_TRAVERSAL_KEYS.has(event.key)) blockInteraction(event);
+}
+var warnedRenderPropMisuse = /* @__PURE__ */ new Set();
+function warnRenderPropVoidsProps(voided) {
+  if (process.env.NODE_ENV === "production") return;
+  if (voided.length === 0) return;
+  const key = voided.join(",");
+  if (warnedRenderPropMisuse.has(key)) return;
+  warnedRenderPropMisuse.add(key);
+  console.warn(
+    `[Can] \`children\` is a function, so ${voided.map((prop) => `\`${prop}\``).join(", ")} ${voided.length === 1 ? "is" : "are"} ignored. A render prop owns every state: read \`allowed\` and \`status\` and render the disabled, loading and denied cases yourself, or pass an element instead of a function.`
+  );
+}
+function disableElement(child) {
+  return react.cloneElement(child, {
+    "aria-disabled": "true",
+    className: cn(child.props.className, "cursor-not-allowed opacity-50"),
+    onClickCapture: blockInteraction,
+    onKeyDownCapture: blockNonTraversalKey,
+    onKeyUpCapture: blockNonTraversalKey,
+    onPointerDownCapture: blockInteraction,
+    onMouseDownCapture: blockInteraction
+  });
+}
+function InteractionFirewall({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "can-blocked",
+      className: "contents",
+      onClickCapture: blockInteraction,
+      onPointerDownCapture: blockInteraction,
+      onMouseDownCapture: blockInteraction,
+      onKeyDownCapture: blockNonTraversalKey,
+      onKeyUpCapture: blockNonTraversalKey,
+      children
+    }
+  );
+}
+function DisabledSubtree({
+  children,
+  className,
+  ...props
+}) {
+  const { "data-slot": _incomingDataSlot, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "can-disabled",
+      "aria-disabled": "true",
+      className: cn(
+        "inline-flex cursor-not-allowed opacity-50",
+        "*:pointer-events-none",
+        className
+      ),
+      onClickCapture: blockInteraction,
+      onPointerDownCapture: blockInteraction,
+      onMouseDownCapture: blockInteraction,
+      onKeyDownCapture: blockNonTraversalKey,
+      onKeyUpCapture: blockNonTraversalKey,
+      ...restProps,
+      children
+    }
+  );
+}
+function Can({
+  permission,
+  mode = "any",
+  negate = false,
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  warnUnknownPermission(permission);
+  const { can, status } = useAbility();
+  const hasPermission = status === "ready" && can(permission, mode);
   const show = negate ? !hasPermission : hasPermission;
   if (typeof children === "function") {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(show) });
+    warnRenderPropVoidsProps([
+      ...behavior === "disable" ? ["behavior='disable'"] : [],
+      ...reason !== null ? ["reason"] : [],
+      ...fallback !== null ? ["fallback"] : [],
+      ...loading !== void 0 ? ["loading"] : []
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ allowed: show, status }) });
   }
-  return show ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+  if (status === "loading" && loading !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loading });
+  }
+  if (show) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  if (behavior === "disable") {
+    if (react.isValidElement(children) && children.type !== react.Fragment) {
+      const disabledChild = disableElement(children);
+      if (reason === null) {
+        return /* @__PURE__ */ jsxRuntime.jsx(InteractionFirewall, { children: disabledChild });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InteractionFirewall, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: disabledChild }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: reason })
+      ] });
+    }
+    if (reason === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DisabledSubtree, { children });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DisabledSubtree, { children }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: reason })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
 }
 Can.displayName = "Can";
-function CanNot({ permission, mode = "any", fallback = null, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Can, { permission, mode, negate: true, fallback, children });
+function CanNot({
+  permission,
+  mode = "any",
+  behavior = "hide",
+  reason = null,
+  fallback = null,
+  loading,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Can,
+    {
+      permission,
+      mode,
+      negate: true,
+      behavior,
+      reason,
+      fallback,
+      loading,
+      children
+    }
+  );
 }
 CanNot.displayName = "CanNot";
 function useMediaQuery(query) {
@@ -9367,6 +9526,7 @@ exports.ItemHeader = ItemHeader;
 exports.ItemMedia = ItemMedia;
 exports.ItemSeparator = ItemSeparator;
 exports.ItemTitle = ItemTitle;
+exports.KNOWN_PERMISSIONS = KNOWN_PERMISSIONS;
 exports.Label = Label;
 exports.Link = Link;
 exports.Logo = Logo;
@@ -9527,6 +9687,7 @@ exports.toggleVariants = toggleVariants;
 exports.tooltipContentVariants = tooltipContentVariants;
 exports.transition = transition;
 exports.useAbility = useAbility;
+exports.useAbilityStatus = useAbilityStatus;
 exports.useAppForm = useAppForm;
 exports.useCan = useCan;
 exports.useCarousel = useCarousel;