satis 2.2.2 → 2.3.0

data/app/components/satis/sidebar_menu_item/component.css

@@ -1,8 +1,5 @@
-/* ── Base menu item ── */
 .sts-sidebar-menu-item {
   @apply pt-1;
-  position: relative;
-
   & a.focus {
     background: rgba(1, 1, 1, 0.1);
 
@@ -18,8 +15,9 @@
     @apply rotate-90;
   }
 
+
   &__link {
-    @apply text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500;
+    @apply text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500
   }
 
   &__icon {
@@ -36,143 +34,166 @@
   }
 }
 
-/* submenu-label always hidden in expanded sidebar */
-.sidebar .sts-sidebar-menu-item .submenu-label {
+
+.sidebar.close .sts-sidebar-menu-item__label {
   display: none;
 }
 
-/* ===================================
-   COLLAPSED SIDEBAR (.sidebar.close)
-   =================================== */
+.sidebar.close .sts-sidebar-menu-item:hover > .sts-sidebar-menu-item__link {
+  width: 40px;
+}
+
 
-/* Center icons in collapsed sidebar */
-.sidebar.close .icon-link > .sts-sidebar-menu-item {
-  margin-left: 6px;
+.sidebar.close .sts-sidebar-menu-item [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item{
+  display: none;
+  visibility: hidden;
+  opacity: 0;
 }
 
-/* Hide labels and chevrons */
-.sidebar.close .sts-sidebar-menu-item__label {
+.sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"]{
+  opacity: 0;
   display: none;
+  visibility: hidden;
 }
 
-.sidebar.close .sts-sidebar-menu-item__menu-icon {
+
+.sidebar.close .sts-sidebar-menu-item .sts-sidebar-menu-item__link .sts-sidebar-menu-item__menu-icon{
   display: none;
+  visibility: hidden;
+  opacity: 0;
 }
 
-/* ── Flyout panel (shown via JS .flyout-visible) ── */
-.sidebar.close .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"].flyout-visible {
-  @apply bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10;
-  display: block !important;
+.sidebar.close .icon-link > .sts-sidebar-menu-item:hover:not(:has([data-satis-sidebar-menu-item-target="submenu"])) .sts-sidebar-menu-item__label {
+  @apply rounded-md bg-gray-50 dark:bg-gray-900 shadow-md py-2;
+  text-decoration-thickness: 2px;
+  display: block;
   position: absolute;
-  left: 54px;
-  width: 220px;
-  padding: 4px 0;
-  z-index: 1100;
-  border-radius: 0 0.5rem 0.5rem 0.5rem;
+  padding-right: 20px;
+  padding-left: 20px;
+  margin-left: 40px;
 }
 
-/* Invisible bridge: prevents hover gap between sidebar icon and flyout */
-.sidebar.close .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"].flyout-visible::before {
-  content: '';
+.sidebar.close .icon-link > .sts-sidebar-menu-item:has([data-satis-sidebar-menu-item-target="submenu"]):hover > .sts-sidebar-menu-item__link > .sts-sidebar-menu-item__label {
+  @apply text-white dark:bg-gray-600;
+  display: block;
   position: absolute;
-  top: -10px;
-  left: -20px;
-  width: 20px;
-  bottom: 0;
+  background-color: rgba(0, 0, 0, 1);
+  padding: 5px 10px;
+  border-radius: 4px;
+  width: 220px;
+  margin-left: 22px;
+  margin-bottom: 80px;
+}
+
+
+.sidebar.close .icon-link > .sts-sidebar-menu-item:has([data-satis-sidebar-menu-item-target="submenu"]):last-child:hover > .sts-sidebar-menu-item__link > .sts-sidebar-menu-item__label {
+  margin-top: -760px;
+  margin-left: 20px;
 }
 
-/* Nested flyout panels (level 3+) */
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible [data-satis-sidebar-menu-item-target="submenu"].flyout-visible {
-  @apply bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 rounded-lg;
-  display: block !important;
+.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
+  @apply rounded-md bg-white dark:bg-gray-900 py-0 px-0 shadow-lg;
+  display: block;
+  visibility: visible;
+  opacity: 1;
   position: absolute;
-  left: 100%;
+  margin-left: 30px;
+  margin-top: -45px;
+
   width: 220px;
-  padding: 4px 0;
-  z-index: 1100;
+
 }
 
-/* Nested bridge */
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible [data-satis-sidebar-menu-item-target="submenu"].flyout-visible::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -8px;
-  width: 8px;
-  bottom: 0;
+.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:only-child {
+  @apply rounded-md bg-white dark:bg-gray-900 py-0 px-0 shadow-lg;
+  display: block;
+  visibility: visible;
+  opacity: 1;
+  position: fixed;
+  width: 220px;
+  margin-left: 0;
+
 }
 
-/* Items inside a visible flyout */
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible > .sts-sidebar-menu-item {
+.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item {
   @apply py-0 px-0;
-  display: block;
   margin-left: 0;
 }
 
-/* Flyout item links: Tailwind UI dropdown style */
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item__link {
-  @apply rounded-none px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white;
+.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item a.focus{
+  @apply bg-white dark:bg-gray-900;
 }
 
-/* Show regular labels inside flyout (not submenu-label) */
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item__label:not(.submenu-label) {
+.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item a.focus{
+  @apply bg-white dark:bg-gray-900;
+}
+
+.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item.pl-4 {
+  @apply py-0 px-0 ;
   display: block;
+  visibility: visible;
+  opacity: 100;
+
+}
+
+.sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item .sts-sidebar-menu-item__label {
   background: none;
+  display:block;
+  overflow: visible;
   padding: 0;
 }
 
-/* Reset focus style inside flyout */
-.sidebar.close .icon-link .sts-sidebar-menu-item a.focus {
-  @apply bg-white dark:bg-gray-800;
+
+.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:last-child:hover > [data-satis-sidebar-menu-item-target="submenu"] {
+  margin-top: -425px;
 }
 
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item a.focus {
-  @apply bg-gray-100 dark:bg-gray-700;
+.h-screen.flex .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
+  position: fixed;
+  margin-left: 185px;
+  margin-top: -80px;
 }
 
-/* ── Tooltip label for items without submenus (shown via JS .tooltip-visible) ── */
-.sidebar.close .sts-sidebar-menu-item__label.tooltip-visible {
-  @apply bg-gray-900 dark:bg-gray-700 text-white text-xs font-medium shadow-lg ring-1 ring-black/5 rounded-md;
-  display: block !important;
-  position: absolute;
-  left: 54px;
-  padding: 6px 12px;
-  white-space: nowrap;
-  z-index: 1100;
+
+.sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"]::-webkit-scrollbar {
+  display: none;
 }
 
-/* Invisible bridge for tooltip */
-.sidebar.close .sts-sidebar-menu-item__label.tooltip-visible::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -20px;
-  width: 20px;
-  bottom: 0;
+.h-screen.flex .sidebar .icon-link .sts-sidebar-menu-item .submenu-label {
+  display: none;
+}
+
+.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item .submenu-label {
+  display: none;
 }
 
-/* ── Submenu-label header (shown via JS .tooltip-visible) — flush with flyout ── */
-.sidebar.close .submenu-label.tooltip-visible {
-  @apply bg-gray-900 dark:bg-gray-700 text-white text-xs font-semibold;
-  display: block !important;
+.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover .submenu-label {
+  @apply text-white dark:bg-gray-600;
+  display: block;
   position: absolute;
-  left: 54px;
-  padding: 6px 12px;
-  white-space: nowrap;
-  z-index: 1100;
+  background-color: rgba(0, 0, 0, 1);
+  padding: 5px 10px;
+  border-radius: 4px;
+  z-index: 10;
   width: 220px;
-  border-radius: 0.5rem 0.5rem 0 0;
+  margin-left: 177px;
+  margin-top: 0;
+  margin-bottom: 150px;
 }
 
-/* Nested submenu-label tooltips position off the flyout edge */
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .submenu-label.tooltip-visible {
-  @apply rounded-lg;
-  left: 100%;
-  width: max-content;
-  max-width: 220px;
+.h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item .submenu-label {
+  display: none;
 }
 
-/* Nested tooltip labels shouldn't show (already visible in flyout) */
-.sidebar.close [data-satis-sidebar-menu-item-target="submenu"].flyout-visible .sts-sidebar-menu-item__label.tooltip-visible {
-  display: none !important;
+.fontawesome-i2svg-active .h-screen.flex .sidebar.close .icon-link .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover .submenu-label {
+  @apply text-white dark:bg-gray-600;
+  display: block;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 1);
+  padding: 5px 10px;
+  border-radius: 4px;
+  z-index: 10;
+  width: 220px;
+  margin-left: 177px;
+  margin-bottom: 150px;
 }

data/app/components/satis/sidebar_menu_item/component_controller.js

@@ -15,131 +15,18 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
 
     this.boundUpdateFocus = this.updateFocus.bind(this)
     this.boundOpenListener = this.openListener.bind(this)
-    this.boundShowFlyout = this.showFlyout.bind(this)
-    this.boundHideFlyout = this.hideFlyout.bind(this)
-    this.hideTimer = null
 
     this.updateFocus(true)
     this.element.addEventListener('sts-sidebar-menu-item:open', this.boundOpenListener)
-    this.element.addEventListener('mouseenter', this.boundShowFlyout)
-    this.element.addEventListener('mouseleave', this.boundHideFlyout)
     window.addEventListener('popstate', debounce(this.boundUpdateFocus, 200))
   }
 
   disconnect() {
     super.disconnect()
-    clearTimeout(this.hideTimer)
     this.element.removeEventListener('sts-sidebar-menu-item:open', this.boundOpenListener)
-    this.element.removeEventListener('mouseenter', this.boundShowFlyout)
-    this.element.removeEventListener('mouseleave', this.boundHideFlyout)
     window.removeEventListener('popstate', debounce(this.boundUpdateFocus, 200))
   }
 
-  // ── Collapsed sidebar flyout logic ──
-
-  get isSidebarClosed() {
-    const sidebar = this.element.closest('.sidebar')
-    return sidebar?.classList.contains('close')
-  }
-
-  get isInsideFlyout() {
-    return !!this.element.closest('[data-satis-sidebar-menu-item-target="submenu"].flyout-visible')
-  }
-
-  showFlyout() {
-    if (!this.isSidebarClosed) return
-
-    // Cancel any pending hide
-    clearTimeout(this.hideTimer)
-
-    if (this.hasSubmenuTarget) {
-      const submenuLabel = this.element.querySelector(':scope > .sts-sidebar-menu-item__link > .submenu-label')
-
-      this.submenuTarget.classList.add('flyout-visible')
-      if (submenuLabel) submenuLabel.classList.add('tooltip-visible')
-
-      this.positionFlyout(this.submenuTarget, submenuLabel)
-    } else if (!this.isInsideFlyout) {
-      const label = this.element.querySelector(':scope > .sts-sidebar-menu-item__link > .sts-sidebar-menu-item__label:not(.submenu-label)')
-      if (label) {
-        label.classList.add('tooltip-visible')
-        this.positionWithinViewport(label)
-      }
-    }
-  }
-
-  hideFlyout() {
-    if (!this.isSidebarClosed) return
-
-    // Delay hiding so the user can move to the flyout without it disappearing
-    this.hideTimer = setTimeout(() => {
-      if (this.hasSubmenuTarget) {
-        this.submenuTarget.classList.remove('flyout-visible')
-        this.submenuTarget.style.top = ''
-      }
-
-      this.element.querySelectorAll('.tooltip-visible').forEach(el => {
-        el.classList.remove('tooltip-visible')
-        el.style.top = ''
-      })
-    }, 150)
-  }
-
-  positionFlyout(flyout, label) {
-    requestAnimationFrame(() => {
-      const flyoutRect = flyout.getBoundingClientRect()
-      if (flyoutRect.height === 0) return
-
-      const viewportHeight = window.innerHeight
-      const margin = 8
-      const labelHeight = label ? label.getBoundingClientRect().height : 0
-
-      let flyoutTop = parseFloat(getComputedStyle(flyout).top) || 0
-
-      // Check if flyout overflows bottom
-      if (flyoutRect.bottom > viewportHeight - margin) {
-        const overflow = flyoutRect.bottom - viewportHeight + margin
-        flyoutTop -= overflow
-      }
-
-      // Check if label above flyout would overflow top
-      const parentRect = flyout.offsetParent?.getBoundingClientRect()
-      const parentTop = parentRect?.top || 0
-      if (parentTop + flyoutTop - labelHeight < margin) {
-        flyoutTop = margin - parentTop + labelHeight
-      }
-
-      flyout.style.top = `${flyoutTop}px`
-
-      // Position label flush against the top of the flyout panel (no gap)
-      if (label) {
-        label.style.top = `${flyoutTop - labelHeight}px`
-      }
-    })
-  }
-
-  positionWithinViewport(el) {
-    requestAnimationFrame(() => {
-      const rect = el.getBoundingClientRect()
-      if (rect.height === 0) return
-
-      const viewportHeight = window.innerHeight
-      const margin = 8
-
-      if (rect.bottom > viewportHeight - margin) {
-        const overflow = rect.bottom - viewportHeight + margin
-        const currentTop = parseFloat(getComputedStyle(el).top) || 0
-        el.style.top = `${currentTop - overflow}px`
-      }
-
-      if (rect.top < margin) {
-        el.style.top = `${margin - el.parentElement.getBoundingClientRect().top}px`
-      }
-    })
-  }
-
-  // ── Submenu expand/collapse (expanded sidebar) ──
-
   open(event) {
     if (this.hasSubmenuTarget) {
       const sidebar = this.element.closest('.sidebar')
@@ -156,6 +43,8 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
         event.preventDefault()
       }
     }
+    // This breaks turbo, so we need to keep the propagation.
+    // event.stopPropagation();
   }
 
   openListener(event) {
@@ -165,6 +54,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
     }
   }
 
+  // This method is used to show the submenu
   showSubmenu() {
     if (!this.hasSubmenuTarget || this.isSubmenuVisible) return
 
@@ -172,6 +62,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
     this.element.classList.toggle("active", true)
   }
 
+  // This method is used to hide the submenu
   hideSubmenu() {
     if (!this.hasSubmenuTarget || !this.isSubmenuVisible) return
 
@@ -219,7 +110,12 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
     return this.openSubmenus.length > 0
   }
 
+  /**
+   * Get a list of all open submenus
+   * @returns {NodeListOf<Element>}
+   */
   get openSubmenus() {
+    // scope to first match. check if there are any submenus that are not hidden
     return this.element.querySelectorAll('[data-satis-sidebar-menu-item-target="submenu"]:not([class*="hidden"])')
   }
 

data/app/javascript/satis/controllers/fields_for_controller.js

@@ -132,7 +132,7 @@ export default class FieldsForController extends ApplicationController {
   }
 
   monitorChanges(event) {
-    if (event?.detail?.src == "satis-dropdown" || event?.detail?.src == "prepopulate" ) {
+    if (event?.detail?.src == "satis-dropdown") {
       // Skip events caused by the initial load of a satis-dropdown
       return
     }

data/app/javascript/satis/controllers/index.js

@@ -6,9 +6,6 @@ application.register("satis-appearance-switcher", AppearanceSwitcherComponentCon
 import DateTimePickerComponentController from "satis/components/date_time_picker/component_controller";
 application.register("satis-date-time-picker", DateTimePickerComponentController);
 
-import CardComponentController from "satis/components/card/component_controller";
-application.register("satis-card", CardComponentController);
-
 import DropdownComponentController from "satis/components/dropdown/component_controller";
 application.register("satis-dropdown", DropdownComponentController);
 

data/app/javascript/satis/utility_controllers/show_hide_controller.js

@@ -20,7 +20,7 @@ export default class extends ApplicationController {
     this.boundUpdate = this.update.bind(this)
 
     this.watchOn = "input"
-    if (this.inputTarget.type == "hidden" || this.inputTarget.type ==  "select-one") {
+    if (this.inputTarget.type == "hidden") {
       this.watchOn = "change"
     }
 

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.2.2"
+  VERSION = "2.3.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.2.2
+  version: 2.3.0
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-05-07 00:00:00.000000000 Z
+date: 2025-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -196,7 +196,6 @@ files:
 - Rakefile
 - TODO.md
 - app/assets/config/satis_manifest.js
-- app/assets/fontawesome/regular.js
 - app/assets/images/satis/.keep
 - app/assets/images/satis/flags/1x1/ac.svg
 - app/assets/images/satis/flags/1x1/ad.svg
@@ -767,7 +766,6 @@ files:
 - app/components/satis/card/component.css
 - app/components/satis/card/component.html.slim
 - app/components/satis/card/component.rb
-- app/components/satis/card/component_controller.js
 - app/components/satis/color_picker/component.css
 - app/components/satis/color_picker/component.rb
 - app/components/satis/color_picker/component.slim
@@ -910,8 +908,6 @@ files:
 - db/migrate/20220929142147_create_satis_user_data.rb
 - db/migrate/20221212083110_change_satis_user_data.rb
 - db/migrate/20230918115448_add_type_to_satis_user_data.rb
-- flake.lock
-- flake.nix
 - lib/generators/satis/install_generator.rb
 - lib/generators/satis/tailwind_config_generator.rb
 - lib/generators/satis/templates/config/initializers/satis.rb