RubyGems - playbook_ui - Versions diffs - 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6884 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (580) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/_drawer.scss CHANGED Viewed

@@ -134,6 +134,14 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
+.pb_drawer_lg_left .pb_drawer {
+  transform: translateX(-100%);
+}
+.pb_drawer_lg_right .pb_drawer {
+  transform: translateX(100%);
+}
 .pb_drawer.pb_drawer_after_open {
   pointer-events: auto;
   transform: translate3d(0, 0, 0);
@@ -317,7 +325,6 @@ body.PBDrawer__Body--close {
     display: flex;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
-    opacity: 0;
     animation: overlayFade $animation-duration ease-in-out forwards;
     &[class*="_left"]{
@@ -345,12 +352,21 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
+    display: flex;
     z-index: $z-index;
     opacity: 1;
     pointer-events: none;
-    & .pb_drawer {
-      pointer-events: auto;
+    &[class*="_right"]{
+      justify-content: flex-end;
+    }
+    &[class*="_left"]{
+      justify-content: flex-start;
+    }
+    &[class*="_center"]{
+      justify-content: center;
     }
     &_before_close {

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

@@ -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 CHANGED Viewed

@@ -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
@@ -41,7 +44,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border right
@@ -52,7 +55,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -63,7 +66,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border full

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

@@ -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 CHANGED Viewed

@@ -1,42 +1,26 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-  return [opened, toggle];
-};
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+import React from "react"
+import Button from '../../pb_button/_button'
+import Body from "../../pb_body/_body"
+const DrawerMenu = () => {
   return (
     <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
-        >
-          Open because small breakpoint
-        </Drawer>
-      </Flex>
+      <Body>
+        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.
+      </Body>
+      <Button
+          link='https://8njdkc.csb.app/'
+          marginTop='md'
+          newWindow
+      >
+        Open Doc Example in New Tab
+      </Button>
     </>
-  );
-};
+  )
+}
-export default DrawerBreakpoints;
+export default DrawerMenu

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

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