@brightspot/ui 3.0.1-cms-ui-migration.4 → 3.0.1

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

@@ -1,441 +0,0 @@
-/* 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

@@ -1,154 +0,0 @@
-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

@@ -1,109 +0,0 @@
-/*
- * 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;
-      }
-    }
-  }
-}