@doist/reactist 17.10.0 → 18.0.0
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/dist/reactist.cjs.development.js +90 -82
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/components/color-picker/color-picker.js +1 -1
- package/es/components/color-picker/color-picker.js.map +1 -1
- package/es/components/deprecated-button/deprecated-button.js +1 -1
- package/es/components/deprecated-button/deprecated-button.js.map +1 -1
- package/es/components/time/time.js +1 -1
- package/es/components/time/time.js.map +1 -1
- package/es/index.js +1 -1
- package/es/new-components/base-button/base-button.js +1 -1
- package/es/new-components/base-button/base-button.js.map +1 -1
- package/es/new-components/base-button/base-button.module.css.js +1 -1
- package/es/new-components/box/box.module.css.js +1 -1
- package/es/new-components/password-field/password-field.js +1 -1
- package/es/new-components/password-field/password-field.js.map +1 -1
- package/es/{components → new-components}/tooltip/tooltip.js +35 -28
- package/es/new-components/tooltip/tooltip.js.map +1 -0
- package/es/new-components/tooltip/tooltip.module.css.js +4 -0
- package/es/new-components/tooltip/tooltip.module.css.js.map +1 -0
- package/lib/components/color-picker/color-picker.js +1 -1
- package/lib/components/color-picker/color-picker.js.map +1 -1
- package/lib/components/deprecated-button/deprecated-button.js +1 -1
- package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
- package/lib/components/time/time.js +1 -1
- package/lib/components/time/time.js.map +1 -1
- package/lib/index.d.ts +1 -2
- package/lib/index.js +1 -1
- package/lib/new-components/base-button/base-button.d.ts +1 -1
- package/lib/new-components/base-button/base-button.js +1 -1
- package/lib/new-components/base-button/base-button.js.map +1 -1
- package/lib/new-components/base-button/base-button.module.css.js +1 -1
- package/lib/new-components/box/box.module.css.js +1 -1
- package/lib/new-components/password-field/password-field.js +1 -1
- package/lib/new-components/password-field/password-field.js.map +1 -1
- package/lib/new-components/tooltip/index.d.ts +2 -0
- package/lib/new-components/tooltip/tooltip.d.ts +61 -0
- package/lib/new-components/tooltip/tooltip.js +2 -0
- package/lib/new-components/tooltip/tooltip.js.map +1 -0
- package/lib/new-components/tooltip/tooltip.module.css.js +2 -0
- package/lib/new-components/tooltip/tooltip.module.css.js.map +1 -0
- package/lib/{components → new-components}/tooltip/tooltip.test.d.ts +0 -0
- package/package.json +1 -1
- package/styles/alert.css +3 -3
- package/styles/avatar.css +1 -1
- package/styles/badge.css +1 -1
- package/styles/base-button.css +3 -3
- package/styles/base-button.module.css.css +1 -1
- package/styles/base-field.css +1 -1
- package/styles/box.css +1 -1
- package/styles/box.module.css.css +1 -1
- package/styles/checkbox-field.css +1 -1
- package/styles/color-picker.css +6 -1
- package/styles/columns.css +1 -1
- package/styles/deprecated-button.css +6 -1
- package/styles/divider.css +1 -1
- package/styles/dropdown.css +6 -1
- package/styles/heading.css +1 -1
- package/styles/hidden-visually.css +1 -1
- package/styles/hidden.css +1 -1
- package/styles/loading.css +1 -1
- package/styles/modal.css +3 -3
- package/styles/notice.css +1 -1
- package/styles/password-field.css +2 -2
- package/styles/progress-bar.css +1 -1
- package/styles/reactist.css +4 -4
- package/styles/select-field.css +1 -1
- package/styles/static-toast.css +3 -3
- package/styles/switch-field.css +1 -1
- package/styles/tabs.css +1 -1
- package/styles/text-area.css +1 -1
- package/styles/text-field.css +1 -1
- package/styles/text-link.css +1 -1
- package/styles/text.css +1 -1
- package/styles/time.css +6 -1
- package/styles/tooltip.css +6 -1
- package/styles/tooltip.module.css.css +1 -0
- package/styles/use-toasts.css +3 -3
- package/es/components/tooltip/tooltip.js.map +0 -1
- package/lib/components/tooltip/index.d.ts +0 -2
- package/lib/components/tooltip/tooltip.d.ts +0 -15
- package/lib/components/tooltip/tooltip.js +0 -2
- package/lib/components/tooltip/tooltip.js.map +0 -1
package/styles/use-toasts.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.
|
|
1
|
+
._2a3b75a1{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre._2a3b75a1{font-family:monospace}._2a3b75a1[hidden]{display:none!important}._2286072d{position:absolute}._0847ebf3{position:fixed}._9015266f{position:relative}._572136cd{position:-webkit-sticky;position:sticky}@media (min-width:768px){.dec0da3c{position:absolute}.eb3f61a4{position:fixed}._6a9d01dd{position:relative}.cf9268ba{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._6579cc9c{position:absolute}._3a6a421f{position:fixed}._3a6950ac{position:relative}._142cd372{position:-webkit-sticky;position:sticky}}._9a084bff{display:block}._509a57b4{display:flex}._4a786bb9{display:inline}._5d644b40{display:inline-block}._973d00d0{display:inline-flex}._3e4f26a6{display:none}@media (min-width:768px){.d525fe3a{display:block}._316c9f4b{display:flex}._5e788d98{display:inline}._851fc6b8{display:inline-block}.c16ba46a{display:inline-flex}._759c0c1a{display:none}}@media (min-width:992px){.c374b455{display:block}._8a854d8f{display:flex}._805fa8dc{display:inline}.ab26af05{display:inline-block}._9bd12ba4{display:inline-flex}._581476ce{display:none}}._1fb9d90e{flex-direction:column}.e5a9206f{flex-direction:row}@media (min-width:768px){._3e6a0be1{flex-direction:column}.e9e2e53a{flex-direction:row}}@media (min-width:992px){.c7d6b073{flex-direction:column}._935269b4{flex-direction:row}}._3692f9c2{flex-wrap:wrap}._55f6f487{flex-wrap:nowrap}.d5d0d34a{flex-shrink:0}.d8ff7933{flex-grow:0}._4a93668a{flex-grow:1}._5a8c5a77{align-items:flex-start}._50ba6b6b{align-items:center}._3963f790{align-items:flex-end}._55ef2d4e{align-items:baseline}@media (min-width:768px){._3e2bfb5d{align-items:flex-start}.a99be1ab{align-items:center}.fa8221fe{align-items:flex-end}.e83669a0{align-items:baseline}}@media (min-width:992px){._65e6b537{align-items:flex-start}.db356482{align-items:center}.acc08587{align-items:flex-end}.ad033867{align-items:baseline}}._985b733f{justify-content:flex-start}._95a98d2a{justify-content:center}.be9bf31a{justify-content:flex-end}.a89d8798{justify-content:space-around}._904ef8fe{justify-content:space-between}._489975d5{justify-content:space-evenly}@media (min-width:768px){.a7175ae7{justify-content:flex-start}._7334dead{justify-content:center}._746de733{justify-content:flex-end}._6d09398a{justify-content:space-around}.c2324c1d{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}@media (min-width:992px){._39b310de{justify-content:flex-start}._0dc77292{justify-content:center}._96c15bd8{justify-content:flex-end}._6d09398a{justify-content:space-around}._096111a6{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}._35d69587{align-self:stretch}.f46f3a67{align-self:flex-start}.fb6a8035{align-self:center}.d3193acd{align-self:flex-end}._1154f656{align-self:baseline}@media (min-width:768px){._298e04af{align-self:stretch}._2c729d24{align-self:flex-start}._9ea5e943{align-self:center}._02266425{align-self:flex-end}.c16a5800{align-self:baseline}}@media (min-width:992px){._2ec9eb74{align-self:stretch}._34f1fb03{align-self:flex-start}._77c58550{align-self:center}._9ffa429f{align-self:flex-end}._6cc14c5d{align-self:baseline}}.f6342c26{overflow:hidden}._10a2f952{overflow:auto}.f20b8b87{overflow:visible}._4954f87c{overflow:scroll}.a83fb2f5{height:100%}.d85cf739{background-color:var(--reactist-bg-default)}._4eb1d749{background-color:var(--reactist-bg-aside)}.da1ccaa5{background-color:var(--reactist-bg-highlight)}._82dc28e7{background-color:var(--reactist-bg-selected)}._63ba3dfa{background-color:var(--reactist-bg-toast);color:var(--reactist-content-primary);--reactist-content-primary:var(--reactist-toast-content-primary);--reactist-content-secondary:var(--reactist-toast-content-secondary);--reactist-text-link-idle-tint:var(--reactist-content-primary);--reactist-text-link-idle-decoration:var(--reactist-text-link-hover-decoration);--reactist-actionable-tertiary-idle-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-fill:var(--reactist-toast-actionable-hover-fill);--reactist-actionable-quaternary-idle-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-fill:var(--reactist-toast-actionable-hover-fill)}._34cd2b5e{border-radius:var(--reactist-border-radius-small)}._5fe4d5e3{border-radius:var(--reactist-border-radius-large)}._1b34ffd9{border:1px solid var(--reactist-divider-primary)}._705519b0{border:1px solid var(--reactist-divider-secondary)}._67adc238{border:1px solid var(--reactist-divider-tertiary)}.fff8bff0{text-align:start}.f973eed0{text-align:center}._225acbd7{text-align:end}.dea1e8ba{text-align:justify}@media (min-width:768px){._919d6c8f{text-align:start}.ab9d970e{text-align:center}.b5b45e0e{text-align:end}.bd6e42e0{text-align:justify}}@media (min-width:992px){._15120506{text-align:start}._337333b5{text-align:center}._221db0fb{text-align:end}._29ea9711{text-align:justify}}
|
|
2
2
|
.c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
|
|
3
3
|
.c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
|
|
4
4
|
._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
|
|
5
5
|
._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
|
|
6
6
|
._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
|
|
7
|
-
.
|
|
7
|
+
._2b075a8d{text-overflow:ellipsis;z-index:1000}
|
|
8
8
|
:root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}
|
|
9
|
-
:root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}.
|
|
9
|
+
:root{--reactist-button-small-font-size:var(--reactist-font-size-caption);--reactist-button-small-spacing:var(--reactist-spacing-small);--reactist-button-small-height:28px;--reactist-button-normal-font-size:var(--reactist-font-size-copy);--reactist-button-normal-spacing:var(--reactist-spacing-medium);--reactist-button-normal-height:32px;--reactist-button-large-font-size:var(--reactist-font-size-body);--reactist-button-large-spacing:var(--reactist-spacing-large);--reactist-button-large-height:36px;--reactist-actionable-primary-idle-tint:#fff;--reactist-actionable-primary-idle-fill:#008aa6;--reactist-actionable-primary-hover-tint:#fff;--reactist-actionable-primary-hover-fill:#007992;--reactist-actionable-primary-disabled-tint:#fff;--reactist-actionable-primary-disabled-fill:#99d0db;--reactist-actionable-secondary-idle-tint:#282f30;--reactist-actionable-secondary-idle-fill:#f2f6f7;--reactist-actionable-secondary-hover-tint:#282f30;--reactist-actionable-secondary-hover-fill:#e3e7e8;--reactist-actionable-secondary-disabled-tint:#a9acac;--reactist-actionable-secondary-disabled-fill:#f2f6f7;--reactist-actionable-tertiary-idle-tint:#006f85;--reactist-actionable-tertiary-hover-tint:#006f85;--reactist-actionable-tertiary-hover-fill:#f2f6f7;--reactist-actionable-tertiary-disabled-tint:#99c5ce;--reactist-actionable-quaternary-idle-tint:#6c777a;--reactist-actionable-quaternary-hover-tint:#282f30;--reactist-actionable-quaternary-hover-fill:#e0e7e8;--reactist-actionable-quaternary-disabled-tint:#c4c9ca;--reactist-actionable-primary-destructive-idle-tint:#fff;--reactist-actionable-primary-destructive-idle-fill:#dc4c3e;--reactist-actionable-primary-destructive-hover-tint:#fff;--reactist-actionable-primary-destructive-hover-fill:#b03d32;--reactist-actionable-primary-destructive-disabled-tint:#fff;--reactist-actionable-primary-destructive-disabled-fill:#f1b7b2;--reactist-actionable-secondary-destructive-idle-tint:#dc4c3e;--reactist-actionable-secondary-destructive-hover-tint:#b03d32;--reactist-actionable-secondary-destructive-hover-fill:transparent;--reactist-actionable-secondary-destructive-disabled-tint:#f1b7b2}._8313bd46{max-width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:inherit;background-color:transparent;border-radius:var(--reactist-border-radius-small);white-space:nowrap;font-family:var(--reactist-font-family);font-weight:var(--reactist-font-weight-medium);text-decoration:none;border:1px solid transparent;transition-duration:.3s;transition-property:color,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._0051d171{text-overflow:ellipsis;white-space:nowrap;font-size:inherit}._8313bd46:active:not([aria-disabled=true]){transform:scale(.97);transition:transform .2s cubic-bezier(.02,1.505,.745,1.235)}._8313bd46{padding:0 var(--reactist-btn-spacing);font-size:var(--reactist-btn-font-size);height:var(--reactist-btn-height);line-height:var(--reactist-btn-height);--reactist-spinner-tint:var(--reactist-btn-idle-tint);--reactist-spinner-fill:var(--reactist-btn-idle-fill)}._8313bd46._8eb8f0fa{border-radius:1000px}._8313bd46._8b7f1a82{--reactist-btn-height:var(--reactist-button-small-height);--reactist-btn-spacing:var(--reactist-button-small-spacing);--reactist-btn-font-size:var(--reactist-button-small-font-size)}._8313bd46._5e45d59f{--reactist-btn-height:var(--reactist-button-normal-height);--reactist-btn-spacing:var(--reactist-button-normal-spacing);--reactist-btn-font-size:var(--reactist-button-normal-font-size)}._8313bd46._95951888{--reactist-btn-height:var(--reactist-button-large-height);--reactist-btn-spacing:var(--reactist-button-large-spacing);--reactist-btn-font-size:var(--reactist-button-large-font-size)}._8313bd46:not(._43792df1){color:var(--reactist-btn-idle-tint);background-color:var(--reactist-btn-idle-fill)}._8313bd46:focus-visible:not([aria-disabled=true]),._8313bd46:hover:not([aria-disabled=true]),._8313bd46[aria-expanded=true]{color:var(--reactist-btn-hover-tint);background-color:var(--reactist-btn-hover-fill)}._8313bd46._43792df1{cursor:not-allowed;color:var(--reactist-btn-disabled-tint);background-color:var(--reactist-btn-disabled-fill)}._8313bd46:not(._8644eccb){min-width:68px}._8313bd46._8644eccb{width:var(--reactist-btn-height);height:var(--reactist-btn-height);padding:0}._8313bd46 .a44d4350{margin-right:calc(var(--reactist-btn-spacing) - 6px);margin-left:-6px}._8313bd46 ._073e1aa4{margin-left:calc(var(--reactist-btn-spacing) - 6px);margin-right:-6px}._8313bd46>*{pointer-events:none}._7a4dbd5f{--reactist-btn-idle-tint:var(--reactist-actionable-primary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-disabled-fill)}._54d56775{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-secondary-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-secondary-disabled-fill)}._907a61ca{--reactist-btn-idle-tint:var(--reactist-actionable-tertiary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-tertiary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-tertiary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-tertiary-disabled-tint)}.f169a390,._907a61ca{--reactist-btn-idle-fill:transparent;--reactist-btn-disabled-fill:transparent}.f169a390{--reactist-btn-idle-tint:var(--reactist-actionable-quaternary-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-quaternary-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-quaternary-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-quaternary-disabled-tint)}._7a4dbd5f.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-primary-destructive-idle-tint);--reactist-btn-idle-fill:var(--reactist-actionable-primary-destructive-idle-fill);--reactist-btn-hover-tint:var(--reactist-actionable-primary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-primary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-primary-destructive-disabled-tint);--reactist-btn-disabled-fill:var(--reactist-actionable-primary-destructive-disabled-fill)}._54d56775.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-idle-fill:transparent;--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-hover-fill:var(--reactist-actionable-secondary-destructive-hover-fill);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint);--reactist-btn-disabled-fill:transparent;border-color:var(--reactist-btn-idle-tint)}._54d56775.ccb3eb8c:hover{border-color:var(--reactist-btn-hover-tint)}._54d56775.ccb3eb8c._43792df1{border-color:var(--reactist-btn-disabled-tint)}.f169a390.ccb3eb8c,._907a61ca.ccb3eb8c{--reactist-btn-idle-tint:var(--reactist-actionable-secondary-destructive-idle-tint);--reactist-btn-hover-tint:var(--reactist-actionable-secondary-destructive-hover-tint);--reactist-btn-disabled-tint:var(--reactist-actionable-secondary-destructive-disabled-tint)}
|
|
10
10
|
.a83bd4e0{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._266d6623{font-size:var(--reactist-font-size-caption)}.a8d37c6e{font-size:var(--reactist-font-size-copy)}._39f4eb1f{font-size:var(--reactist-font-size-subtitle)}._7be5c531{font-weight:var(--reactist-font-weight-medium)}.e214ff2e{font-weight:var(--reactist-font-weight-strong)}._6a3e5ade{color:var(--reactist-content-secondary)}._8f5b5f2b{color:var(--reactist-content-danger)}._9ae47ae4{color:var(--reactist-content-positive)}._969f18f7{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._2f303ac3{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.d3e04245{-webkit-line-clamp:2}._33411704{-webkit-line-clamp:3}.bfc32640{-webkit-line-clamp:4}.f813c82f{-webkit-line-clamp:5}
|
|
11
11
|
._8e9f0a55{bottom:0;pointer-events:none;z-index:var(--reactist-stacking-order-toast,400)}._121b9429{pointer-events:all;gap:var(--reactist-spacing-medium);box-shadow:var(--reactist-toast-box-shadow)}._6a2a04c5{color:var(--reactist-content-primary)}@media (max-width:500px){._121b9429{width:100%!important}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n useTooltipState as useAriakitTooltipState,\n TooltipStateProps as AriakitTooltipStateProps,\n Tooltip as AriakitTooltip,\n TooltipProps as AriakitTooltipProps,\n TooltipAnchor,\n TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n children: React.ReactNode\n content: React.ReactNode | (() => React.ReactNode)\n position?: PopoverState['placement']\n gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n const tooltipState = useAriakitTooltipState(initialState)\n const delay = useDelay()\n return React.useMemo(\n () => ({\n ...tooltipState,\n show: delay(() => tooltipState.show(), SHOW_DELAY),\n hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n }),\n [delay, tooltipState],\n )\n}\n\nfunction Tooltip({\n children,\n content,\n position = 'top',\n gapSize = 3,\n className,\n ...props\n}: TooltipProps) {\n const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n const child = React.Children.only(\n children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n )\n\n if (!content || !child) {\n return child\n }\n\n if (typeof child.ref === 'string') {\n throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n }\n\n /**\n * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n * tooltips from showing when the trigger element is focused back after a popover or dialog that\n * it opened was closed. See link below for more details.\n * @see https://github.com/reakit/reakit/discussions/749\n */\n function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n // If focus is not followed by a key up event, does it mean that it's not\n // an intentional keyboard focus? Not sure but it seems to work.\n // This may be resolved soon in an upcoming version of reakit:\n // https://github.com/reakit/reakit/issues/750\n function handleKeyUp(e: Event) {\n const eventKey = (e as KeyboardEvent).key\n if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n state.show()\n }\n }\n event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n // Prevent tooltip.show from being called by TooltipReference\n event.preventDefault()\n child?.props?.onFocus?.(event)\n }\n\n return (\n <>\n <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus}>\n {(anchorProps: TooltipAnchorProps) => {\n // Let child props override anchor props so user can specify attributes like tabIndex\n // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n // by applying the replacement component/element twice\n return React.cloneElement(child, { ...anchorProps, ...child.props })\n }}\n </TooltipAnchor>\n {state.visible ? (\n <AriakitTooltip\n {...props}\n state={state}\n className={classNames('reactist_tooltip', className)}\n >\n {typeof content === 'function' ? content() : content}\n </AriakitTooltip>\n ) : null}\n </>\n )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n const clearTimeouts = React.useCallback(function clearTimeouts() {\n if (timeoutRef.current != null) {\n clearTimeout(timeoutRef.current)\n }\n }, [])\n\n // Runs clearTimeouts when the component is unmounted\n React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n return React.useCallback(\n function delay(fn: () => void, delay: number) {\n return () => {\n clearTimeouts()\n timeoutRef.current = setTimeout(fn, delay)\n }\n },\n [clearTimeouts],\n )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","show","hide","Tooltip","children","content","position","gapSize","className","props","state","placement","gutter","child","only","ref","Error","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipAnchor","anchorProps","visible","AriakitTooltip","classNames","timeoutRef","clearTimeouts","current","clearTimeout","fn","setTimeout"],"mappings":";;;;;;;MAuBaA,UAAU,GAAG;MACbC,UAAU,GAAG;;AAE1B,SAASC,sBAAT,CAAgCC,YAAhC;EACI,MAAMC,YAAY,GAAGC,eAAsB,CAACF,YAAD,CAA3C;EACA,MAAMG,KAAK,GAAGC,QAAQ,EAAtB;EACA,OAAOC,OAAA,CACH,wCACOJ,YADP;IAEIK,IAAI,EAAEH,KAAK,CAAC,MAAMF,YAAY,CAACK,IAAb,EAAP,EAA4BT,UAA5B,CAFf;IAGIU,IAAI,EAAEJ,KAAK,CAAC,MAAMF,YAAY,CAACM,IAAb,EAAP,EAA4BT,UAA5B;IAJZ,EAMH,CAACK,KAAD,EAAQF,YAAR,CANG,CAAP;AAQH;;AAED,SAASO,OAAT;MAAiB;IACbC,QADa;IAEbC,OAFa;IAGbC,QAAQ,GAAG,KAHE;IAIbC,OAAO,GAAG,CAJG;IAKbC;;MACGC;;EAEH,MAAMC,KAAK,GAAGhB,sBAAsB,CAAC;IAAEiB,SAAS,EAAEL,QAAb;IAAuBM,MAAM,EAAEL;GAAhC,CAApC;EAEA,MAAMM,KAAK,GAAGb,QAAA,CAAec,IAAf,CACVV,QADU,CAAd;;EAIA,IAAI,CAACC,OAAD,IAAY,CAACQ,KAAjB,EAAwB;IACpB,OAAOA,KAAP;;;EAGJ,IAAI,OAAOA,KAAK,CAACE,GAAb,KAAqB,QAAzB,EAAmC;IAC/B,MAAM,IAAIC,KAAJ,CAAU,iEAAV,CAAN;;;;;;;;;;EASJ,SAASC,WAAT,CAAqBC,KAArB;;;;;;;IAKI,SAASC,WAAT,CAAqBC,CAArB;MACI,MAAMC,QAAQ,GAAID,CAAmB,CAACE,GAAtC;;MACA,IAAID,QAAQ,KAAK,QAAb,IAAyBA,QAAQ,KAAK,OAAtC,IAAiDA,QAAQ,KAAK,OAAlE,EAA2E;QACvEX,KAAK,CAACT,IAAN;;;;IAGRiB,KAAK,CAACK,aAAN,CAAoBC,gBAApB,CAAqC,OAArC,EAA8CL,WAA9C,EAA2D;MAAEM,IAAI,EAAE;KAAnE;;IAEAP,KAAK,CAACQ,cAAN;IACAb,KAAK,QAAL,4BAAAA,KAAK,CAAEJ,KAAP,kCAAckB,OAAd,iCAAcA,OAAd,CAAwBT,KAAxB;;;EAGJ,oBACIlB,aAAA,SAAA,MAAA,eACIA,aAAA,CAAC4B,aAAD;IAAelB,KAAK,EAAEA;IAAOK,GAAG,EAAEF,KAAK,CAACE;IAAKY,OAAO,EAAEV;GAAtD,EACMY,WAAD;;;;IAIG,oBAAO7B,YAAA,CAAmBa,KAAnB,oCAA+BgB,WAA/B,GAA+ChB,KAAK,CAACJ,KAArD,EAAP;GALR,CADJ,EASKC,KAAK,CAACoB,OAAN,gBACG9B,aAAA,CAAC+B,SAAD,oCACQtB,KADR;IAEIC,KAAK,EAAEA,KAFX;IAGIF,SAAS,EAAEwB,UAAU,CAAC,kBAAD,EAAqBxB,SAArB;MAEpB,OAAOH,OAAP,KAAmB,UAAnB,GAAgCA,OAAO,EAAvC,GAA4CA,OALjD,CADH,GAQG,IAjBR,CADJ;AAqBH;AAMD;AACA;;AAEA;;;;;;;;;;;AAUA,SAASN,QAAT;EACI,MAAMkC,UAAU,GAAGjC,MAAA,EAAnB;EAEA,MAAMkC,aAAa,GAAGlC,WAAA,CAAkB,SAASkC,aAAT;IACpC,IAAID,UAAU,CAACE,OAAX,IAAsB,IAA1B,EAAgC;MAC5BC,YAAY,CAACH,UAAU,CAACE,OAAZ,CAAZ;;GAFc,EAInB,EAJmB,CAAtB;;EAOAnC,SAAA,CAAgB,MAAMkC,aAAtB,EAAqC,CAACA,aAAD,CAArC;EAEA,OAAOlC,WAAA,CACH,SAASF,KAAT,CAAeuC,EAAf,EAA+BvC,KAA/B;IACI,OAAO;MACHoC,aAAa;MACbD,UAAU,CAACE,OAAX,GAAqBG,UAAU,CAACD,EAAD,EAAKvC,KAAL,CAA/B;KAFJ;GAFD,EAOH,CAACoC,aAAD,CAPG,CAAP;AASH;;;;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { TooltipProps as AriakitTooltipProps } from 'ariakit/tooltip';
|
|
3
|
-
import type { PopoverState } from 'ariakit/popover';
|
|
4
|
-
import './tooltip.less';
|
|
5
|
-
declare type TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
content: React.ReactNode | (() => React.ReactNode);
|
|
8
|
-
position?: PopoverState['placement'];
|
|
9
|
-
gapSize?: number;
|
|
10
|
-
};
|
|
11
|
-
export declare const SHOW_DELAY = 500;
|
|
12
|
-
export declare const HIDE_DELAY = 100;
|
|
13
|
-
declare function Tooltip({ children, content, position, gapSize, className, ...props }: TooltipProps): JSX.Element | null;
|
|
14
|
-
export type { TooltipProps };
|
|
15
|
-
export { Tooltip };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),o=(e(r),e(require("classnames"))),n=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:u,content:l,position:s="top",gapSize:i=3,className:a}=e,p=t.objectWithoutProperties(e,c);const f=function(e){const o=n.useTooltipState(e),c=function(){const e=r.useRef(),t=r.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return r.useEffect(()=>t,[t]),r.useCallback((function(r,o){return()=>{t(),e.current=setTimeout(r,o)}}),[t])}();return r.useMemo(()=>t.objectSpread2(t.objectSpread2({},o),{},{show:c(()=>o.show(),500),hide:c(()=>o.hide(),100)}),[c,o])}({placement:s,gutter:i}),d=r.Children.only(u);if(!l||!d)return d;if("string"==typeof d.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return r.createElement(r.Fragment,null,r.createElement(n.TooltipAnchor,{state:f,ref:d.ref,onFocus:function(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&f.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}},e=>r.cloneElement(d,t.objectSpread2(t.objectSpread2({},e),d.props))),f.visible?r.createElement(n.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:f,className:o("reactist_tooltip",a)}),"function"==typeof l?l():l):null)};
|
|
2
|
-
//# sourceMappingURL=tooltip.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n useTooltipState as useAriakitTooltipState,\n TooltipStateProps as AriakitTooltipStateProps,\n Tooltip as AriakitTooltip,\n TooltipProps as AriakitTooltipProps,\n TooltipAnchor,\n TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n children: React.ReactNode\n content: React.ReactNode | (() => React.ReactNode)\n position?: PopoverState['placement']\n gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n const tooltipState = useAriakitTooltipState(initialState)\n const delay = useDelay()\n return React.useMemo(\n () => ({\n ...tooltipState,\n show: delay(() => tooltipState.show(), SHOW_DELAY),\n hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n }),\n [delay, tooltipState],\n )\n}\n\nfunction Tooltip({\n children,\n content,\n position = 'top',\n gapSize = 3,\n className,\n ...props\n}: TooltipProps) {\n const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n const child = React.Children.only(\n children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n )\n\n if (!content || !child) {\n return child\n }\n\n if (typeof child.ref === 'string') {\n throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n }\n\n /**\n * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n * tooltips from showing when the trigger element is focused back after a popover or dialog that\n * it opened was closed. See link below for more details.\n * @see https://github.com/reakit/reakit/discussions/749\n */\n function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n // If focus is not followed by a key up event, does it mean that it's not\n // an intentional keyboard focus? Not sure but it seems to work.\n // This may be resolved soon in an upcoming version of reakit:\n // https://github.com/reakit/reakit/issues/750\n function handleKeyUp(e: Event) {\n const eventKey = (e as KeyboardEvent).key\n if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n state.show()\n }\n }\n event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n // Prevent tooltip.show from being called by TooltipReference\n event.preventDefault()\n child?.props?.onFocus?.(event)\n }\n\n return (\n <>\n <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus}>\n {(anchorProps: TooltipAnchorProps) => {\n // Let child props override anchor props so user can specify attributes like tabIndex\n // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n // by applying the replacement component/element twice\n return React.cloneElement(child, { ...anchorProps, ...child.props })\n }}\n </TooltipAnchor>\n {state.visible ? (\n <AriakitTooltip\n {...props}\n state={state}\n className={classNames('reactist_tooltip', className)}\n >\n {typeof content === 'function' ? content() : content}\n </AriakitTooltip>\n ) : null}\n </>\n )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n const clearTimeouts = React.useCallback(function clearTimeouts() {\n if (timeoutRef.current != null) {\n clearTimeout(timeoutRef.current)\n }\n }, [])\n\n // Runs clearTimeouts when the component is unmounted\n React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n return React.useCallback(\n function delay(fn: () => void, delay: number) {\n return () => {\n clearTimeouts()\n timeoutRef.current = setTimeout(fn, delay)\n }\n },\n [clearTimeouts],\n )\n}\n"],"names":["children","content","position","gapSize","className","props","state","initialState","tooltipState","useAriakitTooltipState","delay","timeoutRef","React","clearTimeouts","current","clearTimeout","fn","setTimeout","useDelay","show","hide","useDelayedTooltipState","placement","gutter","child","only","ref","Error","TooltipAnchor","onFocus","event","currentTarget","addEventListener","e","eventKey","key","once","preventDefault","anchorProps","visible","AriakitTooltip","classNames"],"mappings":"4WAwB0B,uBADA,oBAgB1B,gBAAiBA,SACbA,EADaC,QAEbA,EAFaC,SAGbA,EAAW,MAHEC,QAIbA,EAAU,EAJGC,UAKbA,KACGC,iCAEH,MAAMC,EArBV,SAAgCC,GAC5B,MAAMC,EAAeC,kBAAuBF,GACtCG,EAgGV,WACI,MAAMC,EAAaC,WAEbC,EAAgBD,eAAkB,WACV,MAAtBD,EAAWG,SACXC,aAAaJ,EAAWG,WAE7B,IAKH,OAFAF,YAAgB,IAAMC,EAAe,CAACA,IAE/BD,eACH,SAAeI,EAAgBN,GAC3B,MAAO,KACHG,IACAF,EAAWG,QAAUG,WAAWD,EAAIN,MAG5C,CAACG,IAnHSK,GACd,OAAON,UACH,uCACOJ,OACHW,KAAMT,EAAM,IAAMF,EAAaW,OATjB,KAUdC,KAAMV,EAAM,IAAMF,EAAaY,OATjB,OAWlB,CAACV,EAAOF,IAYEa,CAAuB,CAAEC,UAAWpB,EAAUqB,OAAQpB,IAE9DqB,EAAQZ,WAAea,KACzBzB,GAGJ,IAAKC,IAAYuB,EACb,OAAOA,EAGX,GAAyB,iBAAdA,EAAME,IACb,MAAM,IAAIC,MAAM,mEA0BpB,OACIf,gCACIA,gBAACgB,iBAActB,MAAOA,EAAOoB,IAAKF,EAAME,IAAKG,QAnBrD,SAAqBC,SAWjBA,EAAMC,cAAcC,iBAAiB,SANrC,SAAqBC,GACjB,MAAMC,EAAYD,EAAoBE,IACrB,WAAbD,GAAsC,UAAbA,GAAqC,UAAbA,GACjD5B,EAAMa,SAG6C,CAAEiB,MAAM,IAEnEN,EAAMO,uBACNb,YAAAA,EAAOnB,gBAAOwB,WAAAA,QAAUC,KAMdQ,GAIS1B,eAAmBY,qCAAYc,GAAgBd,EAAMnB,SAGnEC,EAAMiC,QACH3B,gBAAC4B,6CACOnC,OACJC,MAAOA,EACPF,UAAWqC,EAAW,mBAAoBrC,KAEtB,mBAAZH,EAAyBA,IAAYA,GAEjD"}
|