@puzzle-ui/ui 0.4.0 → 0.5.1

package/dist/components/overlays/context-menu/context-menu.types.d.cts

@@ -0,0 +1,69 @@
+import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, MouseEvent, ReactNode, Ref } from "react";
+export type ContextMenuItemVariant = "default" | "danger";
+export type ContextMenuCheckedState = boolean | "indeterminate";
+export type ContextMenuProps = {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+export type ContextMenuTriggerProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+  children: ReactNode;
+  asChild?: boolean;
+  disabled?: boolean;
+  ref?: Ref<HTMLElement>;
+};
+export type ContextMenuContentProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  maxHeight?: CSSProperties["maxHeight"];
+};
+export type ContextMenuItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  textValue?: string;
+  closeOnSelect?: boolean;
+  variant?: ContextMenuItemVariant;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type ContextMenuGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type ContextMenuLabelProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type ContextMenuSeparatorProps = HTMLAttributes<HTMLDivElement>;
+export type ContextMenuCheckboxItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  checked?: ContextMenuCheckedState;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type ContextMenuRadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+export type ContextMenuRadioItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  value: string;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type ContextMenuSubProps = {
+  children: ReactNode;
+  defaultOpen?: boolean;
+};
+export type ContextMenuSubTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  children: ReactNode;
+};
+export type ContextMenuSubContentProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  maxHeight?: CSSProperties["maxHeight"];
+};

package/dist/components/overlays/context-menu/context-menu.types.d.ts

@@ -0,0 +1,69 @@
+import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, MouseEvent, ReactNode, Ref } from "react";
+export type ContextMenuItemVariant = "default" | "danger";
+export type ContextMenuCheckedState = boolean | "indeterminate";
+export type ContextMenuProps = {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+export type ContextMenuTriggerProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+  children: ReactNode;
+  asChild?: boolean;
+  disabled?: boolean;
+  ref?: Ref<HTMLElement>;
+};
+export type ContextMenuContentProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  maxHeight?: CSSProperties["maxHeight"];
+};
+export type ContextMenuItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  textValue?: string;
+  closeOnSelect?: boolean;
+  variant?: ContextMenuItemVariant;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type ContextMenuGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type ContextMenuLabelProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+};
+export type ContextMenuSeparatorProps = HTMLAttributes<HTMLDivElement>;
+export type ContextMenuCheckboxItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  checked?: ContextMenuCheckedState;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type ContextMenuRadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+export type ContextMenuRadioItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onSelect"> & {
+  children: ReactNode;
+  value: string;
+  closeOnSelect?: boolean;
+  textValue?: string;
+  onSelect?: (event: MouseEvent<HTMLElement>) => void;
+};
+export type ContextMenuSubProps = {
+  children: ReactNode;
+  defaultOpen?: boolean;
+};
+export type ContextMenuSubTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  children: ReactNode;
+};
+export type ContextMenuSubContentProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  children: ReactNode;
+  maxHeight?: CSSProperties["maxHeight"];
+};

package/dist/components/overlays/context-menu/context-menu.utils.cjs

@@ -0,0 +1,46 @@
+// src/components/overlays/context-menu/context-menu.utils.ts
+const normalizeMenuText = (value) => value.normalize("NFKD").replace(/\p{Diacritic}/gu, "").trim().toLocaleLowerCase();
+const findNextMenuItemIndex = (items, currentIndex, direction, loop = true) => {
+	if (items.length === 0) return -1;
+	for (let step = 1; step <= items.length; step += 1) {
+		let index = currentIndex + step * direction;
+		if (loop) index = (index + items.length) % items.length;
+		else if (index < 0 || index >= items.length) return -1;
+		if (!items[index].disabled) return index;
+	}
+	return -1;
+};
+const findMenuItemIndexByText = (items, query, currentIndex = -1) => {
+	const normalizedQuery = normalizeMenuText(query);
+	if (!normalizedQuery || items.length === 0) return -1;
+	for (let step = 1; step <= items.length; step += 1) {
+		const index = (currentIndex + step + items.length) % items.length;
+		const item = items[index];
+		if (!item.disabled && normalizeMenuText(item.text ?? "").startsWith(normalizedQuery)) return index;
+	}
+	return -1;
+};
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const getEnabledMenuItems = (menu) => Array.from(menu.querySelectorAll("[data-puzzle-context-menu-item=\"true\"]")).filter((item) => item.getAttribute("aria-disabled") !== "true" && !("disabled" in item && Boolean(item.disabled)) && !item.hasAttribute("hidden") && !item.closest("[hidden], [inert], [aria-hidden='true']"));
+const focusElement = (element) => {
+	if (!element) return;
+	try {
+		element.focus({ preventScroll: true });
+	} catch {
+		element.focus();
+	}
+	element.scrollIntoView?.({ block: "nearest" });
+};
+const getMenuItemText = (item) => item.dataset.textValue ?? item.querySelector(".puzzle-context-menu__item-label")?.textContent ?? item.textContent ?? "";
+exports.findMenuItemIndexByText = findMenuItemIndexByText;
+exports.findNextMenuItemIndex = findNextMenuItemIndex;
+exports.focusElement = focusElement;
+exports.getEnabledMenuItems = getEnabledMenuItems;
+exports.getMenuItemText = getMenuItemText;
+exports.normalizeMenuText = normalizeMenuText;
+exports.setRef = setRef;
+
+//# sourceMappingURL=context-menu.utils.cjs.map

package/dist/components/overlays/context-menu/context-menu.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.utils.cjs","names":[],"sources":["../../../../src/components/overlays/context-menu/context-menu.utils.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nexport type MenuItemLike = {\n  disabled?: boolean;\n  text?: string;\n};\n\nconst normalizeMenuText = (value: string): string =>\n  value\n    .normalize(\"NFKD\")\n    .replace(/\\p{Diacritic}/gu, \"\")\n    .trim()\n    .toLocaleLowerCase();\n\nconst findNextMenuItemIndex = <T extends MenuItemLike>(\n  items: readonly T[],\n  currentIndex: number,\n  direction: -1 | 1,\n  loop = true,\n): number => {\n  if (items.length === 0) {\n    return -1;\n  }\n\n  for (let step = 1; step <= items.length; step += 1) {\n    let index = currentIndex + step * direction;\n\n    if (loop) {\n      index = (index + items.length) % items.length;\n    } else if (index < 0 || index >= items.length) {\n      return -1;\n    }\n\n    if (!items[index]!.disabled) {\n      return index;\n    }\n  }\n\n  return -1;\n};\n\nconst findMenuItemIndexByText = <T extends MenuItemLike>(\n  items: readonly T[],\n  query: string,\n  currentIndex = -1,\n): number => {\n  const normalizedQuery = normalizeMenuText(query);\n\n  if (!normalizedQuery || items.length === 0) {\n    return -1;\n  }\n\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (currentIndex + step + items.length) % items.length;\n    const item = items[index]!;\n\n    if (\n      !item.disabled &&\n      normalizeMenuText(item.text ?? \"\").startsWith(normalizedQuery)\n    ) {\n      return index;\n    }\n  }\n\n  return -1;\n};\n\nconst setRef = <T>(ref: Ref<T> | undefined, value: T | null): void => {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    (ref as MutableRefObject<T | null>).current = value;\n  }\n};\n\nconst getEnabledMenuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(\n    menu.querySelectorAll<HTMLElement>(\n      '[data-puzzle-context-menu-item=\"true\"]',\n    ),\n  ).filter(\n    (item) =>\n      item.getAttribute(\"aria-disabled\") !== \"true\" &&\n      !(\"disabled\" in item && Boolean((item as HTMLButtonElement).disabled)) &&\n      !item.hasAttribute(\"hidden\") &&\n      !item.closest(\"[hidden], [inert], [aria-hidden='true']\"),\n  );\n\nconst focusElement = (element: HTMLElement | undefined): void => {\n  if (!element) {\n    return;\n  }\n\n  try {\n    element.focus({ preventScroll: true });\n  } catch {\n    element.focus();\n  }\n\n  element.scrollIntoView?.({ block: \"nearest\" });\n};\n\nconst getMenuItemText = (item: HTMLElement): string =>\n  item.dataset.textValue ??\n  item.querySelector(\".puzzle-context-menu__item-label\")?.textContent ??\n  item.textContent ??\n  \"\";\n\nexport {\n  findMenuItemIndexByText,\n  findNextMenuItemIndex,\n  focusElement,\n  getEnabledMenuItems,\n  getMenuItemText,\n  normalizeMenuText,\n  setRef,\n};\n"],"mappings":";AAOA,MAAM,qBAAqB,UACzB,MACG,UAAU,MAAM,CAAC,CACjB,QAAQ,mBAAmB,EAAE,CAAC,CAC9B,KAAK,CAAC,CACN,kBAAkB;AAEvB,MAAM,yBACJ,OACA,cACA,WACA,OAAO,SACI;CACX,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,IAAI,QAAQ,eAAe,OAAO;EAElC,IAAI,MACF,SAAS,QAAQ,MAAM,UAAU,MAAM;OAClC,IAAI,QAAQ,KAAK,SAAS,MAAM,QACrC,OAAO;EAGT,IAAI,CAAC,MAAM,MAAM,CAAE,UACjB,OAAO;CAEX;CAEA,OAAO;AACT;AAEA,MAAM,2BACJ,OACA,OACA,eAAe,OACJ;CACX,MAAM,kBAAkB,kBAAkB,KAAK;CAE/C,IAAI,CAAC,mBAAmB,MAAM,WAAW,GACvC,OAAO;CAGT,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,MAAM,SAAS,eAAe,OAAO,MAAM,UAAU,MAAM;EAC3D,MAAM,OAAO,MAAM;EAEnB,IACE,CAAC,KAAK,YACN,kBAAkB,KAAK,QAAQ,EAAE,CAAC,CAAC,WAAW,eAAe,GAE7D,OAAO;CAEX;CAEA,OAAO;AACT;AAEA,MAAM,UAAa,KAAyB,UAA0B;CACpE,IAAI,OAAO,QAAQ,YACjB,IAAI,KAAK;MACJ,IAAI,KACT,IAAoC,UAAU;AAElD;AAEA,MAAM,uBAAuB,SAC3B,MAAM,KACJ,KAAK,iBACH,0CACF,CACF,CAAC,CAAC,QACC,SACC,KAAK,aAAa,eAAe,MAAM,UACvC,EAAE,cAAc,QAAQ,QAAS,KAA2B,QAAQ,MACpE,CAAC,KAAK,aAAa,QAAQ,KAC3B,CAAC,KAAK,QAAQ,yCAAyC,CAC3D;AAEF,MAAM,gBAAgB,YAA2C;CAC/D,IAAI,CAAC,SACH;CAGF,IAAI;EACF,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;CACvC,QAAQ;EACN,QAAQ,MAAM;CAChB;CAEA,QAAQ,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAC/C;AAEA,MAAM,mBAAmB,SACvB,KAAK,QAAQ,aACb,KAAK,cAAc,kCAAkC,CAAC,EAAE,eACxD,KAAK,eACL"}

package/dist/components/overlays/context-menu/context-menu.utils.js

@@ -0,0 +1,40 @@
+// src/components/overlays/context-menu/context-menu.utils.ts
+const normalizeMenuText = (value) => value.normalize("NFKD").replace(/\p{Diacritic}/gu, "").trim().toLocaleLowerCase();
+const findNextMenuItemIndex = (items, currentIndex, direction, loop = true) => {
+	if (items.length === 0) return -1;
+	for (let step = 1; step <= items.length; step += 1) {
+		let index = currentIndex + step * direction;
+		if (loop) index = (index + items.length) % items.length;
+		else if (index < 0 || index >= items.length) return -1;
+		if (!items[index].disabled) return index;
+	}
+	return -1;
+};
+const findMenuItemIndexByText = (items, query, currentIndex = -1) => {
+	const normalizedQuery = normalizeMenuText(query);
+	if (!normalizedQuery || items.length === 0) return -1;
+	for (let step = 1; step <= items.length; step += 1) {
+		const index = (currentIndex + step + items.length) % items.length;
+		const item = items[index];
+		if (!item.disabled && normalizeMenuText(item.text ?? "").startsWith(normalizedQuery)) return index;
+	}
+	return -1;
+};
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const getEnabledMenuItems = (menu) => Array.from(menu.querySelectorAll("[data-puzzle-context-menu-item=\"true\"]")).filter((item) => item.getAttribute("aria-disabled") !== "true" && !("disabled" in item && Boolean(item.disabled)) && !item.hasAttribute("hidden") && !item.closest("[hidden], [inert], [aria-hidden='true']"));
+const focusElement = (element) => {
+	if (!element) return;
+	try {
+		element.focus({ preventScroll: true });
+	} catch {
+		element.focus();
+	}
+	element.scrollIntoView?.({ block: "nearest" });
+};
+const getMenuItemText = (item) => item.dataset.textValue ?? item.querySelector(".puzzle-context-menu__item-label")?.textContent ?? item.textContent ?? "";
+export { findMenuItemIndexByText, findNextMenuItemIndex, focusElement, getEnabledMenuItems, getMenuItemText, normalizeMenuText, setRef };
+
+//# sourceMappingURL=context-menu.utils.js.map

package/dist/components/overlays/context-menu/context-menu.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.utils.js","names":[],"sources":["../../../../src/components/overlays/context-menu/context-menu.utils.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nexport type MenuItemLike = {\n  disabled?: boolean;\n  text?: string;\n};\n\nconst normalizeMenuText = (value: string): string =>\n  value\n    .normalize(\"NFKD\")\n    .replace(/\\p{Diacritic}/gu, \"\")\n    .trim()\n    .toLocaleLowerCase();\n\nconst findNextMenuItemIndex = <T extends MenuItemLike>(\n  items: readonly T[],\n  currentIndex: number,\n  direction: -1 | 1,\n  loop = true,\n): number => {\n  if (items.length === 0) {\n    return -1;\n  }\n\n  for (let step = 1; step <= items.length; step += 1) {\n    let index = currentIndex + step * direction;\n\n    if (loop) {\n      index = (index + items.length) % items.length;\n    } else if (index < 0 || index >= items.length) {\n      return -1;\n    }\n\n    if (!items[index]!.disabled) {\n      return index;\n    }\n  }\n\n  return -1;\n};\n\nconst findMenuItemIndexByText = <T extends MenuItemLike>(\n  items: readonly T[],\n  query: string,\n  currentIndex = -1,\n): number => {\n  const normalizedQuery = normalizeMenuText(query);\n\n  if (!normalizedQuery || items.length === 0) {\n    return -1;\n  }\n\n  for (let step = 1; step <= items.length; step += 1) {\n    const index = (currentIndex + step + items.length) % items.length;\n    const item = items[index]!;\n\n    if (\n      !item.disabled &&\n      normalizeMenuText(item.text ?? \"\").startsWith(normalizedQuery)\n    ) {\n      return index;\n    }\n  }\n\n  return -1;\n};\n\nconst setRef = <T>(ref: Ref<T> | undefined, value: T | null): void => {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    (ref as MutableRefObject<T | null>).current = value;\n  }\n};\n\nconst getEnabledMenuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(\n    menu.querySelectorAll<HTMLElement>(\n      '[data-puzzle-context-menu-item=\"true\"]',\n    ),\n  ).filter(\n    (item) =>\n      item.getAttribute(\"aria-disabled\") !== \"true\" &&\n      !(\"disabled\" in item && Boolean((item as HTMLButtonElement).disabled)) &&\n      !item.hasAttribute(\"hidden\") &&\n      !item.closest(\"[hidden], [inert], [aria-hidden='true']\"),\n  );\n\nconst focusElement = (element: HTMLElement | undefined): void => {\n  if (!element) {\n    return;\n  }\n\n  try {\n    element.focus({ preventScroll: true });\n  } catch {\n    element.focus();\n  }\n\n  element.scrollIntoView?.({ block: \"nearest\" });\n};\n\nconst getMenuItemText = (item: HTMLElement): string =>\n  item.dataset.textValue ??\n  item.querySelector(\".puzzle-context-menu__item-label\")?.textContent ??\n  item.textContent ??\n  \"\";\n\nexport {\n  findMenuItemIndexByText,\n  findNextMenuItemIndex,\n  focusElement,\n  getEnabledMenuItems,\n  getMenuItemText,\n  normalizeMenuText,\n  setRef,\n};\n"],"mappings":";AAOA,MAAM,qBAAqB,UACzB,MACG,UAAU,MAAM,CAAC,CACjB,QAAQ,mBAAmB,EAAE,CAAC,CAC9B,KAAK,CAAC,CACN,kBAAkB;AAEvB,MAAM,yBACJ,OACA,cACA,WACA,OAAO,SACI;CACX,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,IAAI,QAAQ,eAAe,OAAO;EAElC,IAAI,MACF,SAAS,QAAQ,MAAM,UAAU,MAAM;OAClC,IAAI,QAAQ,KAAK,SAAS,MAAM,QACrC,OAAO;EAGT,IAAI,CAAC,MAAM,MAAM,CAAE,UACjB,OAAO;CAEX;CAEA,OAAO;AACT;AAEA,MAAM,2BACJ,OACA,OACA,eAAe,OACJ;CACX,MAAM,kBAAkB,kBAAkB,KAAK;CAE/C,IAAI,CAAC,mBAAmB,MAAM,WAAW,GACvC,OAAO;CAGT,KAAK,IAAI,OAAO,GAAG,QAAQ,MAAM,QAAQ,QAAQ,GAAG;EAClD,MAAM,SAAS,eAAe,OAAO,MAAM,UAAU,MAAM;EAC3D,MAAM,OAAO,MAAM;EAEnB,IACE,CAAC,KAAK,YACN,kBAAkB,KAAK,QAAQ,EAAE,CAAC,CAAC,WAAW,eAAe,GAE7D,OAAO;CAEX;CAEA,OAAO;AACT;AAEA,MAAM,UAAa,KAAyB,UAA0B;CACpE,IAAI,OAAO,QAAQ,YACjB,IAAI,KAAK;MACJ,IAAI,KACT,IAAoC,UAAU;AAElD;AAEA,MAAM,uBAAuB,SAC3B,MAAM,KACJ,KAAK,iBACH,0CACF,CACF,CAAC,CAAC,QACC,SACC,KAAK,aAAa,eAAe,MAAM,UACvC,EAAE,cAAc,QAAQ,QAAS,KAA2B,QAAQ,MACpE,CAAC,KAAK,aAAa,QAAQ,KAC3B,CAAC,KAAK,QAAQ,yCAAyC,CAC3D;AAEF,MAAM,gBAAgB,YAA2C;CAC/D,IAAI,CAAC,SACH;CAGF,IAAI;EACF,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;CACvC,QAAQ;EACN,QAAQ,MAAM;CAChB;CAEA,QAAQ,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAC/C;AAEA,MAAM,mBAAmB,SACvB,KAAK,QAAQ,aACb,KAAK,cAAc,kCAAkC,CAAC,EAAE,eACxD,KAAK,eACL"}