cx 26.2.1 → 26.2.3

package/src/widgets/overlay/Toast.scss

@@ -1,11 +1,16 @@
 @use "sass:map";
-
-@mixin cx-toast(
-   $name: 'toast',
-   $besm: $cx-besm,
-   $mods: $cx-toast-mods
-) {
-
+@use "sass:math";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Overlay.scss" as *;
+
+@mixin cx-toast($name: "toast", $besm: $cx-besm, $mods: $cx-toast-mods) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -22,7 +27,8 @@
       border-style: solid;
       border-width: $cx-default-toast-border-width;
       border-color: $cx-default-toast-border-color;
-      border-radius: $cx-default-border-radius;
+      border-radius: $cx-default-toast-border-radius;
+      font-size: $cx-default-toast-font-size;
       display: flex;
       flex-direction: row;
       align-items: center;
@@ -45,27 +51,33 @@
       }
 
       @each $modname, $config in $mods {
-        &.#{$mod}#{$modname} {
-          @include cx-add-state-rules($config, default);
-
-          &[disabled], &.#{$state}disabled {
-              @include cx-add-state-rules($config, disabled);
-          }
-
-          &:hover {
-              @include cx-add-state-rules($config, hover);
-          }
-
-          &:focus {
-              @include cx-add-state-rules($config, focus);
-          }
-
-          &:active, &.#{$state}pressed {
-              @include cx-add-state-rules($config, active);
-          }
-        }
+         &.#{$mod}#{$modname} {
+            @include cx-add-state-rules($config, default);
+
+            &[disabled],
+            &.#{$state}disabled {
+               @include cx-add-state-rules($config, disabled);
+            }
+
+            &:hover {
+               @include cx-add-state-rules($config, hover);
+            }
+
+            &:focus {
+               @include cx-add-state-rules($config, focus);
+            }
+
+            &:active,
+            &.#{$state}pressed {
+               @include cx-add-state-rules($config, active);
+            }
+         }
       }
    }
+
+   .#{$element}#{$name}-beacon {
+      @include cxe-overlay-beacon;
+   }
 }
 
 @keyframes cx-toast-enter-animation {
@@ -92,11 +104,7 @@
    }
 }
 
-@mixin cx-toaster(
-   $name: 'toaster',
-   $besm: $cx-besm
-) {
-
+@mixin cx-toaster($name: "toaster", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
@@ -158,7 +166,7 @@
    }
 }
 
-@if (cx-should-include('cx/widgets/Toast')) {
+@if (cx-should-include("cx/widgets/Toast")) {
    @include cx-toast();
    @include cx-toaster();
-}
+}

package/src/widgets/overlay/Toast.ts

@@ -72,9 +72,18 @@ export class Toast extends OverlayBase<ToastConfig, OverlayInstance> {
       if (component.timeoutTimer) clearTimeout(component.timeoutTimer);
    }
 
-   containerFactory(): HTMLElement {
+   containerFactory(
+      instance?: OverlayInstance,
+      initiatingEvent?: React.SyntheticEvent,
+   ): HTMLElement {
       let el = document.createElement("div");
       el.className = this.CSS.element("toaster", "item");
+      if (OverlayBase.configureOverlayContainer)
+         OverlayBase.configureOverlayContainer(
+            el,
+            this.getConfigureOverlayContainerContext(instance, initiatingEvent),
+         );
+
       let placement = this.placement || "top";
       let toaster = getToaster(placement);
       toaster.el.className = this.CSS.block("toaster", null, {
@@ -109,3 +118,4 @@ Toast.prototype.animate = true;
 Toast.prototype.baseClass = "toast";
 Toast.prototype.placement = "top";
 Toast.prototype.destroyDelay = 300;
+Toast.prototype.needsBeacon = true;

package/src/widgets/overlay/Tooltip.scss

@@ -1,4 +1,15 @@
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "./Dropdown.scss" as *;
+@use "./Overlay.scss" as *;
 
 @keyframes cx-tooltip-enter-animation {
    from {
@@ -24,27 +35,24 @@
    }
 }
 
-@mixin cx-tooltip(
-   $name: 'tooltip',
-   $besm: $cx-besm
-) {
+@mixin cx-tooltip($name: "tooltip", $besm: $cx-besm) {
    $block: map.get($besm, block);
    $element: map.get($besm, element);
    $state: map.get($besm, state);
    $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
-      @extend %cxb-overlay;
+      @include cxb-overlay($name, $besm);
       display: block;
       left: -10000px;
       top: -10000px;
-      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
+      box-shadow: $cx-tooltip-box-shadow;
       background-color: $cx-tooltip-background-color;
       border: $cx-tooltip-border-width solid $cx-tooltip-border-color;
       color: $cx-tooltip-color;
       padding: $cx-tooltip-padding;
       border-radius: $cx-tooltip-border-radius;
-      font-size: smaller;
+      font-size: $cx-tooltip-font-size;
       transition: opacity 0.2s ease-in;
       max-width: 400px;
       pointer-events: none;
@@ -82,96 +90,19 @@
       font-size: 100%;
    }
 
-   @include cx-dropdown-arrows($name, (
-      border-width: $cx-tooltip-border-width,
-      border-color: $cx-tooltip-border-color,
-      border-style: solid,
-      background-color: $cx-tooltip-background-color
-   ), $cx-tooltip-arrow-size, $besm)
-
-   //.#{$element}#{$name}-arrow-border, .#{$element}#{$name}-arrow-fill {
-   //   border: solid transparent;
-   //   content: " ";
-   //   height: 0;
-   //   width: 0;
-   //   position: absolute;
-   //}
-   //
-   //.#{$element}#{$name}-arrow-border {
-   //   color: $cx-tooltip-border-color;
-   //   border-width: $cx-tooltip-border-width + $cx-tooltip-arrow-size;
-   //}
-   //
-   //.#{$element}#{$name}-arrow-fill {
-   //   color: $cx-tooltip-background-color;
-   //   border-width: $cx-tooltip-arrow-size;
-   //}
-   //
-   //.#{$state}place-right {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      right: 100%;
-   //      top: 50%;
-   //      border-right-color: currentColor;
-   //      margin-top: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      right: 100%;
-   //      top: 50%;
-   //      border-right-color: currentColor;
-   //      margin-top: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
-   //
-   //.#{$state}place-left {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      left: 100%;
-   //      top: 50%;
-   //      border-left-color: currentColor;
-   //      margin-top: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      left: 100%;
-   //      top: 50%;
-   //      border-left-color: currentColor;
-   //      margin-top: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
-   //
-   //.#{$state}place-up {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      left: 50%;
-   //      top: 100%;
-   //      border-top-color: currentColor;
-   //      margin-left: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      left: 50%;
-   //      top: 100%;
-   //      border-top-color: currentColor;
-   //      margin-left: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
-   //
-   //.#{$state}place-down {
-   //   .#{$element}#{$name}-arrow-fill {
-   //      left: 50%;
-   //      bottom: 100%;
-   //      border-bottom-color: currentColor;
-   //      margin-left: -$cx-tooltip-arrow-size;
-   //   }
-   //
-   //   .#{$element}#{$name}-arrow-border {
-   //      left: 50%;
-   //      bottom: 100%;
-   //      border-bottom-color: currentColor;
-   //      margin-left: -$cx-tooltip-border-width - $cx-tooltip-arrow-size;
-   //   }
-   //}
+   @include cx-dropdown-arrows(
+      $name,
+      (
+         border-width: $cx-tooltip-border-width,
+         border-color: $cx-tooltip-border-color,
+         border-style: solid,
+         background-color: $cx-tooltip-background-color,
+      ),
+      $cx-tooltip-arrow-size,
+      $besm: $besm
+   );
 }
 
-@if (cx-should-include('cx/widgets/Tooltip')) {
+@if (cx-should-include("cx/widgets/Tooltip")) {
    @include cx-tooltip();
 }