playbook_ui 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7372 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7201

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -10,81 +10,6 @@ export default class PbDialog extends PbEnhancedElement {
   connect() {
     window.addEventListener("DOMContentLoaded", () => this.setupDialog())
     window.addEventListener("turbo:frame-load", () => this.setupDialog())
-
-    // Code for custom_event_type setup (can take multiple events in a string separated by commas)
-    const customEventTypeString = this.element.dataset.customEventType
-    if (customEventTypeString && !this.element.hasAttribute("data-custom-event-handled")) {
-      this.customEventTypes = customEventTypeString.split(",").map(e => e.trim()).filter(Boolean)
-      this.customEventTypes.forEach(eventType => {
-        window.addEventListener(eventType, this.handleCustomEvent)
-      })
-
-      this.element.setAttribute("data-custom-event-handled", "true")
-    }
-  }
-
-  disconnect() {
-    if (this.customEventTypes && Array.isArray(this.customEventTypes)) {
-      this.customEventTypes.forEach(eventType => {
-        window.removeEventListener(eventType, this.handleCustomEvent)
-      })
-    }
-  }
-
-  handleCustomEvent = (event) => {
-    const dialogId = event.detail?.dialogId || this.element.querySelector("dialog")?.id
-    const dialog = dialogId && document.getElementById(dialogId)
-  
-    if (!dialog) {
-      console.warn(`[PbDialog] Could not find dialog with ID '${dialogId}'`)
-      return
-    }
-  
-    this.setupDialog()
-  
-    const action = event.detail?.action || 'open'
-  
-    // Known Actions - four "standard" dialog actions that felt like things devs might want to do
-    const knownActions = ['open', 'close', 'clickConfirm', 'clickCancel'];
-  
-    if (knownActions.includes(action)) {
-      switch (action) {
-        case 'open':
-          if (!dialog.open) dialog.showModal()
-          break
-        case 'close':
-          if (dialog.open) dialog.close(event.detail?.returnValue)
-          break
-        case 'clickConfirm':
-          this.triggerButtonClick(dialog, event, 'confirm')
-          break
-        case 'clickCancel':
-          this.triggerButtonClick(dialog, event, 'cancel')
-          break
-      }
-    } 
-    // Custom Actions - flexible for Turbo or other integration
-    else if (typeof event.detail?.customAction === 'function') {
-      event.detail.customAction({ dialog, event })
-    } else if (window.pbDialogActions?.[action]) {
-      // Can register custom actions globally
-      window.pbDialogActions[action]({ dialog, event })
-    } else {
-      console.warn(`[PbDialog] Unknown action: ${action}`)
-    }
-  }
-
-  triggerButtonClick(dialog, event, type) {
-    const buttonId = event.detail?.[`${type}ButtonId`] || 
-                     dialog.closest('[data-pb-dialog-wrapper]')?.dataset[`${type}ButtonId`]
-    const button = buttonId ? document.getElementById(buttonId) : 
-                  dialog.querySelector(`[data-${type}-button]`)
-  
-    if (button) {
-      button.click()
-    } else {
-      console.warn(`[PbDialog] Could not find ${type} button for dialog`)
-    }
   }
 
   setupDialog() {
@@ -93,7 +18,7 @@ export default class PbDialog extends PbEnhancedElement {
     const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
     const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-    if (loadingButton && !loadingButton.dataset.listenerAttached) {
+    if (loadingButton) {
       loadingButton.addEventListener("click", function () {
         const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
         const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
@@ -110,42 +35,27 @@ export default class PbDialog extends PbEnhancedElement {
         okayLoadingButton.className = newClass;
         if (cancelButton) cancelButton.className = newCancelClass;
       });
-    
-      // Prevent multiple registrations
-      loadingButton.dataset.listenerAttached = "true";
     }
-    
-    openTrigger.forEach((open) => {
-      const originalClickHandler = open._openDialogClickHandler
-      if (originalClickHandler) open.removeEventListener("click", originalClickHandler)
-
-      open._openDialogClickHandler = () => {
-        const openTriggerData = open.dataset.openDialog;
-        const targetDialogOpen = document.getElementById(openTriggerData)
-        if (targetDialogOpen && !targetDialogOpen.open) targetDialogOpen.showModal()
-      };
 
-      open.addEventListener("click", open._openDialogClickHandler)
+    openTrigger.forEach((open) => {
+      open.addEventListener("click", () => {
+        var openTriggerData = open.dataset.openDialog;
+        var targetDialog = document.getElementById(openTriggerData)
+        if (targetDialog.open) return;
+        targetDialog.showModal();
+      });
     });
 
     closeTrigger.forEach((close) => {
-      const originalClickHandler = close._closeDialogClickHandler
-      if (originalClickHandler) close.removeEventListener("click", originalClickHandler)
-
-      close._closeDialogClickHandler = () => {
-        const closeTriggerData = close.dataset.closeDialog;
-        const targetDialogClose = document.getElementById(closeTriggerData)
-        if (targetDialogClose) targetDialogClose.close();
-      };
-
-      close.addEventListener("click", close._closeDialogClickHandler)
+      close.addEventListener("click", () => {
+        var closeTriggerData = close.dataset.closeDialog;
+        document.getElementById(closeTriggerData).close();
+      });
     });
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalMousedownHandler = dialogElement._outsideClickHandler
-      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
-      dialogElement._outsideClickHandler = (event) => {
+      dialogElement.addEventListener("mousedown", (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
@@ -159,9 +69,7 @@ export default class PbDialog extends PbEnhancedElement {
           dialogElement.close()
           event.stopPropagation()
         }
-      }
-
-      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
+      })
     })
   }
 }

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

@@ -17,5 +17,4 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_event_listeners: Draggable Event Listeners
 

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -35,7 +35,7 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
-    separators?: boolean;
+    separators: boolean;
     triggerRef?: any;
     variant?: "default" | "subtle";
 };

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -22,7 +22,7 @@ type DropdownOptionProps = {
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  key?: string | number;
+  key?: string;
   option?: GenericObject;
   padding?: string;
 }  & GlobalProps;

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -85,19 +85,11 @@
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-color: transparent;
+      border-right-width: 0;
     }
-    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
-    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
-      border-right-color: $primary;
-    } 
-    [class^=pb_text_input_kit].error .text_input_wrapper input,
-    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
-      border-right-color: $error;
-    }   
   }
 
-  & > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
+  & > [class^=pb_phone_number_input]:not(:first-child) {
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
@@ -115,16 +107,8 @@
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-color: transparent;
+      border-right: none;
     }
-    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
-    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
-      border-right-color: $primary;
-    } 
-    [class^=pb_text_input_kit].error .text_input_wrapper input,
-    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
-      border-right-color: $error;
-    }  
   }
 
   &[class*=rails] > [class^=pb_date_picker_kit] {
@@ -243,8 +227,4 @@
       padding-left: calc(var(--iti-flag-width) + 1px);
     }
   }
-  
-  &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
-      align-self: baseline;
-  }
 }

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,4 +1,5 @@
-<%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
+<div>
+
   <%= pb_rails("form_group") do %>
     <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
@@ -16,6 +17,8 @@
       ]
     }) %>
   <% end %>
+  <br>
+  <br>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("select", props: {
         blank_selection: "Phone",
@@ -29,17 +32,4 @@
         id: "phone"
     }) %>
   <% end %>
-  <%= pb_rails("form_group") do %>
-      <%= pb_rails("phone_number_input", props: {
-        id: "phone2"
-      }) %>
-      <%= pb_rails("select", props: {
-        blank_selection: "Phone",
-        options: [
-          { value: "Cell" },
-          { value: "Work" },
-          { value: "Home" },
-        ]
-      }) %>
-  <% end %>
-<% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,16 +1,11 @@
-import React, {useState} from 'react'
+import React from 'react'
 
 import FormGroup from '../_form_group'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
-import Flex from '../../pb_flex/_flex'
-import Passphrase from '../../pb_passphrase/_passphrase'
 
 const FormGroupSelect = (props) => {
-  const [input, setInput] = useState("");
-  const handleChange = (e) => setInput(e.target.value);
-
   const options = [
     { value: 'Country' },
     { value: 'Pop' },
@@ -30,10 +25,7 @@ const FormGroupSelect = (props) => {
   ]
 
   return (
-    <Flex 
-        orientation="column" 
-        rowGap="md"
-    >
+    <div>
       <FormGroup>
         <TextInput
             placeholder="Enter Artist Name"
@@ -45,43 +37,18 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
+      <br />
+      <br />
       <FormGroup>
         <Select
             blankSelection="Phone"
             options={phoneOptions}
-            {...props}
-        />
+            />
         <PhoneNumberInput
             id='default'
-            {...props}
         />
     </FormGroup>
-    <FormGroup>
-      <PhoneNumberInput
-          id='default-2'
-          {...props}
-      />
-      <Select
-          blankSelection="Phone"
-          options={phoneOptions}
-          {...props}
-      />
-    </FormGroup>
-    <FormGroup>
-        <Select 
-            blankSelection="Phone" 
-            options={phoneOptions}
-            {...props}
-        />
-        <Passphrase
-            id="my-passphrase"
-            label=""
-            onChange={handleChange}
-            value={input}
-            {...props}
-        />
-      </FormGroup>
-    </Flex>
+    </div>
   )
 }
 

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

@@ -15,7 +15,6 @@ examples:
 
   react:
   - gauge_default: Default
-  - gauge_pb_styles: Playbook Styles
   - gauge_disable_animation: Disable Animation
   - gauge_title: Title
   - gauge_units: Units

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

@@ -1,5 +1,4 @@
 export { default as GaugeDefault } from './_gauge_default.jsx'
-export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
 export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
 export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
 export { default as GaugeHeight } from './_gauge_height.jsx'

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -210,78 +210,10 @@ $bracket-border-width: 4px;
       border-right: $bracket-border-width solid $border_light;
     }
 
-    .polygon_node {
-      position: absolute;
-      top: calc(50% - 5px);
-      right: -10px;
-
-      width: 0;
-      height: 0;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left: 10px solid $border_light;
-    }
-
     .layout_round_label {
       display: none;
     }
 
-    .layout_participant,
-    .layout_participant_winner,
-    .layout_participant_self,
-    .layout_participant_winner_self,
-    .layout_participant_winner_self_last {
-      height: 60px;
-    }
-
-    .layout_tbd {
-      height: 140px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .layout_participant_winner,
-    .layout_participant_self,
-    .layout_participant_winner_self,
-    .layout_participant_winner_self_last {
-      position: relative;
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        width: 4px;
-        height: 100%;
-      }
-    }
-
-    .layout_participant_winner::after {
-      right: 0;
-      background: $product_6_highlight;
-    }
-
-    .layout_participant_self::after {
-      left: 0;
-      background: $category_1;
-    }
-
-    .layout_participant_winner_self::after {
-      right: 0;
-      background: $product_6_highlight;
-    }
-
-    .layout_participant_winner_self_last::after {
-      left: 0;
-      background: $category_1;
-    }
-
-    .game_separator {
-      &::before, &::after {
-        height: 2px;
-      }
-    }
-
     @media (max-width: $screen-md-max) {
       flex-direction: column;
       .layout_round_label {
@@ -289,8 +221,7 @@ $bracket-border-width: 4px;
       }
       .layout_round .layout_game::after,
       .connector_container,
-      .half_box,
-      .polygon_node {
+      .half_box {
         display: none !important;
       }
     }

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -6,7 +6,6 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
 
 import { Round, RoundLabel } from "./subcomponents/_round";
 import Game from "./subcomponents/_game";
-import Participant from "./subcomponents/_participant";
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -177,38 +176,13 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
-  const numberOfRounds = Array.isArray(children) ? React.Children.toArray(children).filter(
+  const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
     (child) => {
       return (child as React.ReactElement).type === Layout.Round;
     }
   ).length : 0
-
-  const lastRoundWithSelf = React.Children.toArray(children).filter((child) => {
-    if ((child as React.ReactElement).type !== Layout.Round) {
-      return false
-    }
-  
-    const roundElement = child as React.ReactElement
-  
-    const gameChildren = React.Children.toArray(roundElement.props.children)
-  
-    const hasWinningSelfParticipant = gameChildren.some((gameChild) => {
-      const gameElement = gameChild as React.ReactElement
-  
-      const participantChildren = React.Children.toArray(gameElement.props.children)
-  
-      return participantChildren.some((participantChild) => {
-        const participantElement = participantChild as React.ReactElement
-        const { self } = participantElement.props
-        return self === true
-      })
-    })
-  
-    return hasWinningSelfParticipant
-  }).length
-
   const bracketChildren = nonSideChildren.map(child =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, lastRoundWithSelf }) : child
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
   )
   
   const filteredProps = {...props}
@@ -245,6 +219,5 @@ Layout.Footer = Footer
 Layout.Round = Round
 Layout.Game = Game
 Layout.RoundLabel = RoundLabel
-Layout.Participant = Participant
 
 export default Layout