playbook_ui 16.5.0.pre.alpha.RTEPOC15779 → 16.5.0.pre.alpha.play289915580

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2c36115f459754d15420a726ab66d5aef94d010e98cccf7cb900c7f181a926e
-  data.tar.gz: 065a216cb80347d860b96b44a0d7fcc57bc588a1168f771c9cb2ab1960d49e4f
+  metadata.gz: 56b26d361d1dbc2ac5256277d85a4fea2b3ab9b7a745a8f62085de16a976c716
+  data.tar.gz: 250f0d721fda4f62be3a744f5daf32c5a19c147fba43c5383e66eedab365c59b
 SHA512:
-  metadata.gz: 9948221496986eedce4addad128d3991d441e2d06e0f0fbdfd69630f748771276e74ee3ad532550972b8467a3f175a3cb04719b6811aa4847d79721dd987f0ad
-  data.tar.gz: 47ec682ffc0fae5d065c1d5636d21a6d288e3b54e7091fc49fed4180ee95aafd67db4282d0bc700f6af98e7de5428407222080f0305ea3599aacd88eb3573ee6
+  metadata.gz: bfdbb4f06db7e9d198fa81bbf6418e18d285810b8cc8f329b431d91d1e8d723def6cb224a35d8b862a9b1f962a296de508fb34813e8db36a5932e37024949c49
+  data.tar.gz: 783aed7a52d7c518afa0aa18549d8c1faf4129f774a0744dd55c1e6b02785be8c422015164986847da7c26234e7507e701ba1f6ca192ac826c03083e17d32583

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -192,19 +192,6 @@ module Playbook
         { name: component_name, props: component_props }
       end
 
-      # Flex justify for header cells: column_styling header_alignment when present (otherwisedefault by column/row index)
-      def header_flex_justify(cell, cell_index, row_index)
-        ha = cell[:header_alignment]
-        return header_alignment_to_justify(ha) if ha.present?
-
-        default_header_flex_justify(cell_index, row_index)
-      end
-
-      # Flex text_align from column_styling header_alignment (default is end)
-      def header_flex_text_align(cell)
-        (cell[:header_alignment].presence || "end").to_s
-      end
-
     private
 
       # Find the original column definition for a cell
@@ -364,26 +351,6 @@ module Playbook
           row[:children] || row["children"]
         end
       end
-
-      # 2 header alignment helper methods
-      def header_alignment_to_justify(header_alignment)
-        case header_alignment.to_s
-        when "left" then "start"
-        when "center" then "center"
-        when "right" then "end"
-        else "end"
-        end
-      end
-
-      def default_header_flex_justify(cell_index, row_index)
-        if cell_index.zero?
-          "start"
-        elsif row_index == header_rows.size - 1
-          "end"
-        else
-          "center"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -612,41 +612,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 // === End of Automatic Sync Logic ===
 
-  // Label click toggles calendar: stop pointer bubbling to document, then toggle (avoids flatpickr close + input-focus reopen).
-  const datePickerLabel = document.querySelector(`label[for="${pickerId}"]`)
-  if (datePickerLabel) {
-    type LabelHandlerRefs = { stopPointer?: (e: Event) => void, click?: (e: MouseEvent) => void }
-    const labelWithRefs = datePickerLabel as HTMLElement & { _pbDatePickerLabelHandlers?: LabelHandlerRefs }
-    const prev = labelWithRefs._pbDatePickerLabelHandlers
-    if (prev?.stopPointer) {
-      datePickerLabel.removeEventListener('mousedown', prev.stopPointer)
-      datePickerLabel.removeEventListener('touchstart', prev.stopPointer)
-    }
-    if (prev?.click) {
-      datePickerLabel.removeEventListener('click', prev.click)
-    }
-
-    const stopPointerForFlatpickrDocClose = (e: Event) => {
-      e.stopPropagation()
-    }
-    const onDatePickerLabelClick = (e: MouseEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      if (picker.input.disabled) return
-      picker.toggle()
-      if (picker.isOpen) {
-        picker.input.focus()
-      }
-    }
-    datePickerLabel.addEventListener('mousedown', stopPointerForFlatpickrDocClose)
-    datePickerLabel.addEventListener('touchstart', stopPointerForFlatpickrDocClose, { passive: true })
-    datePickerLabel.addEventListener('click', onDatePickerLabelClick)
-
-    labelWithRefs._pbDatePickerLabelHandlers = {
-      stopPointer: stopPointerForFlatpickrDocClose,
-      click: onDatePickerLabelClick,
-    }
-  }
 
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -66,4 +66,3 @@ examples:
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
   - date_picker_required_indicator: Required Indicator
-  - date_picker_dialog_submission: Dialog Form Submission

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -29,4 +29,3 @@ export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_
 export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
 export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
 export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
-export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -142,7 +142,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
-  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions?.id ? `${inputOptions.id}_trix` : undefined))
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
 
   return (
     <div

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -8,21 +8,7 @@
 @import "../tokens/transition";
 @import "previewer_mixin";
 
-// Rails TipTap root: flex/grid children default to min-width: auto, so the toolbar’s
-// intrinsic width can force horizontal page/dialog scroll. Pin the kit to the parent width.
-[data-pb-rte-tiptap="true"] {
-  box-sizing: border-box;
-  display: block;
-  max-width: 100%;
-  min-width: 0;
-  width: 100%;
-}
-
-.pb_rich_text_editor_kit {
-  box-sizing: border-box;
-  max-width: 100%;
-  min-width: 0;
-
+[class^="pb_rich_text_editor_kit"] {
     &.inline {
         .toolbar {
           opacity: 0;
@@ -87,54 +73,18 @@
     }
   }
 
-  // Active state for toolbar (Rails kit uses pb_button_kit pb_button_link; override link variant when active)
-  .toolbar button.pb_button_kit.is-active {
-    color: $primary;
-    background-color: $bg_light;
-  }
-
   .pb_rich_text_editor_tiptap_toolbar_sticky {
     position: sticky;
     top: 0;
     z-index: 10;
   }
-
-  .rte-editor-wrap {
-    box-sizing: border-box;
-    max-width: 100%;
-    min-width: 0;
-  }
-
-  .pb_rich_text_editor_advanced_container {
-    max-width: 100%;
-    min-width: 0;
-  }
-
   .toolbar {
     border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
     border: 1px solid $input_border_default;
     overflow-x: auto;
-    // Single horizontal row + scroll in narrow modals/sidebars (wrap used to stack controls vertically).
     &_block {
-      align-items: center;
-      display: flex;
-      flex-wrap: nowrap;
       gap: $space_xs;
-      min-width: 0;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    // Vertical section separators use ::before/::after with height: 100%. With
-    // align-items: center on .toolbar_block the kit’s cross size was 0, so the
-    // lines disappeared (master only had gap on .toolbar_block, default stretch).
-    .pb_section_separator_kit.pb_section_separator_vertical {
-      align-self: center;
-      flex-shrink: 0;
-      height: $space_xl;
     }
-
-    // React ToolbarDropdown — match master (fixed width trigger; prod playbook.cloud).
     .editor-dropdown-button {
       background: transparent;
       border: none;
@@ -143,125 +93,23 @@
       font-weight: $light;
       padding: ($space_xs - 1) 0px;
       width: $space_xl * 3;
-
       &:focus-visible {
         box-shadow: unset;
       }
     }
-
-    // Rails TipTap toolbar: mirror React Toolbar.tsx — <Flex paddingX="sm" paddingY="xxs" justify="between">.
-    &.rte-rails-toolbar-layout--simple {
-      .rte-toolbar-left {
-        overflow-x: visible;
-      }
-    }
-
-    &.rte-rails-toolbar-layout {
-      max-width: 100%;
-      min-width: 0;
-
-      .rte-rails-toolbar-row {
-        align-items: center;
-        box-sizing: border-box;
-        column-gap: 0;
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        min-width: 0;
-        padding: $space_xxs $space_sm;
-        row-gap: 0;
-        width: 100%;
-      }
-
-      .rte-toolbar-left {
-        align-items: center;
-        display: flex;
-        flex: 1 1 auto;
-        flex-wrap: nowrap;
-        gap: $space_xs;
-        min-width: 0;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-
-      .rte-toolbar-right {
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-        gap: $space_xs;
-        margin-left: auto;
-      }
-
-      // Align dropdown trigger with icon row (React wraps Popover + SectionSeparator in one flex line).
-      .pb_popover_reference_wrapper {
-        align-items: center;
-        display: inline-flex;
-      }
-
-      // Override master’s fixed-width React trigger: Rails block-style label + icons needs flexible width.
-      .editor-dropdown-button {
-        justify-content: flex-start;
-        letter-spacing: normal;
-        line-height: 1;
-        max-width: 100%;
-        min-height: unset;
-        padding: ($space_xs - 1) $space_xs;
-        text-align: left;
-        width: auto;
-
-        .pb_button_content {
-          align-items: center;
-          display: inline-flex;
-          line-height: 1;
-        }
-
-        .pb_button_content > .pb_flex_kit {
-          align-items: center;
-        }
-
-        .rte-block-style-trigger-inner {
-          align-items: center;
-        }
-
-        .rte-block-style-trigger-icon,
-        .rte-block-style-chevron {
-          display: inline-flex;
-          flex-shrink: 0;
-          line-height: 0;
-
-          .pb_icon_kit {
-            align-items: center;
-            display: flex;
-            line-height: 0;
-          }
-
-          svg {
-            display: block;
-          }
-        }
-
-        .rte-block-style-trigger-label {
-          align-items: center;
-          display: inline-flex;
-          line-height: 1.2;
-        }
-
-        &:focus-visible {
-          box-shadow: unset;
-        }
-      }
-    }
   }
 
-  // TipTap content — match master (prod playbook React tab).
   .ProseMirror {
     background: $white;
     border: 1px solid $input_border_default;
     border-radius: $border_rad_heaviest;
     height: 100%;
-    line-height: $lh_loose;
     padding: 1rem 1.5rem 1.5rem 1.5rem;
+    line-height: $lh_loose;
     @include transition_default;
+    :first-child {
+      margin-top: 0;
+    }
 
     h4,
     h5,
@@ -313,32 +161,9 @@
     ul {
       @include preview_tiptap_ul;
     }
-
-    // After heading mixins: first block should not pick up extra top margin (wins over `p { margin-top: 1rem }`).
-    > :first-child {
-      margin-top: 0;
-    }
-  }
-
-  // Toolbar + editor stack: toolbar keeps its border; editor has no top stroke (classic layout).
-  // Avoid relying on a wrapper-only frame — partial deploys then looked “borderless” because
-  // ProseMirror had been forced to border: none.
-  .pb_rich_text_editor_advanced_container.toolbar-active {
-    .ProseMirror {
-      border-top: none;
-      border-top-left-radius: initial;
-      border-top-right-radius: initial;
-    }
   }
 }
 
-// Rails-only: outer kit sets `data-pb-rte-tiptap` — roomier padding + wrapping for vanilla TipTap in forms/dialogs.
-[data-pb-rte-tiptap="true"] .pb_rich_text_editor_kit .ProseMirror {
-  overflow-wrap: anywhere;
-  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
-  word-break: break-word;
-}
-
 .pb_tiptap_toolbar_dropdown_list_item {
   &.is-active,
   &:active {
@@ -363,51 +188,20 @@
     }
   }
 }
-
-// Rails RTE: block-style menu uses Nav (popover) instead of React NavItem class hook.
-.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_item_link.is-active {
-  background-color: $bg_light;
-  border-radius: unset !important;
-  color: $primary;
-
-  .pb_nav_list_item_text,
-  .pb_nav_list_item_icon_left {
-    color: $primary !important;
-  }
-}
-
-.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_kit_item:hover .pb_nav_list_item_link:not(.is-active) {
-  background-color: $neutral_subtle;
-  border-radius: unset !important;
-
-  .pb_nav_list_item_text,
-  .pb_nav_list_item_icon_left {
-    background-color: unset;
-    color: $text_lt_light !important;
-  }
-}
-
-// No toolbar: ring the whole control.
-.pb_rich_text_editor_advanced_container:not(.toolbar-active) {
+.pb_rich_text_editor_advanced_container {
   transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   &:focus-visible,
   &:focus-within {
-    border-radius: $border_rad_heaviest;
-    box-shadow: 0 0 0 1px $input_border_state;
     outline: unset;
+    box-shadow: 0 0 0 1px $input_border_state;
+    border-radius: $border_rad_heaviest;
     transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   }
-}
-
-// Toolbar + editor: use border color (not an outer box-shadow) so the bottom isn’t doubled.
-.pb_rich_text_editor_advanced_container.toolbar-active {
-  &:focus-within {
-    .toolbar {
-      border-color: $input_border_state;
-    }
-
-    .ProseMirror {
-      border-color: $input_border_state;
+  &.toolbar-active {
+    .ProseMirror { 
+      border-top: none;
+      border-top-left-radius: initial;
+      border-top-right-radius: initial;
     }
   }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -1,8 +1,6 @@
 examples:
 
   rails:
-  - rich_text_editor_rails_default: "Rails (TipTap)"
-  - rich_text_editor_rails_simple: "Rails (TipTap — Simple toolbar)"
 
   react:
   - rich_text_editor_advanced_default: Advanced Default

data/app/pb_kits/playbook/pb_rich_text_editor/kit.schema.json

@@ -3,8 +3,7 @@
   "name": "RichTextEditor",
   "description": "RichTextEditor component",
   "platforms": [
-    "react",
-    "rails"
+    "react"
   ],
   "props": {
     "advancedEditor": {
@@ -34,8 +33,7 @@
     "inputOptions": {
       "type": "{ [key: string]: string | number | boolean | (() => void) }",
       "platforms": [
-        "react",
-        "rails"
+        "react"
       ]
     },
     "inline": {
@@ -47,8 +45,7 @@
     "label": {
       "type": "string",
       "platforms": [
-        "react",
-        "rails"
+        "react"
       ]
     },
     "extensions": {
@@ -72,8 +69,7 @@
     "placeholder": {
       "type": "string",
       "platforms": [
-        "react",
-        "rails"
+        "react"
       ]
     },
     "inputHeight": {
@@ -101,18 +97,14 @@
     "requiredIndicator": {
       "type": "boolean",
       "platforms": [
-        "react",
-        "rails"
-      ],
-      "default": false
+        "react"
+      ]
     },
     "simple": {
       "type": "boolean",
       "platforms": [
-        "react",
-        "rails"
-      ],
-      "default": false
+        "react"
+      ]
     },
     "sticky": {
       "type": "boolean",
@@ -129,8 +121,7 @@
     "value": {
       "type": "string",
       "platforms": [
-        "react",
-        "rails"
+        "react"
       ]
     },
     "TrixEditor": {

data/app/pb_kits/playbook/pb_select/select.rb

@@ -110,8 +110,8 @@ module Playbook
 
       def data_attributes
         data = attributes[:data] || {}
-        data["data-pb-select"] = true
-        data["data-validation-message"] = validation_message if validation_message.present?
+        data.merge!("data-pb-select" => true)
+        data.merge!("data-validation-message" => validation_message) if validation_message.present?
         data
       end
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -516,18 +516,18 @@ const resolvedLoadOptions =
       }
 
       // Reset form submitted state when a selection is made (this is all for react rendered rails kit)
-      if (action === "select-option" || action === "create-option") {
+      if (action === "select-option") {
         setFormSubmitted(false)
         // Mark that user has made a selection to disable default value focus behavior
         setHasUserSelected(true)
       }
 
-      // If a value is selected/created and we're preserving input on blur, clear the input
-      if ((action === "select-option" || action === "create-option") && preserveSearchInput) {
+      // If a value is selected and we're preserving input on blur, clear the input
+      if (action === "select-option" && preserveSearchInput) {
         setInputValue("")
       }
 
-      if (action === "select-option" || action === "create-option") {
+      if (action === "select-option") {
         if (selectProps.onMultiValueClick && option)
           selectProps.onMultiValueClick(option)
         const multiValueClearEvent = new CustomEvent(

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -11,7 +11,6 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
-    - typeahead_createable: Createable
     - typeahead_error_state: Error State
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)

data/app/pb_kits/playbook/pb_typeahead/kit.schema.json

@@ -24,10 +24,8 @@
     "createable": {
       "type": "boolean",
       "platforms": [
-        "react",
-        "rails"
-      ],
-      "default": false
+        "react"
+      ]
     },
     "disabled": {
       "type": "boolean",

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -62,8 +62,6 @@ module Playbook
                                    default: false
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
-      prop :createable, type: Playbook::Props::Boolean,
-                        default: false
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_typeahead_kit") + default_margin_bottom
@@ -85,7 +83,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped || input_display == "none" || createable
+        pills || !is_multi || wrapped || input_display == "none"
       end
 
       def typeahead_react_options
@@ -117,7 +115,6 @@ module Playbook
           clearOnContextChange: clear_on_context_change,
           disabled: disabled,
           preserveSearchInput: preserve_search_input,
-          createable: createable,
         }
 
         base_options[:getOptionLabel] = get_option_label if get_option_label.present?

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -0,0 +1,58 @@
+export default [
+  "minHeight",
+  "maxHeight",
+  "height",
+  "left",
+  "bottom",
+  "right",
+  "top",
+  "hover",
+  "zIndex",
+  "verticalAlign",
+  "truncate",
+  "textAlign",
+  "shadow",
+  "position",
+  "paddingRight",
+  "paddingLeft",
+  "paddingTop",
+  "paddingBottom",
+  "paddingX",
+  "paddingY",
+  "padding",
+  "break",
+  "default",
+  "overflowX",
+  "overflowY",
+  "overflow",
+  "order",
+  "numberSpacing",
+  "rowGap",
+  "columnGap",
+  "gap",
+  "maxWidth",
+  "minWidth",
+  "width",
+  "marginRight",
+  "marginLeft",
+  "marginTop",
+  "marginBottom",
+  "marginX",
+  "marginY",
+  "margin",
+  "lineHeight",
+  "justifySelf",
+  "justifyContent",
+  "flexWrap",
+  "flexShrink",
+  "flexGrow",
+  "flexDirection",
+  "flex",
+  "display",
+  "dark",
+  "cursor",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "alignContent"
+];