playbook_ui 14.16.0.pre.rc.6 → 14.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e376bd1a55dc2e6666d919754327203ae8c500673ee5228c08c1991e67a9666
-  data.tar.gz: 4f4fa0ef28b813c53d27ebc46637fa591fcf9b1ede2ad232b1ec5ca5954a159b
+  metadata.gz: dbada6b3906a7bdd5cd17ccdc6db4251385789e29416980b5f3ffa501a9c9f94
+  data.tar.gz: 27b40157f9658e595e8f0ee77c1fc837c2bb80f0c794df82715de2d59dce8a00
 SHA512:
-  metadata.gz: e88944c44a944ee0f786032ec7069c4ab32252a9fc6f10701a8eca2173bf50f0b038c549a90ab51778999443ab7ad4557dda03e6f665ea773b694fa2c9112a96
-  data.tar.gz: 40d1baee316d24c49263c4d1ed3139c6bec3b4a8fa609b5ed845e3db01a2dd00fefc9370a72b8de4a871c179d93747b6b328877d26c3bc4c59ede14d169a8f01
+  metadata.gz: f45a55efaef13d3ccc5e8907b755ce1e2aa1fb428b87b9c6ca8fad3f5d268e71e0b72ba2d71fe8d372443d501ab76a37f864e6c2744c71012360f0036defcbb8
+  data.tar.gz: a070cb303d181a6a48842fed3ebba697ca17428cd4b6e475f9b0cb97565351dac99b78d81a1ee76582d12cdde9841f2434be5b755035fe83c3d7bf78b41adcf3

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

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.

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

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
+import Caption from '../../pb_caption/_caption'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+// Initial items to be dragged
+const dataPrimary = [
+  {
+    id: "81",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "82",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "83",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+const dataPurple = [
+  {
+    id: "91",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "92",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "93",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+];
+
+const DraggableDropZonesColors = (props) => {
+  const [initialPrimaryState, setInitialPrimaryState] = useState(dataPrimary);
+  const [initialPurpleState, setInitialPurpleState] = useState(dataPurple);
+
+  return (
+    <>
+    <Caption marginBottom="xs">
+      Primary
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "shadow", color: "primary"}}
+        initialItems={dataPrimary}
+        onReorder={(items) => setInitialPrimaryState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPrimaryState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    <Caption marginBottom="xs">
+      Purple
+    </Caption>
+    <DraggableProvider
+        dropZone={{type: "outline", color: "purple"}}
+        initialItems={dataPurple}
+        onReorder={(items) => setInitialPurpleState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialPurpleState.map(({ id, url }) => (
+              <Draggable.Item dragId={id}
+                  key={id}
+                  marginRight="sm"
+              >
+                <Image alt={id}
+                    size="md"
+                    url={url}
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+  );
+};
+
+export default DraggableDropZonesColors;

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

@@ -0,0 +1 @@
+By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -22,18 +22,27 @@ type DraggableContainerProps = {
 
 const DraggableContainer = (props: DraggableContainerProps) => {
   const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
+  const contextValues = DraggableContext();
+  const {
+    handleDragOver,
+    handleDrop,
+    activeContainer,
+    dropZone
+  } = contextValues;
 
-  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
+  // Only get direction if dropZone is 'line'
+  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
   const Tag: React.ReactElement | any = `${tag}`;
 
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
+    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
+    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
     globalProps(props),
     className
   );