@procore/core-react 12.15.0 → 12.16.1

package/dist/ToolLandingPage/ToolLandingPage.styles.js

@@ -3,14 +3,14 @@ import { Page } from '../PageLayout';
 import { spacing } from '../_styles/spacing';
 export var StyledTitleOuter = /*#__PURE__*/styled(Page.Title).withConfig({
   displayName: "StyledTitleOuter",
-  componentId: "core-12_15_0__sc-wa8j06-0"
+  componentId: "core-12_16_1__sc-wa8j06-0"
 })(["align-items:center;display:flex;gap:", "px;"], spacing.md);
 export var StyledTitleInner = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTitleInner",
-  componentId: "core-12_15_0__sc-wa8j06-1"
+  componentId: "core-12_16_1__sc-wa8j06-1"
 })(["width:100%;"]);
 export var StyledToolLandingPageBodyContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledToolLandingPageBodyContent",
-  componentId: "core-12_15_0__sc-wa8j06-2"
+  componentId: "core-12_16_1__sc-wa8j06-2"
 })(["> * + *{margin-top:", "px;}"], spacing.sm);
 //# sourceMappingURL=ToolLandingPage.styles.js.map

package/dist/Tooltip/Tooltip.styles.js

@@ -6,10 +6,10 @@ import { getShadow } from '../_styles/shadows';
 import { spacing } from '../_styles/spacing';
 export var StyledTooltip = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTooltip",
-  componentId: "core-12_15_0__sc-1fawsi4-0"
+  componentId: "core-12_16_1__sc-1fawsi4-0"
 })(["", " color:", ";max-width:200px;padding:", "px ", "px;position:relative;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;"], getTypographyIntent('small'), colors.white, spacing.sm, spacing.md);
 export var StyledContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledContainer",
-  componentId: "core-12_15_0__sc-1fawsi4-1"
+  componentId: "core-12_16_1__sc-1fawsi4-1"
 })(["display:inline-flex;background-color:", ";border-radius:", "px;", " & + [data-overlay-arrow]{background:", ";}"], colors.gray15, borderRadius.md, getShadow(3, 'bottom'), colors.gray15);
 //# sourceMappingURL=Tooltip.styles.js.map

package/dist/Tree/Tree.styles.js

@@ -5,11 +5,11 @@ import { Typography } from '../Typography/Typography';
 import { colors } from '../_styles/colors';
 export var StyledFilenameCaption = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "StyledFilenameCaption",
-  componentId: "core-12_15_0__sc-2d45b5-0"
+  componentId: "core-12_16_1__sc-2d45b5-0"
 })(["display:flex;width:100%;"]);
 export var StyledTree = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTree",
-  componentId: "core-12_15_0__sc-2d45b5-1"
+  componentId: "core-12_16_1__sc-2d45b5-1"
 })(["width:100%;height:100%;min-height:36px;outline:none;overflow:auto;"]);
 export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -17,7 +17,7 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
   }
 }).withConfig({
   displayName: "StyledTreeRowContainer",
-  componentId: "core-12_15_0__sc-2d45b5-2"
+  componentId: "core-12_16_1__sc-2d45b5-2"
 })(["display:flex;align-items:center;height:36px;background:transparent;box-shadow:inset 4px 0px 0px transparent;cursor:default;outline:none;", " &:hover{background:", ";}", " ", ""], function (_ref) {
   var isSelectable = _ref.isSelectable,
     $isSelectable = _ref.$isSelectable;
@@ -35,30 +35,30 @@ export var StyledTreeRowContainer = /*#__PURE__*/styled(Typography).withConfig({
 });
 export var StyledTreeRowContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowContent",
-  componentId: "core-12_15_0__sc-2d45b5-3"
+  componentId: "core-12_16_1__sc-2d45b5-3"
 })(["display:flex;align-items:center;"]);
 export var StyledTreeRowWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTreeRowWrapper",
-  componentId: "core-12_15_0__sc-2d45b5-4"
+  componentId: "core-12_16_1__sc-2d45b5-4"
 })(["outline:none;"]);
 var StyledIconBase = /*#__PURE__*/styled(Box).withConfig({
   displayName: "StyledIconBase",
-  componentId: "core-12_15_0__sc-2d45b5-5"
+  componentId: "core-12_16_1__sc-2d45b5-5"
 })(["display:flex;justify-content:center;align-items:center;width:24px;height:24px;min-width:24px;min-height:24px;"]);
 export var StyledChevronContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledChevronContainer",
-  componentId: "core-12_15_0__sc-2d45b5-6"
+  componentId: "core-12_16_1__sc-2d45b5-6"
 })([""]);
 export var StyledIconContainer = /*#__PURE__*/styled(StyledIconBase).withConfig({
   displayName: "StyledIconContainer",
-  componentId: "core-12_15_0__sc-2d45b5-7"
+  componentId: "core-12_16_1__sc-2d45b5-7"
 })(["color:", ";"], function (_ref4) {
   var $isSelected = _ref4.$isSelected;
   return $isSelected ? colors.blue45 : colors.gray40;
 });
 export var StyledChevron = /*#__PURE__*/styled(ChevronRight).withConfig({
   displayName: "StyledChevron",
-  componentId: "core-12_15_0__sc-2d45b5-8"
+  componentId: "core-12_16_1__sc-2d45b5-8"
 })(["transform:rotate(", "deg);transition:transform 150ms ease-out;"], function (_ref5) {
   var $isExpanded = _ref5.$isExpanded;
   return $isExpanded ? 90 : 0;

package/dist/Typeahead/Typeahead.styles.js

@@ -5,11 +5,11 @@ import { spacing } from '../_styles/spacing';
 var inputHeight = 36;
 export var StyledInput = /*#__PURE__*/styled.input.withConfig({
   displayName: "StyledInput",
-  componentId: "core-12_15_0__sc-gpc39h-0"
+  componentId: "core-12_16_1__sc-gpc39h-0"
 })(["", " padding-right:", "px;"], getSearchInputStyles(), spacing.xxl);
 export var StyledIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledIcon",
-  componentId: "core-12_15_0__sc-gpc39h-1"
+  componentId: "core-12_16_1__sc-gpc39h-1"
 })(["align-items:center;color:", ";display:flex;height:", "px;justify-content:center;pointer-events:", ";position:absolute;right:0;top:0;width:", "px;"], function (p) {
   return p.disabled ? colors.gray70 : colors.gray45;
 }, inputHeight, function (p) {
@@ -17,6 +17,6 @@ export var StyledIcon = /*#__PURE__*/styled.div.withConfig({
 }, inputHeight);
 export var StyledTypeahead = /*#__PURE__*/styled.div.withConfig({
   displayName: "StyledTypeahead",
-  componentId: "core-12_15_0__sc-gpc39h-2"
+  componentId: "core-12_16_1__sc-gpc39h-2"
 })(["position:relative;width:100%;"]);
 //# sourceMappingURL=Typeahead.styles.js.map

package/dist/Typography/Typography.styles.js

@@ -35,7 +35,7 @@ export var semiboldRules = function semiboldRules() {
 };
 export var StyledTypography = /*#__PURE__*/styled.span.withConfig({
   displayName: "StyledTypography",
-  componentId: "core-12_15_0__sc-1c4583t-0"
+  componentId: "core-12_16_1__sc-1c4583t-0"
 })(["", " color:", ";font-style:", ";font-weight:", ";", " ", " em,i{font-style:italic;}"], function (_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent;

package/dist/Typography/Typography.table.story.js

@@ -5,11 +5,11 @@ import { colors } from '../_styles/colors';
 import { getTypographyIntent } from './Typography.styles';
 var StyledBodyCell = /*#__PURE__*/styled(Table.BodyCell).withConfig({
   displayName: "StyledBodyCell",
-  componentId: "core-12_15_0__sc-p4v7d-0"
+  componentId: "core-12_16_1__sc-p4v7d-0"
 })([""]);
 var StyledTextCell = /*#__PURE__*/styled(Table.TextCell).withConfig({
   displayName: "StyledTextCell",
-  componentId: "core-12_15_0__sc-p4v7d-1"
+  componentId: "core-12_16_1__sc-p4v7d-1"
 })(["", " color:", ";"], getTypographyIntent('body'), colors.blue50);
 function BodyCell() {
   return /*#__PURE__*/React.createElement(StyledBodyCell, {

package/dist/_hooks/FocusScopeOverride.d.ts

@@ -0,0 +1,20 @@
+import type { FocusScopeProps } from '@react-aria/focus';
+import React from 'react';
+/**
+ * STOP - READ BEFORE USING
+ *
+ * The following wrapper was added to help TinyMCE modals.
+ * When used with React Aria contained Focus Scope,
+ * focus does not move into the TinyMCE modal.
+ * This patch gets critical functionality back at
+ * the cost of possibly failing accessbility.
+ * This hack keeps bugfixes for TinyMCE internal.
+ * If a TextEditor isn't really a valid child,
+ * use the plain FocusScope from React Aria.
+ */
+declare type OverrideProps = Omit<FocusScopeProps, 'children'>;
+export declare function useOverridableFocusScope(): {
+    setProps: (arg: OverrideProps) => void;
+};
+export declare function OverridableFocusScope(props: FocusScopeProps): React.JSX.Element;
+export {};

package/dist/_hooks/FocusScopeOverride.js

@@ -0,0 +1,41 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { FocusScope } from '@react-aria/focus';
+import React from 'react';
+
+/**
+ * STOP - READ BEFORE USING
+ *
+ * The following wrapper was added to help TinyMCE modals.
+ * When used with React Aria contained Focus Scope,
+ * focus does not move into the TinyMCE modal.
+ * This patch gets critical functionality back at
+ * the cost of possibly failing accessbility.
+ * This hack keeps bugfixes for TinyMCE internal.
+ * If a TextEditor isn't really a valid child,
+ * use the plain FocusScope from React Aria.
+ */
+
+var FocusScopeOverrideContext = /*#__PURE__*/React.createContext({
+  setProps: function setProps() {}
+});
+export function useOverridableFocusScope() {
+  return React.useContext(FocusScopeOverrideContext);
+}
+export function OverridableFocusScope(props) {
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    overrideProps = _React$useState2[0],
+    setProps = _React$useState2[1];
+  return /*#__PURE__*/React.createElement(FocusScopeOverrideContext.Provider, {
+    value: {
+      setProps: setProps
+    }
+  }, /*#__PURE__*/React.createElement(FocusScope, _extends({}, props, overrideProps)));
+}
+//# sourceMappingURL=FocusScopeOverride.js.map

package/dist/_hooks/FocusScopeOverride.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusScopeOverride.js","names":["FocusScope","React","FocusScopeOverrideContext","createContext","setProps","useOverridableFocusScope","useContext","OverridableFocusScope","props","_React$useState","useState","_React$useState2","_slicedToArray","overrideProps","createElement","Provider","value","_extends"],"sources":["../../src/_hooks/FocusScopeOverride.tsx"],"sourcesContent":["import type { FocusScopeProps } from '@react-aria/focus'\nimport { FocusScope } from '@react-aria/focus'\nimport React from 'react'\n\n/**\n * STOP - READ BEFORE USING\n *\n * The following wrapper was added to help TinyMCE modals.\n * When used with React Aria contained Focus Scope,\n * focus does not move into the TinyMCE modal.\n * This patch gets critical functionality back at\n * the cost of possibly failing accessbility.\n * This hack keeps bugfixes for TinyMCE internal.\n * If a TextEditor isn't really a valid child,\n * use the plain FocusScope from React Aria.\n */\n\ntype OverrideProps = Omit<FocusScopeProps, 'children'>\n\nconst FocusScopeOverrideContext = React.createContext<{\n  setProps: (arg: OverrideProps) => void\n}>({\n  setProps: () => {},\n})\n\nexport function useOverridableFocusScope() {\n  return React.useContext(FocusScopeOverrideContext)\n}\n\nexport function OverridableFocusScope(props: FocusScopeProps) {\n  const [overrideProps, setProps] = React.useState<OverrideProps>()\n\n  return (\n    <FocusScopeOverrideContext.Provider\n      value={{\n        setProps,\n      }}\n    >\n      <FocusScope {...props} {...overrideProps} />\n    </FocusScopeOverrideContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;AACA,SAASA,UAAU,QAAQ,mBAAmB;AAC9C,OAAOC,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,IAAMC,yBAAyB,gBAAGD,KAAK,CAACE,aAAa,CAElD;EACDC,QAAQ,EAAE,SAAAA,SAAA,EAAM,CAAC;AACnB,CAAC,CAAC;AAEF,OAAO,SAASC,wBAAwBA,CAAA,EAAG;EACzC,OAAOJ,KAAK,CAACK,UAAU,CAACJ,yBAAyB,CAAC;AACpD;AAEA,OAAO,SAASK,qBAAqBA,CAACC,KAAsB,EAAE;EAC5D,IAAAC,eAAA,GAAkCR,KAAK,CAACS,QAAQ,CAAgB,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA1DI,aAAa,GAAAF,gBAAA;IAAEP,QAAQ,GAAAO,gBAAA;EAE9B,oBACEV,KAAA,CAAAa,aAAA,CAACZ,yBAAyB,CAACa,QAAQ;IACjCC,KAAK,EAAE;MACLZ,QAAQ,EAARA;IACF;EAAE,gBAEFH,KAAA,CAAAa,aAAA,CAACd,UAAU,EAAAiB,QAAA,KAAKT,KAAK,EAAMK,aAAa,CAAG,CACT,CAAC;AAEzC"}

package/dist/_hooks/useCurrentMedia.d.ts

@@ -0,0 +1,36 @@
+export declare type BreakpointName = 'mobile' | 'tabletPortrait' | 'tabletLandscape' | 'desktop';
+declare type MediaValueConfig = Record<BreakpointName, number>;
+/**
+ * Minimum size for that breakpoint to be active
+ */
+export declare const breakpointsMinSize: MediaValueConfig;
+/**
+ * Maximum size for that breakpoint to be active
+ */
+export declare const breakpointsMaxSize: MediaValueConfig;
+declare type BreakpointMediaQueryList = Record<BreakpointName, string>;
+export declare const defaultMediaConfig: {
+    mobile: string;
+    tabletPortrait: string;
+    tabletLandscape: string;
+    desktop: string;
+};
+/**
+ * Point in time check if matching a specific breakpoint
+ */
+export declare function getCurrentMedia(config?: BreakpointMediaQueryList): {
+    isMobile: boolean;
+    isTabletPortrait: boolean;
+    isTabletLandscape: boolean;
+    isDesktop: boolean;
+};
+/**
+ * Reactive check if matching a specific breakpoint
+ */
+export declare function useCurrentMedia(): {
+    isMobile: boolean;
+    isTabletPortrait: boolean;
+    isTabletLandscape: boolean;
+    isDesktop: boolean;
+};
+export {};

package/dist/_hooks/useCurrentMedia.js

@@ -0,0 +1,73 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+/**
+ * Minimum size for that breakpoint to be active
+ */
+export var breakpointsMinSize = {
+  mobile: 0,
+  tabletPortrait: 768,
+  tabletLandscape: 1024,
+  desktop: 1440
+};
+
+/**
+ * Maximum size for that breakpoint to be active
+ */
+export var breakpointsMaxSize = {
+  mobile: breakpointsMinSize.tabletPortrait - 1,
+  tabletPortrait: breakpointsMinSize.tabletLandscape - 1,
+  tabletLandscape: breakpointsMinSize.desktop - 1,
+  // setting to Infinity messes with matchMedia queries
+  // getMediaQueryString would have to check and adjust the string
+  desktop: breakpointsMinSize.desktop + 10000
+};
+export var defaultMediaConfig = {
+  mobile: "(width <= ".concat(breakpointsMaxSize.mobile, "px)"),
+  tabletPortrait: "(".concat(breakpointsMinSize.tabletPortrait, "px <= width <= ").concat(breakpointsMaxSize.tabletPortrait, "px)"),
+  tabletLandscape: "(".concat(breakpointsMinSize.tabletLandscape, "px <= width <= ").concat(breakpointsMaxSize.tabletLandscape, "px)"),
+  desktop: "(min-width: ".concat(breakpointsMinSize.desktop, "px)")
+};
+
+/**
+ * Point in time check if matching a specific breakpoint
+ */
+export function getCurrentMedia() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultMediaConfig;
+  var isMobile = window.matchMedia(config.mobile).matches;
+  var isTabletPortrait = window.matchMedia(config.tabletPortrait).matches;
+  var isTabletLandscape = window.matchMedia(config.tabletLandscape).matches;
+  var isDesktop = window.matchMedia(config.desktop).matches;
+  return {
+    isMobile: isMobile,
+    isTabletPortrait: isTabletPortrait,
+    isTabletLandscape: isTabletLandscape,
+    isDesktop: isDesktop
+  };
+}
+
+/**
+ * Reactive check if matching a specific breakpoint
+ */
+export function useCurrentMedia() {
+  var _React$useState = React.useState(getCurrentMedia()),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentMedia = _React$useState2[0],
+    setCurrentMedia = _React$useState2[1];
+  React.useEffect(function () {
+    function handleResize() {
+      setCurrentMedia(getCurrentMedia());
+    }
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return currentMedia;
+}
+//# sourceMappingURL=useCurrentMedia.js.map

package/dist/_hooks/useCurrentMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCurrentMedia.js","names":["React","breakpointsMinSize","mobile","tabletPortrait","tabletLandscape","desktop","breakpointsMaxSize","defaultMediaConfig","concat","getCurrentMedia","config","arguments","length","undefined","isMobile","window","matchMedia","matches","isTabletPortrait","isTabletLandscape","isDesktop","useCurrentMedia","_React$useState","useState","_React$useState2","_slicedToArray","currentMedia","setCurrentMedia","useEffect","handleResize","addEventListener","removeEventListener"],"sources":["../../src/_hooks/useCurrentMedia.ts"],"sourcesContent":["/* eslint-disable no-magic-numbers */\nimport React from 'react'\n\nexport type BreakpointName =\n  | 'mobile'\n  | 'tabletPortrait'\n  | 'tabletLandscape'\n  | 'desktop'\n\ntype MediaValueConfig = Record<BreakpointName, number>\n\n/**\n * Minimum size for that breakpoint to be active\n */\nexport const breakpointsMinSize: MediaValueConfig = {\n  mobile: 0,\n  tabletPortrait: 768,\n  tabletLandscape: 1024,\n  desktop: 1440,\n}\n\n/**\n * Maximum size for that breakpoint to be active\n */\nexport const breakpointsMaxSize: MediaValueConfig = {\n  mobile: breakpointsMinSize.tabletPortrait - 1,\n  tabletPortrait: breakpointsMinSize.tabletLandscape - 1,\n  tabletLandscape: breakpointsMinSize.desktop - 1,\n  // setting to Infinity messes with matchMedia queries\n  // getMediaQueryString would have to check and adjust the string\n  desktop: breakpointsMinSize.desktop + 10000,\n}\n\ntype BreakpointMediaQueryList = Record<BreakpointName, string>\n\nexport const defaultMediaConfig = {\n  mobile: `(width <= ${breakpointsMaxSize.mobile}px)`,\n  tabletPortrait: `(${breakpointsMinSize.tabletPortrait}px <= width <= ${breakpointsMaxSize.tabletPortrait}px)`,\n  tabletLandscape: `(${breakpointsMinSize.tabletLandscape}px <= width <= ${breakpointsMaxSize.tabletLandscape}px)`,\n  desktop: `(min-width: ${breakpointsMinSize.desktop}px)`,\n}\n\n/**\n * Point in time check if matching a specific breakpoint\n */\nexport function getCurrentMedia(\n  config: BreakpointMediaQueryList = defaultMediaConfig\n) {\n  const isMobile = window.matchMedia(config.mobile).matches\n  const isTabletPortrait = window.matchMedia(config.tabletPortrait).matches\n  const isTabletLandscape = window.matchMedia(config.tabletLandscape).matches\n  const isDesktop = window.matchMedia(config.desktop).matches\n\n  return {\n    isMobile,\n    isTabletPortrait,\n    isTabletLandscape,\n    isDesktop,\n  }\n}\n\n/**\n * Reactive check if matching a specific breakpoint\n */\nexport function useCurrentMedia() {\n  const [currentMedia, setCurrentMedia] = React.useState(getCurrentMedia())\n\n  React.useEffect(() => {\n    function handleResize() {\n      setCurrentMedia(getCurrentMedia())\n    }\n\n    window.addEventListener('resize', handleResize)\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  return currentMedia\n}\n"],"mappings":";;;;;;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AAUzB;AACA;AACA;AACA,OAAO,IAAMC,kBAAoC,GAAG;EAClDC,MAAM,EAAE,CAAC;EACTC,cAAc,EAAE,GAAG;EACnBC,eAAe,EAAE,IAAI;EACrBC,OAAO,EAAE;AACX,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMC,kBAAoC,GAAG;EAClDJ,MAAM,EAAED,kBAAkB,CAACE,cAAc,GAAG,CAAC;EAC7CA,cAAc,EAAEF,kBAAkB,CAACG,eAAe,GAAG,CAAC;EACtDA,eAAe,EAAEH,kBAAkB,CAACI,OAAO,GAAG,CAAC;EAC/C;EACA;EACAA,OAAO,EAAEJ,kBAAkB,CAACI,OAAO,GAAG;AACxC,CAAC;AAID,OAAO,IAAME,kBAAkB,GAAG;EAChCL,MAAM,eAAAM,MAAA,CAAeF,kBAAkB,CAACJ,MAAM,QAAK;EACnDC,cAAc,MAAAK,MAAA,CAAMP,kBAAkB,CAACE,cAAc,qBAAAK,MAAA,CAAkBF,kBAAkB,CAACH,cAAc,QAAK;EAC7GC,eAAe,MAAAI,MAAA,CAAMP,kBAAkB,CAACG,eAAe,qBAAAI,MAAA,CAAkBF,kBAAkB,CAACF,eAAe,QAAK;EAChHC,OAAO,iBAAAG,MAAA,CAAiBP,kBAAkB,CAACI,OAAO;AACpD,CAAC;;AAED;AACA;AACA;AACA,OAAO,SAASI,eAAeA,CAAA,EAE7B;EAAA,IADAC,MAAgC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGJ,kBAAkB;EAErD,IAAMO,QAAQ,GAAGC,MAAM,CAACC,UAAU,CAACN,MAAM,CAACR,MAAM,CAAC,CAACe,OAAO;EACzD,IAAMC,gBAAgB,GAAGH,MAAM,CAACC,UAAU,CAACN,MAAM,CAACP,cAAc,CAAC,CAACc,OAAO;EACzE,IAAME,iBAAiB,GAAGJ,MAAM,CAACC,UAAU,CAACN,MAAM,CAACN,eAAe,CAAC,CAACa,OAAO;EAC3E,IAAMG,SAAS,GAAGL,MAAM,CAACC,UAAU,CAACN,MAAM,CAACL,OAAO,CAAC,CAACY,OAAO;EAE3D,OAAO;IACLH,QAAQ,EAARA,QAAQ;IACRI,gBAAgB,EAAhBA,gBAAgB;IAChBC,iBAAiB,EAAjBA,iBAAiB;IACjBC,SAAS,EAATA;EACF,CAAC;AACH;;AAEA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAA,EAAG;EAChC,IAAAC,eAAA,GAAwCtB,KAAK,CAACuB,QAAQ,CAACd,eAAe,CAAC,CAAC,CAAC;IAAAe,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAAlEI,YAAY,GAAAF,gBAAA;IAAEG,eAAe,GAAAH,gBAAA;EAEpCxB,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,SAASC,YAAYA,CAAA,EAAG;MACtBF,eAAe,CAAClB,eAAe,CAAC,CAAC,CAAC;IACpC;IAEAM,MAAM,CAACe,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAMd,MAAM,CAACgB,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOH,YAAY;AACrB"}

package/dist/_hooks/useMediaLessThan.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useMediaLessThan: (ref: React.RefObject<HTMLElement>, breakpointValue: number) => boolean;

package/dist/_hooks/useMediaLessThan.js

@@ -0,0 +1,25 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React from 'react';
+import { useResizeObserver } from './ResizeObserver';
+export var useMediaLessThan = function useMediaLessThan(ref, breakpointValue) {
+  var defaultValue = window.innerWidth < breakpointValue;
+  var _React$useState = React.useState(defaultValue),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isMediaLessThan = _React$useState2[0],
+    setIsMediaLessThan = _React$useState2[1];
+  var handleResize = React.useCallback(function (entries) {
+    var element = entries[0];
+    setIsMediaLessThan((element === null || element === void 0 ? void 0 : element.target.clientWidth) < breakpointValue);
+  }, [breakpointValue]);
+  var setResize = useResizeObserver(handleResize);
+  React.useEffect(function () {
+    setResize(ref.current);
+  }, [setResize, ref]);
+  return isMediaLessThan;
+};
+//# sourceMappingURL=useMediaLessThan.js.map

package/dist/_hooks/useMediaLessThan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaLessThan.js","names":["React","useResizeObserver","useMediaLessThan","ref","breakpointValue","defaultValue","window","innerWidth","_React$useState","useState","_React$useState2","_slicedToArray","isMediaLessThan","setIsMediaLessThan","handleResize","useCallback","entries","element","target","clientWidth","setResize","useEffect","current"],"sources":["../../src/_hooks/useMediaLessThan.ts"],"sourcesContent":["import React from 'react'\nimport { useResizeObserver } from './ResizeObserver'\n\nexport const useMediaLessThan = (\n  ref: React.RefObject<HTMLElement>,\n  breakpointValue: number\n) => {\n  const defaultValue = window.innerWidth < breakpointValue\n  const [isMediaLessThan, setIsMediaLessThan] = React.useState(defaultValue)\n\n  const handleResize = React.useCallback(\n    (entries: ResizeObserverEntry[]) => {\n      const element = entries[0]\n      setIsMediaLessThan(element?.target.clientWidth < breakpointValue)\n    },\n    [breakpointValue]\n  )\n\n  const setResize = useResizeObserver(handleResize)\n\n  React.useEffect(() => {\n    setResize(ref.current)\n  }, [setResize, ref])\n\n  return isMediaLessThan\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAQ,kBAAkB;AAEpD,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BC,GAAiC,EACjCC,eAAuB,EACpB;EACH,IAAMC,YAAY,GAAGC,MAAM,CAACC,UAAU,GAAGH,eAAe;EACxD,IAAAI,eAAA,GAA8CR,KAAK,CAACS,QAAQ,CAACJ,YAAY,CAAC;IAAAK,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAAnEI,eAAe,GAAAF,gBAAA;IAAEG,kBAAkB,GAAAH,gBAAA;EAE1C,IAAMI,YAAY,GAAGd,KAAK,CAACe,WAAW,CACpC,UAACC,OAA8B,EAAK;IAClC,IAAMC,OAAO,GAAGD,OAAO,CAAC,CAAC,CAAC;IAC1BH,kBAAkB,CAAC,CAAAI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEC,MAAM,CAACC,WAAW,IAAGf,eAAe,CAAC;EACnE,CAAC,EACD,CAACA,eAAe,CAClB,CAAC;EAED,IAAMgB,SAAS,GAAGnB,iBAAiB,CAACa,YAAY,CAAC;EAEjDd,KAAK,CAACqB,SAAS,CAAC,YAAM;IACpBD,SAAS,CAACjB,GAAG,CAACmB,OAAO,CAAC;EACxB,CAAC,EAAE,CAACF,SAAS,EAAEjB,GAAG,CAAC,CAAC;EAEpB,OAAOS,eAAe;AACxB,CAAC"}