@fluentui/react-positioning 9.0.0-alpha.9 → 9.0.0-beta.4

package/lib/utils/positioningHelper.js

@@ -1,41 +1,49 @@
-var getPositionMap = function (rtl) { return ({
-    above: 'top',
-    below: 'bottom',
-    before: rtl ? 'right' : 'left',
-    after: rtl ? 'left' : 'right',
-}); };
-var getAlignmentMap = function (rtl) { return ({
-    start: rtl ? 'end' : 'start',
-    end: rtl ? 'start' : 'end',
-    top: 'start',
-    bottom: 'end',
-    center: '',
-}); };
-var shouldAlignToCenter = function (p, a) {
-    var positionedVertically = p === 'above' || p === 'below';
-    var alignedVertically = a === 'top' || a === 'bottom';
-    return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);
+const getPositionMap = rtl => ({
+  above: 'top',
+  below: 'bottom',
+  before: rtl ? 'right' : 'left',
+  after: rtl ? 'left' : 'right'
+});
+
+const getAlignmentMap = rtl => ({
+  start: rtl ? 'end' : 'start',
+  end: rtl ? 'start' : 'end',
+  top: 'start',
+  bottom: 'end',
+  center: ''
+});
+
+const shouldAlignToCenter = (p, a) => {
+  const positionedVertically = p === 'above' || p === 'below';
+  const alignedVertically = a === 'top' || a === 'bottom';
+  return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
 };
 /**
  * @see positioninHelper.test.ts for expected placement values
  */
-export var getPlacement = function (align, position, rtl) {
-    var alignment = shouldAlignToCenter(position, align) ? 'center' : align;
-    var computedPosition = position && getPositionMap(rtl)[position];
-    var computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
-    if (computedPosition && computedAlignmnent) {
-        return computedPosition + "-" + computedAlignmnent;
-    }
-    return computedPosition || 'auto';
+
+
+export const getPlacement = (align, position, rtl) => {
+  const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
+  const computedPosition = position && getPositionMap(rtl)[position];
+  const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
+
+  if (computedPosition && computedAlignmnent) {
+    return `${computedPosition}-${computedAlignmnent}`;
+  }
+
+  return computedPosition || 'auto';
 };
-export var applyRtlToOffset = function (offset) {
-    if (typeof offset === 'undefined') {
-        return undefined;
-    }
-    if (Array.isArray(offset)) {
-        offset[0] = offset[0] * -1;
-        return offset;
-    }
-    return (function (param) { return applyRtlToOffset(offset(param)); });
+export const applyRtlToOffset = offset => {
+  if (typeof offset === 'undefined') {
+    return undefined;
+  }
+
+  if (Array.isArray(offset)) {
+    offset[0] = offset[0] * -1;
+    return offset;
+  }
+
+  return param => applyRtlToOffset(offset(param));
 };
 //# sourceMappingURL=positioningHelper.js.map

package/lib/utils/positioningHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"positioningHelper.js","sourceRoot":"../src/","sources":["utils/positioningHelper.ts"],"names":[],"mappings":"AAMA,IAAM,cAAc,GAAG,UAAC,GAAa,IAA0C,OAAA,CAAC;IAC9E,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;IAC9B,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;CAC9B,CAAC,EAL6E,CAK7E,CAAC;AAEH,IAAM,eAAe,GAAG,UAAC,GAAa,IAAwC,OAAA,CAAC;IAC7E,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;IAC5B,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;IAC1B,GAAG,EAAE,OAAO;IACZ,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,EAAE;CACX,CAAC,EAN4E,CAM5E,CAAC;AAEH,IAAM,mBAAmB,GAAG,UAAC,CAAY,EAAE,CAAa;IACtD,IAAM,oBAAoB,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,CAAC;IAC5D,IAAM,iBAAiB,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,QAAQ,CAAC;IAExD,OAAO,CAAC,oBAAoB,IAAI,iBAAiB,CAAC,IAAI,CAAC,CAAC,oBAAoB,IAAI,CAAC,iBAAiB,CAAC,CAAC;AACtG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,KAAiB,EAAE,QAAmB,EAAE,GAAa;IAChF,IAAM,SAAS,GAAG,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAE1E,IAAM,gBAAgB,GAAG,QAAQ,IAAI,cAAc,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnE,IAAM,kBAAkB,GAAG,SAAS,IAAI,eAAe,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;IAExE,IAAI,gBAAgB,IAAI,kBAAkB,EAAE;QAC1C,OAAU,gBAAgB,SAAI,kBAA0C,CAAC;KAC1E;IAED,OAAO,gBAAgB,IAAK,MAA6B,CAAC;AAC5D,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,MAA0B;IACzD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QACzB,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAE,GAAG,CAAC,CAAC,CAAC;QAE5B,OAAO,MAAM,CAAC;KACf;IAED,OAAO,CAAC,UAAC,KAA0B,IAAK,OAAA,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAA/B,CAA+B,CAAmB,CAAC;AAC7F,CAAC,CAAC","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport { Alignment, Offset, OffsetFunction, OffsetFunctionParam, Position } from '../types';\n\ntype PlacementPosition = 'top' | 'bottom' | 'left' | 'right';\ntype PlacementAlign = 'start' | 'end' | ''; // '' represents center\n\nconst getPositionMap = (rtl?: boolean): Record<Position, PlacementPosition> => ({\n  above: 'top',\n  below: 'bottom',\n  before: rtl ? 'right' : 'left',\n  after: rtl ? 'left' : 'right',\n});\n\nconst getAlignmentMap = (rtl?: boolean): Record<Alignment, PlacementAlign> => ({\n  start: rtl ? 'end' : 'start',\n  end: rtl ? 'start' : 'end',\n  top: 'start',\n  bottom: 'end',\n  center: '',\n});\n\nconst shouldAlignToCenter = (p?: Position, a?: Alignment): boolean => {\n  const positionedVertically = p === 'above' || p === 'below';\n  const alignedVertically = a === 'top' || a === 'bottom';\n\n  return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);\n};\n\n/**\n * @see positioninHelper.test.ts for expected placement values\n */\nexport const getPlacement = (align?: Alignment, position?: Position, rtl?: boolean): PopperJs.Placement => {\n  const alignment = shouldAlignToCenter(position, align) ? 'center' : align;\n\n  const computedPosition = position && getPositionMap(rtl)[position];\n  const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];\n\n  if (computedPosition && computedAlignmnent) {\n    return `${computedPosition}-${computedAlignmnent}` as PopperJs.Placement;\n  }\n\n  return computedPosition || ('auto' as PopperJs.Placement);\n};\n\nexport const applyRtlToOffset = (offset: Offset | undefined): Offset | undefined => {\n  if (typeof offset === 'undefined') {\n    return undefined;\n  }\n\n  if (Array.isArray(offset)) {\n    offset[0] = offset[0]! * -1;\n\n    return offset;\n  }\n\n  return ((param: OffsetFunctionParam) => applyRtlToOffset(offset(param))) as OffsetFunction;\n};\n"]}
+{"version":3,"sources":["../../src/utils/positioningHelper.ts"],"names":[],"mappings":"AAMA,MAAM,cAAc,GAAI,GAAD,KAAyD;AAC9E,EAAA,KAAK,EAAE,KADuE;AAE9E,EAAA,KAAK,EAAE,QAFuE;AAG9E,EAAA,MAAM,EAAE,GAAG,GAAG,OAAH,GAAa,MAHsD;AAI9E,EAAA,KAAK,EAAE,GAAG,GAAG,MAAH,GAAY;AAJwD,CAAzD,CAAvB;;AAOA,MAAM,eAAe,GAAI,GAAD,KAAuD;AAC7E,EAAA,KAAK,EAAE,GAAG,GAAG,KAAH,GAAW,OADwD;AAE7E,EAAA,GAAG,EAAE,GAAG,GAAG,OAAH,GAAa,KAFwD;AAG7E,EAAA,GAAG,EAAE,OAHwE;AAI7E,EAAA,MAAM,EAAE,KAJqE;AAK7E,EAAA,MAAM,EAAE;AALqE,CAAvD,CAAxB;;AAQA,MAAM,mBAAmB,GAAG,CAAC,CAAD,EAAe,CAAf,KAAyC;AACnE,QAAM,oBAAoB,GAAG,CAAC,KAAK,OAAN,IAAiB,CAAC,KAAK,OAApD;AACA,QAAM,iBAAiB,GAAG,CAAC,KAAK,KAAN,IAAe,CAAC,KAAK,QAA/C;AAEA,SAAQ,oBAAoB,IAAI,iBAAzB,IAAgD,CAAC,oBAAD,IAAyB,CAAC,iBAAjF;AACD,CALD;AAOA;;AAEG;;;AACH,OAAO,MAAM,YAAY,GAAG,CAAC,KAAD,EAAoB,QAApB,EAAyC,GAAzC,KAA8E;AACxG,QAAM,SAAS,GAAG,mBAAmB,CAAC,QAAD,EAAW,KAAX,CAAnB,GAAuC,QAAvC,GAAkD,KAApE;AAEA,QAAM,gBAAgB,GAAG,QAAQ,IAAI,cAAc,CAAC,GAAD,CAAd,CAAoB,QAApB,CAArC;AACA,QAAM,kBAAkB,GAAG,SAAS,IAAI,eAAe,CAAC,GAAD,CAAf,CAAqB,SAArB,CAAxC;;AAEA,MAAI,gBAAgB,IAAI,kBAAxB,EAA4C;AAC1C,WAAO,GAAG,gBAAgB,IAAI,kBAAkB,EAAhD;AACD;;AAED,SAAO,gBAAgB,IAAK,MAA5B;AACD,CAXM;AAaP,OAAO,MAAM,gBAAgB,GAAI,MAAD,IAAmD;AACjF,MAAI,OAAO,MAAP,KAAkB,WAAtB,EAAmC;AACjC,WAAO,SAAP;AACD;;AAED,MAAI,KAAK,CAAC,OAAN,CAAc,MAAd,CAAJ,EAA2B;AACzB,IAAA,MAAM,CAAC,CAAD,CAAN,GAAY,MAAM,CAAC,CAAD,CAAN,GAAa,CAAC,CAA1B;AAEA,WAAO,MAAP;AACD;;AAED,SAAS,KAAD,IAAgC,gBAAgB,CAAC,MAAM,CAAC,KAAD,CAAP,CAAxD;AACD,CAZM","sourceRoot":""}

package/lib/utils/resolvePositioningShorthand.d.ts

@@ -0,0 +1,2 @@
+import type { PositioningShorthand, PositioningProps } from '../types';
+export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;

package/lib/utils/resolvePositioningShorthand.js

@@ -0,0 +1,63 @@
+// Look up table for shorthand to avoid parsing strings
+const shorthandLookup = {
+  above: {
+    position: 'above',
+    align: 'center'
+  },
+  'above-start': {
+    position: 'above',
+    align: 'start'
+  },
+  'above-end': {
+    position: 'above',
+    align: 'end'
+  },
+  below: {
+    position: 'below',
+    align: 'center'
+  },
+  'below-start': {
+    position: 'below',
+    align: 'start'
+  },
+  'below-end': {
+    position: 'below',
+    align: 'end'
+  },
+  before: {
+    position: 'before',
+    align: 'center'
+  },
+  'before-top': {
+    position: 'before',
+    align: 'top'
+  },
+  'before-bottom': {
+    position: 'before',
+    align: 'bottom'
+  },
+  after: {
+    position: 'after',
+    align: 'center'
+  },
+  'after-top': {
+    position: 'after',
+    align: 'top'
+  },
+  'after-bottom': {
+    position: 'after',
+    align: 'bottom'
+  }
+};
+export function resolvePositioningShorthand(shorthand) {
+  if (shorthand === undefined || shorthand === null) {
+    return {};
+  }
+
+  if (typeof shorthand === 'string') {
+    return shorthandLookup[shorthand];
+  }
+
+  return shorthand;
+}
+//# sourceMappingURL=resolvePositioningShorthand.js.map

package/lib/utils/resolvePositioningShorthand.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/resolvePositioningShorthand.ts"],"names":[],"mappings":"AAEA;AACA,MAAM,eAAe,GAAoF;AACvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GADgG;AAEvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAFwF;AAGvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAH0F;AAIvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAJgG;AAKvG,iBAAe;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GALwF;AAMvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAN0F;AAOvG,EAAA,MAAM,EAAE;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GAP+F;AAQvG,gBAAc;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GARyF;AASvG,mBAAiB;AAAE,IAAA,QAAQ,EAAE,QAAZ;AAAsB,IAAA,KAAK,EAAE;AAA7B,GATsF;AAUvG,EAAA,KAAK,EAAE;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAVgG;AAWvG,eAAa;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B,GAX0F;AAYvG,kBAAgB;AAAE,IAAA,QAAQ,EAAE,OAAZ;AAAqB,IAAA,KAAK,EAAE;AAA5B;AAZuF,CAAzG;AAeA,OAAM,SAAU,2BAAV,CACJ,SADI,EAC8C;AAElD,MAAI,SAAS,KAAK,SAAd,IAA2B,SAAS,KAAK,IAA7C,EAAmD;AACjD,WAAO,EAAP;AACD;;AAED,MAAI,OAAO,SAAP,KAAqB,QAAzB,EAAmC;AACjC,WAAO,eAAe,CAAC,SAAD,CAAtB;AACD;;AAED,SAAO,SAAP;AACD","sourceRoot":""}

package/lib/utils/useCallbackRef.js

@@ -17,35 +17,41 @@ import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
  * ref.current = 1;
  * // prints 0 -> 1
  */
+
 export function useCallbackRef(initialValue, callback, skipInitialResolve) {
-    var isFirst = React.useRef(true);
-    var ref = React.useState(function () { return ({
-        // value
-        value: initialValue,
-        // last callback
-        callback: callback,
-        // "memoized" public interface
-        facade: {
-            get current() {
-                return ref.value;
-            },
-            set current(value) {
-                var last = ref.value;
-                if (last !== value) {
-                    ref.value = value;
-                    if (skipInitialResolve && isFirst.current) {
-                        return;
-                    }
-                    ref.callback(value, last);
-                }
-            },
-        },
-    }); })[0];
-    useIsomorphicLayoutEffect(function () {
-        isFirst.current = false;
-    }, []);
-    // update callback
-    ref.callback = callback;
-    return ref.facade;
+  const isFirst = React.useRef(true);
+  const [ref] = React.useState(() => ({
+    // value
+    value: initialValue,
+    // last callback
+    callback,
+    // "memoized" public interface
+    facade: {
+      get current() {
+        return ref.value;
+      },
+
+      set current(value) {
+        const last = ref.value;
+
+        if (last !== value) {
+          ref.value = value;
+
+          if (skipInitialResolve && isFirst.current) {
+            return;
+          }
+
+          ref.callback(value, last);
+        }
+      }
+
+    }
+  }));
+  useIsomorphicLayoutEffect(() => {
+    isFirst.current = false;
+  }, []); // update callback
+
+  ref.callback = callback;
+  return ref.facade;
 }
 //# sourceMappingURL=useCallbackRef.js.map

package/lib/utils/useCallbackRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCallbackRef.js","sourceRoot":"../src/","sources":["utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,cAAc,CAC5B,YAAsB,EACtB,QAA2D,EAC3D,kBAA4B;IAE5B,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAA;;;;;;;;;;;;;;;;;;;;;aAAG,CAwBN;IAEJ,yBAAyB,CAAC;QACxB,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,kBAAkB;IAClB,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAExB,OAAO,GAAG,CAAC,MAAM,CAAC;AACpB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n/**\n * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content\n * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via\n * React.useState(), but it will cause re-renders always.\n *\n * https://reactjs.org/docs/hooks-reference.html#useref\n * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref\n *\n * @param initialValue - initial ref value\n * @param callback - a callback to run when value changes\n * @param skipInitialResolve - a flag to skip an initial ref report\n *\n * @example\n * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);\n * ref.current = 1;\n * // prints 0 -> 1\n */\nexport function useCallbackRef<T>(\n  initialValue: T | null,\n  callback: (newValue: T | null, lastValue: T | null) => void,\n  skipInitialResolve?: boolean,\n): React.MutableRefObject<T | null> {\n  const isFirst = React.useRef(true);\n  const [ref] = React.useState(() => ({\n    // value\n    value: initialValue,\n    // last callback\n    callback,\n    // \"memoized\" public interface\n    facade: {\n      get current() {\n        return ref.value;\n      },\n      set current(value) {\n        const last = ref.value;\n\n        if (last !== value) {\n          ref.value = value;\n\n          if (skipInitialResolve && isFirst.current) {\n            return;\n          }\n\n          ref.callback(value, last);\n        }\n      },\n    },\n  }));\n\n  useIsomorphicLayoutEffect(() => {\n    isFirst.current = false;\n  }, []);\n\n  // update callback\n  ref.callback = callback;\n\n  return ref.facade;\n}\n"]}
+{"version":3,"sources":["../../src/utils/useCallbackRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AAEA;;;;;;;;;;;;;;;;AAgBG;;AACH,OAAM,SAAU,cAAV,CACJ,YADI,EAEJ,QAFI,EAGJ,kBAHI,EAGwB;AAE5B,QAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAAa,IAAb,CAAhB;AACA,QAAM,CAAC,GAAD,IAAQ,KAAK,CAAC,QAAN,CAAe,OAAO;AAClC;AACA,IAAA,KAAK,EAAE,YAF2B;AAGlC;AACA,IAAA,QAJkC;AAKlC;AACA,IAAA,MAAM,EAAE;AACN,UAAI,OAAJ,GAAW;AACT,eAAO,GAAG,CAAC,KAAX;AACD,OAHK;;AAIN,UAAI,OAAJ,CAAY,KAAZ,EAAiB;AACf,cAAM,IAAI,GAAG,GAAG,CAAC,KAAjB;;AAEA,YAAI,IAAI,KAAK,KAAb,EAAoB;AAClB,UAAA,GAAG,CAAC,KAAJ,GAAY,KAAZ;;AAEA,cAAI,kBAAkB,IAAI,OAAO,CAAC,OAAlC,EAA2C;AACzC;AACD;;AAED,UAAA,GAAG,CAAC,QAAJ,CAAa,KAAb,EAAoB,IAApB;AACD;AACF;;AAhBK;AAN0B,GAAP,CAAf,CAAd;AA0BA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,IAAA,OAAO,CAAC,OAAR,GAAkB,KAAlB;AACD,GAFwB,EAEtB,EAFsB,CAAzB,CA7B4B,CAiC5B;;AACA,EAAA,GAAG,CAAC,QAAJ,GAAe,QAAf;AAEA,SAAO,GAAG,CAAC,MAAX;AACD","sourceRoot":""}

package/lib-commonjs/createArrowStyles.d.ts

@@ -0,0 +1,27 @@
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { Theme } from '@fluentui/react-theme';
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;

package/lib-commonjs/createArrowStyles.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createArrowStyles = void 0;
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+
+function createArrowStyles(size) {
+  return theme => {
+    const arrowHCBorderStyle = `1px solid transparent`;
+    const arrowHCBorder = {
+      borderRight: arrowHCBorderStyle,
+      borderBottom: arrowHCBorderStyle
+    };
+    return {
+      position: 'absolute',
+      background: 'inherit',
+      visibility: 'hidden',
+      zIndex: -1,
+      ...(size && {
+        aspectRatio: 1,
+        width: `${size}px`
+      }),
+      ':before': {
+        content: '""',
+        borderRadius: '4px',
+        position: 'absolute',
+        width: 'inherit',
+        height: 'inherit',
+        background: 'inherit',
+        visibility: 'visible',
+        borderBottomRightRadius: theme.borderRadiusSmall,
+        transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
+      },
+      ':global([data-popper-placement])': {
+        ':before': arrowHCBorder
+      },
+      // Popper sets data-popper-placement on the root element, which is used to align the arrow
+      ':global([data-popper-placement^="top"])': {
+        bottom: 0,
+        '--angle': '0'
+      },
+      ':global([data-popper-placement^="right"])': {
+        left: 0,
+        '--angle': '90deg'
+      },
+      ':global([data-popper-placement^="bottom"])': {
+        top: 0,
+        '--angle': '180deg'
+      },
+      ':global([data-popper-placement^="left"])': {
+        right: 0,
+        '--angle': '270deg'
+      }
+    };
+  };
+}
+
+exports.createArrowStyles = createArrowStyles;
+//# sourceMappingURL=createArrowStyles.js.map

package/lib-commonjs/createArrowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":";;;;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;;AACH,SAAgB,iBAAhB,CAAkC,IAAlC,EAA+C;AAC7C,SAAO,KAAK,IAAG;AACb,UAAM,kBAAkB,GAAG,uBAA3B;AACA,UAAM,aAAa,GAAG;AACpB,MAAA,WAAW,EAAE,kBADO;AAEpB,MAAA,YAAY,EAAE;AAFM,KAAtB;AAKA,WAAO;AACL,MAAA,QAAQ,EAAE,UADL;AAEL,MAAA,UAAU,EAAE,SAFP;AAGL,MAAA,UAAU,EAAE,QAHP;AAIL,MAAA,MAAM,EAAE,CAAC,CAJJ;AAML,UAAI,IAAI,IAAI;AACV,QAAA,WAAW,EAAE,CADH;AAEV,QAAA,KAAK,EAAE,GAAG,IAAI;AAFJ,OAAZ,CANK;AAWL,iBAAW;AACT,QAAA,OAAO,EAAE,IADA;AAET,QAAA,YAAY,EAAE,KAFL;AAGT,QAAA,QAAQ,EAAE,UAHD;AAIT,QAAA,KAAK,EAAE,SAJE;AAKT,QAAA,MAAM,EAAE,SALC;AAMT,QAAA,UAAU,EAAE,SANH;AAOT,QAAA,UAAU,EAAE,SAPH;AAQT,QAAA,uBAAuB,EAAE,KAAK,CAAC,iBARtB;AAST,QAAA,SAAS,EAAE;AATF,OAXN;AAuBL,0CAAoC;AAClC,mBAAW;AADuB,OAvB/B;AA2BL;AACA,iDAA2C;AACzC,QAAA,MAAM,EAAE,CADiC;AAEzC,mBAAW;AAF8B,OA5BtC;AAiCL,mDAA6C;AAC3C,QAAA,IAAI,EAAE,CADqC;AAE3C,mBAAW;AAFgC,OAjCxC;AAqCL,oDAA8C;AAC5C,QAAA,GAAG,EAAE,CADuC;AAE5C,mBAAW;AAFiC,OArCzC;AAyCL,kDAA4C;AAC1C,QAAA,KAAK,EAAE,CADmC;AAE1C,mBAAW;AAF+B;AAzCvC,KAAP;AA8CD,GArDD;AAsDD;;AAvDD,OAAA,CAAA,iBAAA,GAAA,iBAAA","sourceRoot":""}

package/lib-commonjs/createVirtualElementFromClick.d.ts

@@ -0,0 +1,6 @@
+import type { PopperVirtualElement } from './types';
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;

package/lib-commonjs/createVirtualElementFromClick.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createVirtualElementFromClick = void 0;
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+
+function createVirtualElementFromClick(nativeEvent) {
+  const left = nativeEvent.clientX;
+  const top = nativeEvent.clientY;
+  const right = left + 1;
+  const bottom = top + 1;
+
+  function getBoundingClientRect() {
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      height: 1,
+      width: 1
+    };
+  }
+
+  return {
+    getBoundingClientRect
+  };
+}
+
+exports.createVirtualElementFromClick = createVirtualElementFromClick;
+//# sourceMappingURL=createVirtualElementFromClick.js.map

package/lib-commonjs/createVirtualElementFromClick.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":";;;;;;AAEA;;;AAGG;;AACH,SAAgB,6BAAhB,CAA8C,WAA9C,EAAqE;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD;;AArBD,OAAA,CAAA,6BAAA,GAAA,6BAAA","sourceRoot":""}

package/lib-commonjs/index.d.ts

@@ -1,2 +1,6 @@
+export * from './createVirtualElementFromClick';
+export * from './createArrowStyles';
 export * from './usePopper';
+export * from './usePopperMouseTarget';
+export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
 export * from './types';

package/lib-commonjs/index.js

@@ -1,5 +1,34 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeArrowOffset = exports.resolvePositioningShorthand = void 0;
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./createVirtualElementFromClick"), exports);
+
+tslib_1.__exportStar(require("./createArrowStyles"), exports);
+
 tslib_1.__exportStar(require("./usePopper"), exports);
+
+tslib_1.__exportStar(require("./usePopperMouseTarget"), exports);
+
+var index_1 = /*#__PURE__*/require("./utils/index");
+
+Object.defineProperty(exports, "resolvePositioningShorthand", {
+  enumerable: true,
+  get: function () {
+    return index_1.resolvePositioningShorthand;
+  }
+});
+Object.defineProperty(exports, "mergeArrowOffset", {
+  enumerable: true,
+  get: function () {
+    return index_1.mergeArrowOffset;
+  }
+});
+
+tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B","sourcesContent":["export * from './usePopper';\nexport * from './types';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,OAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,6BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,2BAAA;AAA2B;AAA3B,CAAA;AAA6B,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;;AACtC,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/types.d.ts

@@ -9,21 +9,21 @@ export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | n
 export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
 export declare type Position = 'above' | 'below' | 'before' | 'after';
 export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
+export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
 export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
 export declare type PopperRefHandle = {
     updatePosition: () => void;
 };
+export declare type PopperVirtualElement = PopperJs.VirtualElement;
 export interface PositioningProps {
-    /**
-     * Alignment for the component.
-     */
+    /** Alignment for the component. Only has an effect if used with the @see position option */
     align?: Alignment;
     /** The element which will define the boundaries of the popper position for the flip behavior. */
     flipBoundary?: Boundary;
     /** The element which will define the boundaries of the popper position for the overflow behavior. */
     overflowBoundary?: Boundary;
     /** An imperative handle to Popper methods. */
-    containerRef?: React.Ref<PopperRefHandle>;
+    popperRef?: React.Ref<PopperRefHandle>;
     /**
      * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
      * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -31,11 +31,6 @@ export interface PositioningProps {
      * then provided value for 'align' will be ignored and 'center' will be used instead.
      */
     position?: Position;
-    /**
-     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
-     * @default false
-     */
-    positionFixed?: boolean;
     /**
      * Lets you displace a popper element from its reference element.
      * This can be useful if you need to apply some margin between them or if you need to fine tune the
@@ -48,31 +43,26 @@ export interface PositioningProps {
      */
     arrowPadding?: number;
     /**
-     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
-     * "all" enables this behavior for all axis.
-     */
-    unstable_disableTether?: boolean | 'all';
-    /**
-     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
-     * `position` props, regardless of the size of the component, the reference element or the viewport.
+     * Applies max-height and max-width on popper to fit it within the available space in viewport.
+     * true enables this for both width and height when overflow happens.
+     * 'always' applies `max-height`/`max-width` regardless of overflow.
+     * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
+     * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
      */
-    unstable_pinned?: boolean;
+    autoSize?: AutoSize;
     /**
-     * Applies max-height and max-width on popper to fit it within the available space in viewport.
-     * true enables this for both width and height.
-     * 'height' applies only `max-height` and 'width' for `max-width`
+     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
      */
-    autoSize?: 'height' | 'width' | boolean;
-}
-export interface PopperOptions extends PositioningProps {
+    target?: HTMLElement | PopperVirtualElement | null;
     /**
-     * If false, delays Popper's creation.
-     * @default true
+     * Modifies position and alignment to cover the target
      */
-    enabled?: boolean;
+    coverTarget?: boolean;
     /**
-     * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.
+     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
+     * `position` props, regardless of the size of the component, the reference element or the viewport.
      */
-    positioningDependencies?: React.DependencyList;
-    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    pinned?: boolean;
 }
+export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
+export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;

package/lib-commonjs/types.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=types.js.map

package/lib-commonjs/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport * as React from 'react';\n\nexport type OffsetFunctionParam = {\n  popper: PopperJs.Rect;\n  reference: PopperJs.Rect;\n  placement: PopperJs.Placement;\n};\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];\n\nexport type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';\n\nexport type PopperRefHandle = { updatePosition: () => void };\n\nexport interface PositioningProps {\n  /**\n   * Alignment for the component.\n   */\n  align?: Alignment;\n\n  /** The element which will define the boundaries of the popper position for the flip behavior. */\n  flipBoundary?: Boundary;\n\n  /** The element which will define the boundaries of the popper position for the overflow behavior. */\n  overflowBoundary?: Boundary;\n\n  /** An imperative handle to Popper methods. */\n  containerRef?: React.Ref<PopperRefHandle>;\n\n  /**\n   * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n   * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n   * and 'start' | 'end' respectively),\n   * then provided value for 'align' will be ignored and 'center' will be used instead.\n   */\n  position?: Position;\n\n  /**\n   * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')\n   * @default false\n   */\n  positionFixed?: boolean;\n\n  /**\n   * Lets you displace a popper element from its reference element.\n   * This can be useful if you need to apply some margin between them or if you need to fine tune the\n   * position according to some custom logic.\n   */\n  offset?: Offset;\n\n  /**\n   * Defines padding between the corner of the popup element and the arrow.\n   * Use to prevent the arrow from overlapping a rounded corner, for example.\n   */\n  arrowPadding?: number;\n\n  /**\n   * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.\n   * \"all\" enables this behavior for all axis.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_disableTether?: boolean | 'all';\n\n  /**\n   * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n   * `position` props, regardless of the size of the component, the reference element or the viewport.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_pinned?: boolean;\n\n  /**\n   * Applies max-height and max-width on popper to fit it within the available space in viewport.\n   * true enables this for both width and height.\n   * 'height' applies only `max-height` and 'width' for `max-width`\n   */\n  autoSize?: 'height' | 'width' | boolean;\n}\n\nexport interface PopperOptions extends PositioningProps {\n  /**\n   * If false, delays Popper's creation.\n   * @default true\n   */\n  enabled?: boolean;\n\n  /**\n   * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.\n   */\n  positioningDependencies?: React.DependencyList;\n\n  onStateUpdate?: (state: Partial<PopperJs.State>) => void;\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

package/lib-commonjs/usePopper.d.ts

@@ -1,5 +1,24 @@
+import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
-import { PopperOptions } from './types';
+import type { PositioningProps } from './types';
+interface PopperOptions extends PositioningProps {
+    /**
+     * If false, delays Popper's creation.
+     * @default true
+     */
+    enabled?: boolean;
+    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    /**
+     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+     * @default false
+     */
+    positionFixed?: boolean;
+    /**
+     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
+     * "all" enables this behavior for all axis.
+     */
+    unstable_disableTether?: boolean | 'all';
+}
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
  * package:
@@ -13,3 +32,4 @@ export declare function usePopper(options?: PopperOptions): {
     containerRef: React.MutableRefObject<any>;
     arrowRef: React.MutableRefObject<any>;
 };
+export {};