@mantine/core 9.1.0 → 9.2.0

package/esm/components/Tree/use-tree-node-drag-drop.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tree-node-drag-drop.mjs","names":[],"sources":["../../../src/components/Tree/use-tree-node-drag-drop.ts"],"sourcesContent":["import { findTreeNode } from './get-children-nodes-values/get-children-nodes-values';\nimport type { TreeDragDropPayload, TreeDragDropPosition } from './move-tree-node/move-tree-node';\nimport type { TreeDragState, TreeNodeData } from './Tree';\n\ninterface UseTreeNodeDragDropInput {\n  nodeValue: string;\n  hasChildren: boolean;\n  data: TreeNodeData[];\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n}\n\nfunction isDescendantOf(\n  data: TreeNodeData[],\n  ancestorValue: string,\n  descendantValue: string\n): boolean {\n  const ancestor = findTreeNode(ancestorValue, data);\n  if (!ancestor || !ancestor.children) {\n    return false;\n  }\n\n  function check(nodes: TreeNodeData[]): boolean {\n    for (const node of nodes) {\n      if (node.value === descendantValue) {\n        return true;\n      }\n\n      if (node.children && check(node.children)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  return check(ancestor.children);\n}\n\nfunction getDragDropPosition(\n  event: React.DragEvent,\n  element: HTMLElement,\n  hasChildren: boolean\n): TreeDragDropPosition {\n  const rect = element.getBoundingClientRect();\n  const y = event.clientY - rect.top;\n  const height = rect.height;\n\n  if (hasChildren) {\n    if (y < height * 0.25) {\n      return 'before';\n    }\n\n    if (y > height * 0.75) {\n      return 'after';\n    }\n\n    return 'inside';\n  }\n\n  if (y < height * 0.5) {\n    return 'before';\n  }\n\n  return 'after';\n}\n\nconst EMPTY_DRAG_PROPS: Record<string, never> = {};\n\nexport function useTreeNodeDragDrop({\n  nodeValue,\n  hasChildren,\n  data,\n  onDragDrop,\n  dragStateRef,\n}: UseTreeNodeDragDropInput) {\n  if (!onDragDrop) {\n    return EMPTY_DRAG_PROPS;\n  }\n\n  const handleDragStart = (event: React.DragEvent) => {\n    event.stopPropagation();\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setData('text/plain', nodeValue);\n    dragStateRef.current.draggedValue = nodeValue;\n\n    const target = event.currentTarget as HTMLElement;\n    requestAnimationFrame(() => {\n      target.setAttribute('data-dragging', 'true');\n    });\n  };\n\n  const handleDragOver = (event: React.DragEvent) => {\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (!draggedValue || draggedValue === nodeValue) {\n      return;\n    }\n\n    if (isDescendantOf(data, draggedValue, nodeValue)) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    event.dataTransfer.dropEffect = 'move';\n\n    const target = event.currentTarget as HTMLElement;\n    const position = getDragDropPosition(event, target, hasChildren);\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget && prevTarget !== target) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    target.setAttribute('data-drag-over', position);\n    dragStateRef.current.currentDropTarget = target;\n  };\n\n  const handleDragLeave = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    const related = event.relatedTarget as HTMLElement | null;\n\n    if (related && target.contains(related)) {\n      return;\n    }\n\n    target.removeAttribute('data-drag-over');\n\n    if (dragStateRef.current.currentDropTarget === target) {\n      dragStateRef.current.currentDropTarget = null;\n    }\n  };\n\n  const handleDrop = (event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const target = event.currentTarget as HTMLElement;\n    const position = target.getAttribute('data-drag-over') as TreeDragDropPosition | null;\n    target.removeAttribute('data-drag-over');\n\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (draggedValue && position && draggedValue !== nodeValue) {\n      onDragDrop({ draggedNode: draggedValue, targetNode: nodeValue, position });\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n  };\n\n  const handleDragEnd = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    target.removeAttribute('data-dragging');\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n  };\n\n  return {\n    draggable: true as const,\n    onDragStart: handleDragStart,\n    onDragOver: handleDragOver,\n    onDragLeave: handleDragLeave,\n    onDrop: handleDrop,\n    onDragEnd: handleDragEnd,\n  };\n}\n"],"mappings":";;;AAYA,SAAS,eACP,MACA,eACA,iBACS;CACT,MAAM,WAAW,aAAa,eAAe,KAAK;AAClD,KAAI,CAAC,YAAY,CAAC,SAAS,SACzB,QAAO;CAGT,SAAS,MAAM,OAAgC;AAC7C,OAAK,MAAM,QAAQ,OAAO;AACxB,OAAI,KAAK,UAAU,gBACjB,QAAO;AAGT,OAAI,KAAK,YAAY,MAAM,KAAK,SAAS,CACvC,QAAO;;AAIX,SAAO;;AAGT,QAAO,MAAM,SAAS,SAAS;;AAGjC,SAAS,oBACP,OACA,SACA,aACsB;CACtB,MAAM,OAAO,QAAQ,uBAAuB;CAC5C,MAAM,IAAI,MAAM,UAAU,KAAK;CAC/B,MAAM,SAAS,KAAK;AAEpB,KAAI,aAAa;AACf,MAAI,IAAI,SAAS,IACf,QAAO;AAGT,MAAI,IAAI,SAAS,IACf,QAAO;AAGT,SAAO;;AAGT,KAAI,IAAI,SAAS,GACf,QAAO;AAGT,QAAO;;AAGT,MAAM,mBAA0C,EAAE;AAElD,SAAgB,oBAAoB,EAClC,WACA,aACA,MACA,YACA,gBAC2B;AAC3B,KAAI,CAAC,WACH,QAAO;CAGT,MAAM,mBAAmB,UAA2B;AAClD,QAAM,iBAAiB;AACvB,QAAM,aAAa,gBAAgB;AACnC,QAAM,aAAa,QAAQ,cAAc,UAAU;AACnD,eAAa,QAAQ,eAAe;EAEpC,MAAM,SAAS,MAAM;AACrB,8BAA4B;AAC1B,UAAO,aAAa,iBAAiB,OAAO;IAC5C;;CAGJ,MAAM,kBAAkB,UAA2B;EACjD,MAAM,eAAe,aAAa,QAAQ;AAC1C,MAAI,CAAC,gBAAgB,iBAAiB,UACpC;AAGF,MAAI,eAAe,MAAM,cAAc,UAAU,CAC/C;AAGF,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,QAAM,aAAa,aAAa;EAEhC,MAAM,SAAS,MAAM;EACrB,MAAM,WAAW,oBAAoB,OAAO,QAAQ,YAAY;EAEhE,MAAM,aAAa,aAAa,QAAQ;AACxC,MAAI,cAAc,eAAe,OAC/B,YAAW,gBAAgB,iBAAiB;AAG9C,SAAO,aAAa,kBAAkB,SAAS;AAC/C,eAAa,QAAQ,oBAAoB;;CAG3C,MAAM,mBAAmB,UAA2B;EAClD,MAAM,SAAS,MAAM;EACrB,MAAM,UAAU,MAAM;AAEtB,MAAI,WAAW,OAAO,SAAS,QAAQ,CACrC;AAGF,SAAO,gBAAgB,iBAAiB;AAExC,MAAI,aAAa,QAAQ,sBAAsB,OAC7C,cAAa,QAAQ,oBAAoB;;CAI7C,MAAM,cAAc,UAA2B;AAC7C,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;EAEvB,MAAM,SAAS,MAAM;EACrB,MAAM,WAAW,OAAO,aAAa,iBAAiB;AACtD,SAAO,gBAAgB,iBAAiB;EAExC,MAAM,eAAe,aAAa,QAAQ;AAC1C,MAAI,gBAAgB,YAAY,iBAAiB,UAC/C,YAAW;GAAE,aAAa;GAAc,YAAY;GAAW;GAAU,CAAC;AAG5E,eAAa,QAAQ,eAAe;AACpC,eAAa,QAAQ,oBAAoB;;CAG3C,MAAM,iBAAiB,UAA2B;AACjC,QAAM,cACd,gBAAgB,gBAAgB;EAEvC,MAAM,aAAa,aAAa,QAAQ;AACxC,MAAI,WACF,YAAW,gBAAgB,iBAAiB;AAG9C,eAAa,QAAQ,eAAe;AACpC,eAAa,QAAQ,oBAAoB;;AAG3C,QAAO;EACL,WAAW;EACX,aAAa;EACb,YAAY;EACZ,aAAa;EACb,QAAQ;EACR,WAAW;EACZ"}
+{"version":3,"file":"use-tree-node-drag-drop.mjs","names":[],"sources":["../../../src/components/Tree/use-tree-node-drag-drop.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { findTreeNode } from './get-children-nodes-values/get-children-nodes-values';\nimport type { TreeDragDropPayload, TreeDragDropPosition } from './move-tree-node/move-tree-node';\nimport type { TreeDragState, TreeNodeData } from './Tree';\n\nexport type TreeAllowDrop = (payload: TreeDragDropPayload) => boolean;\n\ninterface UseTreeNodeDragDropInput {\n  nodeValue: string;\n  hasChildren: boolean;\n  data: TreeNodeData[];\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  allowDrop: TreeAllowDrop | undefined;\n  withDragHandle: boolean | undefined;\n}\n\nexport interface TreeDragHandleProps {\n  onMouseDown: (event: React.MouseEvent) => void;\n}\n\nfunction isDescendantOf(\n  data: TreeNodeData[],\n  ancestorValue: string,\n  descendantValue: string\n): boolean {\n  const ancestor = findTreeNode(ancestorValue, data);\n  if (!ancestor || !ancestor.children) {\n    return false;\n  }\n\n  function check(nodes: TreeNodeData[]): boolean {\n    for (const node of nodes) {\n      if (node.value === descendantValue) {\n        return true;\n      }\n\n      if (node.children && check(node.children)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  return check(ancestor.children);\n}\n\nfunction getDragDropPosition(\n  event: React.DragEvent,\n  element: HTMLElement,\n  hasChildren: boolean\n): TreeDragDropPosition {\n  const rect = element.getBoundingClientRect();\n  const y = event.clientY - rect.top;\n  const height = rect.height;\n\n  if (hasChildren) {\n    if (y < height * 0.25) {\n      return 'before';\n    }\n\n    if (y > height * 0.75) {\n      return 'after';\n    }\n\n    return 'inside';\n  }\n\n  if (y < height * 0.5) {\n    return 'before';\n  }\n\n  return 'after';\n}\n\nconst EMPTY_DRAG_PROPS = { elementProps: {}, dragHandleProps: undefined } as const;\n\nexport function useTreeNodeDragDrop({\n  nodeValue,\n  hasChildren,\n  data,\n  onDragDrop,\n  dragStateRef,\n  allowDrop,\n  withDragHandle,\n}: UseTreeNodeDragDropInput) {\n  const [isDragHandleActive, setIsDragHandleActive] = useState(false);\n\n  useEffect(() => {\n    if (!withDragHandle || !isDragHandleActive) {\n      return undefined;\n    }\n\n    const handleWindowMouseUp = () => setIsDragHandleActive(false);\n    window.addEventListener('mouseup', handleWindowMouseUp);\n    return () => window.removeEventListener('mouseup', handleWindowMouseUp);\n  }, [withDragHandle, isDragHandleActive]);\n\n  if (!onDragDrop) {\n    return EMPTY_DRAG_PROPS;\n  }\n\n  const handleDragStart = (event: React.DragEvent) => {\n    if (withDragHandle && !isDragHandleActive) {\n      return;\n    }\n\n    event.stopPropagation();\n    event.dataTransfer.effectAllowed = 'move';\n    event.dataTransfer.setData('text/plain', nodeValue);\n    dragStateRef.current.draggedValue = nodeValue;\n\n    const target = event.currentTarget as HTMLElement;\n    requestAnimationFrame(() => {\n      target.setAttribute('data-dragging', 'true');\n    });\n  };\n\n  const handleDragOver = (event: React.DragEvent) => {\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (!draggedValue || draggedValue === nodeValue) {\n      return;\n    }\n\n    if (isDescendantOf(data, draggedValue, nodeValue)) {\n      return;\n    }\n\n    const target = event.currentTarget as HTMLElement;\n    const position = getDragDropPosition(event, target, hasChildren);\n\n    if (allowDrop && !allowDrop({ draggedNode: draggedValue, targetNode: nodeValue, position })) {\n      const prevTarget = dragStateRef.current.currentDropTarget;\n      if (prevTarget && prevTarget !== target) {\n        prevTarget.removeAttribute('data-drag-over');\n      }\n      target.removeAttribute('data-drag-over');\n      dragStateRef.current.currentDropTarget = null;\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n    event.dataTransfer.dropEffect = 'move';\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget && prevTarget !== target) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    target.setAttribute('data-drag-over', position);\n    dragStateRef.current.currentDropTarget = target;\n  };\n\n  const handleDragLeave = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    const related = event.relatedTarget as HTMLElement | null;\n\n    if (related && target.contains(related)) {\n      return;\n    }\n\n    target.removeAttribute('data-drag-over');\n\n    if (dragStateRef.current.currentDropTarget === target) {\n      dragStateRef.current.currentDropTarget = null;\n    }\n  };\n\n  const handleDrop = (event: React.DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const target = event.currentTarget as HTMLElement;\n    const position = target.getAttribute('data-drag-over') as TreeDragDropPosition | null;\n    target.removeAttribute('data-drag-over');\n\n    const draggedValue = dragStateRef.current.draggedValue;\n    if (draggedValue && position && draggedValue !== nodeValue) {\n      const payload = { draggedNode: draggedValue, targetNode: nodeValue, position };\n      if (!allowDrop || allowDrop(payload)) {\n        onDragDrop(payload);\n      }\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n  };\n\n  const handleDragEnd = (event: React.DragEvent) => {\n    const target = event.currentTarget as HTMLElement;\n    target.removeAttribute('data-dragging');\n\n    const prevTarget = dragStateRef.current.currentDropTarget;\n    if (prevTarget) {\n      prevTarget.removeAttribute('data-drag-over');\n    }\n\n    dragStateRef.current.draggedValue = null;\n    dragStateRef.current.currentDropTarget = null;\n\n    if (withDragHandle) {\n      setIsDragHandleActive(false);\n    }\n  };\n\n  const elementProps = {\n    draggable: withDragHandle ? isDragHandleActive : true,\n    onDragStart: handleDragStart,\n    onDragOver: handleDragOver,\n    onDragLeave: handleDragLeave,\n    onDrop: handleDrop,\n    onDragEnd: handleDragEnd,\n  };\n\n  const dragHandleProps: TreeDragHandleProps | undefined = withDragHandle\n    ? { onMouseDown: () => setIsDragHandleActive(true) }\n    : undefined;\n\n  return { elementProps, dragHandleProps };\n}\n"],"mappings":";;;;AAqBA,SAAS,eACP,MACA,eACA,iBACS;CACT,MAAM,WAAW,aAAa,eAAe,KAAK;AAClD,KAAI,CAAC,YAAY,CAAC,SAAS,SACzB,QAAO;CAGT,SAAS,MAAM,OAAgC;AAC7C,OAAK,MAAM,QAAQ,OAAO;AACxB,OAAI,KAAK,UAAU,gBACjB,QAAO;AAGT,OAAI,KAAK,YAAY,MAAM,KAAK,SAAS,CACvC,QAAO;;AAIX,SAAO;;AAGT,QAAO,MAAM,SAAS,SAAS;;AAGjC,SAAS,oBACP,OACA,SACA,aACsB;CACtB,MAAM,OAAO,QAAQ,uBAAuB;CAC5C,MAAM,IAAI,MAAM,UAAU,KAAK;CAC/B,MAAM,SAAS,KAAK;AAEpB,KAAI,aAAa;AACf,MAAI,IAAI,SAAS,IACf,QAAO;AAGT,MAAI,IAAI,SAAS,IACf,QAAO;AAGT,SAAO;;AAGT,KAAI,IAAI,SAAS,GACf,QAAO;AAGT,QAAO;;AAGT,MAAM,mBAAmB;CAAE,cAAc,EAAE;CAAE,iBAAiB,KAAA;CAAW;AAEzE,SAAgB,oBAAoB,EAClC,WACA,aACA,MACA,YACA,cACA,WACA,kBAC2B;CAC3B,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;AAEnE,iBAAgB;AACd,MAAI,CAAC,kBAAkB,CAAC,mBACtB;EAGF,MAAM,4BAA4B,sBAAsB,MAAM;AAC9D,SAAO,iBAAiB,WAAW,oBAAoB;AACvD,eAAa,OAAO,oBAAoB,WAAW,oBAAoB;IACtE,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,KAAI,CAAC,WACH,QAAO;CAGT,MAAM,mBAAmB,UAA2B;AAClD,MAAI,kBAAkB,CAAC,mBACrB;AAGF,QAAM,iBAAiB;AACvB,QAAM,aAAa,gBAAgB;AACnC,QAAM,aAAa,QAAQ,cAAc,UAAU;AACnD,eAAa,QAAQ,eAAe;EAEpC,MAAM,SAAS,MAAM;AACrB,8BAA4B;AAC1B,UAAO,aAAa,iBAAiB,OAAO;IAC5C;;CAGJ,MAAM,kBAAkB,UAA2B;EACjD,MAAM,eAAe,aAAa,QAAQ;AAC1C,MAAI,CAAC,gBAAgB,iBAAiB,UACpC;AAGF,MAAI,eAAe,MAAM,cAAc,UAAU,CAC/C;EAGF,MAAM,SAAS,MAAM;EACrB,MAAM,WAAW,oBAAoB,OAAO,QAAQ,YAAY;AAEhE,MAAI,aAAa,CAAC,UAAU;GAAE,aAAa;GAAc,YAAY;GAAW;GAAU,CAAC,EAAE;GAC3F,MAAM,aAAa,aAAa,QAAQ;AACxC,OAAI,cAAc,eAAe,OAC/B,YAAW,gBAAgB,iBAAiB;AAE9C,UAAO,gBAAgB,iBAAiB;AACxC,gBAAa,QAAQ,oBAAoB;AACzC;;AAGF,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,QAAM,aAAa,aAAa;EAEhC,MAAM,aAAa,aAAa,QAAQ;AACxC,MAAI,cAAc,eAAe,OAC/B,YAAW,gBAAgB,iBAAiB;AAG9C,SAAO,aAAa,kBAAkB,SAAS;AAC/C,eAAa,QAAQ,oBAAoB;;CAG3C,MAAM,mBAAmB,UAA2B;EAClD,MAAM,SAAS,MAAM;EACrB,MAAM,UAAU,MAAM;AAEtB,MAAI,WAAW,OAAO,SAAS,QAAQ,CACrC;AAGF,SAAO,gBAAgB,iBAAiB;AAExC,MAAI,aAAa,QAAQ,sBAAsB,OAC7C,cAAa,QAAQ,oBAAoB;;CAI7C,MAAM,cAAc,UAA2B;AAC7C,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;EAEvB,MAAM,SAAS,MAAM;EACrB,MAAM,WAAW,OAAO,aAAa,iBAAiB;AACtD,SAAO,gBAAgB,iBAAiB;EAExC,MAAM,eAAe,aAAa,QAAQ;AAC1C,MAAI,gBAAgB,YAAY,iBAAiB,WAAW;GAC1D,MAAM,UAAU;IAAE,aAAa;IAAc,YAAY;IAAW;IAAU;AAC9E,OAAI,CAAC,aAAa,UAAU,QAAQ,CAClC,YAAW,QAAQ;;AAIvB,eAAa,QAAQ,eAAe;AACpC,eAAa,QAAQ,oBAAoB;;CAG3C,MAAM,iBAAiB,UAA2B;AACjC,QAAM,cACd,gBAAgB,gBAAgB;EAEvC,MAAM,aAAa,aAAa,QAAQ;AACxC,MAAI,WACF,YAAW,gBAAgB,iBAAiB;AAG9C,eAAa,QAAQ,eAAe;AACpC,eAAa,QAAQ,oBAAoB;AAEzC,MAAI,eACF,uBAAsB,MAAM;;AAiBhC,QAAO;EAAE,cAbY;GACnB,WAAW,iBAAiB,qBAAqB;GACjD,aAAa;GACb,YAAY;GACZ,aAAa;GACb,QAAQ;GACR,WAAW;GACZ;EAMsB,iBAJkC,iBACrD,EAAE,mBAAmB,sBAAsB,KAAK,EAAE,GAClD,KAAA;EAEoC"}

package/esm/components/TreeSelect/TreeSelect.mjs

@@ -0,0 +1,600 @@
+"use client";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
+import { genericFactory } from "../../core/factory/factory.mjs";
+import { ScrollArea } from "../ScrollArea/ScrollArea.mjs";
+import { InputBase } from "../InputBase/InputBase.mjs";
+import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
+import { Combobox } from "../Combobox/Combobox.mjs";
+import { Pill } from "../Pill/Pill.mjs";
+import { PillsInput } from "../PillsInput/PillsInput.mjs";
+import { findTreeNode, getChildrenNodesValues } from "../Tree/get-children-nodes-values/get-children-nodes-values.mjs";
+import { isNodeChecked } from "../Tree/is-node-checked/is-node-checked.mjs";
+import { isNodeIndeterminate } from "../Tree/is-node-indeterminate/is-node-indeterminate.mjs";
+import { getTreeExpandedState } from "../Tree/use-tree.mjs";
+import { filterTreeData } from "../Tree/filter-tree-data/filter-tree-data.mjs";
+import { flattenTreeSelectData } from "./flatten-tree-select-data.mjs";
+import { checkedToValue, expandToLeafChecked } from "./get-checked-values-by-strategy.mjs";
+import TreeSelect_module_default from "./TreeSelect.module.mjs";
+import { TreeSelectOption } from "./TreeSelectOption.mjs";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/TreeSelect/TreeSelect.tsx
+const defaultProps = {
+	mode: "single",
+	allowDeselect: true,
+	checkedStrategy: "child",
+	maxValues: Infinity,
+	hiddenInputValuesDivider: ",",
+	clearSearchOnChange: true,
+	openOnFocus: true,
+	size: "sm",
+	withLines: true
+};
+const clearSectionOffset = {
+	xs: 41,
+	sm: 50,
+	md: 60,
+	lg: 72,
+	xl: 89
+};
+function getAncestorsToNode(value, nodes) {
+	for (const node of nodes) {
+		if (node.value === value) return [];
+		if (Array.isArray(node.children)) {
+			const path = getAncestorsToNode(value, node.children);
+			if (path !== null) return [node.value, ...path];
+		}
+	}
+	return null;
+}
+const TreeSelect = genericFactory((_props) => {
+	const props = useProps([
+		"Input",
+		"InputWrapper",
+		"TreeSelect"
+	], defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, size, data, mode, value, defaultValue, onChange, checkStrictly, checkedStrategy, defaultExpandedValues, defaultExpandAll, expandedValues, onExpandedChange, expandOnClick, searchable, searchValue, defaultSearchValue, onSearchChange, filter, nothingFoundMessage, allowDeselect, clearable, clearSectionMode, clearButtonProps, maxValues, maxDisplayedValues, maxDisplayedValuesContent, onRemove, onClear, renderNode, withLines, hiddenInputProps, hiddenInputValuesDivider, scrollAreaProps, chevronColor, maxDropdownHeight, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, clearSearchOnChange, openOnFocus, chevronAriaLabels, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, withErrorStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
+	const isMulti = mode === "multiple" || mode === "checkbox";
+	const isCheckbox = mode === "checkbox";
+	const _id = useId$1(id);
+	const combobox = useCombobox({
+		opened: dropdownOpened,
+		defaultOpened: defaultDropdownOpened,
+		onDropdownOpen: () => {
+			onDropdownOpen?.();
+			combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
+		},
+		onDropdownClose: () => {
+			onDropdownClose?.();
+			combobox.resetSelectedOption();
+		}
+	});
+	const initialExpanded = useMemo(() => {
+		if (defaultExpandAll) return getTreeExpandedState(data, "*");
+		if (defaultExpandedValues) return getTreeExpandedState(data, defaultExpandedValues);
+		return getTreeExpandedState(data, []);
+	}, []);
+	const [_expandedState, setExpandedState] = useUncontrolled({
+		value: useCallback((values) => {
+			if (!values) return;
+			return getTreeExpandedState(data, values);
+		}, [data])(expandedValues),
+		defaultValue: initialExpanded,
+		finalValue: {},
+		onChange: (val) => {
+			if (onExpandedChange) onExpandedChange(Object.entries(val).filter(([, v]) => v).map(([k]) => k));
+		}
+	});
+	const toggleExpand = useCallback((nodeValue) => {
+		setExpandedState({
+			..._expandedState,
+			[nodeValue]: !_expandedState[nodeValue]
+		});
+	}, [_expandedState]);
+	const [_searchValue, setSearchValue] = useUncontrolled({
+		value: searchValue,
+		defaultValue: defaultSearchValue,
+		finalValue: useMemo(() => {
+			if (mode !== "single" || !defaultValue) return "";
+			const node = findTreeNode(defaultValue, data);
+			return node ? typeof node.label === "string" ? node.label : "" : "";
+		}, []),
+		onChange: onSearchChange
+	});
+	const handleSearchChange = (val) => {
+		setSearchValue(val);
+		combobox.resetSelectedOption();
+	};
+	const [_value, setValue] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: isMulti ? [] : null,
+		onChange
+	});
+	const internalChecked = useMemo(() => {
+		if (!isCheckbox || !_value || !Array.isArray(_value)) return [];
+		if (checkStrictly) return _value;
+		return expandToLeafChecked(_value, data);
+	}, [
+		isCheckbox,
+		_value,
+		data,
+		checkStrictly
+	]);
+	const filteredData = useMemo(() => {
+		if (!searchable || !_searchValue) return data;
+		if (mode === "single" && _value) {
+			const node = findTreeNode(_value, data);
+			if (node && _searchValue === (typeof node.label === "string" ? node.label : "")) return data;
+		}
+		return filterTreeData(data, _searchValue, filter);
+	}, [
+		data,
+		_searchValue,
+		filter,
+		searchable,
+		mode,
+		_value
+	]);
+	const expandedForRender = useMemo(() => {
+		if (_searchValue && filteredData !== data) {
+			const expanded = { ..._expandedState };
+			const expandFilteredParents = (nodes) => {
+				for (const node of nodes) if (Array.isArray(node.children) && node.children.length > 0) {
+					expanded[node.value] = true;
+					expandFilteredParents(node.children);
+				}
+			};
+			expandFilteredParents(filteredData);
+			return expanded;
+		}
+		return _expandedState;
+	}, [
+		filteredData,
+		_expandedState,
+		_searchValue,
+		data
+	]);
+	const flatNodes = useMemo(() => flattenTreeSelectData(filteredData, expandedForRender), [filteredData, expandedForRender]);
+	const flatNodesRef = useRef(flatNodes);
+	flatNodesRef.current = flatNodes;
+	const nodeLookup = useMemo(() => {
+		const lookup = {};
+		const walk = (nodes) => {
+			for (const node of nodes) {
+				lookup[node.value] = node;
+				if (Array.isArray(node.children)) walk(node.children);
+			}
+		};
+		walk(data);
+		return lookup;
+	}, [data]);
+	const getNodeLabel = (nodeValue) => {
+		const node = nodeLookup[nodeValue];
+		if (!node) return nodeValue;
+		return typeof node.label === "string" ? node.label : nodeValue;
+	};
+	const getStyles = useStyles({
+		name: "TreeSelect",
+		classes: {},
+		props,
+		classNames,
+		styles,
+		unstyled,
+		attributes
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		props,
+		styles,
+		classNames
+	});
+	const { styleProps, rest: { type, autoComplete, ...rest } } = extractStyleProps(others);
+	const handleOptionSubmit = (val) => {
+		if (mode === "single") {
+			if (expandOnClick) {
+				const node = findTreeNode(val, data);
+				if (node && Array.isArray(node.children) && node.children.length > 0) {
+					toggleExpand(val);
+					return;
+				}
+			}
+			const nextValue = allowDeselect && val === _value ? null : val;
+			setValue(nextValue);
+			combobox.closeDropdown();
+			if (clearSearchOnChange) handleSearchChange(nextValue ? getNodeLabel(nextValue) : "");
+		} else if (mode === "multiple") {
+			if (expandOnClick) {
+				const node = findTreeNode(val, data);
+				if (node && Array.isArray(node.children) && node.children.length > 0) {
+					toggleExpand(val);
+					return;
+				}
+			}
+			const arr = _value || [];
+			if (arr.includes(val)) {
+				setValue(arr.filter((v) => v !== val));
+				onRemove?.(val);
+			} else if (arr.length < (maxValues ?? Infinity)) setValue([...arr, val]);
+			else return;
+			if (clearSearchOnChange) setSearchValue("");
+		} else if (mode === "checkbox") {
+			const nodeChecked = checkStrictly ? internalChecked.includes(val) : isNodeChecked(val, data, internalChecked);
+			let newInternalChecked;
+			if (checkStrictly) newInternalChecked = nodeChecked ? internalChecked.filter((v) => v !== val) : [...internalChecked, val];
+			else {
+				const childLeaves = getChildrenNodesValues(val, data);
+				if (nodeChecked) newInternalChecked = internalChecked.filter((v) => !childLeaves.includes(v));
+				else newInternalChecked = [...new Set([...internalChecked, ...childLeaves])];
+			}
+			const newValue = checkedToValue(newInternalChecked, data, checkedStrategy);
+			if (!nodeChecked && newValue.length > (maxValues ?? Infinity)) return;
+			setValue(newValue);
+			if (clearSearchOnChange) setSearchValue("");
+			if (expandOnClick) {
+				const node = findTreeNode(val, data);
+				if (node && Array.isArray(node.children) && node.children.length > 0) {
+					if (!_expandedState[val]) toggleExpand(val);
+				}
+			}
+		}
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === " " && !searchable && isMulti) {
+			event.preventDefault();
+			combobox.toggleDropdown();
+		}
+		if (event.key === "Backspace" && _searchValue.length === 0 && isMulti) {
+			const arr = _value || [];
+			if (arr.length > 0) {
+				const removed = arr[arr.length - 1];
+				onRemove?.(removed);
+				setValue(arr.slice(0, -1));
+			}
+		}
+		if (!combobox.dropdownOpened) return;
+		const index = combobox.getSelectedOptionIndex();
+		if (index < 0 || index >= flatNodesRef.current.length) return;
+		const currentNode = flatNodesRef.current[index];
+		if (event.key === "ArrowRight") {
+			if (currentNode.hasChildren && !currentNode.expanded) {
+				event.preventDefault();
+				toggleExpand(currentNode.node.value);
+			}
+		}
+		if (event.key === "ArrowLeft") {
+			if (currentNode.hasChildren && currentNode.expanded) {
+				event.preventDefault();
+				toggleExpand(currentNode.node.value);
+			} else if (currentNode.parent) {
+				event.preventDefault();
+				const parentIndex = flatNodesRef.current.findIndex((n) => n.node.value === currentNode.parent);
+				if (parentIndex >= 0) combobox.selectOption(parentIndex);
+			}
+		}
+	};
+	useEffect(() => {
+		if (mode !== "single" || !searchable) return;
+		if (value === null) handleSearchChange("");
+		else if (typeof value === "string") handleSearchChange(getNodeLabel(value));
+	}, [value]);
+	const prevDropdownOpenedRef = useRef(false);
+	useEffect(() => {
+		if (combobox.dropdownOpened && !prevDropdownOpenedRef.current && searchable && _value) {
+			const targets = Array.isArray(_value) ? _value : [_value];
+			const newExpanded = { ..._expandedState };
+			let changed = false;
+			for (const target of targets) {
+				const ancestors = getAncestorsToNode(target, data);
+				if (ancestors) {
+					for (const a of ancestors) if (!newExpanded[a]) {
+						newExpanded[a] = true;
+						changed = true;
+					}
+				}
+			}
+			if (changed) {
+				setExpandedState(newExpanded);
+				requestAnimationFrame(() => {
+					combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
+				});
+			}
+		}
+		prevDropdownOpenedRef.current = combobox.dropdownOpened;
+	});
+	const clearButton = /* @__PURE__ */ jsx(Combobox.ClearButton, {
+		...clearButtonProps,
+		onClear: () => {
+			onClear?.();
+			setValue(isMulti ? [] : null);
+			handleSearchChange("");
+		}
+	});
+	const hasValue = isMulti ? Array.isArray(_value) && _value.length > 0 : _value != null && _value !== "";
+	const _clearable = clearable && hasValue && !disabled && !readOnly;
+	const singleDisplayLabel = useMemo(() => {
+		if (mode !== "single" || !_value) return "";
+		return getNodeLabel(_value);
+	}, [
+		mode,
+		_value,
+		nodeLookup
+	]);
+	const displayValues = useMemo(() => {
+		if (!isMulti || !Array.isArray(_value)) return [];
+		return _value;
+	}, [isMulti, _value]);
+	const pillsListStyle = _clearable && isMulti ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm } : void 0;
+	const visiblePills = maxDisplayedValues != null ? displayValues.slice(0, maxDisplayedValues) : displayValues;
+	const overflowCount = maxDisplayedValues != null ? Math.max(0, displayValues.length - maxDisplayedValues) : 0;
+	const pills = visiblePills.map((item, index) => /* @__PURE__ */ jsx(Pill, {
+		withRemoveButton: !readOnly,
+		onRemove: () => {
+			if (isCheckbox) {
+				const childLeaves = checkStrictly ? [item] : getChildrenNodesValues(item, data);
+				setValue(checkedToValue(internalChecked.filter((v) => !childLeaves.includes(v)), data, checkedStrategy));
+			} else setValue(_value.filter((v) => v !== item));
+			onRemove?.(item);
+		},
+		unstyled,
+		disabled,
+		...getStyles("pill"),
+		children: getNodeLabel(item)
+	}, `${item}-${index}`));
+	if (overflowCount > 0) {
+		const overflowContent = typeof maxDisplayedValuesContent === "function" ? maxDisplayedValuesContent(overflowCount) : maxDisplayedValuesContent || `+${overflowCount} more`;
+		pills.push(/* @__PURE__ */ jsx(Pill, {
+			unstyled,
+			disabled,
+			...getStyles("pill"),
+			children: overflowContent
+		}, "__overflow"));
+	}
+	const isEmpty = flatNodes.length === 0;
+	const options = flatNodes.map((flatNode) => {
+		const isSelected = mode === "single" ? _value === flatNode.node.value : mode === "multiple" ? (_value || []).includes(flatNode.node.value) : false;
+		const nodeChecked = isCheckbox ? checkStrictly ? internalChecked.includes(flatNode.node.value) : isNodeChecked(flatNode.node.value, data, internalChecked) : false;
+		const nodeIndeterminate = isCheckbox && !checkStrictly ? isNodeIndeterminate(flatNode.node.value, data, internalChecked) : false;
+		return /* @__PURE__ */ jsx(TreeSelectOption, {
+			node: flatNode.node,
+			level: flatNode.level,
+			expanded: flatNode.expanded,
+			hasChildren: flatNode.hasChildren,
+			selected: isSelected,
+			checked: nodeChecked,
+			indeterminate: nodeIndeterminate,
+			showCheckbox: isCheckbox,
+			isLastChild: flatNode.isLastChild,
+			lineGuides: flatNode.lineGuides,
+			withLines: !!withLines,
+			onToggleExpand: toggleExpand,
+			renderNode,
+			chevronAriaLabels
+		}, flatNode.node.value);
+	});
+	const dropdown = /* @__PURE__ */ jsx(Combobox.Dropdown, {
+		hidden: readOnly || disabled,
+		children: /* @__PURE__ */ jsxs(Combobox.Options, {
+			className: TreeSelect_module_default.optionsWrapper,
+			"aria-multiselectable": isMulti || void 0,
+			children: [/* @__PURE__ */ jsx(ScrollArea.Autosize, {
+				mah: maxDropdownHeight ?? 220,
+				type: "scroll",
+				scrollbarSize: "var(--combobox-padding)",
+				offsetScrollbars: "y",
+				...scrollAreaProps,
+				children: options
+			}), isEmpty && nothingFoundMessage && /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage })]
+		})
+	});
+	if (isMulti) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {
+		store: combobox,
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		unstyled,
+		size,
+		readOnly,
+		__staticSelector: "TreeSelect",
+		attributes,
+		onOptionSubmit: handleOptionSubmit,
+		...comboboxProps,
+		children: [/* @__PURE__ */ jsx(Combobox.DropdownTarget, { children: /* @__PURE__ */ jsx(PillsInput, {
+			...styleProps,
+			__staticSelector: "TreeSelect",
+			classNames: resolvedClassNames,
+			styles: resolvedStyles,
+			unstyled,
+			size,
+			className,
+			style,
+			variant,
+			disabled,
+			radius,
+			__defaultRightSection: /* @__PURE__ */ jsx(Combobox.Chevron, {
+				size,
+				error,
+				unstyled,
+				color: chevronColor
+			}),
+			__clearSection: clearButton,
+			__clearable: _clearable,
+			__clearSectionMode: clearSectionMode,
+			rightSection,
+			rightSectionPointerEvents: rightSectionPointerEvents || "none",
+			rightSectionWidth,
+			rightSectionProps,
+			leftSection,
+			leftSectionWidth,
+			leftSectionPointerEvents,
+			leftSectionProps,
+			inputContainer,
+			inputWrapperOrder,
+			withAsterisk,
+			labelProps,
+			descriptionProps,
+			errorProps,
+			wrapperProps,
+			description,
+			label,
+			error,
+			withErrorStyles,
+			__stylesApiProps: {
+				...props,
+				rightSectionPointerEvents: rightSectionPointerEvents || "none",
+				multiline: true
+			},
+			pointer: !searchable,
+			onClick: () => searchable ? combobox.openDropdown() : combobox.toggleDropdown(),
+			"data-expanded": combobox.dropdownOpened || void 0,
+			id: _id,
+			required,
+			mod,
+			attributes,
+			children: /* @__PURE__ */ jsxs(Pill.Group, {
+				attributes,
+				disabled,
+				unstyled,
+				...getStyles("pillsList", { style: pillsListStyle }),
+				children: [pills, /* @__PURE__ */ jsx(Combobox.EventsTarget, {
+					autoComplete,
+					children: /* @__PURE__ */ jsx(PillsInput.Field, {
+						...rest,
+						id: _id,
+						placeholder,
+						type: !searchable && !placeholder ? "hidden" : "visible",
+						...getStyles("inputField"),
+						unstyled,
+						onFocus: (event) => {
+							onFocus?.(event);
+							if (openOnFocus && searchable) combobox.openDropdown();
+						},
+						onBlur: (event) => {
+							onBlur?.(event);
+							combobox.closeDropdown();
+							handleSearchChange("");
+						},
+						onKeyDown: handleKeyDown,
+						value: _searchValue,
+						onChange: (event) => {
+							handleSearchChange(event.currentTarget.value);
+							if (searchable) combobox.openDropdown();
+						},
+						disabled,
+						readOnly: readOnly || !searchable,
+						pointer: !searchable
+					})
+				})]
+			})
+		}) }), dropdown]
+	}), /* @__PURE__ */ jsx(Combobox.HiddenInput, {
+		name,
+		valuesDivider: hiddenInputValuesDivider,
+		value: _value,
+		form,
+		disabled,
+		...hiddenInputProps
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {
+		store: combobox,
+		__staticSelector: "TreeSelect",
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		unstyled,
+		readOnly,
+		size,
+		attributes,
+		onOptionSubmit: handleOptionSubmit,
+		...comboboxProps,
+		children: [/* @__PURE__ */ jsx(Combobox.Target, {
+			targetType: searchable ? "input" : "button",
+			autoComplete,
+			children: /* @__PURE__ */ jsx(InputBase, {
+				id: _id,
+				__defaultRightSection: /* @__PURE__ */ jsx(Combobox.Chevron, {
+					size,
+					error,
+					unstyled,
+					color: chevronColor
+				}),
+				__clearSection: clearButton,
+				__clearable: _clearable,
+				__clearSectionMode: clearSectionMode,
+				rightSection,
+				rightSectionPointerEvents: rightSectionPointerEvents || "none",
+				...rest,
+				...styleProps,
+				size,
+				__staticSelector: "TreeSelect",
+				disabled,
+				readOnly: readOnly || !searchable,
+				value: searchable ? _searchValue : singleDisplayLabel,
+				onChange: (event) => {
+					handleSearchChange(event.currentTarget.value);
+					combobox.openDropdown();
+				},
+				onFocus: (event) => {
+					if (openOnFocus && searchable) combobox.openDropdown();
+					onFocus?.(event);
+				},
+				onBlur: (event) => {
+					if (searchable) combobox.closeDropdown();
+					handleSearchChange(_value ? getNodeLabel(_value) : "");
+					onBlur?.(event);
+				},
+				onClick: (event) => {
+					searchable ? combobox.openDropdown() : combobox.toggleDropdown();
+					onClick?.(event);
+				},
+				onKeyDown: handleKeyDown,
+				classNames: resolvedClassNames,
+				styles: resolvedStyles,
+				unstyled,
+				pointer: !searchable,
+				error,
+				attributes,
+				className,
+				style,
+				variant,
+				radius,
+				leftSection,
+				leftSectionWidth,
+				leftSectionPointerEvents,
+				leftSectionProps,
+				rightSectionWidth,
+				rightSectionProps,
+				inputContainer,
+				inputWrapperOrder,
+				withAsterisk,
+				labelProps,
+				descriptionProps,
+				errorProps,
+				wrapperProps,
+				description,
+				label,
+				withErrorStyles,
+				placeholder,
+				required,
+				mod
+			})
+		}), dropdown]
+	}), /* @__PURE__ */ jsx(Combobox.HiddenInput, {
+		value: _value,
+		name,
+		form,
+		disabled,
+		...hiddenInputProps
+	})] });
+});
+TreeSelect.classes = {
+	...InputBase.classes,
+	...Combobox.classes
+};
+TreeSelect.displayName = "@mantine/core/TreeSelect";
+//#endregion
+export { TreeSelect };
+
+//# sourceMappingURL=TreeSelect.mjs.map