@vuu-ui/vuu-popups 0.8.65 → 0.8.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -49,10 +49,10 @@ const useAnchoredPosition = ({
49
49
  }
50
50
  break;
51
51
  case "right":
52
- console.log("place the fucker right");
52
+ console.log("place right");
53
53
  break;
54
54
  case "left":
55
- console.log("place the fucker left");
55
+ console.log("place left");
56
56
  break;
57
57
  default:
58
58
  console.warn(`unklnown tooltip placement ${placement}`);
@@ -1 +1 @@
1
- {"version":3,"file":"useAnchoredPosition.js","sources":["../../src/tooltip/useAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback, useLayoutEffect } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface AnchoredPositionHookProps {\n anchorElement: RefObject<HTMLElement>;\n offsetLeft?: number;\n offsetTop?: number;\n placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, height: number) => height < anchor.top;\nconst roomBelow = (anchor: DOMRect, height: number) =>\n document.body.clientHeight - anchor.bottom > height;\n\nconst getNextPlacement = (\n placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n if (Array.isArray(placement)) {\n if (placement.length === 0) {\n return [undefined, placement];\n } else {\n return [placement[0], placement.slice(1)];\n }\n } else {\n return [placement, []];\n }\n};\n\nexport const useAnchoredPosition = ({\n anchorElement,\n offsetLeft = 0,\n offsetTop = 0,\n placement,\n}: AnchoredPositionHookProps) => {\n const ref = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el && anchorElement.current) {\n const anchor = anchorElement.current.getBoundingClientRect();\n const { height, width } = el.getBoundingClientRect();\n let nextPlacement: TooltipPlacement | undefined;\n let placements: TooltipPlacement | TooltipPlacement[] = placement;\n do {\n [nextPlacement, placements] = getNextPlacement(placements);\n switch (nextPlacement) {\n case \"above\":\n if (roomAbove(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.top - height - pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"above\";\n return;\n }\n break;\n case \"below\":\n if (roomBelow(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.bottom + pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"below\";\n return;\n }\n break;\n\n case \"right\":\n console.log(\"place the fucker right\");\n break;\n case \"left\":\n console.log(\"place the fucker left\");\n break;\n default:\n console.warn(`unklnown tooltip placement ${placement}`);\n }\n } while (nextPlacement);\n }\n\n // el?.classList.remove(\"vuuHidden\");\n },\n [anchorElement, placement]\n );\n // const [position, setPosition] = useState<\n // { left: number; top: number } | undefined\n // >();\n\n // maybe better as useMemo ?\n useLayoutEffect(() => {\n // if (anchorElement.current) {\n // const position = getPositionRelativeToAnchor(\n // anchorElement.current,\n // placement,\n // offsetLeft,\n // offsetTop\n // );\n // setPosition(position);\n // }\n }, [anchorElement, offsetLeft, offsetTop, placement]);\n\n return ref;\n};\n"],"names":["useCallback","useLayoutEffect"],"mappings":"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"}
1
+ {"version":3,"file":"useAnchoredPosition.js","sources":["../../src/tooltip/useAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback, useLayoutEffect } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface AnchoredPositionHookProps {\n anchorElement: RefObject<HTMLElement>;\n offsetLeft?: number;\n offsetTop?: number;\n placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, height: number) => height < anchor.top;\nconst roomBelow = (anchor: DOMRect, height: number) =>\n document.body.clientHeight - anchor.bottom > height;\n\nconst getNextPlacement = (\n placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n if (Array.isArray(placement)) {\n if (placement.length === 0) {\n return [undefined, placement];\n } else {\n return [placement[0], placement.slice(1)];\n }\n } else {\n return [placement, []];\n }\n};\n\nexport const useAnchoredPosition = ({\n anchorElement,\n offsetLeft = 0,\n offsetTop = 0,\n placement,\n}: AnchoredPositionHookProps) => {\n const ref = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el && anchorElement.current) {\n const anchor = anchorElement.current.getBoundingClientRect();\n const { height, width } = el.getBoundingClientRect();\n let nextPlacement: TooltipPlacement | undefined;\n let placements: TooltipPlacement | TooltipPlacement[] = placement;\n do {\n [nextPlacement, placements] = getNextPlacement(placements);\n switch (nextPlacement) {\n case \"above\":\n if (roomAbove(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.top - height - pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"above\";\n return;\n }\n break;\n case \"below\":\n if (roomBelow(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.bottom + pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"below\";\n return;\n }\n break;\n\n case \"right\":\n console.log(\"place right\");\n break;\n case \"left\":\n console.log(\"place left\");\n break;\n default:\n console.warn(`unklnown tooltip placement ${placement}`);\n }\n } while (nextPlacement);\n }\n\n // el?.classList.remove(\"vuuHidden\");\n },\n [anchorElement, placement]\n );\n // const [position, setPosition] = useState<\n // { left: number; top: number } | undefined\n // >();\n\n // maybe better as useMemo ?\n useLayoutEffect(() => {\n // if (anchorElement.current) {\n // const position = getPositionRelativeToAnchor(\n // anchorElement.current,\n // placement,\n // offsetLeft,\n // offsetTop\n // );\n // setPosition(position);\n // }\n }, [anchorElement, offsetLeft, offsetTop, placement]);\n\n return ref;\n};\n"],"names":["useCallback","useLayoutEffect"],"mappings":";;;;AAMA,MAAM,WAAc,GAAA,EAAA,CAAA;AAQpB,MAAM,SAAY,GAAA,CAAC,MAAiB,EAAA,MAAA,KAAmB,SAAS,MAAO,CAAA,GAAA,CAAA;AACvE,MAAM,SAAA,GAAY,CAAC,MAAiB,EAAA,MAAA,KAClC,SAAS,IAAK,CAAA,YAAA,GAAe,OAAO,MAAS,GAAA,MAAA,CAAA;AAE/C,MAAM,gBAAA,GAAmB,CACvB,SACuD,KAAA;AACvD,EAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,SAAS,CAAG,EAAA;AAC5B,IAAI,IAAA,SAAA,CAAU,WAAW,CAAG,EAAA;AAC1B,MAAO,OAAA,CAAC,QAAW,SAAS,CAAA,CAAA;AAAA,KACvB,MAAA;AACL,MAAA,OAAO,CAAC,SAAU,CAAA,CAAC,GAAG,SAAU,CAAA,KAAA,CAAM,CAAC,CAAC,CAAA,CAAA;AAAA,KAC1C;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAC,SAAW,EAAA,EAAE,CAAA,CAAA;AAAA,GACvB;AACF,CAAA,CAAA;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC,aAAA;AAAA,EACA,UAAa,GAAA,CAAA;AAAA,EACb,SAAY,GAAA,CAAA;AAAA,EACZ,SAAA;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,GAAM,GAAAA,iBAAA;AAAA,IACV,CAAC,EAAO,KAAA;AACN,MAAI,IAAA,EAAA,IAAM,cAAc,OAAS,EAAA;AAC/B,QAAM,MAAA,MAAA,GAAS,aAAc,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAA;AAC3D,QAAA,MAAM,EAAE,MAAA,EAAQ,KAAM,EAAA,GAAI,GAAG,qBAAsB,EAAA,CAAA;AACnD,QAAI,IAAA,aAAA,CAAA;AACJ,QAAA,IAAI,UAAoD,GAAA,SAAA,CAAA;AACxD,QAAG,GAAA;AACD,UAAA,CAAC,aAAe,EAAA,UAAU,CAAI,GAAA,gBAAA,CAAiB,UAAU,CAAA,CAAA;AACzD,UAAA,QAAQ,aAAe;AAAA,YACrB,KAAK,OAAA;AACH,cAAA,IAAI,SAAU,CAAA,MAAA,EAAQ,MAAS,GAAA,WAAW,CAAG,EAAA;AAC3C,gBAAM,MAAA,OAAA,GAAA,CAAW,KAAQ,GAAA,MAAA,CAAO,KAAS,IAAA,CAAA,CAAA;AACzC,gBAAG,EAAA,CAAA,KAAA,CAAM,OAAU,GAAA,CAAA,KAAA,EAAQ,MAAO,CAAA,IAAA,GAAO,OAAO,CAC9C,OAAA,EAAA,MAAA,CAAO,GAAM,GAAA,MAAA,GAAS,WACxB,CAAA,cAAA,CAAA,CAAA;AACA,gBAAA,EAAA,CAAG,QAAQ,KAAQ,GAAA,OAAA,CAAA;AACnB,gBAAA,OAAA;AAAA,eACF;AACA,cAAA,MAAA;AAAA,YACF,KAAK,OAAA;AACH,cAAA,IAAI,SAAU,CAAA,MAAA,EAAQ,MAAS,GAAA,WAAW,CAAG,EAAA;AAC3C,gBAAM,MAAA,OAAA,GAAA,CAAW,KAAQ,GAAA,MAAA,CAAO,KAAS,IAAA,CAAA,CAAA;AACzC,gBAAG,EAAA,CAAA,KAAA,CAAM,UAAU,CAAQ,KAAA,EAAA,MAAA,CAAO,OAAO,OAAO,CAAA,OAAA,EAC9C,MAAO,CAAA,MAAA,GAAS,WAClB,CAAA,cAAA,CAAA,CAAA;AACA,gBAAA,EAAA,CAAG,QAAQ,KAAQ,GAAA,OAAA,CAAA;AACnB,gBAAA,OAAA;AAAA,eACF;AACA,cAAA,MAAA;AAAA,YAEF,KAAK,OAAA;AACH,cAAA,OAAA,CAAQ,IAAI,aAAa,CAAA,CAAA;AACzB,cAAA,MAAA;AAAA,YACF,KAAK,MAAA;AACH,cAAA,OAAA,CAAQ,IAAI,YAAY,CAAA,CAAA;AACxB,cAAA,MAAA;AAAA,YACF;AACE,cAAQ,OAAA,CAAA,IAAA,CAAK,CAA8B,2BAAA,EAAA,SAAS,CAAE,CAAA,CAAA,CAAA;AAAA,WAC1D;AAAA,SACO,QAAA,aAAA,EAAA;AAAA,OACX;AAAA,KAGF;AAAA,IACA,CAAC,eAAe,SAAS,CAAA;AAAA,GAC3B,CAAA;AAMA,EAAAC,qBAAA,CAAgB,MAAM;AAAA,KAUnB,CAAC,aAAA,EAAe,UAAY,EAAA,SAAA,EAAW,SAAS,CAAC,CAAA,CAAA;AAEpD,EAAO,OAAA,GAAA,CAAA;AACT;;;;"}
@@ -47,10 +47,10 @@ const useAnchoredPosition = ({
47
47
  }
48
48
  break;
49
49
  case "right":
50
- console.log("place the fucker right");
50
+ console.log("place right");
51
51
  break;
52
52
  case "left":
53
- console.log("place the fucker left");
53
+ console.log("place left");
54
54
  break;
55
55
  default:
56
56
  console.warn(`unklnown tooltip placement ${placement}`);
@@ -1 +1 @@
1
- {"version":3,"file":"useAnchoredPosition.js","sources":["../../src/tooltip/useAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback, useLayoutEffect } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface AnchoredPositionHookProps {\n anchorElement: RefObject<HTMLElement>;\n offsetLeft?: number;\n offsetTop?: number;\n placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, height: number) => height < anchor.top;\nconst roomBelow = (anchor: DOMRect, height: number) =>\n document.body.clientHeight - anchor.bottom > height;\n\nconst getNextPlacement = (\n placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n if (Array.isArray(placement)) {\n if (placement.length === 0) {\n return [undefined, placement];\n } else {\n return [placement[0], placement.slice(1)];\n }\n } else {\n return [placement, []];\n }\n};\n\nexport const useAnchoredPosition = ({\n anchorElement,\n offsetLeft = 0,\n offsetTop = 0,\n placement,\n}: AnchoredPositionHookProps) => {\n const ref = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el && anchorElement.current) {\n const anchor = anchorElement.current.getBoundingClientRect();\n const { height, width } = el.getBoundingClientRect();\n let nextPlacement: TooltipPlacement | undefined;\n let placements: TooltipPlacement | TooltipPlacement[] = placement;\n do {\n [nextPlacement, placements] = getNextPlacement(placements);\n switch (nextPlacement) {\n case \"above\":\n if (roomAbove(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.top - height - pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"above\";\n return;\n }\n break;\n case \"below\":\n if (roomBelow(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.bottom + pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"below\";\n return;\n }\n break;\n\n case \"right\":\n console.log(\"place the fucker right\");\n break;\n case \"left\":\n console.log(\"place the fucker left\");\n break;\n default:\n console.warn(`unklnown tooltip placement ${placement}`);\n }\n } while (nextPlacement);\n }\n\n // el?.classList.remove(\"vuuHidden\");\n },\n [anchorElement, placement]\n );\n // const [position, setPosition] = useState<\n // { left: number; top: number } | undefined\n // >();\n\n // maybe better as useMemo ?\n useLayoutEffect(() => {\n // if (anchorElement.current) {\n // const position = getPositionRelativeToAnchor(\n // anchorElement.current,\n // placement,\n // offsetLeft,\n // offsetTop\n // );\n // setPosition(position);\n // }\n }, [anchorElement, offsetLeft, offsetTop, placement]);\n\n return ref;\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useAnchoredPosition.js","sources":["../../src/tooltip/useAnchoredPosition.ts"],"sourcesContent":["// TODO merge with Popup\n\nimport { RefCallback, RefObject, useCallback, useLayoutEffect } from \"react\";\n\nexport type TooltipPlacement = \"above\" | \"right\" | \"below\" | \"left\";\n\nconst pointerSize = 12;\nexport interface AnchoredPositionHookProps {\n anchorElement: RefObject<HTMLElement>;\n offsetLeft?: number;\n offsetTop?: number;\n placement: TooltipPlacement | TooltipPlacement[];\n}\n\nconst roomAbove = (anchor: DOMRect, height: number) => height < anchor.top;\nconst roomBelow = (anchor: DOMRect, height: number) =>\n document.body.clientHeight - anchor.bottom > height;\n\nconst getNextPlacement = (\n placement: TooltipPlacement | TooltipPlacement[]\n): [TooltipPlacement | undefined, TooltipPlacement[]] => {\n if (Array.isArray(placement)) {\n if (placement.length === 0) {\n return [undefined, placement];\n } else {\n return [placement[0], placement.slice(1)];\n }\n } else {\n return [placement, []];\n }\n};\n\nexport const useAnchoredPosition = ({\n anchorElement,\n offsetLeft = 0,\n offsetTop = 0,\n placement,\n}: AnchoredPositionHookProps) => {\n const ref = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el && anchorElement.current) {\n const anchor = anchorElement.current.getBoundingClientRect();\n const { height, width } = el.getBoundingClientRect();\n let nextPlacement: TooltipPlacement | undefined;\n let placements: TooltipPlacement | TooltipPlacement[] = placement;\n do {\n [nextPlacement, placements] = getNextPlacement(placements);\n switch (nextPlacement) {\n case \"above\":\n if (roomAbove(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.top - height - pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"above\";\n return;\n }\n break;\n case \"below\":\n if (roomBelow(anchor, height + pointerSize)) {\n const midDiff = (width - anchor.width) / 2;\n el.style.cssText = `left:${anchor.left - midDiff}px;top:${\n anchor.bottom + pointerSize\n }px;opacity: 1;`;\n el.dataset.align = \"below\";\n return;\n }\n break;\n\n case \"right\":\n console.log(\"place right\");\n break;\n case \"left\":\n console.log(\"place left\");\n break;\n default:\n console.warn(`unklnown tooltip placement ${placement}`);\n }\n } while (nextPlacement);\n }\n\n // el?.classList.remove(\"vuuHidden\");\n },\n [anchorElement, placement]\n );\n // const [position, setPosition] = useState<\n // { left: number; top: number } | undefined\n // >();\n\n // maybe better as useMemo ?\n useLayoutEffect(() => {\n // if (anchorElement.current) {\n // const position = getPositionRelativeToAnchor(\n // anchorElement.current,\n // placement,\n // offsetLeft,\n // offsetTop\n // );\n // setPosition(position);\n // }\n }, [anchorElement, offsetLeft, offsetTop, placement]);\n\n return ref;\n};\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.8.65",
2
+ "version": "0.8.67",
3
3
  "description": "VUU popup components - Context Menu, Dialog etc",
4
4
  "author": "heswell",
5
5
  "license": "Apache-2.0",
@@ -7,10 +7,10 @@
7
7
  "@salt-ds/core": "1.27.1",
8
8
  "@salt-ds/styles": "0.2.1",
9
9
  "@salt-ds/window": "0.1.1",
10
- "@vuu-ui/vuu-data-types": "0.8.65",
11
- "@vuu-ui/vuu-layout": "0.8.65",
12
- "@vuu-ui/vuu-utils": "0.8.65",
13
- "@vuu-ui/vuu-ui-controls": "0.8.65"
10
+ "@vuu-ui/vuu-data-types": "0.8.67",
11
+ "@vuu-ui/vuu-layout": "0.8.67",
12
+ "@vuu-ui/vuu-utils": "0.8.67",
13
+ "@vuu-ui/vuu-ui-controls": "0.8.67"
14
14
  },
15
15
  "peerDependencies": {
16
16
  "clsx": "^2.0.0",