playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -6,19 +7,16 @@ import { globalProps } from '../utilities/globalProps'
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
 
-import usePBCopy from './usePBCopy'
-
 type CopyButtonProps = {
-  aria?: { [key: string]: string }
-  className?: string
-  data?: { [key: string]: string }
-  id?: string
-  from?: string
-  text?: string
-  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
-  tooltipText?: string
-  value?: string
-  timeout?: number
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  from?: string,
+  text?: string,
+  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
+  tooltipText?: string,
+  value?: string,
 }
 
 const CopyButton = (props: CopyButtonProps) => {
@@ -29,34 +27,62 @@ const CopyButton = (props: CopyButtonProps) => {
     from = '',
     id,
     text= 'Copy',
-    timeout = 1000,
     tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
   } = props
 
-  const [copied, copy] = usePBCopy({ value, from, timeout })
+  const [copied, setCopied] = useState(false)
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
+  const copy = () => {
+    if (!from && !value) {
+      return
+    }
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else if (from) {
+      const copyElement = document.getElementById(from);
+      let copyText = copyElement?.innerText
+
+      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
+        copyText = copyElement.value;
+      }
+
+      if (copyText) {
+        navigator.clipboard.writeText(copyText)
+      }
+    }
+
+    setCopied(true)
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000);
+  }
+
   return (
-    <div {...ariaProps}
+    <div
+        {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
     >
-      <Tooltip
+      <Tooltip 
           forceOpenTooltip={copied}
           placement={tooltipPlacement}
           showTooltip={false}
           text={tooltipText}
       >
-        <Button icon="copy"
+        <Button
+            icon='copy'
             onClick={copy}
         >
-          {text}
+          { text }
         </Button>
       </Tooltip>
     </div>

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

@@ -2,9 +2,7 @@ examples:
   rails:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  - copy_button_hook: Copy Hook

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

@@ -1,3 +1,2 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
-export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
-export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx'

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

@@ -1,33 +1,6 @@
 import PbEnhancedElement from "../pb_enhanced_element"
 
-function getTextFromElement(element) {
-  if (!element) return ''
-  return element.tagName.toLowerCase() === 'input'
-    ? element.value
-    : element.innerText
-}
-
-function copyTextToClipboard(text) {
-  if (!text) return
-  navigator.clipboard.writeText(text)
-    .catch(err => console.error('Failed to copy text:', err))
-}
-
-function handleExternalControlCopyClick(element) {
-  const value = element.getAttribute('data-external-copy-value')
-  const fromId = element.getAttribute('data-external-copy-from')
-
-  if (value) {
-    copyTextToClipboard(value)
-  } else if (fromId) {
-    const fromElement = document.querySelector(`#${fromId}`)
-    copyTextToClipboard(getTextFromElement(fromElement))
-  } else {
-    console.warn('Failed to copy:', element)
-  }
-}
-
-export class PbCopyButton extends PbEnhancedElement {
+export default class PbCopyButton extends PbEnhancedElement {
   static get selector() {
     return '.pb_copy_button_kit'
   }
@@ -47,27 +20,28 @@ export class PbCopyButton extends PbEnhancedElement {
   }
 
   handleClick() {
-    const value = this.element.getAttribute('data-copy-value')
     const fromId = this.element.getAttribute('data-from')
-
-    if (value) {
-      copyTextToClipboard(value)
-    } else if (fromId) {
+    if (fromId) {
       const fromElement = document.querySelector(`#${fromId}`)
-      copyTextToClipboard(getTextFromElement(fromElement))
+      if (fromElement) {
+        let contentToCopy = ''
+        if (fromElement.tagName.toLowerCase() === 'input') {
+          contentToCopy = fromElement.value
+        } else {
+          contentToCopy = fromElement.innerText
+        }
+        navigator.clipboard.writeText(contentToCopy)
+          .catch(err => console.error('Failed to copy text', err))
+        return
+      }
+    }
+
+    const textToCopy = this.element.getAttribute('data-copy-value')
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+        .catch(err => console.error('Failed to copy text', err))
     } else {
-      console.warn('No data-copy-value or data-from attribute found')
+      console.warn('No data-copy-value attribute found or data-from element')
     }
   }
 }
-
-export function addCopyEventListeners() {
-  const externalCopyElements = [
-    ...document.querySelectorAll('div[data-external-copy-value]'),
-    ...document.querySelectorAll('div[data-external-copy-from]')
-  ]
-
-  externalCopyElements.forEach(element => {
-    element.addEventListener('click', () => handleExternalControlCopyClick(element))
-  })
-}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -50,10 +50,6 @@ type DatePickerProps = {
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
-  controlsStartId?: string,
-    controlsEndId?: string,
-    syncStartWith?: string,
-    syncEndWith?: string,
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
@@ -102,10 +98,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     staticPosition = true,
     thisRangesEndToday = false,
     yearRange = [1900, 2100],
-    controlsStartId,
-    controlsEndId,
-    syncStartWith,
-    syncEndWith,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -142,10 +134,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       staticPosition,
       thisRangesEndToday,
       yearRange,
-      controlsStartId,
-      controlsEndId,
-      syncStartWith,
-      syncEndWith,
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -77,14 +77,6 @@ module Playbook
                                default: ""
       prop :validation_message, type: Playbook::Props::String,
                                 default: ""
-      prop :controls_start_id, type: Playbook::Props::String,
-                               default: ""
-      prop :controls_end_id, type: Playbook::Props::String,
-                             default: ""
-      prop :sync_start_with, type: Playbook::Props::String,
-                             default: ""
-      prop :sync_end_with, type: Playbook::Props::String,
-                           default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -116,10 +108,6 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
-          controlsStartId: controls_start_id,
-          controlsEndId: controls_end_id,
-          syncStartWith: sync_start_with,
-          syncEndWith: sync_end_with,
         }.to_json.html_safe
       end
 

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

@@ -32,11 +32,7 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
-  yearRange: number[],
-  controlsStartId?: string,
-    controlsEndId?: string,
-    syncStartWith?: string,
-    syncEndWith?: string,
+  yearRange: number[]
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
@@ -71,10 +67,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
-    controlsStartId,
-    controlsEndId,
-    syncStartWith,
-    syncEndWith,
   } = config
 
   // ===========================================================
@@ -283,47 +275,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // === Automatic Sync Logic for 3 input range pattern===
-
-  // If this is a quickpick that controls start and end
-  if (selectionType === "quickpick" && (controlsStartId || controlsEndId)) {
-    picker.config.onClose.push((selectedDates:string) => {
-      const [start, end] = selectedDates;
-
-      if (controlsStartId) {
-        const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        startPicker?.setDate(start, true);
-      }
-
-      if (controlsEndId) {
-        const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        endPicker?.setDate(end, true);
-      }
-    });
-  }
-
-  // If this is a start picker that syncs with a quickpick
-  if (syncStartWith) {
-    picker.config.onClose.push((selectedDates: string) => {
-      if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
-      }
-    });
-  }
-
-  // If this is an end picker that syncs with a quickpick
-  if (syncEndWith) {
-    picker.config.onClose.push((selectedDates: string) => {
-      if (selectedDates?.length) {
-        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
-        quickpick?.clear();
-      }
-    });
-  }
-// === End of Automatic Sync Logic ===
-
-    
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,14 +1,11 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
-import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error={<>
-          <Icon icon="warning" /> Invalid date. Please pick a valid date.
-        </>}
+        error="Invalid date. Please pick a valid date."
         pickerId="date-picker-error"
         {...props}
     />

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md

@@ -1,7 +1,3 @@
-To use the `quickpick`:
-- prop `mode` must be set to `range`
-- prop `selection_type` must be set to `quickpick`
-
 This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
 
 Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Use `this_ranges_end_today`/`thisRangesEndToday` to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the `this_ranges_end_today`/`thisRangesEndToday` prop is used, end date on that range will be today's date.
+Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md

@@ -1,5 +1 @@
-To use the `quickpick`:
-- prop `mode` must be set to `range`
-- prop `selectionType` must be set to `quickpick`
-
-Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.
+Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.

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

@@ -15,7 +15,6 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  - date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -48,7 +47,6 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
-  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,4 +26,3 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
-export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -238,16 +238,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       },
 
       onClose(selectedDates: Array<Date>) {
-        // Patch .clear() to also remove active state if cleared
-        const originalClear = fp.clear;
-        fp.clear = function (...args: any) {
-          const current = pluginData.rangesNav.querySelector('.active');
-          if (current) {
-            current.classList.remove('active');
-          }
-          activeLabel = "";
-          return originalClear.apply(this, args);
-        };
         // remove the active class from the button if the selected dates don't match the label
         if (!isLabelMatchingSelectedDates(selectedDates)) {
           pluginData.rangesButtons[activeLabel]?.classList.remove('active');

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,16 +1,7 @@
 <div
     class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
     data-pb-dialog-wrapper="true"
-    data-overlay-click="<%= object.overlay_close %>"
-    <% if object.custom_event_type.present? %>
-        data-custom-event-type="<%= object.custom_event_type %>"
-    <% end %>
-    <% if object.confirm_button_id.present? %>
-        data-confirm-button-id="<%= object.confirm_button_id %>"
-    <% end %>
-    <% if object.cancel_button_id.present? %>
-        data-cancel-button-id="<%= object.cancel_button_id %>"
-    <% end %>
+    data-overlay-click= <%= object.overlay_close %>
 >
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -21,8 +21,6 @@ module Playbook
       prop :status, type: Playbook::Props::Enum,
                     values: ["info", "caution", "delete", "error", "success", "default", ""],
                     default: ""
-      prop :custom_event_type, type: Playbook::Props::String,
-                               default: ""
 
       def classname
         generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")

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

@@ -11,7 +11,6 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
-  - dialog_turbo_frames: Within Turbo Frames
 
 
   react:

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,6 +17,4 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
-  - draggable_event_listeners: Draggable Event Listeners
+

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -5,17 +5,9 @@ module Playbook
     class Draggable < ::Playbook::KitBase
       prop :initial_items, type: Playbook::Props::Array,
                            default: []
-      prop :drop_zone_type, type: Playbook::Props::Enum,
-                            values: %w[ghost shadow outline line],
-                            default: "ghost"
-      prop :drop_zone_color, type: Playbook::Props::Enum,
-                             values: %w[neutral primary purple],
-                             default: "neutral"
 
       def data
-        Hash(prop(:data)).merge(pb_draggable: true,
-                                drop_zone_type: drop_zone_type,
-                                drop_zone_color: drop_zone_color)
+        Hash(prop(:data)).merge(pb_draggable: true)
       end
 
       def classname