@likec4/diagram 1.17.1 → 1.19.0

package/dist/controls/action-button-bar/ActionButtonBar.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mantine/core";
+import { useId } from "@mantine/hooks";
+import clsx from "clsx";
+import "framer-motion";
+import { container } from "./ActionButtonBar.css.js";
+import { ActionButtonBarContext } from "./useActionButtonBarCtx.js";
+const TRANSLATE_DIFF = 5;
+const elementVariants = (prefix, index, count, shiftX, shiftY) => {
+  const name = `${prefix}${index + 1}`;
+  const translation = count > 1 ? {
+    x: shiftX === "spread" ? 1 - count + index * 2 : shiftX,
+    y: shiftY === "spread" ? 1 - count + index * 2 : shiftY
+  } : {
+    x: 0,
+    y: 1
+  };
+  const variants = {
+    idle: {
+      "--icon-scale": "scale(1)",
+      "--ai-bg": "var(--ai-bg-idle)",
+      scale: 1,
+      opacity: 0.8,
+      translateX: 0,
+      translateY: 0,
+      originX: 0.5,
+      originY: 0.5
+      // translateY: 0,
+      // ...align === 'left' && {
+      //   originX: 0.75,
+      //   translateX: -1
+      // },
+      // ...align === 'right' && {
+      //   originX: 0.25,
+      //   translateX: 1
+      // }
+    },
+    hovered: {
+      "--ai-bg": "var(--ai-bg-hover)",
+      "--icon-scale": "scale(1)",
+      // translateY: 3,
+      scale: 1.28,
+      opacity: 1,
+      translateX: translation.x * TRANSLATE_DIFF,
+      translateY: translation.y * TRANSLATE_DIFF
+      // ...align === 'left' && {
+      //   translateX: -4
+      // },
+      // ...align === 'right' && {
+      //   translateX: 4
+      // }
+    },
+    [`hovered:${name}`]: {
+      "--ai-bg": "var(--ai-hover)",
+      "--icon-scale": "scale(1.08)",
+      scale: 1.45
+    },
+    [`tap:${name}`]: {
+      "--icon-scale": "scale(1)",
+      scale: 1.15
+    },
+    selected: {}
+  };
+  variants["selected"] = variants["hovered"];
+  variants["hovered:details"] = variants["idle"];
+  return {
+    variants,
+    ["data-animate-target"]: name
+  };
+};
+const ActionButtonBar = ({
+  shiftX = "spread",
+  shiftY = "spread",
+  children
+}) => {
+  const id = useId();
+  const childrenArray = Array.isArray(children) ? children : [children];
+  let shiftDiffX = "spread";
+  if (shiftX == "left") {
+    shiftDiffX = -1;
+  } else if (shiftX == "right") {
+    shiftDiffX = 1;
+  }
+  let shiftDiffY = "spread";
+  if (shiftY == "top") {
+    shiftDiffY = -1;
+  } else if (shiftY == "bottom") {
+    shiftDiffY = 1;
+  }
+  return /* @__PURE__ */ jsx(Box, { className: clsx(container), children: childrenArray.map((child, i, all) => /* @__PURE__ */ jsx(
+    ActionButtonBarContext.Provider,
+    {
+      value: elementVariants(id, i, all.length, shiftDiffX, shiftDiffY),
+      children: child
+    }
+  )) });
+};
+export {
+  ActionButtonBar
+};

package/dist/controls/action-button-bar/useActionButtonBarCtx.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from 'framer-motion';
+import { Context } from 'react';
+export declare const ActionButtonBarContext: Context<{
+    variants: Variants;
+    "data-animate-target"?: string;
+} | null>;
+export declare function useActionButtonBarCtx(): {
+    variants: Variants;
+    "data-animate-target"?: string;
+} | null;

package/dist/controls/action-button-bar/useActionButtonBarCtx.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const ActionButtonBarContext = createContext(null);
+function useActionButtonBarCtx() {
+  return useContext(ActionButtonBarContext);
+}
+export {
+  ActionButtonBarContext,
+  useActionButtonBarCtx
+};

package/dist/controls/action-buttons/ActionButton.css.d.ts

@@ -0,0 +1 @@
+export declare const btn: string;

package/dist/controls/action-buttons/ActionButton.css.js

@@ -0,0 +1,5 @@
+/* empty css                                */
+var btn = "_1jdst3q0";
+export {
+  btn
+};

package/dist/controls/action-buttons/ActionButton.d.ts

@@ -0,0 +1,9 @@
+import { ActionIconProps } from '@mantine/core';
+import { HTMLMotionProps } from 'framer-motion';
+import { PropsWithoutRef } from 'react';
+export type ActionButtonProps = PropsWithoutRef<Omit<ActionIconProps & HTMLMotionProps<'div'>, 'onClick' | 'children'> & {
+    onClick: (e: React.MouseEvent) => void;
+    IconComponent: React.ComponentType<any>;
+    tooltipLabel?: string;
+}>;
+export declare const ActionButton: ({ onClick: action, IconComponent, tooltipLabel, ...props }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/action-buttons/ActionButton.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, ActionIcon } from "@mantine/core";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { stopPropagation } from "../../xyflow/utils.js";
+import { useActionButtonBarCtx } from "../action-button-bar/useActionButtonBarCtx.js";
+import { btn } from "./ActionButton.css.js";
+const variants = {
+  idle: {
+    "--icon-scale": "scale(1)",
+    "--ai-bg": "var(--ai-bg-idle)"
+  },
+  hovered: {
+    "--icon-scale": "scale(1)",
+    "--ai-bg": "var(--ai-bg-hover)"
+  },
+  selected: {}
+};
+variants["selected"] = variants["hovered"];
+const ActionButton = ({
+  onClick: action,
+  IconComponent,
+  tooltipLabel,
+  ...props
+}) => {
+  const ctx = useActionButtonBarCtx() ?? {
+    variants
+  };
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      fz: "xs",
+      color: "dark",
+      label: tooltipLabel ?? "",
+      disabled: !tooltipLabel,
+      withinPortal: false,
+      offset: 2,
+      openDelay: 600,
+      children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          component: m.div,
+          className: clsx("nodrag nopan", btn),
+          radius: "md",
+          role: "button",
+          onClick: action,
+          onDoubleClick: stopPropagation,
+          ...ctx,
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            IconComponent,
+            {
+              style: {
+                width: "70%",
+                transform: "var(--icon-scale)"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  ActionButton
+};

package/dist/controls/action-buttons/ActionButtons.d.ts

@@ -0,0 +1,12 @@
+import { Fqn } from '@likec4/core';
+import { ActionButtonProps } from './ActionButton';
+export type NodeActionButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
+    fqn: Fqn;
+};
+export declare const BrowseRelationshipsButton: ({ fqn, ...props }: NodeActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type NavigateToButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
+    xynodeId: string;
+};
+export declare const NavigateToButton: ({ xynodeId, ...props }: NavigateToButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OpenDetailsButton: ({ fqn, ...props }: NodeActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OpenSourceButton: ({ fqn, ...props }: NodeActionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/action-buttons/ActionButtons.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { IconTransform, IconZoomScan, IconId } from "@tabler/icons-react";
+import { useCallback } from "react";
+import { ActionButton } from "./ActionButton.js";
+import { useDiagramState, useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+const BrowseRelationshipsButton = ({
+  fqn,
+  ...props
+}) => {
+  const {
+    openOverlay
+  } = useDiagramState((s) => ({
+    openOverlay: s.openOverlay
+  }));
+  const onBrowseRelationships = useCallback((e) => {
+    e.stopPropagation();
+    openOverlay({ relationshipsOf: fqn });
+  }, [openOverlay, fqn]);
+  return /* @__PURE__ */ jsx(
+    ActionButton,
+    {
+      ...props,
+      onClick: onBrowseRelationships,
+      IconComponent: IconTransform,
+      tooltipLabel: "Browse relationships"
+    }
+  );
+};
+const NavigateToButton = ({
+  xynodeId,
+  ...props
+}) => {
+  const store = useDiagramStoreApi();
+  const onNavigateTo = useCallback((e) => {
+    e.stopPropagation();
+    store.getState().triggerOnNavigateTo(xynodeId, e);
+  }, [store, xynodeId]);
+  return /* @__PURE__ */ jsx(
+    ActionButton,
+    {
+      ...props,
+      onClick: onNavigateTo,
+      IconComponent: IconZoomScan,
+      tooltipLabel: "Open scoped view"
+    }
+  );
+};
+const VariantsDetailsBtn = {
+  idle: {
+    "--ai-bg": "var(--ai-bg-idle)",
+    scale: 1,
+    opacity: 0.5,
+    originX: 0.45,
+    originY: 0.55
+  },
+  selected: {},
+  hovered: {
+    scale: 1.2,
+    opacity: 0.7
+  },
+  "hovered:details": {
+    scale: 1.44,
+    opacity: 1
+  },
+  "tap:details": {
+    scale: 1.15
+  }
+};
+VariantsDetailsBtn["selected"] = VariantsDetailsBtn["hovered"];
+const OpenDetailsButton = ({
+  fqn,
+  ...props
+}) => {
+  const {
+    openOverlay
+  } = useDiagramState((s) => ({
+    openOverlay: s.openOverlay
+  }));
+  const onOpenDetails = useCallback((e) => {
+    e.stopPropagation();
+    openOverlay({ elementDetails: fqn });
+  }, [openOverlay, fqn]);
+  return /* @__PURE__ */ jsx(
+    ActionButton,
+    {
+      variants: VariantsDetailsBtn,
+      onClick: onOpenDetails,
+      IconComponent: IconId,
+      tooltipLabel: "Open details",
+      "data-animate-target": "details",
+      ...props
+    }
+  );
+};
+export {
+  BrowseRelationshipsButton,
+  NavigateToButton,
+  OpenDetailsButton
+};

package/dist/globals.css.d.ts

@@ -0,0 +1 @@
+export declare const rootClassName = "likec4-diagram-root";

package/dist/globals.css.js

@@ -0,0 +1,92 @@
+import "./node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Paper/Paper.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Popover/Popover.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Loader/Loader.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/CloseButton/CloseButton.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Group/Group.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Input/Input.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Flex/Flex.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/FloatingIndicator/FloatingIndicator.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Accordion/Accordion.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Affix/Affix.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Alert/Alert.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Text/Text.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Anchor/Anchor.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/AngleSlider/AngleSlider.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/AppShell/AppShell.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/AspectRatio/AspectRatio.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Combobox/Combobox.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/InlineInput/InlineInput.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Checkbox/CheckboxCard/CheckboxCard.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Checkbox/Checkbox.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Avatar/Avatar.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/BackgroundImage/BackgroundImage.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Badge/Badge.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Blockquote/Blockquote.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Breadcrumbs/Breadcrumbs.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Burger/Burger.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Button/Button.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Card/Card.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Center/Center.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Chip/Chip.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Code/Code.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/ColorSwatch/ColorSwatch.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/ColorPicker/ColorPicker.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/ColorInput/ColorInput.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Container/Container.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Dialog/Dialog.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Divider/Divider.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Drawer/Drawer.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Fieldset/Fieldset.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Grid/Grid.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Mark/Mark.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Image/Image.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Indicator/Indicator.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Kbd/Kbd.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/List/List.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/LoadingOverlay/LoadingOverlay.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Menu/Menu.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Modal/Modal.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Pill/Pill.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/PillsInput/PillsInput.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/NavLink/NavLink.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Notification/Notification.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/NumberInput/NumberInput.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Pagination/Pagination.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/PasswordInput/PasswordInput.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/PinInput/PinInput.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Progress/Progress.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Radio/RadioCard/RadioCard.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Radio/RadioIndicator/RadioIndicator.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Radio/Radio.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Rating/Rating.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Tooltip/Tooltip.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/RingProgress/RingProgress.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/SegmentedControl/SegmentedControl.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/SemiCircleProgress/SemiCircleProgress.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/SimpleGrid/SimpleGrid.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Skeleton/Skeleton.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Slider/Slider.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Spoiler/Spoiler.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Stack/Stack.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Stepper/Stepper.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Switch/Switch.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Table/Table.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Tabs/Tabs.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Title/Title.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/Tree/Tree.module.css.mjs.vanilla.css.js";
+import "./node_modules/@mantine/core/esm/components/TypographyStylesProvider/TypographyStylesProvider.module.css.mjs.vanilla.css.js";
+import "./theme-vars.css.ts.vanilla.css.js";
+/* empty css                           */
+var rootClassName = "likec4-diagram-root";
+export {
+  rootClassName
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useDiagramState';
+export * from './useMantinePortalProps';
+export * from './useSetState';
+export * from './useUpdateEffect';
+export * from './useXYFlow';

package/dist/hooks/useDiagramState.d.ts

@@ -0,0 +1,6 @@
+import { ViewId } from '@likec4/core';
+import { DiagramState, DiagramStoreApi } from '../state/diagramStore';
+export declare function useCurrentViewId(): ViewId;
+export declare function useDiagramState<StateSlice = unknown>(selector: (state: DiagramState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
+export declare function useDiagramStoreApi(): DiagramStoreApi;
+export type { DiagramState, DiagramStoreApi };

package/dist/hooks/useDiagramState.js

@@ -0,0 +1,27 @@
+import { shallowEqual } from "fast-equals";
+import { useContext } from "react";
+import { useStoreWithEqualityFn } from "zustand/traditional";
+import { DiagramContext } from "../state/DiagramContext.js";
+const selectViewId = (state) => state.view.id;
+function useCurrentViewId() {
+  return useDiagramState(selectViewId);
+}
+function useDiagramState(selector, equalityFn) {
+  const store = useContext(DiagramContext);
+  if (store === null) {
+    throw new Error("useDiagramStore could be used only inside DiagramContext");
+  }
+  return useStoreWithEqualityFn(store, selector, equalityFn ?? shallowEqual);
+}
+function useDiagramStoreApi() {
+  const store = useContext(DiagramContext);
+  if (store === null) {
+    throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
+  }
+  return store;
+}
+export {
+  useCurrentViewId,
+  useDiagramState,
+  useDiagramStoreApi
+};

package/dist/hooks/useMantinePortalProps.d.ts

@@ -0,0 +1,9 @@
+export declare function useMantinePortalProps(): {
+    portalProps: {
+        target: HTMLDivElement;
+    };
+    withinPortal: boolean;
+} | {
+    withinPortal: boolean;
+    portalProps?: never;
+};

package/dist/hooks/useMantinePortalProps.js

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import { useDiagramState } from "./useDiagramState.js";
+function useMantinePortalProps() {
+  const target = useDiagramState((s) => s.getContainer());
+  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
+}
+export {
+  useMantinePortalProps
+};

package/dist/hooks/useSetState.d.ts

@@ -0,0 +1,2 @@
+import { NonEmptyObject } from 'type-fest';
+export declare function useSetState<T extends object>(initialState: T | (() => T)): readonly [T, (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) => void];

package/dist/hooks/useSetState.js

@@ -0,0 +1,19 @@
+import { shallowEqual } from "fast-equals";
+import { useState, useCallback } from "react";
+function useSetState(initialState) {
+  const [state, _setState] = useState(initialState);
+  const setState = useCallback(
+    (statePartial) => _setState((current) => {
+      const next = {
+        ...current,
+        ...typeof statePartial === "function" ? statePartial(current) : statePartial
+      };
+      return shallowEqual(current, next) ? current : next;
+    }),
+    []
+  );
+  return [state, setState];
+}
+export {
+  useSetState
+};

package/dist/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,4 @@
+import { DependenciesComparator, EffectHook } from '@react-hookz/web';
+import { DependencyList, EffectCallback } from 'react';
+export declare const depsShallowEqual: DependenciesComparator;
+export declare function useUpdateEffect<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList>(callback: Callback, deps: Deps, equalityFn?: DependenciesComparator<Deps>, effectHook?: EffectHook<Callback, Deps>): void;

package/dist/hooks/useUpdateEffect.js

@@ -0,0 +1,32 @@
+import { useFirstMountState, useCustomCompareEffect } from "@react-hookz/web";
+import { shallowEqual } from "fast-equals";
+import "react";
+const noop = () => {
+};
+const depsShallowEqual = (d1, d2) => {
+  if (d1 === d2) {
+    return true;
+  }
+  if (d1.length !== d2.length) {
+    return false;
+  }
+  for (const [i, element] of d1.entries()) {
+    if (!shallowEqual(element, d2[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+function useUpdateEffect(callback, deps, equalityFn, effectHook) {
+  const isFirstMount = useFirstMountState();
+  useCustomCompareEffect(
+    isFirstMount ? noop : callback,
+    deps,
+    equalityFn ?? depsShallowEqual,
+    effectHook
+  );
+}
+export {
+  depsShallowEqual,
+  useUpdateEffect
+};