@jobber/components 2.77.0 → 2.78.1-pre.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -8,6 +8,17 @@ menu: Changelog
8
8
  All notable changes to this project will be documented in this file.
9
9
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
10
10
 
11
+ # [2.78.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.77.0...@jobber/components@2.78.0) (2022-03-03)
12
+
13
+
14
+ ### Features
15
+
16
+ * **design:** update overlay color to black ([#861](https://github.com/GetJobber/atlantis/issues/861)) ([40351db](https://github.com/GetJobber/atlantis/commit/40351db7bf7b8f7494ca7d3d70b2a98ff46b1203))
17
+
18
+
19
+
20
+
21
+
11
22
  # [2.77.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.76.0...@jobber/components@2.77.0) (2022-02-23)
12
23
 
13
24
 
@@ -22,10 +22,9 @@ var index$3 = require('../Avatar/index.js');
22
22
  require('color');
23
23
  var hooks = require('@jobber/hooks');
24
24
  require('react-dom');
25
- require('@popperjs/core');
26
25
  var index$4 = require('../Tooltip/index.js');
27
- var lodash = require('lodash');
28
26
  var reactPopper = require('react-popper');
27
+ var lodash = require('lodash');
29
28
 
30
29
  var css = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.uhcyg-a-GLRKF_7oHwvMP {\n display: -ms-flexbox;\n display: flex;\n grid-gap: var(--space-small);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n}\n\n._2XfthED8eqbKIyTNoH1aWp {\n display: inline-grid;\n position: relative;\n max-width: 100%;\n box-sizing: border-box;\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-larger);\n color: var(--color-text--secondary);\n text-align: left;\n vertical-align: middle;\n background-color: var(--color-surface);\n transition: var(--timing-base) ease-in-out;\n transition-property: background-color, box-shadow, color;\n grid-template-columns: -webkit-max-content;\n grid-template-columns: max-content;\n -ms-flex-align: center;\n align-items: center;\n grid-gap: var(--space-small);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm,\n.fl19i7ccgBu7NZkxnpvcI {\n padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm {\n grid-template-columns: -webkit-min-content 1fr;\n grid-template-columns: min-content 1fr;\n}\n\n.fl19i7ccgBu7NZkxnpvcI {\n grid-template-columns: 1fr -webkit-min-content;\n grid-template-columns: 1fr min-content;\n}\n\n._4U2lNr3Kk6xnNZTk3Fxgm.fl19i7ccgBu7NZkxnpvcI {\n grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n grid-template-columns: min-content 1fr min-content;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea,\n._35he2rVDYRU4YQko5r4adP ~ ._2XfthED8eqbKIyTNoH1aWp {\n box-shadow: var(--shadow-base);\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n/**\n * Interaction\n */\n\n._2XfthED8eqbKIyTNoH1aWp:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n outline: none;\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp {\n box-shadow: var(--shadow-focus);\n}\n\n._3Uf2El5YBbG3DmUWHBhuea:hover,\n._3Uf2El5YBbG3DmUWHBhuea:focus,\n._35he2rVDYRU4YQko5r4adP:focus ~ ._2XfthED8eqbKIyTNoH1aWp:not(._18wCcoIrboygQTnIVm8yzS) {\n background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n._2XfthED8eqbKIyTNoH1aWp._18wCcoIrboygQTnIVm8yzS {\n border-color: var(--color-surface--reverse);\n color: var(--color-text--reverse);\n background-color: var(--color-surface--reverse);\n}\n\n._2XfthED8eqbKIyTNoH1aWp._1FTJ2ALrm1mVaT7HdMFFGN {\n border-color: var(--color-critical--onSurface);\n color: var(--color-critical--onSurface);\n background-color: var(--color-critical--surface);\n}\n\n._2XfthED8eqbKIyTNoH1aWp.B1ELFzeQy9Ihy9oYcv-px {\n border-color: var(--color-disabled--secondary);\n color: var(--color-disabled);\n background-color: var(--color-disabled--secondary);\n}\n\n._18wCcoIrboygQTnIVm8yzS.B1ELFzeQy9Ihy9oYcv-px {\n border-color: var(--color-disabled);\n color: var(--color-white);\n background-color: var(--color-disabled);\n}\n\n._1FTJ2ALrm1mVaT7HdMFFGN.B1ELFzeQy9Ihy9oYcv-px {\n border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n._35he2rVDYRU4YQko5r4adP {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n -webkit-clip-path: inset(100%);\n clip-path: inset(100%);\n white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._1M_ek3kiaa7OApx5rwBEc3 {\n display: -ms-flexbox;\n display: flex;\n border-radius: var(--radius-base);\n cursor: pointer;\n transition: background-color 200ms ease;\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:hover,\n._1M_ek3kiaa7OApx5rwBEc3:focus {\n background-color: var(--color-surface--hover);\n}\n\n._1M_ek3kiaa7OApx5rwBEc3:focus,\n._3Uf2El5YBbG3DmUWHBhuea ._1M_ek3kiaa7OApx5rwBEc3:hover {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n._3AG5dSWeyKYD1Xfu9fN_DL > svg {\n fill: var(--color-interactive--subtle);\n}\n\n._3AG5dSWeyKYD1Xfu9fN_DL {\n display: -ms-flexbox;\n display: flex;\n}\n";
31
30
  var styles = {"wrapper":"uhcyg-a-GLRKF_7oHwvMP","chip":"_2XfthED8eqbKIyTNoH1aWp","hasPrefix":"_4U2lNr3Kk6xnNZTk3Fxgm","hasSuffix":"fl19i7ccgBu7NZkxnpvcI","clickable":"_3Uf2El5YBbG3DmUWHBhuea","input":"_35he2rVDYRU4YQko5r4adP","active":"_18wCcoIrboygQTnIVm8yzS","invalid":"_1FTJ2ALrm1mVaT7HdMFFGN","disabled":"B1ELFzeQy9Ihy9oYcv-px","button":"_1M_ek3kiaa7OApx5rwBEc3","icon":"_3AG5dSWeyKYD1Xfu9fN_DL"};
@@ -17,7 +17,7 @@ var index$5 = require('../Button/index.js');
17
17
  var filesize = _interopDefault(require('filesize'));
18
18
  var index$1 = require('../ProgressBar/index.js');
19
19
 
20
- var css = ":root {\n --file-card--height: calc(var(--space-base) * 3.5);\n --file-card--background-color: var(--color-white);\n --file-card--header-background-color: var(--color-greyBlue--lighter);\n --file-card--content-background-color: var(--color-white);\n --file-card--border-color: var(--color-border);\n --file-card--accent-color: var(--color-grey);\n --file-card--base-padding: var(--space-small);\n}\n\n.iLkdDSChG7LfdxCDYHOWO {\n display: -ms-flexbox;\n display: flex;\n height: calc(var(--space-base) * 3.5);\n height: calc(var(--space-base) * 3.5);\n height: var(--file-card--height);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--file-card--border-color);\n border-radius: var(--radius-base);\n overflow: hidden;\n background-color: var(--color-white);\n background-color: var(--color-white);\n background-color: var(--file-card--background-color);\n -ms-flex-align: center;\n align-items: center;\n outline-color: var(--color-focus);\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n width: calc(var(--space-base) * 3.5);\n width: calc(var(--space-base) * 3.5);\n width: var(--file-card--height);\n height: 100%;\n box-sizing: border-box;\n padding: 0;\n background-color: var(--color-greyBlue--lighter);\n background-color: var(--color-greyBlue--lighter);\n background-color: var(--file-card--header-background-color);\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n -ms-flex-align: center;\n align-items: center;\n -o-object-fit: cover;\n object-fit: cover;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--color-blue--dark);\n opacity: 0.3;\n mix-blend-mode: multiply;\n}\n\n.h_QOL0uORy7gKva__GUUe {\n margin: 0 auto;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n padding: var(--space-small);\n padding: var(--space-small);\n padding: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n -ms-flex-positive: 1;\n flex-grow: 1;\n padding: 0 var(--space-small);\n padding: 0 var(--space-small);\n padding: 0 var(--file-card--base-padding);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n margin: 0;\n}\n\n._1Mt_GBuDbKYkP4ijp0-848 {\n padding: 0 var(--space-small) 0 0;\n padding: 0 var(--space-small) 0 0;\n padding: 0 var(--file-card--base-padding) 0 0;\n}\n";
20
+ var css = ":root {\n --file-card--height: calc(var(--space-base) * 3.5);\n --file-card--background-color: var(--color-white);\n --file-card--header-background-color: var(--color-greyBlue--lighter);\n --file-card--content-background-color: var(--color-white);\n --file-card--border-color: var(--color-border);\n --file-card--accent-color: var(--color-grey);\n --file-card--base-padding: var(--space-small);\n}\n\n.iLkdDSChG7LfdxCDYHOWO {\n display: -ms-flexbox;\n display: flex;\n height: calc(var(--space-base) * 3.5);\n height: calc(var(--space-base) * 3.5);\n height: var(--file-card--height);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--file-card--border-color);\n border-radius: var(--radius-base);\n overflow: hidden;\n background-color: var(--color-white);\n background-color: var(--color-white);\n background-color: var(--file-card--background-color);\n -ms-flex-align: center;\n align-items: center;\n outline-color: var(--color-focus);\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n width: calc(var(--space-base) * 3.5);\n width: calc(var(--space-base) * 3.5);\n width: var(--file-card--height);\n height: 100%;\n box-sizing: border-box;\n padding: 0;\n background-color: var(--color-greyBlue--lighter);\n background-color: var(--color-greyBlue--lighter);\n background-color: var(--file-card--header-background-color);\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n -ms-flex-align: center;\n align-items: center;\n -o-object-fit: cover;\n object-fit: cover;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--color-overlay);\n mix-blend-mode: multiply;\n}\n\n.h_QOL0uORy7gKva__GUUe {\n margin: 0 auto;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n padding: var(--space-small);\n padding: var(--space-small);\n padding: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n -ms-flex-positive: 1;\n flex-grow: 1;\n padding: 0 var(--space-small);\n padding: 0 var(--space-small);\n padding: 0 var(--file-card--base-padding);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n margin: 0;\n}\n\n._1Mt_GBuDbKYkP4ijp0-848 {\n padding: 0 var(--space-small) 0 0;\n padding: 0 var(--space-small) 0 0;\n padding: 0 var(--file-card--base-padding) 0 0;\n}\n";
21
21
  var styles = {"formatFile":"iLkdDSChG7LfdxCDYHOWO","imageBlock":"_1ymfz_xMgvlX6LtB6_4GUG","icon":"h_QOL0uORy7gKva__GUUe","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","actionBlock":"_1Mt_GBuDbKYkP4ijp0-848"};
22
22
  __chunk_2.styleInject(css);
23
23
 
@@ -11,7 +11,7 @@ var __chunk_2 = require('../chunk-17e02351.js');
11
11
  var ExternalLightBox = _interopDefault(require('react-image-lightbox'));
12
12
  require('react-image-lightbox/style.css');
13
13
 
14
- var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n font-family: \"Source Sans Pro\", Helvetica, Arial, sans-serif;\n background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: var(--color-greyBlue);\n opacity: 0.8;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n color: var(--color-greyBlue--lighter);\n}\n";
14
+ var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n font-family: \"Source Sans Pro\", Helvetica, Arial, sans-serif;\n background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: var(--color-overlay);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n color: var(--color-greyBlue--lighter);\n}\n";
15
15
  var styles = {"wrapper":"_23H2TI8rNmnv0zlHOHZooa"};
16
16
  __chunk_2.styleInject(css);
17
17
 
@@ -18,7 +18,7 @@ var index$5 = require('../Button/index.js');
18
18
  var framerMotion = require('framer-motion');
19
19
  var hooks = require('@jobber/hooks');
20
20
 
21
- var css = "._3dsZe-fIMb0ftQQAJf53tI * {\n box-sizing: border-box;\n}\n\n._3dsZe-fIMb0ftQQAJf53tI {\n display: inline-block;\n position: relative;\n}\n\n._15jh7FtEcALDetgrjoV8HG {\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: 72vh;\n padding: var(--space-small);\n padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-small));\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n -webkit-overflow-scrolling: touch;\n overflow-y: scroll;\n background-color: var(--color-surface)\n}\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (--medium-screens) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (--medium-screens) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (--medium-screens) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n._1j-ztPLXQgH-5XOlXybf0- {\n padding: var(--space-small) 0;\n border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:first-of-type {\n padding-top: 0;\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:last-of-type {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n.ecEGgRDm96wrHymIDR1FM {\n padding: var(--space-small);\n}\n\n._1lmtkHVgn76IrVsqnqlOYh {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--space-small);\n border: none;\n border-radius: var(--radius-base);\n background-color: transparent;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n}\n\n._1lmtkHVgn76IrVsqnqlOYh:hover,\n._1lmtkHVgn76IrVsqnqlOYh:focus {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n\n.QMbGAf7Vb6_SM8qOIvLMc {\n margin-right: var(--space-base);\n}\n\n._1DIimpm0iJewCr_4Ee8NTa {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n background-color: rgba(\n 101,\n 120,\n 132,\n 0.8\n ) /* until we figure out rgba + color vars... */\n}\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (--medium-screens) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n.qVvYE_6U6kPoQ4ms_2slA {\n width: 100%;\n}\n\n._3Pk5uJMOz91YR7eDwLASEh {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n";
21
+ var css = "._3dsZe-fIMb0ftQQAJf53tI * {\n box-sizing: border-box;\n}\n\n._3dsZe-fIMb0ftQQAJf53tI {\n display: inline-block;\n position: relative;\n}\n\n._15jh7FtEcALDetgrjoV8HG {\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: 72vh;\n padding: var(--space-small);\n padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-small));\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n -webkit-overflow-scrolling: touch;\n overflow-y: scroll;\n background-color: var(--color-surface)\n}\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (--medium-screens) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (--medium-screens) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (--medium-screens) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n._1j-ztPLXQgH-5XOlXybf0- {\n padding: var(--space-small) 0;\n border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:first-of-type {\n padding-top: 0;\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:last-of-type {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n.ecEGgRDm96wrHymIDR1FM {\n padding: var(--space-small);\n}\n\n._1lmtkHVgn76IrVsqnqlOYh {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--space-small);\n border: none;\n border-radius: var(--radius-base);\n background-color: transparent;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n}\n\n._1lmtkHVgn76IrVsqnqlOYh:hover,\n._1lmtkHVgn76IrVsqnqlOYh:focus {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n\n.QMbGAf7Vb6_SM8qOIvLMc {\n margin-right: var(--space-base);\n}\n\n._1DIimpm0iJewCr_4Ee8NTa {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n background-color: var(--color-overlay)\n}\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (--medium-screens) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n.qVvYE_6U6kPoQ4ms_2slA {\n width: 100%;\n}\n\n._3Pk5uJMOz91YR7eDwLASEh {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n";
22
22
  var styles = {"wrapper":"_3dsZe-fIMb0ftQQAJf53tI","menu":"_15jh7FtEcALDetgrjoV8HG","above":"_2S3J3IQ4JcMgnYjzx3A9AA","below":"qgoF1WJ8Cu39FVc3p_c8w","left":"_2QwnAwwIXZuZReq2cUwEoX","right":"_2Bdz7gjSU8id-Og42er82U","section":"_1j-ztPLXQgH-5XOlXybf0-","sectionHeader":"ecEGgRDm96wrHymIDR1FM","action":"_1lmtkHVgn76IrVsqnqlOYh","icon":"QMbGAf7Vb6_SM8qOIvLMc","overlay":"_1DIimpm0iJewCr_4Ee8NTa","fullWidth":"qVvYE_6U6kPoQ4ms_2slA","screenReaderOnly":"_3Pk5uJMOz91YR7eDwLASEh"};
23
23
  __chunk_2.styleInject(css);
24
24
 
@@ -20,7 +20,7 @@ var index$1 = require('../ButtonDismiss/index.js');
20
20
  var ReactDOM = require('react-dom');
21
21
  var ReactDOM__default = _interopDefault(ReactDOM);
22
22
 
23
- var css = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding: var(--space-base);\n}\n\n@media (min-width: 640px) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n@media (min-width: 640px) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n@media (--medium-screens) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n._1_FReUDORhZR5sFF1jxDZ4 {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n z-index: var(--elevation-modal);\n padding: var(--space-small);\n overflow: auto;\n}\n\n._1_FReUDORhZR5sFF1jxDZ4,\n.YdwnL8q9kXtLnlxEu6SP9 {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.YdwnL8q9kXtLnlxEu6SP9 {\n background-color: var(--color-greyBlue);\n opacity: 0.8;\n}\n\n._2hKHM4Rlzvclc2pGmHoTBL {\n --public-tab--inset: var(--space-large);\n\n position: relative;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: 100%;\n max-width: calc(var(--base-unit) * 37.5);\n max-width: calc(var(--base-unit) * 37.5);\n max-width: var(--modal--width);\n margin: auto;\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n outline-color: var(--color-focus);\n background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the modal */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * {\n --public-content--padding: var(--modal--padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * > * {\n --public-content--padding: 0;\n}\n\n.RhEfa9gwqpglIheT5uq0v {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding: var(--space-base);\n padding: var(--space-base);\n padding: var(--modal--padding);\n background-color: var(--color-surface--background);\n}\n\n._2hGT8VbbIAX27SyJglRyMG {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n._3O1sOKNEhVvtW_k_wBrJR {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-base);\n padding: var(--space-base);\n padding: var(--modal--padding);\n padding-top: 0;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n._3pUVCJLJyWuGSGnaStM3sE {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK > * {\n margin-left: var(--space-small);\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:first-child {\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:nth-child(2) {\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n";
23
+ var css = ":root {\n --modal--width: calc(var(--base-unit) * 37.5);\n --modal--padding: var(--space-base);\n}\n\n@media (min-width: 640px) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n@media (min-width: 640px) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n@media (--medium-screens) {\n :root {\n --modal--padding: var(--space-base) var(--space-large);\n }\n}\n\n._1_FReUDORhZR5sFF1jxDZ4 {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n z-index: var(--elevation-modal);\n padding: var(--space-small);\n overflow: auto;\n}\n\n._1_FReUDORhZR5sFF1jxDZ4,\n.YdwnL8q9kXtLnlxEu6SP9 {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.YdwnL8q9kXtLnlxEu6SP9 {\n background-color: var(--color-overlay);\n}\n\n._2hKHM4Rlzvclc2pGmHoTBL {\n --public-tab--inset: var(--space-large);\n\n position: relative;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n width: 100%;\n max-width: calc(var(--base-unit) * 37.5);\n max-width: calc(var(--base-unit) * 37.5);\n max-width: var(--modal--width);\n margin: auto;\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n outline-color: var(--color-focus);\n background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the modal */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * {\n --public-content--padding: var(--modal--padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * > * {\n --public-content--padding: 0;\n}\n\n.RhEfa9gwqpglIheT5uq0v {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding: var(--space-base);\n padding: var(--space-base);\n padding: var(--modal--padding);\n background-color: var(--color-surface--background);\n}\n\n._2hGT8VbbIAX27SyJglRyMG {\n padding: 0;\n border: none;\n background-color: transparent;\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n._3O1sOKNEhVvtW_k_wBrJR {\n display: -ms-flexbox;\n display: flex;\n padding: var(--space-base);\n padding: var(--space-base);\n padding: var(--modal--padding);\n padding-top: 0;\n -ms-flex: 1 1 100%;\n flex: 1 1 100%;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n._3pUVCJLJyWuGSGnaStM3sE {\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK > * {\n margin-left: var(--space-small);\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:first-child {\n -ms-flex-order: 2;\n order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:nth-child(2) {\n -ms-flex-order: 1;\n order: 1; /* 1 */\n}\n";
24
24
  var styles = {"container":"_1_FReUDORhZR5sFF1jxDZ4","overlay":"YdwnL8q9kXtLnlxEu6SP9","modal":"_2hKHM4Rlzvclc2pGmHoTBL","header":"RhEfa9gwqpglIheT5uq0v","closeButton":"_2hGT8VbbIAX27SyJglRyMG","actionBar":"_3O1sOKNEhVvtW_k_wBrJR","leftAction":"_3pUVCJLJyWuGSGnaStM3sE","rightAction":"_1fDeYu_CZWiL3glYPvWrwK"};
25
25
  __chunk_2.styleInject(css);
26
26
 
@@ -14,45 +14,54 @@ var index$1 = require('../Text/index.js');
14
14
  var framerMotion = require('framer-motion');
15
15
  var ReactDOM = require('react-dom');
16
16
  var ReactDOM__default = _interopDefault(ReactDOM);
17
- var core = require('@popperjs/core');
17
+ var reactPopper = require('react-popper');
18
18
 
19
19
  var css = ":root {\n --tooltip--arrow-size: var(--space-small);\n --tooltip--offset: calc(-1 * calc(var(--space-smaller) + 1px));\n}\n\n._2IKuYsqwWWH9A-WgJDR61q {\n display: none;\n}\n\n._2fkHxHwiJK9AkUMCIPucCJ {\n display: inline-block;\n position: absolute;\n z-index: var(--elevation-tooltip);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L {\n display: inline-block;\n position: relative;\n max-width: calc(var(--base-unit) * 15);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-informative);\n border-radius: var(--radius-base);\n background-color: var(--color-informative--surface);\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd,\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n width: var(--space-small);\n width: var(--space-small);\n width: var(--tooltip--arrow-size);\n height: var(--space-small);\n height: var(--space-small);\n height: var(--tooltip--arrow-size);\n background-color: inherit;\n}\n\n._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n content: \"\";\n display: block;\n position: absolute;\n border: var(--border-base) solid var(--color-informative);\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 {\n padding-bottom: var(--space-small);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L {\n -webkit-transform-origin: bottom center;\n transform-origin: bottom center;\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n bottom: calc(-1 * calc(var(--space-smaller) + 1px));\n bottom: var(--tooltip--offset);\n}\n\n._3VkJmaX3T1x98A59lZbEa5 ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n border-top-width: 0;\n border-left-width: 0;\n}\n\n.QtIXawS3dVhY8j2NKSZLY {\n padding-top: var(--space-small);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L {\n -webkit-transform-origin: top center;\n transform-origin: top center;\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd {\n top: calc(-1 * calc(var(--space-smaller) + 1px));\n top: calc(-1 * calc(var(--space-smaller) + 1px));\n top: var(--tooltip--offset);\n}\n\n.QtIXawS3dVhY8j2NKSZLY ._2YpF1qO7J5ncFlfoW0hA1L ._3DjyKsZFiUA0QD18ABsimd::after {\n border-bottom-width: 0;\n border-right-width: 0;\n}\n";
20
20
  var styles = {"shadowActivator":"_2IKuYsqwWWH9A-WgJDR61q","tooltipWrapper":"_2fkHxHwiJK9AkUMCIPucCJ","tooltip":"_2YpF1qO7J5ncFlfoW0hA1L","arrow":"_3DjyKsZFiUA0QD18ABsimd","above":"_3VkJmaX3T1x98A59lZbEa5","below":"QtIXawS3dVhY8j2NKSZLY"};
21
21
  __chunk_2.styleInject(css);
22
22
 
23
+ function useTooltipPositioning() {
24
+ var _a, _b;
25
+ var shadowRef = React.useRef(null); // eslint-disable-line no-null/no-null
26
+ var _c = __chunk_1.__read(React.useState(), 2), positionElement = _c[0], setTooltipRef = _c[1];
27
+ var _d = __chunk_1.__read(React.useState(), 2), arrowElement = _d[0], setArrowRef = _d[1];
28
+ var popper = reactPopper.usePopper((_a = shadowRef.current) === null || _a === void 0 ? void 0 : _a.nextElementSibling, positionElement, {
29
+ placement: "top",
30
+ modifiers: [
31
+ { name: "flip", options: { fallbackPlacements: ["bottom"] } },
32
+ {
33
+ name: "arrow",
34
+ options: { element: arrowElement },
35
+ },
36
+ ],
37
+ });
38
+ return __chunk_1.__assign(__chunk_1.__assign({}, popper), { placement: (_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement, shadowRef: shadowRef,
39
+ setArrowRef: setArrowRef,
40
+ setTooltipRef: setTooltipRef });
41
+ }
42
+
23
43
  var variation = {
24
44
  startOrStop: { scale: 0.6, opacity: 0 },
25
45
  done: { scale: 1, opacity: 1 },
26
46
  };
27
47
  function Tooltip(_a) {
28
48
  var message = _a.message, children = _a.children;
29
- var _b = __chunk_1.__read(React.useState("above"), 2), placement = _b[0], setPlacement = _b[1];
30
- var _c = __chunk_1.__read(React.useState({}), 2), tooltipStyles = _c[0], setTooltipStyles = _c[1];
31
- var _d = __chunk_1.__read(React.useState({}), 2), arrowStyles = _d[0], setArrowStyles = _d[1];
32
- var _e = __chunk_1.__read(React.useState(true), 2), show = _e[0], setShow = _e[1];
33
- var tooltipRef = React.createRef();
34
- var arrowRef = React.createRef();
35
- var shadowRef = React.createRef();
49
+ var _b = __chunk_1.__read(React.useState(false), 2), show = _b[0], setShow = _b[1];
50
+ var _c = useTooltipPositioning(), attributes = _c.attributes, placement = _c.placement, shadowRef = _c.shadowRef, popperStyles = _c.styles, setArrowRef = _c.setArrowRef, setTooltipRef = _c.setTooltipRef;
36
51
  initializeListeners();
37
- var toolTipClassNames = classnames(styles.tooltipWrapper, placement === "below" && styles.below, placement === "above" && styles.above);
52
+ var toolTipClassNames = classnames(styles.tooltipWrapper, placement === "bottom" && styles.below, placement === "top" && styles.above);
38
53
  return (React__default.createElement(React__default.Fragment, null,
39
54
  React__default.createElement("span", { className: styles.shadowActivator, ref: shadowRef }),
40
55
  children,
41
- React__default.createElement(TooltipPortal, null,
42
- React__default.createElement("div", { className: toolTipClassNames, style: tooltipStyles, ref: tooltipRef, role: "tooltip" },
43
- React__default.createElement(framerMotion.AnimatePresence, null, show && (React__default.createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
44
- type: "spring",
45
- damping: 20,
46
- stiffness: 300,
47
- } },
48
- React__default.createElement(index$1.Text, null, message),
49
- React__default.createElement("div", { ref: arrowRef, style: arrowStyles, className: styles.arrow }))))))));
56
+ React__default.createElement(TooltipPortal, null, show && (React__default.createElement("div", __chunk_1.__assign({ className: toolTipClassNames, style: popperStyles.popper, ref: setTooltipRef, role: "tooltip" }, attributes.popper),
57
+ React__default.createElement(framerMotion.motion.div, { className: styles.tooltip, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", transition: {
58
+ type: "spring",
59
+ damping: 20,
60
+ stiffness: 300,
61
+ } },
62
+ React__default.createElement(index$1.Text, null, message),
63
+ React__default.createElement("div", { ref: setArrowRef, style: popperStyles.arrow, className: styles.arrow })))))));
50
64
  function initializeListeners() {
51
- var _a = __chunk_1.__read(React.useState(undefined), 2), popperInstance = _a[0], setPopperInstance = _a[1];
52
- React.useEffect(function () {
53
- if (popperInstance)
54
- popperInstance.update();
55
- }, [show]);
56
65
  var showTooltip = function () {
57
66
  setShow(true);
58
67
  };
@@ -92,60 +101,13 @@ function Tooltip(_a) {
92
101
  }
93
102
  };
94
103
  React.useLayoutEffect(function () {
95
- var popper = setupPopper();
96
- setPopperInstance(popper);
97
- setShow(false);
98
104
  injectAttributes();
99
105
  addListeners();
100
106
  return function () {
101
- if (popper)
102
- popper.destroy();
103
107
  removeListeners();
104
108
  };
105
109
  }, []);
106
110
  }
107
- function setupPopper() {
108
- if (shadowRef.current &&
109
- shadowRef.current.nextElementSibling &&
110
- tooltipRef.current) {
111
- var popper = core.createPopper(shadowRef.current.nextElementSibling, tooltipRef.current, {
112
- placement: "top",
113
- modifiers: [
114
- {
115
- name: "preventOverflow",
116
- options: {
117
- padding: 5,
118
- },
119
- },
120
- {
121
- name: "flip",
122
- options: { padding: 50, fallbackPlacements: ["bottom"] },
123
- },
124
- {
125
- name: "arrow",
126
- options: { element: arrowRef.current, padding: 5 },
127
- },
128
- {
129
- name: "applyStyles",
130
- fn: function (data) {
131
- setTooltipStyles(data.state.styles.popper);
132
- setArrowStyles(data.state.styles.arrow);
133
- if (data.state.placement === "top") {
134
- setPlacement("above");
135
- }
136
- else {
137
- setPlacement("below");
138
- }
139
- },
140
- },
141
- ],
142
- });
143
- return popper;
144
- }
145
- else {
146
- return undefined;
147
- }
148
- }
149
111
  }
150
112
  function TooltipPortal(_a) {
151
113
  var children = _a.children;
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ export declare function useTooltipPositioning(): {
3
+ placement: "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
4
+ shadowRef: import("react").RefObject<HTMLSpanElement>;
5
+ setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
6
+ setTooltipRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
7
+ styles: {
8
+ [key: string]: import("react").CSSProperties;
9
+ };
10
+ attributes: {
11
+ [key: string]: {
12
+ [key: string]: string;
13
+ } | undefined;
14
+ };
15
+ state: import("@popperjs/core").State | null;
16
+ update: (() => Promise<Partial<import("@popperjs/core").State>>) | null;
17
+ forceUpdate: (() => void) | null;
18
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "2.77.0",
3
+ "version": "2.78.1-pre.2+176f0bc",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -17,7 +17,7 @@
17
17
  "dist/*"
18
18
  ],
19
19
  "dependencies": {
20
- "@jobber/design": "^0.23.0",
20
+ "@jobber/design": "^0.24.0",
21
21
  "@jobber/formatters": "^0.2.0",
22
22
  "@jobber/hooks": "^1.11.0",
23
23
  "@popperjs/core": "^2.0.6",
@@ -85,5 +85,5 @@
85
85
  "> 1%",
86
86
  "IE 10"
87
87
  ],
88
- "gitHead": "fd67df81dad6a6b87ffa19b8828290a459cd5036"
88
+ "gitHead": "176f0bcf60b4253d1e30f395382694cd44ac3edd"
89
89
  }