playbook_ui 14.17.0.pre.alpha.aticonclosefix7325 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -6,19 +7,16 @@ import { globalProps } from '../utilities/globalProps'
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
 
-import usePBCopy from './usePBCopy'
-
 type CopyButtonProps = {
-  aria?: { [key: string]: string }
-  className?: string
-  data?: { [key: string]: string }
-  id?: string
-  from?: string
-  text?: string
-  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
-  tooltipText?: string
-  value?: string
-  timeout?: number
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  from?: string,
+  text?: string,
+  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
+  tooltipText?: string,
+  value?: string,
 }
 
 const CopyButton = (props: CopyButtonProps) => {
@@ -29,34 +27,62 @@ const CopyButton = (props: CopyButtonProps) => {
     from = '',
     id,
     text= 'Copy',
-    timeout = 1000,
     tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
   } = props
 
-  const [copied, copy] = usePBCopy({ value, from, timeout })
+  const [copied, setCopied] = useState(false)
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
+  const copy = () => {
+    if (!from && !value) {
+      return
+    }
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else if (from) {
+      const copyElement = document.getElementById(from);
+      let copyText = copyElement?.innerText
+
+      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
+        copyText = copyElement.value;
+      }
+
+      if (copyText) {
+        navigator.clipboard.writeText(copyText)
+      }
+    }
+
+    setCopied(true)
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000);
+  }
+
   return (
-    <div {...ariaProps}
+    <div
+        {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
     >
-      <Tooltip
+      <Tooltip 
           forceOpenTooltip={copied}
           placement={tooltipPlacement}
           showTooltip={false}
           text={tooltipText}
       >
-        <Button icon="copy"
+        <Button
+            icon='copy'
             onClick={copy}
         >
-          {text}
+          { text }
         </Button>
       </Tooltip>
     </div>

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

@@ -6,4 +6,3 @@ examples:
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  - copy_button_hook: Copy Hook

data/app/pb_kits/playbook/pb_copy_button/docs/index.js

@@ -1,3 +1,2 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
-export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
-export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx'

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

@@ -1,6 +1,5 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
-@import "../tokens/border_radius";
 
 .pb_draggable_container {
   .pb_draggable_item {
@@ -35,7 +34,7 @@
           width: 100%;
           height: 100%;
           border: 2px dashed $neutral;
-          border-radius: $border_radius_sm;
+          border-radius: $border-radius-sm;
           box-sizing: border-box;
           z-index: 10;
           pointer-events: none;
@@ -65,7 +64,7 @@
           width: 100%;
           height: 100%;
           background-color: rgba($neutral, $opacity_5);
-          border-radius: $border_radius_sm;
+          border-radius: $border-radius-sm;
           z-index: 10;
           pointer-events: none;
         }
@@ -74,70 +73,48 @@
         &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
         &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
       }
-    }
-  }
-  // Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
-  &.line_vertical {
-    .pb_draggable_item {
-      position: relative;
+
+      // Line variant
       &.drop_zone_line {
-        // Hide the original content to show the line only (held draggable item should not take up space in drop zone)
-        position: relative;
-        z-index: 2;
+        // Hide the original content to show the line
         & > * {
           opacity: 0;
         }
-        height: 4px;
+
         // Style for horizontal line (default)
         &::before {
           content: '';
           position: absolute;
           left: 0;
           top: 0;
-          width: 100%;
-          height: 4px;
+          width: 4px;
+          height: 100%;
           background-color: $neutral;
-          border-radius: $border_radius_rounded;
+          border-radius: 1000px;
           z-index: 10;
           pointer-events: none;
-          transform: translateY(-50%);
         }
-        // Apply color variants to the ::before element
+
+        // Apply color variants
         &.drop_zone_color_primary::before { background-color: $primary; }
         &.drop_zone_color_purple::before { background-color: $purple; }
       }
     }
   }
-  // Line variant - Horizontal orientation (vertical line for draggable items in horizontal layout)
-  &.line_horizontal {
-    .pb_draggable_item {
-      position: relative;
+}
+
+// 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 {
-        position: relative;
-        z-index: 2;
-        & > * {
-          opacity: 0;
-        }
-        width: 4px;
-        height: auto;
-        // Style for vertical line
         &::before {
-          content: '';
-          position: absolute;
+          width: 100%;
+          height: 4px;
           left: 0;
           top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $neutral;
-          border-radius: $border_radius_rounded;
-          z-index: 10;
-          pointer-events: none;          
-          transform: translateX(-50%);
         }
-
-        // Apply color variants to the ::before element
-        &.drop_zone_color_primary::before { background-color: $primary; }
-        &.drop_zone_color_purple::before { background-color: $purple; }
       }
     }
   }

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

@@ -60,120 +60,123 @@ const DraggableDropZones = (props) => {
 
   return (
     <>
-      <Flex justify="between"
-          {...props}
-      >
-        <FlexItem marginRight="xl">
-          <DraggableProvider
-              dropZone={{type: "shadow"}}
-              initialItems={dataShadow}
-              onReorder={(items) => setInitialShadowState(items)}
-          >
-              <Caption
+    <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"
-                  text="Shadow"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialShadowState.map(({ id, text }) => (
-                <Card dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <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
+                  <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"
-                  text="Outline"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialOutlineState.map(({ id, text }) => (
-                <Card
-                    dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex
+                    alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <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
+                  <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"
-                  text="Line"
-                  textAlign="center"
-              />
-              <Draggable.Container
-                  htmlOptions={{style:{ width: "200px"}}}
+                  padding="xs"
                   {...props}
               >
-              {initialLineState.map(({ id, text }) => (
-                <Card dragId={id}
-                    draggableItem
-                    key={id}
-                    marginBottom="xs"
-                    padding="xs"
-                    {...props}
+                <Flex alignItems="stretch"
+                    flexDirection="column"
                 >
-                  <Flex alignItems="stretch"
-                      flexDirection="column"
-                  >
-                    <Body
-                        text={text}
-                        {...props}
-                    />
-                  </Flex>
-                </Card>
-              ))}
-              </Draggable.Container>
-          </DraggableProvider>
-        </FlexItem>
-      </Flex>
+                  <Body
+                      text={text}
+                      {...props}
+                  />
+                </Flex>
+              </Card>
+            ))}
+            </Draggable.Container>
+        </DraggableProvider>
+      </FlexItem>
+    </Flex>
     </>
   );
 };

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

@@ -1,5 +1,5 @@
-  The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
 
-By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
 
-When using the "line" type, make sure to set the appropriate `direction` attribute within the `dropZone` prop based on the orientation of your draggable view. By default, this is set to "vertical," but it can also be adjusted to "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/react#draggable-drop-zones-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

@@ -6,8 +6,6 @@ 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 = [
   {
@@ -44,54 +42,54 @@ const DraggableDropZonesColors = (props) => {
 
   return (
     <>
-      <Caption marginBottom="xs"
-          text="Primary"
-      />
-      <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"
-          text="Purple"
-      />
-      <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>
+    <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>
     </>
   );
 };

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

@@ -1 +1 @@
-  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.
+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_with_table.jsx → _draggable_with_table_react.jsx}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import Flex from '../../pb_flex/_flex'
-import { DraggableProvider } from '../context'
+import { DraggableProvider } from '../../pb_draggable/context'
 import Avatar from '../../pb_avatar/_avatar'
 import Body from '../../pb_body/_body'
 import Table from '../../pb_table/_table'

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

@@ -2,6 +2,4 @@ The draggable kit can also be used in conjunction with the table kit to create d
 
 - Wrap the Table with the `DraggableProvider` and manage state as shown. 
 - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 
-
-We recommending using the default `dropZone type` with the Table kit.
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here. 

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

@@ -4,17 +4,14 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table: Draggable with Table
+  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
-  - draggable_drop_zones_line: Draggable Drop Zones Line
 
   rails:
-  - draggable_default: Default
-  - draggable_with_list: Draggable with List Kit
-  - draggable_with_selectable_list: Draggable with SelectableList Kit
-  - draggable_with_cards: Draggable with Cards
+  - draggable_default_rails: Default
+  - draggable_with_list_rails: Draggable with List Kit
+  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
+  - draggable_with_cards_rails: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -3,7 +3,4 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTable } from './_draggable_with_table.jsx'
-export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
-export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
-export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'