playbook_ui 14.16.0.pre.rc.6 → 14.17.0.pre.rc.0

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

@@ -1,48 +1,60 @@
 <%= pb_content_tag(:tr) do %>
-        <% object.column_definitions.each_with_index do |column, index| %>
-            <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
-                    <% if collapsible_trail && index.zero? %>
-                        <% (1..depth).each do |i| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
+    <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
+    <% if has_separate_checkbox %>
+        <%= object.render_checkbox_cell %>
+    <% end %>
+    <% object.column_definitions.each_with_index do |column, index| %>
+        <% next unless column[:accessor].present? %>
+        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+                <% if collapsible_trail && index.zero? %>
+                    <% (1..depth).each do |i| %>
+                        <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                        <% left_offset = i * 1.0 + additional_offset %>
+                        <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
                     <% end %>
+                <% end %>
 
-                    <div style="padding-left: <%= depth * 1.25 %>em">
-                        <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
-                            <% if index.zero? && object.row[:children].present? %>
-                              <button
-                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
-                                class="gray-icon expand-toggle-icon"
-                                data-advanced-table="true">
-                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                              </button>
+                <div style="padding-left: <%= depth * 1.25 %>em">
+                    <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                        <% if index.zero? %>
+                            <% has_integrated_checkbox = object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                            <% if has_integrated_checkbox %>
+                                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                                    <%= object.render_row_checkbox %>
+                                <% end %>
                             <% end %>
-                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if column[:custom_renderer].present? %>
-                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                                <% elsif index.zero? %>
-                                    <% if object.depth.zero? %>
-                                        <%= object.row[column[:accessor].to_sym] %>
-                                    <% else %>
-                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
-                                            <% if object.depth - 1 == accessor_index %>
-                                                <% key = item.to_sym %>
-                                                <%= object.row[key] %>
-                                            <% end %>
+                            <% if object.row[:children].present? %>
+                                <button
+                                    id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                    class="gray-icon expand-toggle-icon"
+                                    data-advanced-table="true">
+                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                </button>
+                            <% end %>
+                        <% end %>
+                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
+                            <% if column[:custom_renderer].present? %>
+                                <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                            <% elsif index.zero? %>
+                                <% if object.depth.zero? %>
+                                    <%= object.row[column[:accessor].to_sym] %>
+                                <% else %>
+                                    <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                        <% if object.depth - 1 == accessor_index %>
+                                            <% key = item.to_sym %>
+                                            <%= object.row[key] %>
                                         <% end %>
                                     <% end %>
-                                <% else %>
-                                    <%= object.row[column[:accessor].to_sym] %>
                                 <% end %>
+                            <% else %>
+                                <%= object.row[column[:accessor].to_sym] %>
                             <% end %>
                         <% end %>
-                    </div>
-                <% end %>
+                    <% end %>
+                </div>
             <% end %>
         <% end %>
-<% end %>
+    <% end %>
+<% end %>

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

@@ -20,6 +20,13 @@ module Playbook
                         default: "scroll"
       prop :is_pinned_left, type: Playbook::Props::Boolean,
                             default: false
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
+      prop :row_id, type: Playbook::Props::String,
+                    default: ""
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -42,6 +49,38 @@ module Playbook
         end.compact
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_checkbox_cell
+        if selectable_rows
+          pb_rails("table/table_cell", props: {
+                     classname: "checkbox-cell",
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-row-#{row_id || row.object_id}",
+                       name: "select-row-#{row_id || row.object_id}",
+                       data: {
+                         row_id: row_id || row.object_id.to_s,
+                         action: "click->pb-advanced-table#toggleRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_row_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-row-#{row_id || row.object_id}",
+                     name: "select-row-#{row_id || row.object_id}",
+                     data: {
+                       row_id: row_id || row.object_id.to_s,
+                       action: "click->pb-advanced-table#toggleRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,7 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object'
 
 import classnames from "classnames";
 

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -63,11 +63,6 @@ $pb_button_sizes: (
     color: $text_lt_lighter;
   }
 
-  // Disabled =================
-  &[class*=_disabled]  {
-    @include pb_button_disabled;
-  }
-
   // Block ====================
   &[class*=_block]  {
     @include pb_button_block;
@@ -83,6 +78,11 @@ $pb_button_sizes: (
     @include pb_button_danger;
   }
 
+  // Disabled =================
+  &[class*=_disabled]  {
+    @include pb_button_disabled;
+  }
+
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

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_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;