@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

package/src/legacy/tool-ui/src/SearchWidget.css

@@ -0,0 +1,441 @@
+/* Global search popup styles */
+.Popup.is-noGap:has(.SearchWidget.is-global) {
+  @apply h-[100cqh];
+
+  .Popup-close {
+    @apply fixed right-4 top-4 z-[11] max-md:shadow-lg;
+  }
+}
+
+/* Styles of Search popup frame as soon as it hits the DOM. */
+.Popup.is-noGap[name='miscSearch'] {
+  > .Popup-content > h1 {
+    @apply !hidden;
+  }
+
+  /* Keep the close button hidden in parity with the other controls */
+  &:has(.SearchResult-sorts) {
+    .Popup-close {
+      @apply opacity-0;
+    }
+
+    &:has(.SearchResult-sorts .ComboInput-selected) {
+      .Popup-close {
+        @apply opacity-100;
+      }
+    }
+  }
+}
+
+/* Hide the close button while global search is opening */
+.Page.is-searchOpening .Popup[name='miscSearch'] .Popup-close {
+  @apply hidden;
+}
+
+/* "Fullscreen" search */
+.SearchWidget:not(.frame) .SearchWidget-title {
+  @apply btu-heading-4 border-b border-b-gray-200 bg-white px-4 py-[18px] text-gray-900 [grid-area:title];
+}
+
+/*
+  SearchWidget handles overall layout of search widget, including all search filters & widgets
+  (e.g. Recent Searches, Saved Searches). Also styles the Create section, search title, and
+  search query input, when available.
+*/
+.SearchWidget {
+  --filters-w: 264px;
+  --popup-close-w: 0px;
+
+  @apply relative grid h-full w-full cursor-default grid-cols-[var(--filters-w)_minmax(0px,1fr)] grid-rows-[auto_auto_auto_minmax(0px,1fr)_auto_auto] bg-gray-50 transition-all duration-[theme(animationDuration.quick)] [grid-template-areas:'title_title''filters_newTitle''filters_newResults''filters_results''history_results''create_results'] [transition-timing-function:theme(transitionTimingFunction[spring-stiff])];
+
+  &.is-global {
+    --popup-close-w: 56px;
+
+    .SearchWidget-title,
+    .SearchWidget-query {
+      @apply hidden;
+    }
+  }
+
+  &.filters-collapsed--v5 {
+    --filters-w: 0px;
+    @apply overflow-clip;
+
+    .SearchWidget-controls,
+    .SearchWidget-history,
+    .SearchWidget-create {
+      @apply opacity-0;
+    }
+  }
+}
+
+/* Search filters */
+.SearchWidget-controls {
+  @apply grid auto-rows-min grid-cols-[minmax(0px,1fr)_auto_auto] items-start gap-2 overflow-y-auto overflow-x-clip border-e border-e-gray-200 bg-white px-4 py-2 transition-opacity duration-100 ease-in [grid-area:filters];
+
+  /* Gear icon next to "Global filters" and content-specific filters */
+  a.SearchWidget-actionsToggle {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray col-start-3 row-start-1 before:btu-icon before:btu-icon-settings;
+  }
+
+  form {
+    @apply contents;
+  }
+
+  .SearchWidget-filter,
+  .SearchWidget-type {
+    .ComboInput {
+      @apply col-span-full w-full truncate;
+    }
+  }
+
+  /* "Global Filters" heading */
+  .globalHeading {
+    @apply -order-1 col-start-1 row-start-1 inline-block py-2 text-sm font-semibold text-gray-900;
+  }
+
+  .SearchWidget-reset {
+    @apply btu-button btu-button-fill-none btu-button-error col-start-2 row-start-1;
+  }
+
+  .ExternalItemAuthLink {
+    @apply col-span-full text-sm;
+  }
+}
+
+/*
+  The input field that appears above filters in certain search views (Fullscreen search,
+  ContentSelector search, for example).
+*/
+.SearchWidget-query {
+  @apply relative col-span-full row-start-2 mb-2 after:absolute after:-left-4 after:-right-4 after:top-[46px] after:h-px after:bg-gray-200;
+}
+
+.typeSpecificHeading,
+.miscHeading {
+  @apply inline-block py-2 text-sm font-semibold text-gray-900;
+}
+
+.typeSpecificHeading {
+  @apply col-span-2;
+}
+
+.SearchWidget-moreFilters + .miscHeading {
+  @apply relative col-span-full pt-4 before:absolute before:-left-4 before:-right-4 before:top-0 before:h-px before:bg-gray-200;
+}
+
+.SearchWidget-filter {
+  @apply col-span-full w-full;
+
+  &.is-advanced {
+    @apply relative order-1;
+
+    textarea {
+      @apply pe-[calc(var(--Icon-size)_+_1rem)] [field-sizing:content];
+    }
+
+    a {
+      @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute right-2 top-px text-gray-700 btu-button-container-none before:btu-icon before:btu-icon-pen;
+    }
+  }
+
+  &.is-date {
+    @apply flex flex-col;
+
+    .SearchWidget-dateRange {
+      @apply flex flex-col gap-2 ps-4 [&:not(:empty)]:mt-2;
+    }
+
+    .SearchWidget-dateRanges,
+    .SearchWidget-customDate {
+      @apply contents;
+    }
+
+    .DateTimeInput {
+      @apply w-full justify-between;
+    }
+  }
+
+  &.is-multiple {
+    @apply relative flex flex-col gap-2 before:absolute before:bottom-0 before:left-0 before:top-12 before:w-[2px] before:bg-gray-300;
+
+    .SearchWidget-filterItem {
+      @apply w-full;
+
+      &:not(:last-of-type) {
+        @apply order-1 ms-4 w-auto;
+
+        .ComboInput {
+          @apply pointer-events-none;
+        }
+
+        .ContentSelector-clear {
+          @apply before:btu-icon-x after:hidden;
+        }
+
+        .ComboInput-icon,
+        .ContentSummary-info,
+        input[data-previewable='false'] + .ContentSelector-search {
+          @apply hidden;
+        }
+      }
+    }
+
+    &.is-missing .SearchWidget-filterItem:not(:last-of-type) {
+      @apply pointer-events-none opacity-60;
+    }
+  }
+
+  > .Checkbox {
+    @apply hidden;
+  }
+}
+
+.SearchWidget-filterItem {
+  @apply flex items-center gap-2;
+
+  &:has(.ContentSelector-search) {
+    @apply gap-0 rounded-lg border border-gray-300;
+  }
+
+  &.toolEntityDropdown-container {
+    @apply rounded-none border-0;
+  }
+
+  input[data-previewable='false'] + .ContentSelector-search,
+  .ContentSelector-clear {
+    @apply shrink-0;
+  }
+}
+
+/* Content-specific filters */
+.searchFiltersLocal {
+  @apply relative order-1 col-span-full grid auto-rows-min grid-cols-subgrid gap-2 pt-2;
+
+  &:not(:empty) {
+    @apply before:absolute before:-left-4 before:-right-4 before:top-0 before:h-px before:bg-gray-200;
+
+    .SearchWidget-actionsToggle {
+      @apply row-start-1;
+    }
+  }
+}
+
+btu-widget.SearchWidget-moreFilters {
+  @apply col-span-full;
+
+  /* Override styles in Widget.css to prevent focus ring from being cut off */
+  &.is-collapsed {
+    @apply overflow-x-visible;
+  }
+
+  .Widget-title {
+    @apply contents;
+
+    .Widget-expand {
+      @apply btu-button btu-button-fill-none btu-button-primary order-1 my-2 justify-between overflow-x-clip border border-primary-600/0 !py-2 px-4 btu-button-container-none [grid-column:fullbleed-start/fullbleed-end] focus:ring-offset-0 focus-visible:ring-offset-4 after:btu-icon after:btu-icon-chevron-up after:transition-transform after:duration-250 after:ease-linear focus:ring-0 focus-visible:border-primary-600/100 focus-visible:border-opacity-100 focus-visible:ring-offset-primary-100;
+
+      .Widget-controls {
+        @apply hidden;
+
+        .Widget-collapse {
+          @apply contents before:text-inherit;
+        }
+      }
+    }
+  }
+
+  &.is-collapsed {
+    .Widget-title {
+      .Widget-expand {
+        @apply after:rotate-180;
+      }
+    }
+  }
+
+  div:not([class]) {
+    @apply mb-2 flex flex-col gap-2;
+  }
+}
+
+.SearchWidget-history {
+  @apply border-e border-e-gray-200 transition-opacity duration-100 ease-in [grid-area:history];
+}
+
+btu-widget.SearchWidget-recent,
+btu-widget.SearchWidget-saved,
+btu-widget.SearchWidget-create {
+  .Widget-title {
+    @apply border-b-0 border-t border-t-gray-200;
+  }
+
+  .Widget-expand {
+    @apply btu-heading-6 text-gray-900;
+
+    .Widget-controls {
+      @apply bg-transparent p-0;
+    }
+
+    .Widget-collapse {
+      @apply bg-transparent;
+    }
+  }
+
+  > .frame > .Message {
+    @apply mb-4 mt-2 rounded-lg border-b-0;
+  }
+
+  ul.LinkTable {
+    @apply pb-4 pt-2;
+
+    > li:has(> .SavedSearches-links) {
+      @apply gap-2 px-2;
+    }
+
+    > li:has(> .SavedSearches-links > a:focus-visible) {
+      @apply ring-primary-100 ring-offset-1 z-[1] ring-4 ring-offset-primary-600 [&_a]:ring-offset-0 [&_a]:ring-0;
+    }
+  }
+}
+
+.SavedSearches-links {
+  @apply contents;
+
+  > a {
+    @apply my-2 grow text-sm font-medium text-gray-900 no-underline;
+  }
+}
+
+.SavedSearches-more {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs shrink-0 before:btu-icon before:btu-icon-ellipsis-vertical touch-device:btu-button-sm;
+
+  &.is-active {
+    @apply btu-button-pressed btu-button-primary before:btu-icon-x;
+  }
+}
+
+.SavedSearches-more-dropdown {
+  @apply Dropdown;
+
+  .SavedSearches-more-dropdown-copy {
+    &.is-copied {
+      @apply pointer-events-none italic opacity-50;
+    }
+
+    & + textarea {
+      @apply hidden;
+    }
+  }
+
+  &.is-open {
+    @apply Dropdown-is-open;
+  }
+
+  [role='menuitem'] {
+    @apply Dropdown-item inline-flex;
+
+    &.SavedSearches-more-dropdown-delete {
+      @apply text-error-700;
+    }
+  }
+}
+
+/* Create button, which can appear with our without ComboInput */
+.SearchWidget-create {
+  @apply border-e transition-opacity duration-100 ease-in [grid-area:create];
+
+  form {
+    @apply flex gap-2 pb-4 pt-2;
+  }
+
+  .ComboInput {
+    @apply overflow-hidden;
+  }
+
+  .action-create {
+    @apply btu-button btu-button-outline btu-button-gray !w-full bg-white before:btu-icon before:btu-icon-plus hover:border-gray-500 hover:bg-gray-100;
+  }
+
+  .ComboInput + .action-create {
+    @apply btu-button-text-hidden !w-auto shrink-0;
+  }
+}
+
+.SavedSearches-pagination {
+  @apply flex justify-end py-2 [&:has(.previous:empty)]:[&:has(.next:empty)]:hidden;
+}
+
+.SearchWidget-result {
+  :not(.Widget.is-associatedContentWidget, .QueryField-searchForm) > & {
+    @apply contents;
+  }
+
+  /* Display a loading spinner while waiting for SearchResult frame to load */
+  &.loading {
+    &::after {
+      @apply btu-loader visible absolute left-1/2 top-1/2 z-[1] block size-[--Loader-size] [grid-area:results];
+    }
+  }
+
+  /* "New" heading and table that appear in contextual search after creating a new item */
+  > h2 {
+    @apply m-4 text-sm font-semibold text-gray-900 [grid-area:newTitle];
+  }
+
+  > .LinkList-wrapper {
+    @apply [grid-area:newResults] before:[grid-area:newResults] after:[grid-area:newResults];
+  }
+
+  > .objectIdResult,
+  > .LinkList-wrapper + div {
+    @apply hidden;
+  }
+
+  > .DariError {
+    @apply mt-[68px] overflow-auto [grid-area:results];
+  }
+
+  > .ExternalItemAuthLink {
+    @apply [grid-area:results];
+  }
+}
+
+.DashboardWidget-filters {
+  .SearchWidget-filter {
+    &:has(.ContentSelector-search) {
+      @apply flex items-center rounded-lg border border-gray-300;
+    }
+
+    .ContentSelector-select + .ComboInput {
+      @apply w-auto max-w-full;
+    }
+  }
+}
+
+/* Conditionally appears for fields such as "Publish User: Select" */
+.toolEntityDropdown-container {
+  @apply w-full ps-4 [&:not(:empty)]:mt-2;
+}
+
+.SearchWidget-toolEntityDropdown {
+  @apply contents;
+}
+
+/* Search views without Saved Searches support */
+.AssignmentDeskDashboard,
+.Popup.is-fromRight[data-popup-source-class~='ContentSelector-search'],
+.SearchWidget.DashboardWidget {
+  .SearchWidget-saved {
+    @apply hidden;
+  }
+}
+
+/* Legacy. */
+.searchForm,
+.searchControls {
+  @apply contents;
+}
+
+.searchMissing {
+  @apply hidden;
+}

package/src/legacy/tool-ui/src/SearchWidget.ts

@@ -0,0 +1,154 @@
+import onFind from './dom/onFind'
+import { announce } from './dom/aria'
+import { toggleMenu } from './dom/popupMenu'
+import Widget from './widget'
+
+onFind('btu-widget.SearchWidget-moreFilters', (widget: Widget) => {
+  const toggleTitle = () => {
+    if (widget.collapsed) {
+      widget.heading = widget.dataset.moreFiltersLabel
+    } else {
+      widget.heading = widget.dataset.lessFiltersLabel
+    }
+  }
+
+  toggleTitle()
+
+  widget.addEventListener('btu-widget-toggle', () => {
+    toggleTitle()
+  })
+})
+
+onFind('.SearchWidget.DashboardWidget', (element) => {
+  const column = element.closest('.DashboardRow-column')
+  column?.classList.add('is-search-widget')
+})
+
+// Open up the Dropdown and tether display.
+onFind('.SavedSearches-more', (more) => {
+  more.addEventListener('click', () => {
+    const list = more.nextSibling
+    toggleMenu(list, more)
+  })
+})
+
+onFind('.SavedSearches-more-dropdown-delete', (element: HTMLElement) => {
+  element.addEventListener('click', (e) => {
+    if (element.dataset.deleted) announce(element.dataset.deleted)
+  })
+})
+
+onFind('.SearchWidget-dateRangeSelect', (select: HTMLSelectElement) => {
+  // Toggle additional inputs when date-time range search filter changes.
+  const toggleRanges = (select: HTMLSelectElement) => {
+    const c = select.value
+
+    if (!select.parentNode) return
+    const dateRanges = select.parentNode.querySelectorAll<HTMLElement>(
+      '.SearchWidget-dateRange',
+    )
+
+    for (const range of dateRanges) {
+      const hidden = c !== range.dataset.class
+      range.hidden = hidden
+
+      for (const input of range.querySelectorAll('input')) {
+        input.disabled = hidden
+      }
+    }
+  }
+
+  toggleRanges(select)
+
+  select.addEventListener('change', ({ target }) => {
+    if (target instanceof HTMLSelectElement) toggleRanges(target)
+  })
+})
+
+onFind('.SearchWidget-toolEntityFilterSelect', (select: HTMLSelectElement) => {
+  const toggleToolEntitySelect = (select: HTMLSelectElement) => {
+    if (!select.parentNode) return
+    const c = select.value
+    const dropdown = select.parentNode.querySelector<HTMLElement>(
+      '.toolEntityDropdown-container',
+    )
+
+    if (!dropdown) return
+    dropdown.hidden = c !== 'com.psddev.cms.ui.search.SelectToolEntityFilter'
+  }
+
+  toggleToolEntitySelect(select)
+
+  select.addEventListener('change', ({ target }) => {
+    if (target instanceof HTMLSelectElement) toggleToolEntitySelect(target)
+  })
+})
+
+// Remove empty placeholder when not needed
+onFind(
+  '.SearchWidget-collections > .SearchWidget-filter:not(:last-child) > select',
+  (select) => {
+    if (!select.textContent) {
+      if (select.parentNode instanceof HTMLElement) select.parentNode.remove()
+    }
+  },
+)
+
+onFind('.SearchWidget-reset', (resetBtn) => {
+  resetBtn.addEventListener('click', () => {
+    // TODO: TypeScript conversion - Replace jquery once popup.js is converted.
+    if (!$(resetBtn).popup('source')) return
+    const source: HTMLElement = ($(resetBtn) as any).popup('source')[0]
+    if (source) {
+      if (source instanceof HTMLAnchorElement) {
+        const controls = resetBtn.closest('.SearchWidget-controls')
+        if (controls) {
+          const filters = controls.querySelector('form.searchFiltersRest')
+          if (filters instanceof HTMLFormElement) {
+            filters.reset()
+          }
+        }
+        source.click()
+      } else if (source instanceof HTMLFormElement) {
+        source.reset()
+        const resetInput = source.querySelector<HTMLInputElement>('[name="rf"]')
+        const stInput = source.querySelector<HTMLInputElement>('[name="st"]')
+        if (resetInput) resetInput.value = 'true'
+        source.requestSubmit()
+        if (resetInput) resetInput.value = 'false'
+        if (stInput) stInput.value = ''
+      }
+    }
+    return false
+  })
+})
+
+onFind('.searchFiltersType', (element) => {
+  element.addEventListener('change', () => {
+    const targetInput = element
+      .closest('.Page')
+      ?.querySelector('form.Page-search input[name="st"]')
+    const searchType = element.querySelector('select[name="st"]')
+
+    if (!targetInput || !searchType) return
+    if (
+      !(targetInput instanceof HTMLInputElement) ||
+      !(searchType instanceof HTMLSelectElement)
+    )
+      return
+
+    targetInput.value = searchType.value
+  })
+
+  // Set the search 'q' input value to possible saved sticky value.
+  const sourceQuery = element.querySelector('input[name="q"]')
+  if (!sourceQuery || !(sourceQuery instanceof HTMLInputElement)) return
+
+  const targetQuery = element.closest('.Popup[name="miscSearch"]')
+    ? document.querySelector('.Page-search input[name="q"]')
+    : element.nextElementSibling?.querySelector('input[name="q"]')
+
+  if (targetQuery && targetQuery instanceof HTMLInputElement) {
+    targetQuery.value = sourceQuery.value
+  }
+})

package/src/legacy/tool-ui/src/SearchWidgetAdvanced.css

@@ -0,0 +1,109 @@
+/*
+ * Dialog.css assigns grid-template-rows: subgrid to all .has-ActionBarContent elements
+ * via a deeply-nested selector at specificity (0,4,1). The Advanced Query Builder form
+ * needs its own 4-row grid (header | scrollpane | 1fr spacer | ActionBar), so !important
+ * is the only way to override it from outside Dialog.css.
+ */
+.SearchWidgetAdvanced > form.has-ActionBarContent {
+  grid-template-rows: min-content min-content 1fr min-content !important;
+  align-items: stretch;
+  height: 100%;
+}
+
+.SearchWidgetAdvanced > form {
+  @apply pt-6;
+
+  /* Explicit row assignments for the 4-row grid above.
+   * Row 1: header (ComboInput + add button side by side)
+   * Row 2: scrollpane
+   * Row 3: 1fr spacer (pushes ActionBar to the bottom)
+   * Row 4: ActionBar */
+  > .ComboInput {
+    @apply [grid-row:1];
+  }
+
+  > button.icon-action-add {
+    @apply self-center [grid-row:1];
+  }
+
+  > .SearchWidgetAdvanced-scrollpane {
+    @apply [grid-row:2];
+  }
+
+  > .ActionBar {
+    @apply mt-6 [grid-row:4];
+  }
+
+  button.icon-action-add {
+    @apply btu-button btu-button-fill-none btu-button-primary ms-4 w-max btu-button-container-none before:btu-icon before:btu-icon-plus;
+  }
+
+  button.icon-action-remove {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error before:btu-icon before:btu-icon-x;
+  }
+}
+
+.SearchWidgetAdvanced:has(> form.form-submit) {
+  @apply relative;
+
+  &::after {
+    @apply btu-loader absolute left-1/2 top-1/2 z-[1] block size-[--Loader-size] -translate-x-1/2 -translate-y-1/2;
+  }
+}
+
+.SearchWidgetAdvanced-scrollpane ul:not(:where(.ComboInput-list, .RCS-list)) {
+  &:not(:empty) {
+    @apply px-4;
+  }
+  .ComboInput:has(+ button.icon-action-add) {
+    @apply max-w-[185px];
+  }
+
+  > li {
+    @apply mt-4 flex flex-wrap items-center gap-2;
+
+    > .ComboInput,
+    > btu-input {
+      @apply flex-1;
+    }
+
+    > button.icon-action-add {
+      @apply mx-2;
+    }
+
+    > button.icon-action-remove {
+      @apply order-1;
+    }
+
+    /* This sets up the spacing of RCS list items in Advanced Query filed popup
+     * The actual list item styling will be handled separately by RCS component styles
+    */
+    > .RCS {
+      @apply order-2 mt-2 w-full px-4;
+
+      > .RCS-list {
+        @apply flex w-2/3 flex-col gap-1.5;
+      }
+
+      .RCS-item {
+        @apply flex;
+      }
+
+      .RCS-controls {
+        @apply mt-1.5 w-max py-2;
+      }
+
+      .RCS-controls > .RCS-add {
+        @apply btu-button btu-button-fill-none btu-button-primary btu-button-container-none before:btu-icon before:btu-icon-plus;
+      }
+    }
+
+    > ul {
+      @apply order-2 w-full;
+
+      > li:first-child {
+        @apply mt-2;
+      }
+    }
+  }
+}