playbook_ui 14.16.0.pre.rc.6 → 14.16.0

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { find, map, partial } from 'lodash'
+import { map } from 'lodash'
+import { find, partial } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -7,7 +7,7 @@ $pb_pill_height: 25px;
 
 
 $confirmation_toast_colors: (
-  neutral:        $neutral,
+  neutral:        $text_lt_light,
   success:        $success,
   error:          $error,
   tip:          transparent,
@@ -87,7 +87,7 @@ $confirmation_toast_colors: (
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical; 
+        -webkit-box-orient: vertical;
         white-space: normal;
         text-align: left;
       }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -22,6 +22,72 @@
 
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -47,6 +113,7 @@
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
+  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,72 @@
   ]
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
@@ -38,6 +104,7 @@
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
+  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -13,7 +13,7 @@ import typography from "../tokens/exports/_typography.module.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type GaugeProps = {
   aria: { [key: string]: string };

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,10 +1,17 @@
 @import "../tokens/colors";
 
+$additional_colors: (
+  "light": $text_lt_light,
+  "lighter": $text_lt_lighter,
+  "link": $primary
+);
+
 // All the merges below create $icon_colors, a map of all color tokens in colors.scss
 $merge_kits1: map-merge($status_colors, $category_colors);
 $merge_kits2: map-merge($merge_kits1, $product_colors);
 $merge_kits3: map-merge($merge_kits2, $text_colors);
-$icon_colors: map-merge($merge_kits3, $data_colors);
+$merge_kits4: map-merge($merge_kits3, $data_colors);
+$icon_colors: map-merge($merge_kits4, $additional_colors);
 
 .pb_custom_icon, .pb_icon_kit {
   @each $color_name, $color_value in $icon_colors {

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

@@ -1,5 +1,11 @@
-<%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
+<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
     <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
-<% end %>
+<% end %>
+
+<%= pb_rails("flex", props: {}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
+<% end %>

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

@@ -1,32 +1,57 @@
 import React from "react"
 import Icon from "../_icon"
+import Flex from "../../pb_flex/_flex"
 
 const IconDefault = (props) => {
   return (
-    <div style={{ display: "flex", flexDirection: "column"}}>
-      <Icon
-          color="primary"
-          fixedWidth
-          icon="user"
-          paddingBottom="sm"
-          size="2x"
-          {...props}
-      />
-      <Icon
-          color="data_4"
-          fixedWidth
-          icon="recycle"
-          paddingBottom="sm"
-          size="2x"
-          {...props}
-      />
-      <Icon
-          color="product_5_background"
-          fixedWidth
-          icon="product-roofing"
-          size="2x"
-          {...props}
-      />
+    <div>
+      <Flex marginBottom="sm">
+        <Icon
+            color="primary"
+            fixedWidth
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="data_4"
+            fixedWidth
+            icon="recycle"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="product_5_background"
+            fixedWidth
+            icon="product-roofing"
+            size="2x"
+            {...props}
+        />
+      </Flex>
+
+      <Flex>
+        <Icon
+            color="light"
+            fixedWidth
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="lighter"
+            fixedWidth
+            icon="recycle"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="link"
+            fixedWidth
+            icon="product-roofing"
+            size="2x"
+            {...props}
+        />
+      </Flex>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -17,6 +17,7 @@ type IconButtonProps = {
   id?: string,
   link?: string,
   newWindow?: boolean,
+  onClick?: React.MouseEventHandler<HTMLElement>,
   size?: IconSizes,
   target?: string,
   variant?: 'default' | 'link',
@@ -32,6 +33,7 @@ const IconButton = (props: IconButtonProps) => {
     id,
     link,
     newWindow = false,
+    onClick = noop,
     size = "2x",
     target,
     variant = "default",
@@ -53,6 +55,7 @@ const IconButton = (props: IconButtonProps) => {
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}
+          onClick={onClick}
           target={target}
       >
         <Icon

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import IconButton from '../../pb_icon_button/_icon_button'
+
+const IconButtonClick = (props) => (
+  <div>
+    <IconButton
+        {...props}
+        onClick={() => alert('Click!')}
+    />
+  </div>
+)
+
+export default IconButtonClick

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

@@ -7,3 +7,4 @@ examples:
   react:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
+  - icon_button_click: Click Handler

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

@@ -1,2 +1,3 @@
 export { default as IconButtonDefault } from './_icon_button_default.jsx'
 export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
+export { default as IconButtonClick } from './_icon_button_click.jsx'

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object' 
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import Image from '../../pb_image/_image'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import classnames from 'classnames'
 import React, { useLayoutEffect } from 'react'
 import { useWindowSize } from '../hooks/useWindowSize'

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -8,7 +8,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type LineGraphProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -10,6 +10,16 @@
 .pb_multi_level_select {
   font-family: $font-family-base;
 
+&.error {
+  .wrapper {
+    .input_wrapper {
+      border-color: $error;
+    }
+  }
+  [class*=pb_body_kit_negative] {
+    margin-top: $space_xxs;
+  }
+}
   .wrapper {
     position: relative;
 
@@ -92,4 +102,17 @@
   .open {
     display: block;
   }
+
+  &.dark {
+    &.error {
+      .wrapper {
+        .input_wrapper {
+          border-color: $error_dark;
+        }
+      }
+      [class*=pb_body_kit_negative] {
+        color: $error_dark;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -9,6 +9,8 @@ import {
 } from "../utilities/props";
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
 import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
@@ -35,11 +37,14 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   disabled?: boolean
+  error?: string
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
+  label?: string
   name?: string
+  required?: boolean
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
@@ -56,11 +61,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     className,
     data = {},
     disabled = false,
+    error,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
     name,
+    label,
+    required = false,
     returnAllSelected = false,
     treeData,
     onChange = () => null,
@@ -77,6 +85,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
+    error && "error",
     globalProps(props),
     className
   );
@@ -439,6 +448,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         className={classes}
         id={id}
     >
+      {label &&
+        <Caption
+            marginBottom="xs"
+            text={label}
+        />
+      }
       <MultiLevelSelectContext.Provider value={{
           variant,
           inputName,
@@ -462,6 +477,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
+                      required={required}
                       type="hidden"
                       value={selectedItem.id}
                   />
@@ -476,6 +492,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -488,6 +505,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id} 
                           name={`${name}[]`}
+                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -548,6 +566,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       } selected`
                     : "Start typing..."
                 }
+                required={required}
                 value={singleSelectedItem.value || filterItem}
             />
           </div>
@@ -580,6 +599,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         </div>
       </div>
       </MultiLevelSelectContext.Provider>
+      {error &&
+          <Body
+              dark={props.dark}
+              status="negative"
+              text={error}
+          />
+        }
     </div>
   );
 }) as MultiLevelSelectComponent;