@fluentui/react-positioning 0.0.0-nightly-20220302-0405.1

package/lib/utils/getReactFiberFromNode.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+declare type ReactEventResponder<E, C> = {
+    $$typeof: Symbol | number;
+    displayName: string;
+    targetEventTypes: null | string[];
+    rootEventTypes: null | string[];
+    getInitialState: null | ((props: Object) => Object);
+    onEvent: null | ((event: E, context: C, props: Object, state: Object) => void);
+    onRootEvent: null | ((event: E, context: C, props: Object, state: Object) => void);
+    onMount: null | ((context: C, props: Object, state: Object) => void);
+    onUnmount: null | ((context: C, props: Object, state: Object) => void);
+};
+declare type ReactEventResponderInstance<E, C> = {
+    fiber: Object;
+    props: Object;
+    responder: ReactEventResponder<E, C>;
+    rootEventTypes: null | Set<string>;
+    state: Object;
+};
+export declare type HookType = 'useState' | 'useReducer' | 'useContext' | 'useRef' | 'useEffect' | 'useLayoutEffect' | 'useCallback' | 'useMemo' | 'useImperativeHandle' | 'useDebugValue' | 'useResponder';
+declare type ReactProviderType<T> = {
+    $$typeof: Symbol | number;
+    _context: ReactContext<T>;
+};
+declare type ReactContext<T> = {
+    $$typeof: Symbol | number;
+    Consumer: ReactContext<T>;
+    Provider: ReactProviderType<T>;
+    _calculateChangedBits: ((a: T, b: T) => number) | null;
+    _currentValue: T;
+    _currentValue2: T;
+    _threadCount: number;
+    _currentRenderer?: Object | null;
+    _currentRenderer2?: Object | null;
+};
+declare type ContextDependency<T> = {
+    context: ReactContext<T>;
+    observedBits: number;
+    next: ContextDependency<any> | null;
+};
+declare enum WorkTag {
+    FunctionComponent = 0,
+    ClassComponent = 1,
+    IndeterminateComponent = 2,
+    HostRoot = 3,
+    HostPortal = 4,
+    HostComponent = 5,
+    HostText = 6,
+    Fragment = 7,
+    Mode = 8,
+    ContextConsumer = 9,
+    ContextProvider = 10,
+    ForwardRef = 11,
+    Profiler = 12,
+    SuspenseComponent = 13,
+    MemoComponent = 14,
+    SimpleMemoComponent = 15,
+    LazyComponent = 16,
+    IncompleteClassComponent = 17,
+    DehydratedFragment = 18,
+    SuspenseListComponent = 19,
+    FundamentalComponent = 20,
+    ScopeComponent = 21
+}
+declare type Source = {
+    fileName: string;
+    lineNumber: number;
+};
+declare type ExpirationTime = number;
+declare type Dependencies = {
+    expirationTime: ExpirationTime;
+    firstContext: ContextDependency<any> | null;
+    responders: Map<ReactEventResponder<any, any>, ReactEventResponderInstance<any, any>> | null;
+};
+export declare type Fiber = {
+    tag: WorkTag;
+    key: null | string;
+    elementType: any;
+    type: any;
+    stateNode: any;
+    return: Fiber | null;
+    child: Fiber | null;
+    sibling: Fiber | null;
+    index: number;
+    ref: React.Ref<any>;
+    pendingProps: any;
+    memoizedProps: any;
+    memoizedState: any;
+    dependencies: Dependencies | null;
+    nextEffect: Fiber | null;
+    firstEffect: Fiber | null;
+    lastEffect: Fiber | null;
+    expirationTime: ExpirationTime;
+    childExpirationTime: ExpirationTime;
+    alternate: Fiber | null;
+    actualDuration?: number;
+    actualStartTime?: number;
+    selfBaseDuration?: number;
+    treeBaseDuration?: number;
+    _debugID?: number;
+    _debugSource?: Source | null;
+    _debugOwner?: Fiber | null;
+    _debugIsCurrentlyTiming?: boolean;
+    _debugNeedsRemount?: boolean;
+    _debugHookTypes?: HookType[] | null;
+};
+export declare function getReactFiberFromNode(elm: Node | undefined): Fiber | null;
+export {};

package/lib/utils/getReactFiberFromNode.js

@@ -0,0 +1,46 @@
+var WorkTag;
+
+(function (WorkTag) {
+  WorkTag[WorkTag["FunctionComponent"] = 0] = "FunctionComponent";
+  WorkTag[WorkTag["ClassComponent"] = 1] = "ClassComponent";
+  WorkTag[WorkTag["IndeterminateComponent"] = 2] = "IndeterminateComponent";
+  WorkTag[WorkTag["HostRoot"] = 3] = "HostRoot";
+  WorkTag[WorkTag["HostPortal"] = 4] = "HostPortal";
+  WorkTag[WorkTag["HostComponent"] = 5] = "HostComponent";
+  WorkTag[WorkTag["HostText"] = 6] = "HostText";
+  WorkTag[WorkTag["Fragment"] = 7] = "Fragment";
+  WorkTag[WorkTag["Mode"] = 8] = "Mode";
+  WorkTag[WorkTag["ContextConsumer"] = 9] = "ContextConsumer";
+  WorkTag[WorkTag["ContextProvider"] = 10] = "ContextProvider";
+  WorkTag[WorkTag["ForwardRef"] = 11] = "ForwardRef";
+  WorkTag[WorkTag["Profiler"] = 12] = "Profiler";
+  WorkTag[WorkTag["SuspenseComponent"] = 13] = "SuspenseComponent";
+  WorkTag[WorkTag["MemoComponent"] = 14] = "MemoComponent";
+  WorkTag[WorkTag["SimpleMemoComponent"] = 15] = "SimpleMemoComponent";
+  WorkTag[WorkTag["LazyComponent"] = 16] = "LazyComponent";
+  WorkTag[WorkTag["IncompleteClassComponent"] = 17] = "IncompleteClassComponent";
+  WorkTag[WorkTag["DehydratedFragment"] = 18] = "DehydratedFragment";
+  WorkTag[WorkTag["SuspenseListComponent"] = 19] = "SuspenseListComponent";
+  WorkTag[WorkTag["FundamentalComponent"] = 20] = "FundamentalComponent";
+  WorkTag[WorkTag["ScopeComponent"] = 21] = "ScopeComponent";
+})(WorkTag || (WorkTag = {}));
+
+export function getReactFiberFromNode(elm) {
+  if (!elm) {
+    return null;
+  }
+
+  for (const k in elm) {
+    // React 16 uses "__reactInternalInstance$" prefix
+    // React 17 uses "__reactFiber$" prefix
+    // https://github.com/facebook/react/pull/18377
+    if (k.indexOf('__reactInternalInstance$') === 0 || k.indexOf('__reactFiber$') === 0) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return elm[k];
+    }
+  }
+
+  throw new Error('getReactFiber(): Failed to find a React Fiber on a node');
+}
+//# sourceMappingURL=getReactFiberFromNode.js.map

package/lib/utils/getReactFiberFromNode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getReactFiberFromNode.ts"],"names":[],"mappings":"AAuEA,IAAK,OAAL;;AAAA,CAAA,UAAK,OAAL,EAAY;AACV,EAAA,OAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,mBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,gBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,wBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,GAAA,eAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,iBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,GAAA,EAAA,CAAA,GAAA,iBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,YAAA,CAAA,GAAA,EAAA,CAAA,GAAA,YAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,UAAA,CAAA,GAAA,EAAA,CAAA,GAAA,UAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,GAAA,EAAA,CAAA,GAAA,mBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,eAAA,CAAA,GAAA,EAAA,CAAA,GAAA,eAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,GAAA,EAAA,CAAA,GAAA,qBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,eAAA,CAAA,GAAA,EAAA,CAAA,GAAA,eAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,GAAA,EAAA,CAAA,GAAA,0BAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,GAAA,EAAA,CAAA,GAAA,oBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,GAAA,EAAA,CAAA,GAAA,uBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,GAAA,EAAA,CAAA,GAAA,sBAAA;AACA,EAAA,OAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,GAAA,EAAA,CAAA,GAAA,gBAAA;AACD,CAvBD,EAAK,OAAO,KAAP,OAAO,GAAA,EAAA,CAAZ;;AAsLA,OAAM,SAAU,qBAAV,CAAgC,GAAhC,EAAqD;AACzD,MAAI,CAAC,GAAL,EAAU;AACR,WAAO,IAAP;AACD;;AAED,OAAK,MAAM,CAAX,IAAgB,GAAhB,EAAqB;AACnB;AACA;AACA;AACA,QAAI,CAAC,CAAC,OAAF,CAAU,0BAAV,MAA0C,CAA1C,IAA+C,CAAC,CAAC,OAAF,CAAU,eAAV,MAA+B,CAAlF,EAAqF;AACnF;AACA;AACA,aAAO,GAAG,CAAC,CAAD,CAAV;AACD;AACF;;AAED,QAAM,IAAI,KAAJ,CAAU,yDAAV,CAAN;AACD","sourcesContent":["import * as React from 'react';\n\n// ========================================================\n// react/packages/shared/ReactTypes.js\n// ========================================================\n\ntype ReactEventResponder<E, C> = {\n  $$typeof: Symbol | number;\n  displayName: string;\n  targetEventTypes: null | string[];\n  rootEventTypes: null | string[];\n  getInitialState: null | ((props: Object) => Object);\n  onEvent: null | ((event: E, context: C, props: Object, state: Object) => void);\n  onRootEvent: null | ((event: E, context: C, props: Object, state: Object) => void);\n  onMount: null | ((context: C, props: Object, state: Object) => void);\n  onUnmount: null | ((context: C, props: Object, state: Object) => void);\n};\n\ntype ReactEventResponderInstance<E, C> = {\n  fiber: Object;\n  props: Object;\n  responder: ReactEventResponder<E, C>;\n  rootEventTypes: null | Set<string>;\n  state: Object;\n};\n\n// ========================================================\n// react/packages/react-reconciler/src/ReactFiberHooks.js\n// ========================================================\n\nexport type HookType =\n  | 'useState'\n  | 'useReducer'\n  | 'useContext'\n  | 'useRef'\n  | 'useEffect'\n  | 'useLayoutEffect'\n  | 'useCallback'\n  | 'useMemo'\n  | 'useImperativeHandle'\n  | 'useDebugValue'\n  | 'useResponder';\n\ntype ReactProviderType<T> = {\n  $$typeof: Symbol | number;\n  _context: ReactContext<T>;\n};\n\ntype ReactContext<T> = {\n  $$typeof: Symbol | number;\n  Consumer: ReactContext<T>;\n  Provider: ReactProviderType<T>;\n\n  _calculateChangedBits: ((a: T, b: T) => number) | null;\n\n  _currentValue: T;\n  _currentValue2: T;\n  _threadCount: number;\n\n  // DEV only\n  _currentRenderer?: Object | null;\n  _currentRenderer2?: Object | null;\n};\n\ntype ContextDependency<T> = {\n  context: ReactContext<T>;\n  observedBits: number;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  next: ContextDependency<any> | null;\n};\n\nenum WorkTag {\n  FunctionComponent = 0,\n  ClassComponent = 1,\n  IndeterminateComponent = 2, // Before we know whether it is function or class\n  HostRoot = 3, // Root of a host tree. Could be nested inside another node.\n  HostPortal = 4, // A subtree. Could be an entry point to a different renderer.\n  HostComponent = 5,\n  HostText = 6,\n  Fragment = 7,\n  Mode = 8,\n  ContextConsumer = 9,\n  ContextProvider = 10,\n  ForwardRef = 11,\n  Profiler = 12,\n  SuspenseComponent = 13,\n  MemoComponent = 14,\n  SimpleMemoComponent = 15,\n  LazyComponent = 16,\n  IncompleteClassComponent = 17,\n  DehydratedFragment = 18,\n  SuspenseListComponent = 19,\n  FundamentalComponent = 20,\n  ScopeComponent = 21,\n}\n\ntype Source = {\n  fileName: string;\n  lineNumber: number;\n};\n\ntype ExpirationTime = number;\n\ntype Dependencies = {\n  expirationTime: ExpirationTime;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  firstContext: ContextDependency<any> | null;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  responders: Map<ReactEventResponder<any, any>, ReactEventResponderInstance<any, any>> | null;\n};\n\n// ========================================================\n// react/packages/react-reconciler/src/ReactFiber.js\n// ========================================================\n\n// A Fiber is work on a Component that needs to be done or was done. There can\n// be more than one per component.\n\nexport type Fiber = {\n  // These first fields are conceptually members of an Instance. This used to\n  // be split into a separate type and intersected with the other Fiber fields,\n  // but until Flow fixes its intersection bugs, we've merged them into a\n  // single type.\n\n  // An Instance is shared between all versions of a component. We can easily\n  // break this out into a separate object to avoid copying so much to the\n  // alternate versions of the tree. We put this on a single object for now to\n  // minimize the number of objects created during the initial render.\n\n  // Tag identifying the type of fiber.\n  tag: WorkTag;\n\n  // Unique identifier of this child.\n  key: null | string;\n\n  // The value of element.type which is used to preserve the identity during\n  // reconciliation of this child.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  elementType: any;\n\n  // The resolved function/class/ associated with this fiber.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type: any;\n\n  // The local state associated with this fiber.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  stateNode: any;\n\n  // Conceptual aliases\n  // parent : Instance -> return The parent happens to be the same as the\n  // return fiber since we've merged the fiber and instance.\n\n  // Remaining fields belong to Fiber\n\n  // The Fiber to return to after finishing processing this one.\n  // This is effectively the parent, but there can be multiple parents (two)\n  // so this is only the parent of the thing we're currently processing.\n  // It is conceptually the same as the return address of a stack frame.\n  return: Fiber | null;\n\n  // Singly Linked List Tree Structure.\n  child: Fiber | null;\n  sibling: Fiber | null;\n  index: number;\n\n  // The ref last used to attach this node.\n  // I'll avoid adding an owner field for prod and model that as functions.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref: React.Ref<any>;\n\n  // Input is the data coming into process this fiber. Arguments. Props.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  pendingProps: any; // This type will be more specific once we overload the tag.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  memoizedProps: any; // The props used to create the output.\n\n  // A queue of state updates and callbacks.\n  // updateQueue: UpdateQueue<any> | null,\n\n  // The state used to create the output\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  memoizedState: any;\n\n  // Dependencies (contexts, events) for this fiber, if it has any\n  dependencies: Dependencies | null;\n\n  // // Bitfield that describes properties about the fiber and its subtree. E.g.\n  // // the ConcurrentMode flag indicates whether the subtree should be async-by-\n  // // default. When a fiber is created, it inherits the mode of its\n  // // parent. Additional flags can be set at creation time, but after that the\n  // // value should remain unchanged throughout the fiber's lifetime, particularly\n  // // before its child fibers are created.\n  // mode: TypeOfMode\n  //\n  // // Effect\n  // effectTag: SideEffectTag\n\n  // Singly linked list fast path to the next fiber with side-effects.\n  nextEffect: Fiber | null;\n\n  // The first and last fiber with side-effect within this subtree. This allows\n  // us to reuse a slice of the linked list when we reuse the work done within\n  // this fiber.\n  firstEffect: Fiber | null;\n  lastEffect: Fiber | null;\n\n  // Represents a time in the future by which this work should be completed.\n  // Does not include work found in its subtree.\n  expirationTime: ExpirationTime;\n\n  // This is used to quickly determine if a subtree has no pending changes.\n  childExpirationTime: ExpirationTime;\n\n  // This is a pooled version of a Fiber. Every fiber that gets updated will\n  // eventually have a pair. There are cases when we can clean up pairs to save\n  // memory if we need to.\n  alternate: Fiber | null;\n\n  // Time spent rendering this Fiber and its descendants for the current update.\n  // This tells us how well the tree makes use of sCU for memoization.\n  // It is reset to 0 each time we render and only updated when we don't bailout.\n  // This field is only set when the enableProfilerTimer flag is enabled.\n  actualDuration?: number;\n\n  // If the Fiber is currently active in the \"render\" phase,\n  // This marks the time at which the work began.\n  // This field is only set when the enableProfilerTimer flag is enabled.\n  actualStartTime?: number;\n\n  // Duration of the most recent render time for this Fiber.\n  // This value is not updated when we bailout for memoization purposes.\n  // This field is only set when the enableProfilerTimer flag is enabled.\n  selfBaseDuration?: number;\n\n  // Sum of base times for all descendants of this Fiber.\n  // This value bubbles up during the \"complete\" phase.\n  // This field is only set when the enableProfilerTimer flag is enabled.\n  treeBaseDuration?: number;\n\n  // Conceptual aliases\n  // workInProgress : Fiber ->  alternate The alternate used for reuse happens\n  // to be the same as work in progress.\n  // __DEV__ only\n  _debugID?: number;\n  _debugSource?: Source | null;\n  _debugOwner?: Fiber | null;\n  _debugIsCurrentlyTiming?: boolean;\n  _debugNeedsRemount?: boolean;\n\n  // Used to verify that the order of hooks does not change between renders.\n  _debugHookTypes?: HookType[] | null;\n};\n\nexport function getReactFiberFromNode(elm: Node | undefined): Fiber | null {\n  if (!elm) {\n    return null;\n  }\n\n  for (const k in elm) {\n    // React 16 uses \"__reactInternalInstance$\" prefix\n    // React 17 uses \"__reactFiber$\" prefix\n    // https://github.com/facebook/react/pull/18377\n    if (k.indexOf('__reactInternalInstance$') === 0 || k.indexOf('__reactFiber$') === 0) {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      return elm[k];\n    }\n  }\n\n  throw new Error('getReactFiber(): Failed to find a React Fiber on a node');\n}\n"],"sourceRoot":"../src/"}

package/lib/utils/getScrollParent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns the parent node or the host of the node argument.
+ * @param node - DOM node.
+ * @returns - parent DOM node.
+ */
+export declare const getParentNode: (node: HTMLElement) => HTMLElement;
+/**
+ * Returns the first scrollable parent of the given element.
+ * @param node - DOM node.
+ * @returns - the first scrollable parent.
+ */
+export declare const getScrollParent: (node: Document | HTMLElement | null) => HTMLElement;

package/lib/utils/getScrollParent.js

@@ -0,0 +1,65 @@
+/**
+ * Returns the parent node or the host of the node argument.
+ * @param node - DOM node.
+ * @returns - parent DOM node.
+ */
+export const getParentNode = node => {
+  if (node.nodeName === 'HTML') {
+    return node;
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  return node.parentNode || node.host;
+};
+/**
+ * Returns CSS styles of the given node.
+ * @param node - DOM node.
+ * @returns - CSS styles.
+ */
+
+const getStyleComputedProperty = node => {
+  var _a;
+
+  if (node.nodeType !== 1) {
+    return {};
+  }
+
+  const window = (_a = node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  return window.getComputedStyle(node, null);
+};
+/**
+ * Returns the first scrollable parent of the given element.
+ * @param node - DOM node.
+ * @returns - the first scrollable parent.
+ */
+
+
+export const getScrollParent = node => {
+  // Return body, `getScroll` will take care to get the correct `scrollTop` from it
+  const parentNode = node && getParentNode(node); // eslint-disable-next-line
+
+  if (!parentNode) return document.body;
+
+  switch (parentNode.nodeName) {
+    case 'HTML':
+    case 'BODY':
+      return parentNode.ownerDocument.body;
+
+    case '#document':
+      return parentNode.body;
+  } // If any of the overflow props is defined for the node then we return it as the parent
+
+
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = getStyleComputedProperty(parentNode);
+
+  if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
+    return parentNode;
+  }
+
+  return getScrollParent(parentNode);
+};
+//# sourceMappingURL=getScrollParent.js.map

package/lib/utils/getScrollParent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getScrollParent.ts"],"names":[],"mappings":"AAAA;;;;AAIG;AACH,OAAO,MAAM,aAAa,GAAI,IAAD,IAAmC;AAC9D,MAAI,IAAI,CAAC,QAAL,KAAkB,MAAtB,EAA8B;AAC5B,WAAO,IAAP;AACD,GAH6D,CAI9D;;;AACA,SAAO,IAAI,CAAC,UAAL,IAAoB,IAAY,CAAC,IAAxC;AACD,CANM;AAQP;;;;AAIG;;AACH,MAAM,wBAAwB,GAAI,IAAD,IAAoD;;;AACnF,MAAI,IAAI,CAAC,QAAL,KAAkB,CAAtB,EAAyB;AACvB,WAAO,EAAP;AACD;;AAED,QAAM,MAAM,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,aAAL,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,WAAnC;AACA,SAAO,MAAO,CAAC,gBAAR,CAAyB,IAAzB,EAA+B,IAA/B,CAAP;AACD,CAPD;AASA;;;;AAIG;;;AACH,OAAO,MAAM,eAAe,GAAI,IAAD,IAAqD;AAClF;AACA,QAAM,UAAU,GAAG,IAAI,IAAI,aAAa,CAAC,IAAD,CAAxC,CAFkF,CAGlF;;AACA,MAAI,CAAC,UAAL,EAAiB,OAAO,QAAQ,CAAC,IAAhB;;AAEjB,UAAQ,UAAU,CAAC,QAAnB;AACE,SAAK,MAAL;AACA,SAAK,MAAL;AACE,aAAO,UAAU,CAAC,aAAX,CAA0B,IAAjC;;AACF,SAAK,WAAL;AACE,aAAS,UAAmC,CAAC,IAA7C;AALJ,GANkF,CAclF;;;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,SAAZ;AAAuB,IAAA;AAAvB,MAAqC,wBAAwB,CAAC,UAAD,CAAnE;;AACA,MAAI,wBAAwB,IAAxB,CAA6B,QAAS,GAAG,SAAZ,GAAyB,SAAtD,CAAJ,EAAsE;AACpE,WAAO,UAAP;AACD;;AAED,SAAO,eAAe,CAAC,UAAD,CAAtB;AACD,CArBM","sourcesContent":["/**\n * Returns the parent node or the host of the node argument.\n * @param node - DOM node.\n * @returns - parent DOM node.\n */\nexport const getParentNode = (node: HTMLElement): HTMLElement => {\n  if (node.nodeName === 'HTML') {\n    return node;\n  }\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return node.parentNode || (node as any).host;\n};\n\n/**\n * Returns CSS styles of the given node.\n * @param node - DOM node.\n * @returns - CSS styles.\n */\nconst getStyleComputedProperty = (node: HTMLElement): Partial<CSSStyleDeclaration> => {\n  if (node.nodeType !== 1) {\n    return {};\n  }\n\n  const window = node.ownerDocument?.defaultView;\n  return window!.getComputedStyle(node, null);\n};\n\n/**\n * Returns the first scrollable parent of the given element.\n * @param node - DOM node.\n * @returns - the first scrollable parent.\n */\nexport const getScrollParent = (node: Document | HTMLElement | null): HTMLElement => {\n  // Return body, `getScroll` will take care to get the correct `scrollTop` from it\n  const parentNode = node && getParentNode(node as HTMLElement);\n  // eslint-disable-next-line\n  if (!parentNode) return document.body;\n\n  switch (parentNode.nodeName) {\n    case 'HTML':\n    case 'BODY':\n      return parentNode.ownerDocument!.body;\n    case '#document':\n      return ((parentNode as unknown) as Document).body;\n  }\n\n  // If any of the overflow props is defined for the node then we return it as the parent\n  const { overflow, overflowX, overflowY } = getStyleComputedProperty(parentNode);\n  if (/(auto|scroll|overlay)/.test(overflow! + overflowY! + overflowX)) {\n    return parentNode;\n  }\n\n  return getScrollParent(parentNode);\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from './getBasePlacement';
+export * from './getBoundary';
+export * from './getReactFiberFromNode';
+export * from './getScrollParent';
+export * from './mergeArrowOffset';
+export * from './positioningHelper';
+export * from './resolvePositioningShorthand';
+export * from './useCallbackRef';

package/lib/utils/index.js

@@ -0,0 +1,9 @@
+export * from './getBasePlacement';
+export * from './getBoundary';
+export * from './getReactFiberFromNode';
+export * from './getScrollParent';
+export * from './mergeArrowOffset';
+export * from './positioningHelper';
+export * from './resolvePositioningShorthand';
+export * from './useCallbackRef';
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './getBasePlacement';\nexport * from './getBoundary';\nexport * from './getReactFiberFromNode';\nexport * from './getScrollParent';\nexport * from './mergeArrowOffset';\nexport * from './positioningHelper';\nexport * from './resolvePositioningShorthand';\nexport * from './useCallbackRef';\n"]}

package/lib/utils/mergeArrowOffset.d.ts

@@ -0,0 +1,10 @@
+import type { Offset } from '../types';
+/**
+ * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
+ * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
+ *
+ * @param userOffset - The offset provided by the user
+ * @param arrowHeight - The height of the arrow in px
+ * @returns User offset augmented with arrow height
+ */
+export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;

package/lib/utils/mergeArrowOffset.js

@@ -0,0 +1,42 @@
+/**
+ * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
+ * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
+ *
+ * @param userOffset - The offset provided by the user
+ * @param arrowHeight - The height of the arrow in px
+ * @returns User offset augmented with arrow height
+ */
+export function mergeArrowOffset(userOffset, arrowHeight) {
+  let offsetWithArrow = userOffset;
+
+  if (!userOffset) {
+    return [0, arrowHeight];
+  }
+
+  if (Array.isArray(offsetWithArrow)) {
+    setArrowOffset(offsetWithArrow, arrowHeight);
+    return offsetWithArrow;
+  }
+
+  if (typeof offsetWithArrow === 'function') {
+    const userOffsetFn = offsetWithArrow;
+
+    offsetWithArrow = offsetParams => {
+      const offset = userOffsetFn(offsetParams);
+      setArrowOffset(offset, arrowHeight);
+      return offset;
+    };
+  } // This should never happen
+
+
+  return [0, 0];
+}
+
+const setArrowOffset = (offset, arrowHeight) => {
+  if (offset[1] !== null && offset[1] !== undefined) {
+    offset[1] += arrowHeight;
+  } else {
+    offset[1] = arrowHeight;
+  }
+};
+//# sourceMappingURL=mergeArrowOffset.js.map

package/lib/utils/mergeArrowOffset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/mergeArrowOffset.ts"],"names":[],"mappings":"AAEA;;;;;;;AAOG;AACH,OAAM,SAAU,gBAAV,CAA2B,UAA3B,EAAkE,WAAlE,EAAqF;AACzF,MAAI,eAAe,GAAG,UAAtB;;AACA,MAAI,CAAC,UAAL,EAAiB;AACf,WAAO,CAAC,CAAD,EAAI,WAAJ,CAAP;AACD;;AAED,MAAI,KAAK,CAAC,OAAN,CAAc,eAAd,CAAJ,EAAoC;AAClC,IAAA,cAAc,CAAC,eAAD,EAAkB,WAAlB,CAAd;AACA,WAAO,eAAP;AACD;;AAED,MAAI,OAAO,eAAP,KAA2B,UAA/B,EAA2C;AACzC,UAAM,YAAY,GAAG,eAArB;;AACA,IAAA,eAAe,GAAG,YAAY,IAAG;AAC/B,YAAM,MAAM,GAAG,YAAY,CAAC,YAAD,CAA3B;AACA,MAAA,cAAc,CAAC,MAAD,EAAS,WAAT,CAAd;AACA,aAAO,MAAP;AACD,KAJD;AAKD,GAlBwF,CAoBzF;;;AACA,SAAO,CAAC,CAAD,EAAI,CAAJ,CAAP;AACD;;AAED,MAAM,cAAc,GAAG,CAAC,MAAD,EAAiE,WAAjE,KAAwF;AAC7G,MAAI,MAAM,CAAC,CAAD,CAAN,KAAc,IAAd,IAAsB,MAAM,CAAC,CAAD,CAAN,KAAc,SAAxC,EAAmD;AACjD,IAAA,MAAM,CAAC,CAAD,CAAN,IAAa,WAAb;AACD,GAFD,MAEO;AACL,IAAA,MAAM,CAAC,CAAD,CAAN,GAAY,WAAZ;AACD;AACF,CAND","sourcesContent":["import type { Offset } from '../types';\n\n/**\n * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the\n * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset\n *\n * @param userOffset - The offset provided by the user\n * @param arrowHeight - The height of the arrow in px\n * @returns User offset augmented with arrow height\n */\nexport function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset {\n  let offsetWithArrow = userOffset;\n  if (!userOffset) {\n    return [0, arrowHeight];\n  }\n\n  if (Array.isArray(offsetWithArrow)) {\n    setArrowOffset(offsetWithArrow, arrowHeight);\n    return offsetWithArrow;\n  }\n\n  if (typeof offsetWithArrow === 'function') {\n    const userOffsetFn = offsetWithArrow;\n    offsetWithArrow = offsetParams => {\n      const offset = userOffsetFn(offsetParams);\n      setArrowOffset(offset, arrowHeight);\n      return offset;\n    };\n  }\n\n  // This should never happen\n  return [0, 0] as never;\n}\n\nconst setArrowOffset = (offset: [number | null | undefined, number | null | undefined], arrowHeight: number) => {\n  if (offset[1] !== null && offset[1] !== undefined) {\n    offset[1] += arrowHeight;\n  } else {\n    offset[1] = arrowHeight;\n  }\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/positioningHelper.d.ts

@@ -0,0 +1,7 @@
+import * as PopperJs from '@popperjs/core';
+import type { Alignment, Offset, Position } from '../types';
+/**
+ * @see positioninHelper.test.ts for expected placement values
+ */
+export declare const getPlacement: (align?: Alignment | undefined, position?: Position | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
+export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;

package/lib/utils/positioningHelper.js

@@ -0,0 +1,49 @@
+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 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 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

@@ -0,0 +1 @@
+{"version":3,"sources":["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","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport type { 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"],"sourceRoot":"../src/"}

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":["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","sourcesContent":["import type { PositioningShorthand, PositioningShorthandValue, PositioningProps } from '../types';\n\n// Look up table for shorthand to avoid parsing strings\nconst shorthandLookup: Record<PositioningShorthandValue, Pick<PositioningProps, 'position' | 'align'>> = {\n  above: { position: 'above', align: 'center' },\n  'above-start': { position: 'above', align: 'start' },\n  'above-end': { position: 'above', align: 'end' },\n  below: { position: 'below', align: 'center' },\n  'below-start': { position: 'below', align: 'start' },\n  'below-end': { position: 'below', align: 'end' },\n  before: { position: 'before', align: 'center' },\n  'before-top': { position: 'before', align: 'top' },\n  'before-bottom': { position: 'before', align: 'bottom' },\n  after: { position: 'after', align: 'center' },\n  'after-top': { position: 'after', align: 'top' },\n  'after-bottom': { position: 'after', align: 'bottom' },\n};\n\nexport function resolvePositioningShorthand(\n  shorthand: PositioningShorthand | undefined | null,\n): Readonly<PositioningProps> {\n  if (shorthand === undefined || shorthand === null) {\n    return {};\n  }\n\n  if (typeof shorthand === 'string') {\n    return shorthandLookup[shorthand];\n  }\n\n  return shorthand as Readonly<PositioningProps>;\n}\n"],"sourceRoot":"../src/"}

package/lib/utils/useCallbackRef.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+/**
+ * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
+ * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
+ * React.useState(), but it will cause re-renders always.
+ *
+ * https://reactjs.org/docs/hooks-reference.html#useref
+ * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
+ *
+ * @param initialValue - initial ref value
+ * @param callback - a callback to run when value changes
+ * @param skipInitialResolve - a flag to skip an initial ref report
+ *
+ * @example
+ * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
+ * ref.current = 1;
+ * // prints 0 -> 1
+ */
+export declare function useCallbackRef<T>(initialValue: T | null, callback: (newValue: T | null, lastValue: T | null) => void, skipInitialResolve?: boolean): React.MutableRefObject<T | null>;

package/lib/utils/useCallbackRef.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+/**
+ * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
+ * changes and mutating the .current property doesn't cause a re-render. An opt-out will be use a callback ref via
+ * React.useState(), but it will cause re-renders always.
+ *
+ * https://reactjs.org/docs/hooks-reference.html#useref
+ * https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
+ *
+ * @param initialValue - initial ref value
+ * @param callback - a callback to run when value changes
+ * @param skipInitialResolve - a flag to skip an initial ref report
+ *
+ * @example
+ * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
+ * ref.current = 1;
+ * // prints 0 -> 1
+ */
+
+export function useCallbackRef(initialValue, callback, skipInitialResolve) {
+  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

@@ -0,0 +1 @@
+{"version":3,"sources":["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","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"],"sourceRoot":"../src/"}

package/lib-commonjs/createArrowStyles.d.ts

@@ -0,0 +1,64 @@
+import type { GriffelStyle } from '@griffel/react';
+/**
+ * Options parameter for the createArrowStyles function
+ */
+export declare type CreateArrowStylesOptions = {
+    /**
+     * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
+     *
+     * This can be undefined to leave out the arrow size styles. You must then add styles created by
+     * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
+     */
+    arrowHeight: number | undefined;
+    /**
+     * The borderWidth of the arrow. Should be the same borderWidth as the parent element.
+     *
+     * @defaultvalue 1px
+     */
+    borderWidth?: GriffelStyle['borderBottomWidth'];
+    /**
+     * The borderStyle for the arrow. Should be the same borderStyle as the parent element.
+     *
+     * @defaultvalue solid
+     */
+    borderStyle?: GriffelStyle['borderBottomStyle'];
+    /**
+     * The borderColor of the arrow. Should be the same borderColor as the parent element.
+     *
+     * @defaultvalue tokens.colorTransparentStroke
+     */
+    borderColor?: GriffelStyle['borderBottomColor'];
+};
+/**
+ * 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({ arrowHeight: 6 }),
+ *
+ *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
+ *     mediumArrow: createArrowHeightStyles(4),
+ *     smallArrow: createArrowHeightStyles(2),
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.className = styles.arrowWithSize;
+ *   state.arrowWithoutSize.className = mergeClasses(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ */
+export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
+/**
+ * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
+ *
+ * Use this when you need to create classes for several different arrow sizes. If you only need a
+ * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
+ */
+export declare function createArrowHeightStyles(arrowHeight: number): {
+    width: string;
+    height: string;
+};