playbook_ui 14.15.0 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

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/docs/_draggable_multiple_containers.jsx

@@ -1,16 +1,15 @@
 import React, { useState } from "react";
-import {
-  Flex,
-  Caption,
-  Card,
-  FlexItem,
-  Badge,
-  Avatar,
-  Title,
-  Body,
-  Draggable,
-  DraggableProvider,
-} from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
 
 // Initial groups to drag between
 const containers = ["To Do", "In Progress", "Done"];

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

@@ -1,14 +1,13 @@
 import React, { useState } from "react";
-import {
-  Flex,
-  Badge,
-  Title,
-  Icon,
-  Draggable,
-  DraggableProvider,
-  Card,
-  Caption,
-} from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Icon from '../../pb_icon/_icon'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
 
 // Initial items to be dragged
 const data = [

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

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { DraggableProvider, List, ListItem } from "playbook-ui";
+
+import { DraggableProvider } from '../../pb_draggable/context'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 // Initial items to be dragged
 const data = [

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

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "playbook-ui";
+
+import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { DraggableProvider } from '../../pb_draggable/context'
 
 // Initial items to be dragged
 const data = [

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

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Table from '../../pb_table/_table'
 
 // Initial items to be dragged
 const data = [

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

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

@@ -22,24 +22,82 @@ type DraggableItemProps = {
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
+  const {
+    aria = {},
+    children,
+    className,
+    container,
+    data = {},
+    htmlOptions = {},
+    id,
+    dragId,
+    tag="div"
+  } = props;
 
-  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
-    DraggableContext();
+  const {
+    isDragging,
+    handleDragStart,
+    handleDragEnter,
+    handleDragEnd,
+    dropZone = 'ghost',
+    dropZoneColor = 'neutral',
+    direction = 'horizontal'
+  } = DraggableContext();
+
+  const itemRef = React.useRef<HTMLElement>(null);
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
   const Tag: React.ReactElement | any = `${tag}`;
-  
+
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
+    isDragging === dragId ? `drop_zone_${dropZone}` : "",
+    isDragging === dragId && dropZone !== 'ghost' ? `drop_zone_color_${dropZoneColor}` : '',
     globalProps(props),
     className
   );
 
+  // Enhanced drag start handler that preserves dimensions
+  const onDragStart = (e: React.DragEvent) => {
+    if (dropZone !== 'ghost' && itemRef.current) {
+      // Create a clone for the drag image
+      const clone = itemRef.current.cloneNode(true) as HTMLElement;
+
+      // Remove any classes that might affect appearance
+      clone.className = clone.className.replace(/drop_zone_[^ ]*/g, '');
+      clone.className = clone.className.replace(/is_dragging/g, '');
+
+      // Get the original dimensions
+      const rect = itemRef.current.getBoundingClientRect();
+
+      // Ensure it's styled properly but invisible on the page
+      clone.style.position = 'fixed';
+      clone.style.top = '-9999px';
+      clone.style.left = '-9999px';
+      clone.style.width = `${rect.width}px`;  // Preserve width
+      clone.style.height = `${rect.height}px`; // Preserve height
+      clone.style.opacity = '1';
+      clone.style.pointerEvents = 'none';
+
+      // Add to document temporarily
+      document.body.appendChild(clone);
+
+      // Set as drag image
+      e.dataTransfer.setDragImage(clone, e.clientX - rect.left, e.clientY - rect.top);
+
+      // Remove after a short delay
+      setTimeout(() => {
+        document.body.removeChild(clone);
+      }, 0);
+    }
+
+    // Call the original handler
+    handleDragStart(dragId, container);
+  };
+
   return (
     <Tag
         {...ariaProps}
@@ -51,7 +109,8 @@ const DraggableItem = (props: DraggableItemProps) => {
         key={dragId}
         onDragEnd={() => handleDragEnd()}
         onDragEnter={() => handleDragEnter(dragId, container)}
-        onDragStart={() => handleDragStart(dragId, container)}
+        onDragStart={onDragStart}
+        ref={itemRef}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerBorders = () => {
   // Individual state variables for each drawer size

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb

@@ -0,0 +1,3 @@
+
+<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { Button, Body } from "playbook-ui"
+import Button from '../../pb_button/_button'
+import Body from "../../pb_body/_body"
 
 const DrawerMenu = () => {
   return (

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -1,5 +1,10 @@
 import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
 
 const DrawerMenu = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

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

@@ -6,6 +6,7 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 
   
   

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownBlankSelection = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -1,5 +1,7 @@
 import React, { useRef } from 'react'
-import { Button, Dropdown } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const options = [
     {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefault = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefaultValue = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSeparatorsHidden = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSubcomponentStructure = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSubtleVariant = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Badge, FlexItem, Avatar } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+
 
 const DropdownWithCustomOptions = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownWithCustomPadding = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import IconCircle from '../../pb_icon_circle/_icon_circle'
 
 const DropdownWithCustomTrigger = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Dropdown, useDropdown, Button } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+
+import Button from '../../pb_button/_button'
 
 const DropdownWithExternalControl = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx

@@ -1,5 +1,12 @@
 import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
 
 const DropdownWithHook = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefault = (props) => {
 

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -0,0 +1,38 @@
+.pb_empty_state_kit {
+
+  .sm-state-vertical {
+    width: 150px;
+  }
+
+  .md-state-vertical {
+    width: 300px;
+  }
+
+  .lg-state-vertical {
+    width: 450px;
+  }
+
+  .sm-state-horizontal {
+    width: max-content;
+    max-width: 400px;
+    .pb_flex_item_kit {
+      align-self: end;
+    }
+  }
+
+  .md-state-horizontal {
+    width: max-content;
+    max-width: 600px;
+    .pb_flex_item_kit {
+      align-self: end;
+    }
+  }
+
+  .lg-state-horizontal {
+    width: max-content;
+    .pb_flex_item_kit {
+      align-self: end;
+    }
+  }
+
+}