playbook_ui 13.28.0.pre.alpha.play829selectablecardalignment2978 → 13.29.0.pre.alpha.testingcollapsibleissue3052

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2ea0b161920a1666fef468539f56e8185b902f0fe7b31969a8ee2d761a64b59
-  data.tar.gz: 2a85f19f34fea779816b46739f34f643fa2def667bce1194e678a32f0eb67e0d
+  metadata.gz: a4dfe0653d86e536e79e7cd2537477204d815b54a27255442ac5ba1d6df6ac6d
+  data.tar.gz: 8da9b6c0fb744f9a37347fdf3bec56a8c435a3aeeab1933d3441ef5cb6f846fb
 SHA512:
-  metadata.gz: f383ffb93e9d97358349b13cc4f3a282b140ecc628fba9c097dd652ba6c0a824efaa1f796b932b165cd38b326899d0c6875d96b6f731858824bbdf42687d956f
-  data.tar.gz: ea09734e0f9abbc10a328f6b5e5b0c8248f1df495dc33abf14ea96cfb2f90e97aeb92f6e6ec0512fe2ffa3212fb4c8543cf9a187afd3e84c383a0f0b93a87f41
+  metadata.gz: 478df642a3c3079adf7eb546dc8f3a938717d5bb0f50d32e8dd70ebac1f6c16909fa21e613a262e2c94dcafbd5649acb2a2d3daa682ddc5a3f7961986d5aac37
+  data.tar.gz: 0ed83b2e971d7bbf15df28168199a3a9d063abc043df74ea6ac1db4c95cbcfec79883f6c5cba1be43fe9fe9375d26f252ee07ed7f91781035837c8903314a766

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,3 @@
-
-
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -31,6 +28,7 @@
 @import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
+@import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
@@ -121,3 +119,4 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
+@import './utilities/vertical_align';

data/app/pb_kits/playbook/index.js

@@ -35,6 +35,8 @@ export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_st
 export { default as Detail} from './pb_detail/_detail'
 export { default as Dialog } from './pb_dialog/_dialog'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
+export { default as Draggable} from './pb_draggable/_draggable'
+export { DraggableProvider} from './pb_draggable/context'
 export { default as Dropdown} from './pb_dropdown/_dropdown'
 export { default as FileUpload } from './pb_file_upload/_file_upload'
 export { default as Filter } from './pb_filter/_filter'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -163,6 +163,9 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
     staticOptions.plotOptions.series.events = { legendItemClick: () => false };
   }
 
+  const filteredProps: any = {...props};
+  delete filteredProps.verticalAlign;
+
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -172,7 +175,7 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
   return (
     <HighchartsReact
         containerProps={{
-          className: classnames(globalProps(props), className),
+          className: classnames(globalProps(filteredProps), className),
           id: id,
           ...ariaProps,
           ...dataProps,

data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import BarGraph from './_bar_graph';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'bargraph1';
+
+test('bargraph uses exact classname', () => {
+  render(
+    <BarGraph
+        className='super_important_class'
+        data={{ testid: testId }}
+        id='bar-default'
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('super_important_class');
+});

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -74,6 +74,22 @@ module Playbook
         standard_options.deep_merge(custom_options)
       end
 
+      def vertical_align_props
+        if vertical_align
+          if object.vertical_align
+            original_result = super
+            class_to_remove = "vertical_align_#{object.vertical_align}"
+
+            modified_result = original_result.gsub(class_to_remove, "").strip
+            modified_result.empty? ? nil : modified_result
+          else
+            super
+          end
+        else
+          super
+        end
+      end
+
       def classname
         generate_classname("pb_bar_graph")
       end

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1 +1,2 @@
-See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.
+The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom.html.erb → _bar_graph_custom_rails.html.erb}

@@ -15,7 +15,7 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<% custom_options = {
+<% bar_graph_options = {
     customOptions: {
         subtitle: {
             text: "Overwritten subtitle",
@@ -45,5 +45,5 @@
     y_axis_min: 0,
     subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
-    custom_options: custom_options
-}) %>
+    custom_options: bar_graph_options
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md

@@ -0,0 +1,2 @@
+The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

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

@@ -8,7 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
-  - bar_graph_custom: Custom Overrides
+  - bar_graph_custom_rails: Custom Overrides
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,6 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { merge } from 'lodash'
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";
@@ -18,6 +19,7 @@ type CircleChartProps = {
   children?: Node;
   className?: string;
   colors?: string[];
+  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   data?: {[key: string]: string},
   dataLabelHtml?: string;
@@ -67,6 +69,7 @@ const CircleChart = ({
   children,
   className,
   colors = [],
+  customOptions = {},
   dark = false,
   data = {},
   dataLabelHtml = "<div>{point.name}</div>",
@@ -115,6 +118,9 @@ const CircleChart = ({
     innerSizes[size];
 
 
+  const filteredProps: any = {...props};
+  delete filteredProps.verticalAlign;
+
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -171,7 +177,7 @@ const CircleChart = ({
       ],
       credits: false,
     };
-    setOptions({ ...staticOptions });
+    setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
 
@@ -181,7 +187,7 @@ const CircleChart = ({
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
               containerProps={{
-              className: classnames("pb_circle_chart", globalProps(props)),
+              className: classnames("pb_circle_chart", globalProps(filteredProps)),
               id: id,
               ...ariaProps,
               ...dataProps,
@@ -195,7 +201,7 @@ const CircleChart = ({
       ) : (
         <HighchartsReact
             containerProps={{
-            className: classnames("pb_circle_chart", globalProps(props)),
+            className: classnames("pb_circle_chart", globalProps(filteredProps)),
             id: id,
             ...ariaProps,
             ...dataProps,

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import CircleChart from './_circle_chart';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'circlechart1';
+
+test('uses exact classname', () => {
+  const data = [
+    {
+      name: 'Waiting for Calls',
+      value: 41,
+    },
+    {
+      name: 'On Call',
+      value: 49,
+    },
+    {
+      name: 'After call',
+      value: 10,
+    },
+  ]
+  render(
+    <CircleChart
+        chartData={data}
+        data={{ testid: testId }}
+        id='circlechartid'
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_circle_chart');
+});

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -6,8 +6,10 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left right center],
                    default: "center"
+      prop :border_width, type: Playbook::Props::Numeric
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
+      prop :custom_options, default: {}
       prop :style, type: Playbook::Props::Enum,
                    values: %w[pie],
                    default: "pie"
@@ -40,9 +42,10 @@ module Playbook
       prop :x, type: Playbook::Props::Numeric
       prop :y, type: Playbook::Props::Numeric
 
-      def chart_options
+      def standard_options
         {
           align: align,
+          borderWidth: border_width,
           id: id,
           colors: colors,
           chartData: chart_data,
@@ -68,6 +71,26 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
+      def vertical_align_props
+        if vertical_align
+          if object.vertical_align
+            original_result = super
+            class_to_remove = "vertical_align_#{object.vertical_align}"
+
+            modified_result = original_result.gsub(class_to_remove, "").strip
+            modified_result.empty? ? nil : modified_result
+          else
+            super
+          end
+        else
+          super
+        end
+      end
+
       def classname
         generate_classname("pb_circle_chart")
       end

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`html structure is correct 1`] = `
+<div>
+  <div
+    class="pb_collapsible_kit additional_class"
+    data-testid="collapsible1"
+  >
+    <div
+      class="pb_collapsible_main_kit cursor_pointer"
+    >
+      <div>
+        <div
+          class="pb_flex_kit_orientation_row_justify_content_left_align_items_center_spacing_between"
+        >
+          <div
+            class="pb_flex_item_kit"
+          >
+            <div>
+              Main Section
+            </div>
+          </div>
+          <div
+            class="pb_flex_item_kit"
+          >
+            <div
+              class="icon_wrapper"
+              style="vertical-align: middle; color: rgb(193, 205, 214);"
+            >
+              <i
+                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
+              />
+              <span
+                aria-label="chevron-down icon"
+                hidden=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pb_collapsible_content_kit toggle-content"
+      data-collapsible-content="true"
+      style="height: 0px;"
+    >
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.
+      </div>
+    </div>
+  </div>
+</div>
+`;

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
@@ -11,9 +11,16 @@ import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
 import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
+type CollapsibleMainProps = {
+  children: React.ReactNode
+}
+
+type CollapsibleContentProps = {
+  children: React.ReactNode
+}
 
 type CollapsibleProps = {
-  children?: React.ReactElement | [] | any,
+  children?: [ReactElement<CollapsibleMainProps>, ReactElement<CollapsibleContentProps>],
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
@@ -30,7 +37,7 @@ type CollapsibleProps = {
 const Collapsible = ({
   aria = {},
   className,
-  children = [],
+  children,
   collapsed = true,
   data = {},
   htmlOptions = {},
@@ -48,20 +55,18 @@ const Collapsible = ({
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
-
-  if (CollapsibleParent.length !== 2) {
+  if (children.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
-  const FirstChild = CollapsibleParent[0]
-  const SecondChild = CollapsibleParent[1]
+
+  const FirstChild = children[0]
 
   const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
-  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
+  const Content = children[1]
 
 
   const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
-  const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
+  const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -86,12 +91,9 @@ const Collapsible = ({
         ) : (
           FirstChild
         )}
-
-        {Content && (
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-        )}
       </div>
     </CollapsibleContext.Provider>
   )

data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js

@@ -48,3 +48,27 @@ test('returns namespaced additional_class class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} additional_class`)
 })
+
+test('html structure is correct', () => {
+  const { container } = render(
+    <Collapsible
+        className="additional_class"
+        data={{ testid: testId }}
+        iconColor='lighter'
+        iconSize="lg"
+    >
+      <Collapsible.Main>
+        <div>{'Main Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>
+          {
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
+          }
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+  )
+
+  expect(container).toMatchSnapshot()
+})

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,6 +3,12 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
+interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
+  traverseUpButton?: {
+    position: { y: number };
+  };
+}
+
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -200,7 +206,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    },
+    } as CustomTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,6 +3,13 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
+interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
+  traverseUpButton?: {
+    position: { y: number };
+  };
+}
+
+
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -150,6 +157,7 @@ const highchartsTheme: ThemeProps = {
           fontSize: typography.text_smaller,
           color: colors.text_lt_light,
           fontWeight: typography.regular,
+          textOutline: '2px $white',
         },
       },
     },
@@ -198,7 +206,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    },
+    } as CustomTreemapOptions,
   },
   credits: {
     enabled: false

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

@@ -0,0 +1,13 @@
+@import "../tokens/colors";
+
+.pb_draggable_container {
+  .is_dragging {
+    opacity: 40%;
+  }
+  .active {
+    opacity: 60%;
+  }
+  .pb_draggable_item:hover {
+    cursor: grab;
+  }
+}

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

@@ -0,0 +1,53 @@
+import React from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import DraggableContainer from "./subcomponents/DraggableContainer";
+import DraggableItem from "./subcomponents/DraggableItem";
+
+type DraggableProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  children?: React.ReactNode;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+};
+
+const Draggable = (props: DraggableProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    htmlOptions = {},
+    id,
+  } = props;
+
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const classes = classnames(
+    buildCss("pb_draggable"),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div {...ariaProps} 
+        {...dataProps} 
+        {...htmlProps}
+        className={classes} 
+        id={id}
+    >
+      {children}
+    </div>
+  );
+};
+
+Draggable.Container = DraggableContainer;
+Draggable.Item = DraggableItem;
+
+export default Draggable;

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -0,0 +1,92 @@
+import React, { createContext, useState, useContext, useEffect } from "react";
+
+const DragContext = createContext<any>({});
+
+export const DraggableContext = () => {
+  return useContext(DragContext);
+};
+
+export const DraggableProvider = ({ children, initialItems, onChange }: any) => {
+  const [items, setItems] = useState([]);
+  const [dragData, setDragData] = useState<{ [key: string]: any }>({});
+  const [isDragging, setIsDragging] = useState("");
+  const [activeContainer, setActiveContainer] = useState("");
+
+  useEffect(() => {
+    setItems(initialItems);
+  }, [initialItems]);
+
+  useEffect(() => {
+    onChange(items);
+  }, [items]);
+
+  const handleDragStart = (id: string, container: string) => {
+    setDragData({ id: id, initialGroup: container });
+    setIsDragging(id);
+  };
+
+  const handleDragEnter = (id: string, container: string) => {
+    if (dragData?.id !== id) {
+      const newItems = [...items];
+      const draggedItem = newItems.find((item) => item.id === dragData.id);
+      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetIndex = newItems.findIndex((item) => item.id === id);
+
+      newItems.splice(draggedIndex, 1);
+      newItems.splice(targetIndex, 0, draggedItem);
+
+      setItems(newItems);
+      setDragData({ id: dragData.id, initialGroup: container });
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging("");
+    setActiveContainer("");
+  };
+
+  const changeCategory = (itemId: string, container: string) => {
+    const updatedItems = items.map((item) => {
+      if (item.id === itemId) {
+        return { ...item, container: container };
+      }
+      return item;
+    });
+
+    setItems(updatedItems);
+  };
+
+  const handleDrop = (container: string) => {
+    setIsDragging("");
+    setActiveContainer("");
+    const selected = dragData.id;
+    changeCategory(selected, container);
+  };
+
+  const handleDragOver = (e: Event, container: string) => {
+    e.preventDefault();
+    setActiveContainer(container);
+  };
+
+  
+
+  const contextValue = {
+    items,
+    setItems,
+    dragData,
+    setDragData,
+    isDragging,
+    setIsDragging,
+    activeContainer,
+    setActiveContainer,
+    handleDragStart,
+    handleDragEnter,
+    handleDragEnd,
+    handleDrop,
+    handleDragOver,
+  };
+
+  return (
+    <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
+  );
+};