@papillonarts/components 0.34.0 → 0.36.0

package/build/Modern/Pagination/Pagination.model.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildComponentData = buildComponentData;
+exports.buildPaginationModel = buildPaginationModel;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+function buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount) {
+  var prev = {
+    type: 'PREV',
+    num: currentPage - 1,
+    disabled: currentPage === 1
+  };
+  var next = {
+    type: 'NEXT',
+    num: currentPage + 1,
+    disabled: currentPage === pageCount
+  };
+  if (!showPages) {
+    return [prev, next];
+  }
+  if (pageCount <= 0) {
+    return [prev, _objectSpread(_objectSpread({}, next), {}, {
+      disabled: true
+    })];
+  }
+  var pages = [];
+
+  // number of pages shown on each side of the current page
+  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
+  // standardGap: 3
+  var standardGap = surroundingPageCount + marginPageCount;
+
+  // the maximum number of pages that can be shown at a given time (account for current page, left and right ellipsis)
+  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
+  // maxVisiblePages: 9
+  var maxVisiblePages = standardGap + standardGap + 3;
+
+  // if the number of pages is less than the maximum number of pages that can be shown just return all of them
+  if (pageCount <= maxVisiblePages) {
+    addPages(1, pageCount, false);
+    return [prev].concat(pages, [next]);
+  }
+
+  // startGap is the number of pages hidden by the start ellipsis
+  // startOffset is the number of pages to offset at the start to compensate
+  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
+  // startGap: 5
+  // startOffset: 0
+  // when the margin and the surrounding windows overlap.
+  // [1, _2_, 3, 4, 5, 6, ..., 15]
+  // startGap = 0
+  // startOffset: -3 <--
+  var startGap = 0;
+  var startOffset = 0;
+
+  // When there is overlap
+  if (currentPage - standardGap - 1 <= 1) {
+    startOffset = currentPage - standardGap - 2;
+  } else {
+    startGap = currentPage - standardGap - 1;
+  }
+
+  // These are equivalent to startGap and startOffset but at the end of the list
+  var endGap = 0;
+  var endOffset = 0;
+
+  // When there is overlap
+  if (pageCount - currentPage - standardGap <= 1) {
+    endOffset = pageCount - currentPage - standardGap - 1;
+  } else {
+    endGap = pageCount - currentPage - standardGap;
+  }
+  var hasStartEllipsis = startGap > 0;
+  var hasEndEllipsis = endGap > 0;
+
+  // add pages "before" the start ellipsis (if any)
+  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
+  // marginPageCount: 1
+  // addPages(1, 1, true)
+  addPages(1, marginPageCount, hasStartEllipsis);
+  if (hasStartEllipsis) {
+    addEllipsis(marginPageCount);
+  }
+
+  // add middle pages
+  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
+  // marginPageCount: 1
+  // surroundingPageCount: 2
+  // startGap: 5
+  // startOffset: 0
+  // endGap: 3
+  // endOffset: 0
+  // addPages(7, 11, true)
+  addPages(marginPageCount + startGap + endOffset + 1, pageCount - startOffset - endGap - marginPageCount, hasEndEllipsis);
+  if (hasEndEllipsis) {
+    addEllipsis(pageCount - startOffset - endGap - marginPageCount);
+  }
+
+  // add pages "after" the start ellipsis (if any)
+  // [1, ..., 7, 8, _9_, 10, 11, ..., 15]
+  // marginPageCount: 1
+  // surroundingPageCount: 2
+  // startGap: 5
+  // startOffset: 0
+  // endGap: 3
+  // endOffset: 0
+  // addPages(15, 15)
+  addPages(pageCount - marginPageCount + 1, pageCount);
+  return [prev].concat(pages, [next]);
+  function addEllipsis(previousPage) {
+    pages.push({
+      type: 'BREAK',
+      num: previousPage + 1
+    });
+  }
+  function addPages(start, end) {
+    var precedesBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    for (var i = start; i <= end; i++) {
+      pages.push({
+        type: 'NUM',
+        num: i,
+        selected: i === currentPage,
+        precedesBreak: i === end && precedesBreak
+      });
+    }
+  }
+}
+function buildComponentData(page, hrefBuilder, onClick) {
+  var props = {};
+  var content = '';
+  var key = '';
+  switch (page.type) {
+    case 'PREV':
+      {
+        key = 'page-prev';
+        content = 'Previous';
+        if (page.disabled) {
+          Object.assign(props, {
+            rel: 'prev',
+            'aria-hidden': 'true',
+            'aria-disabled': 'true'
+          });
+        } else {
+          Object.assign(props, {
+            rel: 'prev',
+            href: hrefBuilder(page.num),
+            'aria-label': 'Previous Page',
+            'data-testid': 'page-prev',
+            onClick: onClick
+          });
+        }
+        break;
+      }
+    case 'NEXT':
+      {
+        key = 'page-next';
+        content = 'Next';
+        if (page.disabled) {
+          Object.assign(props, {
+            rel: 'next',
+            'aria-hidden': 'true',
+            'aria-disabled': 'true'
+          });
+        } else {
+          Object.assign(props, {
+            rel: 'next',
+            href: hrefBuilder(page.num),
+            'aria-label': 'Next Page',
+            'data-testid': 'page-next',
+            onClick: onClick
+          });
+        }
+        break;
+      }
+    case 'NUM':
+      {
+        key = "page-".concat(page.num);
+        content = String(page.num);
+        Object.assign(props, {
+          href: hrefBuilder(page.num),
+          // We append "..." to the aria-label for pages that preceed a break because screen readers will
+          // change the tone the text is read in.
+          // This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.
+          'aria-label': "Page ".concat(page.num).concat(page.precedesBreak ? '...' : ''),
+          'aria-current': page.selected ? 'page' : undefined,
+          onClick: onClick
+        });
+        break;
+      }
+    case 'BREAK':
+      {
+        key = "page-".concat(page.num, "-break");
+        content = '…';
+        Object.assign(props, {
+          as: 'span',
+          role: 'presentation'
+        });
+      }
+  }
+  return {
+    props: props,
+    key: key,
+    content: content
+  };
+}

package/build/Modern/Pagination/Pagination.module.scss

@@ -0,0 +1,141 @@
+/* stylelint-disable custom-property-pattern, selector-not-notation, no-descending-specificity */
+.Page {
+  min-width: 32px; /* primer.control.medium.size */
+  height: 32px; /* primer.control.medium.size */
+  padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */
+  margin-right: var(--base-size-4);
+  font-style: normal;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1;
+  color: var(--fgColor-default);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border-radius: var(--borderRadius-medium);
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Page[rel='prev'] > svg,
+.Page[rel='next'] > svg {
+  /* sizing with `em` so icons scale with inherited font-size */
+  height: 1em;
+  width: 1em;
+}
+
+.Page[rel='prev'] > svg {
+  margin-inline-end: var(--base-size-4);
+}
+
+.Page[rel='next'] > svg {
+  margin-inline-start: var(--base-size-4);
+}
+
+.Page:last-child {
+  margin-right: 0;
+}
+
+.Page:hover,
+.Page:focus {
+  text-decoration: none;
+  background-color: var(--control-transparent-bgColor-hover);
+  outline: 0;
+  transition-duration: 0.1s;
+}
+
+.Page:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+  outline-offset: -2px;
+}
+
+.Page:active {
+  border-color: var(--borderColor-muted);
+}
+
+.Page[rel='prev'],
+.Page[rel='next'] {
+  color: var(--fgColor-accent);
+}
+
+.Page[aria-current],
+.Page[aria-current]:hover {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-accent-emphasis);
+  border-color: transparent;
+}
+
+.Page[aria-current]:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+  outline-offset: -2px;
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
+}
+
+.Page[aria-hidden],
+.Page[aria-hidden]:hover,
+.Page[role='presentation'],
+.Page[role='presentation']:hover {
+  color: var(--fgColor-disabled);
+  cursor: default;
+  background-color: transparent;
+}
+
+.PaginationContainer {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: 20px;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.TablePaginationSteps {
+  display: inline-block;
+}
+
+@media screen and (--viewportRange-narrow) {
+  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {
+    margin-inline-end: 0;
+  }
+
+  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {
+    margin-inline-start: 0;
+  }
+}
+
+@media screen and (--viewportRange-regular) {
+  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {
+    margin-inline-end: 0;
+  }
+
+  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {
+    margin-inline-start: 0;
+  }
+}
+
+@media screen and (--viewportRange-wide) {
+  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {
+    margin-inline-end: 0;
+  }
+
+  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {
+    margin-inline-start: 0;
+  }
+}

package/build/Modern/Pagination/__tests__/Pagination.doc.md

@@ -0,0 +1,12 @@
+# Pagination
+
+> Pagination component all features
+
+```
+# Featues
+
+> Defaults
+> LargerPageCountMargin
+> HidePageNumbers, HidePageNumbersByViewport, HigherSurroundingPageCount
+> RenderLinks
+```

package/build/Modern/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+//# sourceMappingURL=index.d.ts.map

package/build/Modern/Pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modern/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/build/Modern/Pagination/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function get() {
+    return _Pagination.Pagination;
+  }
+});
+var _Pagination = require("./Pagination");

package/build/Modern/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useRefObjectAsForwardedRef } from './useRefObjectAsForwardedRef';
+export { useMedia } from './useMedia';
+//# sourceMappingURL=index.d.ts.map

package/build/Modern/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modern/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAA;AAEzE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/build/Modern/hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useMedia", {
+  enumerable: true,
+  get: function get() {
+    return _useMedia.useMedia;
+  }
+});
+Object.defineProperty(exports, "useRefObjectAsForwardedRef", {
+  enumerable: true,
+  get: function get() {
+    return _useRefObjectAsForwardedRef.useRefObjectAsForwardedRef;
+  }
+});
+var _useRefObjectAsForwardedRef = require("./useRefObjectAsForwardedRef");
+var _useMedia = require("./useMedia");

package/build/Modern/hooks/useMedia.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+/**
+ * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
+ * determine if the document matches the media query string.
+ *
+ * If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
+ * value of the media query string, if available
+ *
+ * @example
+ * function Example() {
+ *   const coarsePointer = useMedia('(pointer: coarse)');
+ *   // ...
+ * }
+ */
+export declare function useMedia(mediaQueryString: string, defaultState?: boolean): boolean;
+type MediaQueryFeatures = Record<string, boolean | undefined>;
+interface MatchMediaProps {
+    children: React.ReactNode;
+    features?: MediaQueryFeatures;
+}
+/**
+ * Use `MatchMedia` to emulate media conditions by passing in feature
+ * queries to the `features` prop. If a component uses `useMedia` with the
+ * feature passed in to `MatchMedia` it will force its value to match what is
+ * provided to `MatchMedia`
+ *
+ * This should be used for development and documentation only in situations
+ * where devtools cannot emulate this feature
+ *
+ * @example
+ * <MatchMedia features={{ "(pointer: coarse)": true}}>
+ *   <Children />
+ * </MatchMedia>
+ */
+export declare function MatchMedia({ children, features }: MatchMediaProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=useMedia.d.ts.map

package/build/Modern/hooks/useMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../../src/Modern/hooks/useMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAI7E;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,WAgExE;AAED,KAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,CAAA;AAO7D,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAA0B,EAAE,EAAE,eAAe,2CAGnF"}

package/build/Modern/hooks/useMedia.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MatchMedia = MatchMedia;
+exports.useMedia = useMedia;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _environment = require("../utils/environment");
+var _warning = require("../utils/warning");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
+ * determine if the document matches the media query string.
+ *
+ * If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
+ * value of the media query string, if available
+ *
+ * @example
+ * function Example() {
+ *   const coarsePointer = useMedia('(pointer: coarse)');
+ *   // ...
+ * }
+ */
+function useMedia(mediaQueryString, defaultState) {
+  var features = (0, _react.useContext)(MatchMediaContext);
+  var _useState = (0, _react.useState)(function () {
+      if (features[mediaQueryString] !== undefined) {
+        return features[mediaQueryString];
+      }
+
+      // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+      if (defaultState !== undefined) {
+        return defaultState;
+      }
+      if (_environment.canUseDOM) {
+        return window.matchMedia(mediaQueryString).matches;
+      }
+
+      // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+      (0, _warning.warning)(true, '`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+      return false;
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  if (features[mediaQueryString] !== undefined && matches !== features[mediaQueryString]) {
+    setMatches(features[mediaQueryString]);
+  }
+  (0, _react.useEffect)(function () {
+    // If `mediaQueryString` is present in features through `context` defer to
+    // the value present instead of checking with matchMedia
+    if (features[mediaQueryString] !== undefined) {
+      return;
+    }
+    function listener(event) {
+      setMatches(event.matches);
+    }
+    var mediaQueryList = window.matchMedia(mediaQueryString);
+
+    // Support fallback to `addListener` for broader browser support
+    // @ts-ignore this is not present in Safari <14
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    }
+
+    // Make sure the media query list is in sync with the matches state
+
+    setMatches(mediaQueryList.matches);
+    return function () {
+      // @ts-ignore this is not present in Safari <14
+
+      if (mediaQueryList.addEventListener) {
+        mediaQueryList.removeEventListener('change', listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, [features, mediaQueryString]);
+  return matches;
+}
+// Used to keep track of overrides to specific media query features, this should
+// be used for development and demo purposes to emulate specific features if
+// unavailable through devtools
+var MatchMediaContext = /*#__PURE__*/(0, _react.createContext)({});
+var defaultFeatures = {};
+
+/**
+ * Use `MatchMedia` to emulate media conditions by passing in feature
+ * queries to the `features` prop. If a component uses `useMedia` with the
+ * feature passed in to `MatchMedia` it will force its value to match what is
+ * provided to `MatchMedia`
+ *
+ * This should be used for development and documentation only in situations
+ * where devtools cannot emulate this feature
+ *
+ * @example
+ * <MatchMedia features={{ "(pointer: coarse)": true}}>
+ *   <Children />
+ * </MatchMedia>
+ */
+function MatchMedia(_ref) {
+  var children = _ref.children,
+    _ref$features = _ref.features,
+    features = _ref$features === void 0 ? defaultFeatures : _ref$features;
+  var value = useShallowObject(features);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MatchMediaContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+/**
+ * Utility hook to provide a stable identity for a "simple" object which
+ * contains only primitive values. This provides a `useMemo`-esque signature
+ * without dealing with shallow equality checks in the dependency array.
+ *
+ * Note (perf): this hook iterates through keys and values of the object if the
+ * shallow equality check is false each time the hook is called
+ */
+function useShallowObject(object) {
+  var _useState3 = (0, _react.useState)(object),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  if (value !== object) {
+    var match = Object.keys(object).every(function (key) {
+      return object[key] === value[key];
+    });
+    if (!match) {
+      setValue(object);
+    }
+  }
+  return value;
+}

package/build/Modern/hooks/useRefObjectAsForwardedRef.d.ts

@@ -0,0 +1,10 @@
+import type { ForwardedRef, RefObject } from 'react';
+/**
+ * Use a ref object as the imperative handle for a forwarded ref. This can be used to
+ * synchronize the ref object with the forwarded ref and allow local access the reference
+ * instance with `.current`.
+ *
+ * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
+ */
+export declare function useRefObjectAsForwardedRef<T>(forwardedRef: ForwardedRef<T>, refObject: RefObject<T | null>): void;
+//# sourceMappingURL=useRefObjectAsForwardedRef.d.ts.map

package/build/Modern/hooks/useRefObjectAsForwardedRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefObjectAsForwardedRef.d.ts","sourceRoot":"","sources":["../../../src/Modern/hooks/useRefObjectAsForwardedRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpD;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAEjH"}

package/build/Modern/hooks/useRefObjectAsForwardedRef.hookDocs.json

@@ -0,0 +1,22 @@
+{
+  "name": "useRefObjectAsForwardedRef",
+  "importPath": "@primer/react",
+  "stories": [],
+  "parameters": [
+    {
+      "name": "forwardedRef",
+      "type": "ForwardedRef<T>",
+      "required": true,
+      "description": "The forwarded ref to synchronize with the ref object."
+    },
+    {
+      "name": "refObject",
+      "type": "RefObject<T>",
+      "required": true,
+      "description": "The ref object to use as the imperative handle."
+    }
+  ],
+  "returns": {
+    "type": "void"
+  }
+}

package/build/Modern/hooks/useRefObjectAsForwardedRef.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRefObjectAsForwardedRef = useRefObjectAsForwardedRef;
+var _react = require("react");
+/**
+ * Use a ref object as the imperative handle for a forwarded ref. This can be used to
+ * synchronize the ref object with the forwarded ref and allow local access the reference
+ * instance with `.current`.
+ *
+ * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
+ */
+function useRefObjectAsForwardedRef(forwardedRef, refObject) {
+  (0, _react.useImperativeHandle)(forwardedRef, function () {
+    return refObject.current;
+  });
+}