playbook_ui 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogLoading = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogScrollable = () => {
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
 
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -1,6 +1,8 @@
 
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex} from "playbook-ui"
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -1,7 +1,10 @@
 /* eslint-disable react/jsx-handler-names */
 
 import React, { useState } from "react"
-import { Button, Dialog, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

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

@@ -0,0 +1,75 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
+
+export default class PbDialog extends PbEnhancedElement {
+  static get selector() {
+    return DIALOG_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
+    window.addEventListener("turbo:frame-load", () => this.setupDialog())
+  }
+
+  setupDialog() {
+    const openTrigger = document.querySelectorAll("[data-open-dialog]");
+    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+    const dialogs = document.querySelectorAll(".pb_dialog_rails")
+
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+      loadingButton.addEventListener("click", function () {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        let newClass = currentClass.replace("_enabled", "_disabled_loading");
+        let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+        // Disable the buttons
+        okayLoadingButton.disabled = true;
+        if (cancelButton) cancelButton.disabled = true;
+
+        okayLoadingButton.className = newClass;
+        if (cancelButton) cancelButton.className = newCancelClass;
+      });
+    }
+
+    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) => {
+      close.addEventListener("click", () => {
+        var closeTriggerData = close.dataset.closeDialog;
+        document.getElementById(closeTriggerData).close();
+      });
+    });
+
+    // Close dialog box on outside click
+    dialogs.forEach((dialogElement) => {
+      dialogElement.addEventListener("mousedown", (event) => {
+        const dialogParentDataset = dialogElement.parentElement.dataset
+        if (dialogParentDataset.overlayClick === "overlay_close") return
+
+        const dialogModal = event.target.getBoundingClientRect()
+        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+          event.clientX > dialogModal.right ||
+          event.clientY < dialogModal.top ||
+          event.clientY > dialogModal.bottom
+
+        if (clickedOutsideDialogModal) {
+          dialogElement.close()
+          event.stopPropagation()
+        }
+      })
+    })
+  }
+}

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -60,6 +60,20 @@ module Playbook
                                            .gsub("'../..'", "'playbook-ui'")
                                            .gsub(%r{from "../.*}, "from 'playbook-ui'")
                                            .gsub(%r{from '../.*}, "from 'playbook-ui'")
+        stringified_code = stringified_code.gsub(/import\s+(\w+)\s+from\s+['"]playbook-ui['"]/) do
+          "import { #{::Regexp.last_match(1)} } from 'playbook-ui'"
+        end
+        stringified_code = stringified_code.gsub("import { FormattedDate }", "import { Date as FormattedDate }")
+        # Combine separate playbook-ui import statements into one
+        imports = stringified_code.scan(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/)
+        components = imports.flatten.join(", ").split(",").map(&:strip).uniq
+        if components.any?
+          new_import_statement = "import { #{components.join(', ')} } from 'playbook-ui'"
+          stringified_code.gsub!(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/, "")
+          stringified_code = stringified_code.sub(/import\s+React[\s\S]+?\n/, "\\0\n#{new_import_statement}")
+        end
+        # Replace several empty lines with one empty line
+        stringified_code.gsub!(/\n\s*\n{2,}/, "\n\n")
         stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
         if stringified_code.include?("props: { ")
           stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -2,10 +2,120 @@
 @import "../tokens/opacity";
 
 .pb_draggable_container {
-  .is_dragging {
-    opacity: $opacity_4;
-  }
-  .pb_draggable_item:hover {
-    cursor: grab;
+  .pb_draggable_item {
+    &:hover {
+      cursor: grab;
+    }
+
+    &.is_dragging {
+      position: relative;
+
+      // Ghost variant - show the item at 50% opacity. Default behavior.
+      &.drop_zone_ghost {
+        opacity: $opacity_4;
+      }
+
+      // Outline variant
+      &.drop_zone_outline {
+        // Create a container for the outline
+        position: relative;
+
+        // Make content invisible
+        & > * {
+          opacity: 0;
+        }
+
+        // Add outline
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border: 2px dashed $neutral;
+          border-radius: $border-radius-sm;
+          box-sizing: border-box;
+          z-index: 10;
+          pointer-events: none;
+        }
+
+        // Apply color variants to the ::before element
+        &.drop_zone_color_primary::before { border-color: $primary; }
+        &.drop_zone_color_purple::before { border-color: $purple; }
+      }
+
+      // Shadow variant
+      &.drop_zone_shadow {
+        // Create a container for the shadow
+        position: relative;
+
+        // Make content invisible
+        & > * {
+          opacity: 0;
+        }
+
+        // Add shadow background
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba($neutral, $opacity_5);
+          border-radius: $border-radius-sm;
+          z-index: 10;
+          pointer-events: none;
+        }
+
+        // Apply rgba color variants to the ::before element
+        &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
+        &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
+      }
+
+      // Line variant
+      &.drop_zone_line {
+        // Hide the original content to show the line
+        & > * {
+          opacity: 0;
+        }
+
+        // Style for horizontal line (default)
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 4px;
+          height: 100%;
+          background-color: $neutral;
+          border-radius: 1000px;
+          z-index: 10;
+          pointer-events: none;
+        }
+
+        // Apply color variants
+        &.drop_zone_color_primary::before { background-color: $primary; }
+        &.drop_zone_color_purple::before { background-color: $purple; }
+      }
+    }
   }
 }
+
+// Support for vertical layouts (horizontal line)
+.pb_draggable_container.vertical {
+  .pb_draggable_item {
+    &.is_dragging {
+      // Line variant for vertical layouts (horizontal line)
+      &.drop_zone_line {
+        &::before {
+          width: 100%;
+          height: 4px;
+          left: 0;
+          top: 0;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_draggable/_draggable.tsx

@@ -10,6 +10,8 @@ type DraggableProps = {
   className?: string;
   children?: React.ReactNode;
   data?: { [key: string]: string };
+  dropZone?: 'ghost' | 'outline' | 'shadow' | 'line';
+  dropZoneColor?: 'primary' | 'neutral' | 'purple';
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
 };
@@ -24,7 +26,6 @@ const Draggable = (props: DraggableProps) => {
     id,
   } = props;
 
-
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -36,10 +37,11 @@ const Draggable = (props: DraggableProps) => {
   );
 
   return (
-    <div {...ariaProps} 
-        {...dataProps} 
+    <div
+        {...ariaProps}
+        {...dataProps}
         {...htmlProps}
-        className={classes} 
+        className={classes}
         id={id}
     >
       {children}

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -51,18 +51,39 @@ export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ 
-  children, 
-  initialItems, 
+export const DraggableProvider = ({
+  children,
+  initialItems,
   onReorder,
-  onDragStart, 
-  onDragEnter, 
-  onDragEnd, 
-  onDrop, 
-  onDragOver 
+  onDragStart,
+  onDragEnter,
+  onDragEnd,
+  onDrop,
+  onDragOver,
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  // Parse dropZone prop - handle both string format (backward compatibility) and object format
+  let dropZoneType = 'ghost';
+  let dropZoneColor = 'neutral';
+  let dropZoneDirection = 'vertical';
+
+  if (typeof dropZone === 'string') {
+    // Legacy format - just the type is provided as a string
+    dropZoneType = dropZone;
+  } else {
+    // New object format
+    dropZoneType = dropZone.type || 'ghost';
+    // Line default is set to primary. Other types default to neutral.
+    dropZoneColor = dropZone.type === 'line' ? (dropZone.color || 'primary') : (dropZone.color || 'neutral');
+
+    // Only use direction if the type is 'line'
+    if (dropZoneType === 'line') {
+      dropZoneDirection = dropZone.direction || 'vertical';
+    }
+  }
+
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
   }, [initialItems]);
@@ -108,17 +129,22 @@ export const DraggableProvider = ({
     if (onDragOver) onDragOver(e, container);
   };
 
+  // Include direction in contextValue only if type is 'line'
   const contextValue = useMemo(() => ({
     items: state.items,
     dragData: state.dragData,
     isDragging: state.isDragging,
     activeContainer: state.activeContainer,
+    dropZone: dropZoneType,
+    dropZoneColor,
+    // Only include direction when type is 'line'
+    ...(dropZoneType === 'line' ? { direction: dropZoneDirection } : {}),
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state]);
+  }), [state, dropZoneType, dropZoneColor, dropZoneDirection]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -1,31 +1,38 @@
 export interface ItemType {
-    id: string;
-    container: string;
-    [key: string]: any;
-  }
-  
-  export interface InitialStateType {
-    items: ItemType[];
-    dragData: { id: string; initialGroup: string };
-    isDragging: string;
-    activeContainer: string;
+  id: string;
+  container: string;
+  [key: string]: any;
+}
+
+export interface InitialStateType {
+  items: ItemType[];
+  dragData: { id: string; initialGroup: string };
+  isDragging: string;
+  activeContainer: string;
+}
+
+export type ActionType =
+  | { type: 'SET_ITEMS'; payload: ItemType[] }
+  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+  | { type: 'SET_IS_DRAGGING'; payload: string }
+  | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+  | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+
+  export interface DropZoneConfig {
+    type?: 'ghost' | 'outline' | 'shadow' | 'line';
+    color?: 'primary' | 'neutral' | 'purple';
+    direction?: 'horizontal' | 'vertical';
   }
-  
-  export type ActionType =
-    | { type: 'SET_ITEMS'; payload: ItemType[] }
-    | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
-    | { type: 'SET_IS_DRAGGING'; payload: string }
-    | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
-    | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-    | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
 
-    export interface DraggableProviderType {
-      children: React.ReactNode;
-      initialItems: ItemType[];
-      onReorder: (items: ItemType[]) => void;
-      onDragStart?: (id: string, container: string) => void; 
-      onDragEnter?: (id: string, container: string) => void;
-      onDragEnd?: () => void; 
-      onDrop?: (container: string) => void; 
-      onDragOver?: (e: Event, container: string) => void;
-    }
+  export interface DraggableProviderType {
+    children: React.ReactNode;
+    initialItems: ItemType[];
+    onReorder: (items: ItemType[]) => void;
+    onDragStart?: (id: string, container: string) => void;
+    onDragEnter?: (id: string, container: string) => void;
+    onDragEnd?: () => void;
+    onDrop?: (container: string) => void;
+    onDragOver?: (e: Event, container: string) => void;
+    dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
+  }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx

@@ -0,0 +1,184 @@
+import React, { useState } from "react";
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+// Initial items to be dragged
+const dataShadow = [
+  {
+    id: "51",
+    text: "Task 1",
+  },
+  {
+    id: "52",
+    text: "Task 2",
+  },
+  {
+    id: "53",
+    text: "Task 3",
+  },
+];
+
+const dataOutline = [
+  {
+    id: "61",
+    text: "Task 1",
+  },
+  {
+    id: "62",
+    text: "Task 2",
+  },
+  {
+    id: "63",
+    text: "Task 3",
+  },
+];
+
+const dataLine = [
+  {
+    id: "71",
+    text: "Task 1",
+  },
+  {
+    id: "72",
+    text: "Task 2",
+  },
+  {
+    id: "73",
+    text: "Task 3",
+  },
+];
+
+const DraggableDropZones = (props) => {
+  const [initialShadowState, setInitialShadowState] = useState(dataShadow);
+  const [initialOutlineState, setInitialOutlineState] = useState(dataOutline);
+  const [initialLineState, setInitialLineState] = useState(dataLine);
+
+  return (
+    <>
+    <Flex justify="between"
+        {...props}
+    >
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "shadow"}}
+            initialItems={dataShadow}
+            onReorder={(items) => setInitialShadowState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Shadow"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialShadowState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem marginRight="xl">
+        <DraggableProvider
+            dropZone={{type: "outline"}}
+            initialItems={dataOutline}
+            onReorder={(items) => setInitialOutlineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Outline"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialOutlineState.map(({ id, text }) => (
+              <Card
+                  dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex
+                    alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+      <FlexItem>
+        <DraggableProvider
+            dropZone={{type: "line"}}
+            initialItems={dataLine}
+            onReorder={(items) => setInitialLineState(items)}
+        >
+            <Caption
+                marginBottom="xs"
+                textAlign="center"
+            >
+              {"Line"}
+            </Caption>
+            <Draggable.Container
+                htmlOptions={{style:{ width: "200px"}}}
+                {...props}
+            >
+            {initialLineState.map(({ id, text }) => (
+              <Card dragId={id}
+                  draggableItem
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+                  {...props}
+              >
+                <Flex alignItems="stretch"
+                    flexDirection="column"
+                >
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+    </Flex>
+    </>
+  );
+};
+
+export default DraggableDropZones;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md

@@ -0,0 +1,5 @@
+The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
+
+By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
+
+Additionally, when using the "line" style, be sure to set the proper `direction` attribute within the `dropZone` prop depending on the orentation of your draggable view. By default, this attribute is set to "vertical", but can also be used with a "horizontal" direction. The `direction` attribute only applies to the "line" style and will not affect other drop zone styles.