playbook_ui 16.8.0.pre.alpha.PLAY3001updateviewcomponent16599 → 16.8.0.pre.alpha.tablewidths16466

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1acdd3eac7178d13d6de9d7f8b28ffb26618710c96a6348435e428c65e323c9c
-  data.tar.gz: b002c57fe24541c836a394aa5b7f5847463b9d85547fd5f3d7e7248baa3f4855
+  metadata.gz: 0f46fd7de41487efa37647c36cc3d1d55e2260ccda34ff0f094dc4f3c21608c4
+  data.tar.gz: 60e1b0388423c2a75088ba9210b0e9456c27fb7a7b5822b5753f1c46f1abfa53
 SHA512:
-  metadata.gz: 83ef545ca229cade2a0b254145cc79976ac1719fb1d7cb397d49bbcfd754e66cd5cef20a96f6a680630a4f81adab9fa839dd2c4a55163d491f7d100de7a745e1
-  data.tar.gz: 8d9345919786dfe542e17a8522d0a94a4f88f2c5705c46c96fe9fc0ac5dd0051988d8d63c0e15df1791cc78a44f17e4c42382f70bc4da901d75282753ac563d6
+  metadata.gz: 236bb6ec1f254c88d37bfa99aa2bb530aba234550a5635bfd19c9bb76fe0240bf818ccd4f2b859424662c2e15d1f31cae47d0831e172a9c2926e1eaa4cf3ade7
+  data.tar.gz: 63776f5d3b77b41da7a95ad4d67e89d244a0981fb8cc2220c3fc8996f5506eb2b4f94cf30989d848afc83d2104dbe17092e00851e4b4cd46ebd5a63985ddb543

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -162,7 +162,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
           {
             dragHandle ? (
               <Flex>
-                <span className="card_draggable_handle pb_draggable_handle">
+                <span className="card_draggable_handle">
                   <Icon
                       icon="grip-dots-vertical"
                       paddingRight="xs"

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,7 +4,7 @@
             <% if object.draggable_item %>
                 <%= pb_rails("flex", props: { align: "center" }) do %>
                     <% if object.drag_handle %>
-                        <span class="card_draggable_handle pb_draggable_handle">
+                        <span classname="card_draggable_handle">
                             <%= pb_rails("icon", props: { icon: "grip-dots-vertical", padding_right: "xs" }) %>
                         </span>
                     <% end %>

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -59,13 +59,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
-  const isAmountEmpty = (value: string | number): boolean => (
-    value === '' || value == null || (typeof value === 'string' && value.trim() === '')
-  )
-
   // Convert numeric input to string format
   const convertAmount = (input: string | number): string => {
     if (typeof input === 'number') {
+      if (input === 0 && !nullDisplay) {
+        return ""
+      }
       return input.toFixed(2)
     }
     return input
@@ -82,9 +81,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [wholePart, decimalPart = '00'] = currencyAmount ? currencyAmount.split('.') : ['', '00']
-  const decimal = (decimalPart || '00').padEnd(2, '0').slice(0, 2)
-  const whole = currencyAmount === '' ? '' : (wholePart === '' ? '0' : wholePart)
+  const [whole, decimal = '00'] = currencyAmount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -138,7 +135,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <div>{nullDisplay}</div>
           ) : (
             <>
@@ -151,7 +148,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
             </>
           )
         ) : (
-          nullDisplay && isAmountEmpty(amount) ? (
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -68,7 +68,7 @@ module Playbook
       end
 
       def title_text
-        if null_display && amount.blank?
+        if null_display
           null_display
         elsif swap_negative
           absolute_amount(abbr_or_format_amount)
@@ -125,7 +125,14 @@ module Playbook
       # Convert numeric input to string format
       def convert_amount(input)
         if input.is_a?(Numeric)
-          Kernel.format("%.2f", input)
+          if input.zero? && null_display.nil?
+            ""
+          else
+            format("%.2f", input)
+          end
+        # Handle string representations of zero
+        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
+          ""
         else
           input.to_s
         end
@@ -135,7 +142,6 @@ module Playbook
         return "" if currency_amount.blank?
 
         value = currency_amount.split(".").first
-        value = "0" if value.blank?
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -146,8 +152,7 @@ module Playbook
       def decimal_value
         return "00" if currency_amount.blank?
 
-        fraction = currency_amount.split(".")[1] || "00"
-        fraction.ljust(2, "0")[0, 2]
+        currency_amount.split(".")[1] || "00"
       end
 
       def units_element

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -178,48 +178,5 @@ test('handles numeric amounts correctly', () => {
   expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
   expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
   expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$0.00')
-})
-
-test('renders zero values with leading digit', () => {
-  render(
-    <>
-      <Currency
-          amount="0"
-          data={{ testid: 'test-string-zero' }}
-      />
-      <Currency
-          amount={0}
-          data={{ testid: 'test-numeric-zero' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-string-zero')).toHaveTextContent('$0.00')
-  expect(screen.getByTestId('test-numeric-zero')).toHaveTextContent('$0.00')
-})
-
-test('normalizes string zero with single decimal digit to .00', () => {
-  render(
-    <Currency
-        amount="0.0"
-        commaSeparator
-        data={{ testid: 'test-string-zero-single-decimal' }}
-    />
-  )
-
-  expect(screen.getByTestId('test-string-zero-single-decimal')).toHaveTextContent('$0.00')
-})
-
-test('nullDisplay only applies when amount is empty', () => {
-  render(
-    <Currency
-        amount="-.53"
-        data={{ testid: 'test-null-display-negative' }}
-        nullDisplay="$0.00"
-    />
-  )
-
-  expect(screen.getByTestId('test-null-display-negative')).toHaveTextContent('-$')
-  expect(screen.getByTestId('test-null-display-negative')).not.toHaveTextContent('$0.00')
+  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
 })

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

@@ -8,25 +8,6 @@
       cursor: grab;
     }
 
-    &.is_touch_active {
-      .pb_draggable_handle,
-      .card_draggable_handle {
-        color: $text_lt_default;
-      }
-    }
-
-    .pb_draggable_handle,
-    .card_draggable_handle {
-      touch-action: none;
-      -webkit-touch-callout: none;
-      user-select: none;
-      cursor: grab;
-
-      &:active {
-        color: $text_lt_default;
-      }
-    }
-
     &.is_dragging {
       position: relative;
 

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

@@ -5,5 +5,3 @@ Use the `draggable` kit and manage state as shown.
 `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -6,5 +6,4 @@ Use `DraggableProvider` and manage state as shown.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
-On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
 

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

@@ -3,5 +3,3 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
 
 An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

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

@@ -2,6 +2,4 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 
 Use `DraggableProvider` and manage state as shown.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on ListItem to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.

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

@@ -1,5 +1,3 @@
 For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

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

@@ -2,6 +2,4 @@ For a simplified version of the Draggable API for the SelectableList kit, you ca
 
 Use `DraggableProvider` and manage state as shown.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
-
-On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -211,14 +211,6 @@ test("Attached draggable HTML attributes", () => {
   expect(item).toHaveAttribute("draggable");
 });
 
-test("draggable items expose data-pb-drag-id for touch reordering", () => {
-  render(<DefaultDraggableKit />);
-  const kit = screen.getByTestId(testId);
-
-  const item = kit.querySelector(".pb_draggable_item");
-  expect(item).toHaveAttribute("data-pb-drag-id", "1");
-});
-
 test("generated dragHandle with List", () => {
   render(<DraggableKitWithList />);
   const kit = screen.getByTestId(testId);
@@ -310,14 +302,6 @@ const DraggableMultipleContainers = () => {
   );
 };
 
-test("draggable containers expose data-pb-drag-container when provided", () => {
-  render(<DraggableMultipleContainers />);
-  const kit = screen.getByTestId(testId);
-
-  const container = kit.querySelector('[data-testid="container-To Do"]');
-  expect(container).toHaveAttribute("data-pb-drag-container", "To Do");
-});
-
 test("renders multiple containers with correct items", () => {
   render(<DraggableMultipleContainers />);
   

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,5 +1,3 @@
-<%= pb_content_tag(object.tag, {
-  "data-pb-drag-container": object.container.presence
-}) do %>
+<%= pb_content_tag(object.tag) do %>
     <%= content.presence %>
   <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb

@@ -1,6 +1,5 @@
 <%= pb_content_tag(object.tag, {
 id: "item_#{object.drag_id}",
-"data-pb-drag-id": object.drag_id,
 draggable: true
 }) do %>
     <%= content.presence %>

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

@@ -2,32 +2,7 @@ import PbEnhancedElement from "../pb_enhanced_element";
 
 const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
-const DRAG_HANDLE_SELECTOR = ".pb_draggable_handle, .card_draggable_handle";
 const NEEDS_CLONE         = ["shadow", "outline", "line"];   // clone only for these types
-const DRAG_THRESHOLD_PX   = 5;
-
-const isTouchDragDevice = () => {
-  const hasTouch = "ontouchstart" in window;
-  const hasCoarsePointer =
-    typeof window.matchMedia === "function" &&
-    window.matchMedia("(hover: none) and (pointer: coarse)").matches;
-
-  return hasTouch || hasCoarsePointer;
-};
-
-const getDragIdFromElement = (element) => {
-  const item = element?.closest(".pb_draggable_item");
-  if (!item) return null;
-
-  return item.getAttribute("data-pb-drag-id") || item.id;
-};
-
-const getContainerFromElement = (element) => {
-  const container = element?.closest(DRAGGABLE_CONTAINER);
-  if (!container) return null;
-
-  return container.getAttribute("data-pb-drag-container") || container.id;
-};
 
 export default class PbDraggable extends PbEnhancedElement {
   static get selector() { return DRAGGABLE_SELECTOR; }
@@ -46,8 +21,6 @@ export default class PbDraggable extends PbEnhancedElement {
     this.hasMultipleContainers = false;
     this.dragZoneType  = "";
     this.dragZoneColor = "";
-    this.useTouchDrag = isTouchDragDevice();
-    this.touchCleanups = [];
 
     // If DOM is already loaded, bind immediately; otherwise wait for DOMContentLoaded
     if (document.readyState === "loading") {
@@ -81,14 +54,9 @@ export default class PbDraggable extends PbEnhancedElement {
 
     this.element.querySelectorAll(".pb_draggable_item")
       .forEach(item => {
-        if (this.useTouchDrag) {
-          item.setAttribute("draggable", "false");
-          this.touchCleanups.push(this.bindTouchDragForItem(item));
-        } else {
-          item.addEventListener("dragstart", this.handleDragStart.bind(this));
-          item.addEventListener("dragend",   this.handleDragEnd.bind(this));
-          item.addEventListener("dragenter", this.handleDragEnter.bind(this));
-        }
+        item.addEventListener("dragstart", this.handleDragStart.bind(this));
+        item.addEventListener("dragend",   this.handleDragEnd.bind(this));
+        item.addEventListener("dragenter", this.handleDragEnter.bind(this));
       });
 
     containers.forEach(c => {
@@ -97,118 +65,8 @@ export default class PbDraggable extends PbEnhancedElement {
     });
   }
 
-  bindTouchDragForItem(item) {
-    const handle = item.querySelector(DRAG_HANDLE_SELECTOR);
-    const dragTarget = handle || item;
-    const state = {
-      active: false,
-      dragging: false,
-      startX: 0,
-      startY: 0,
-      lastTargetDragId: null,
-    };
-
-    const resetState = () => {
-      state.active = false;
-      state.dragging = false;
-      state.lastTargetDragId = null;
-      item.classList.remove("is_touch_active");
-    };
-
-    const pointerEventFromTouch = (touch, target) => ({
-      target,
-      clientX: touch.clientX,
-      clientY: touch.clientY,
-      preventDefault: () => undefined,
-      stopPropagation: () => undefined,
-    });
-
-    const onTouchStart = (event) => {
-      if (handle && !handle.contains(event.target)) return;
-
-      const touch = event.touches[0];
-      if (!touch) return;
-
-      state.active = true;
-      state.startX = touch.clientX;
-      state.startY = touch.clientY;
-      item.classList.add("is_touch_active");
-    };
-
-    const onTouchMove = (event) => {
-      if (!state.active) return;
-
-      const touch = event.touches[0];
-      if (!touch) return;
-
-      if (!state.dragging) {
-        const deltaX = touch.clientX - state.startX;
-        const deltaY = touch.clientY - state.startY;
-
-        if (Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD_PX) return;
-
-        state.dragging = true;
-        this.handleDragStart(pointerEventFromTouch(touch, item));
-      }
-
-      event.preventDefault();
-
-      const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-      const targetItem = elementBelow?.closest(".pb_draggable_item");
-      const targetDragId = getDragIdFromElement(elementBelow);
-
-      if (targetItem && targetItem !== item && targetDragId !== state.lastTargetDragId) {
-        state.lastTargetDragId = targetDragId;
-        this.handleDragEnter(pointerEventFromTouch(touch, targetItem));
-      }
-
-      const targetContainer = getContainerFromElement(elementBelow);
-      if (targetContainer) {
-        const containerElement = elementBelow.closest(DRAGGABLE_CONTAINER);
-        if (containerElement) {
-          this.handleDragOver(pointerEventFromTouch(touch, containerElement));
-        }
-      }
-    };
-
-    const finishTouchDrag = (touch) => {
-      if (!state.active) return;
-
-      if (state.dragging && touch) {
-        const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
-        const containerElement = elementBelow?.closest(DRAGGABLE_CONTAINER);
-
-        if (containerElement) {
-          this.handleDrop(pointerEventFromTouch(touch, containerElement));
-        }
-
-        this.handleDragEnd({ target: item });
-      }
-
-      resetState();
-    };
-
-    const onTouchEnd = (event) => finishTouchDrag(event.changedTouches[0]);
-    const onTouchCancel = (event) => finishTouchDrag(event.changedTouches[0]);
-
-    dragTarget.addEventListener("touchstart", onTouchStart, { passive: true });
-    dragTarget.addEventListener("touchmove", onTouchMove, { passive: false });
-    dragTarget.addEventListener("touchend", onTouchEnd, { passive: true });
-    dragTarget.addEventListener("touchcancel", onTouchCancel, { passive: true });
-
-    return () => {
-      dragTarget.removeEventListener("touchstart", onTouchStart);
-      dragTarget.removeEventListener("touchmove", onTouchMove);
-      dragTarget.removeEventListener("touchend", onTouchEnd);
-      dragTarget.removeEventListener("touchcancel", onTouchCancel);
-    };
-  }
-
   /* ---------------- DRAG START ---------------- */
   handleDragStart(event) {
-    const item = event.target.closest(".pb_draggable_item");
-    if (!item) return;
-
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
     if (event.target.tagName.toLowerCase() === "img") {
@@ -216,9 +74,9 @@ export default class PbDraggable extends PbEnhancedElement {
       return;
     }
 
-    const container    = item.closest(DRAGGABLE_CONTAINER);
-    this.draggedItem   = item;
-    this.draggedItemId = getDragIdFromElement(item);
+    const container    = event.target.closest(DRAGGABLE_CONTAINER);
+    this.draggedItem   = event.target;
+    this.draggedItemId = event.target.id;
     this.dragZoneType  = this.element.dataset.dropZoneType  || "";
     this.dragZoneColor = this.element.dataset.dropZoneColor || "";
 
@@ -264,7 +122,7 @@ export default class PbDraggable extends PbEnhancedElement {
     }
 
     if (this.dragZoneType !== "line") {
-      requestAnimationFrame(() => (item.style.opacity = "0.5"));
+      requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
     }
   }
 

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

@@ -54,7 +54,6 @@ const DraggableContainer = (props: DraggableContainerProps) => {
         {...dataProps}
         {...htmlProps}
         className={classes}
-        data-pb-drag-container={container}
         id={id}
         key={container}
         onDragOver={(e: Event) => handleDragOver(e, container)}

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

@@ -9,7 +9,6 @@ import {
 import { globalProps } from "../../utilities/globalProps";
 import { DraggableContext } from "../context";
 import { noop } from '../../utilities/object'
-import { bindTouchDrag, isTouchDragDevice } from "../utilities/touchDrag";
 
 type DraggableItemProps = {
   aria?: { [key: string]: string };
@@ -55,76 +54,12 @@ const DraggableItem = (props: DraggableItemProps) => {
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
-    handleDrop,
-    handleDragOver,
     dropZone = 'ghost',
     dropZoneColor = 'neutral',
     direction = 'horizontal'
   } = DraggableContext();
 
   const itemRef = React.useRef<HTMLElement>(null);
-  const [useTouchDrag, setUseTouchDrag] = React.useState(false);
-  const handlersRef = React.useRef({
-    handleDragStart,
-    handleDragEnter,
-    handleDragEnd,
-    handleDrop,
-    handleDragOver,
-    onDragStart,
-    onDragEnter,
-    onDragOver,
-    onDrop,
-    onDragEnd,
-  });
-
-  handlersRef.current = {
-    handleDragStart,
-    handleDragEnter,
-    handleDragEnd,
-    handleDrop,
-    handleDragOver,
-    onDragStart,
-    onDragEnter,
-    onDragOver,
-    onDrop,
-    onDragEnd,
-  };
-
-  React.useEffect(() => {
-    setUseTouchDrag(isTouchDragDevice());
-  }, []);
-
-  React.useEffect(() => {
-    if (!useTouchDrag || !itemRef.current || !dragId) return;
-
-    return bindTouchDrag({
-      dragId,
-      container,
-      itemElement: itemRef.current,
-      handlers: {
-        onDragStart: (id, itemContainer) => {
-          handlersRef.current.handleDragStart(id, itemContainer);
-          handlersRef.current.onDragStart();
-        },
-        onDragEnter: (targetDragId, targetContainer) => {
-          handlersRef.current.handleDragEnter(targetDragId, targetContainer);
-          handlersRef.current.onDragEnter();
-        },
-        onDragOver: (event, targetContainer) => {
-          handlersRef.current.handleDragOver(event, targetContainer);
-          handlersRef.current.onDragOver();
-        },
-        onDrop: (dropContainer) => {
-          handlersRef.current.handleDrop(dropContainer);
-          handlersRef.current.onDrop();
-        },
-        onDragEnd: () => {
-          handlersRef.current.handleDragEnd();
-          handlersRef.current.onDragEnd();
-        },
-      },
-    });
-  }, [useTouchDrag, dragId, container]);
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -187,8 +122,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         {...dataProps}
         {...htmlProps}
         className={classes}
-        data-pb-drag-id={dragId}
-        draggable={!useTouchDrag}
+        draggable
         id={id}
         key={dragId}
         onDrag={onDrag}

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
+
+const IconFaKit = (props) => {
+  return (
+    <div>
+      <Icon
+          {...props}
+          fixedWidth
+          fontStyle="fak"
+          icon="powergon"
+          size="5x"
+      />
+    </div>
+  )
+}
+
+export default IconFaKit

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md

@@ -0,0 +1,7 @@
+Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box. 
+
+All you need to do is 3 things:
+1) Import your custom-icon.js file as outlined in the FontAwesome docs.
+2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon. 
+3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
+

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

@@ -8,6 +8,7 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   react:
@@ -19,6 +20,7 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
+  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   swift:

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

@@ -6,4 +6,5 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
+export { default as IconFaKit} from './_icon_fa_kit.jsx'
 export { default as IconColor } from './_icon_color.jsx'