playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 316498c60328f47c61c0c80097cd58e075a3a5c3011679fb2f932570e1d3429a
-  data.tar.gz: 1ef2cf350e7c11fb2b108a5de7d7a3b6cf604e27d42764fb97d521be63a98954
+  metadata.gz: 513dedb641f87bf07610bf4bd6234671546cd7dad41022efad3019d85934b45c
+  data.tar.gz: 2ef935c0bfaba7bd80dc47bbaa1b8b4e89aac61c731ec8fbd88440e2557d57fd
 SHA512:
-  metadata.gz: aaf75bdae9c9ab9f5197f91162698e97462532ccc9a87b1d76d8379da4cfbdd59c7441a9fb97dd30dea06d2b153d0c1c033761ec830a915ca0a594b1c455c128
-  data.tar.gz: 8c703bb58ce255fb29513b79b6353d6025689514537e6c9fde9608d69b54868a8b37ea14d83131605ed50cdae55dfd3aea65e647f8ebd8a0a2a582361c8c70b1
+  metadata.gz: 1d0e17718945981e3002ebc05b9e9490be10884531df9e1f8ee65515e60d76a6edea5c27e68c50d205c5963047c74786f8d6e3e584b8bc0a76a8373636cb4049
+  data.tar.gz: 1ea1ae2275760805735801a334037a13dc60527fd431a4b985bca64cf85cf1f55ca95f89432c79a5f5593cad4ceed3967d5d1615d71f35daf6dc7d59f79ef991

data/app/pb_kits/playbook/index.js

@@ -133,6 +133,7 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
 //Theming
 export {default as mapTheme} from './pb_map/pbMapTheme'
 export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
 
 // CSS Tokens
 export { default as borderRadius } from './tokens/exports/_border_radius.scss'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -74,6 +74,31 @@ $transition: $transition_cubic;
         opacity: $opacity_10;
       }
     }
+
+    &:disabled ~ .pb_checkbox_checkmark {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 5%);
+      border-color: $border_light;
+
+      & ~ .pb_checkbox_label {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+      & ~ .pb_checkbox_label .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+    }
+
+    &:disabled:checked ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
+
+    &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
   }
 
   &.dark {
@@ -81,6 +106,30 @@ $transition: $transition_cubic;
       &:focus ~ .pb_checkbox_checkmark {
         box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
       }
+
+      &:disabled ~ .pb_checkbox_checkmark {
+        cursor: not-allowed;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_checkbox_label {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+        & ~ .pb_checkbox_label .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+      }
+
+      &:disabled:checked ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+      }
+
+      &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+        border-color: $border_dark;
+      }
     }
     
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -12,6 +12,7 @@ type CheckboxProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    disabled = false,
     error = false,
     htmlOptions = {},
     id,
@@ -67,6 +69,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     return (
     <input
         defaultChecked={checked}
+        disabled={disabled}
         name={name}
         onChange={onChange}
         ref={checkRef}

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :text
       prop :value
       prop :name
+      prop :disabled, type: Playbook::Props::Boolean, default: false
 
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
@@ -26,7 +27,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked, input_options.merge(disabled: disabled))
       end
 
       def checkbox_label_status

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -92,3 +92,17 @@ test('has checked attribute', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('checked')
 })
+
+test('has disabled attribute', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        disabled
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />)
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('input')
+  expect(input).toHaveAttribute('disabled')
+}) 

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            margin_bottom: "xs",
+            text: "Disabled unchecked",
+            value: "checkbox-value",
+            disabled: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            text: "Disabled checked",
+            value: "checkbox-value",
+            disabled: true,
+            checked: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import Checkbox from '../_checkbox'
+
+const CheckboxDisabled = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <Checkbox
+          disabled
+          marginBottom="xs"
+          name="default name"
+          tabIndex={0}
+          text="Disabled unchecked"
+          value="default value"
+          {...props}
+      />
+      <Checkbox
+          checked
+          disabled
+          name="checkbox-name"
+          text="Disabled checked"
+          value="check-box value"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default CheckboxDisabled

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

@@ -6,6 +6,7 @@ examples:
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
     - checkbox_indeterminate: Indeterminate Checkbox
+    - checkbox_disabled: Disabled Checkbox
 
   react:
   - checkbox_default: Default
@@ -13,6 +14,7 @@ examples:
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
+  - checkbox_disabled: Disabled Checkbox
 
   swift:
     - checkbox_default_swift: Default

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

@@ -3,3 +3,4 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
+export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -1,3 +1,5 @@
 Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -1,3 +1,5 @@
 The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
+Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -5,11 +5,13 @@
 @import "../tokens/shadows";
 @import "../tokens/positioning";
 @import "../pb_body/body_mixins";
+@import "../pb_textarea/textarea_mixin";
+
+@import "./scss_partials/dropdown_animation";
 
 .pb_dropdown {
   .dropdown_wrapper {
-    position: relative;
-    .dropdown_trigger_wrapper {
+    [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -28,7 +30,6 @@
       .dropdown_input {
         @include pb_body;
         border: unset;
-        border-radius: $border_rad_heavier;
         padding: 0;
         background-color: $white;
         &:focus-visible {
@@ -40,15 +41,15 @@
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }
-    }
 
-    .dropdown_trigger_wrapper_select_only {
-      box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    }
+      &[class*="_select_only"] {
+        box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
+      }
 
-    .dropdown_trigger_wrapper_focus {
-      box-shadow: 0px 0px 0 1px $primary;
-      transition: box-shadow 0.1s ease-in-out;
+      &[class*="_focus"] {
+        box-shadow: 0px 0px 0 1px $primary !important;
+        transition: box-shadow 0.1s ease-in-out;
+      }
     }
 
     .pb_dropdown_container {
@@ -58,46 +59,106 @@
       border-radius: $border_rad_heavier;
       border: 1px solid $border_light;
       margin-top: $space_xs;
-      position: absolute;
       z-index: $z_1;
       width: 100%;
-      transition: opacity 0.25s ease-in-out;
 
-      .pb_dropdown_option {
+      [class*="pb_dropdown_option"] {
         cursor: pointer;
         &:hover {
           background-color: $border_light;
         }
-      }
-
-      .dropdown_option_focused {
-        background-color: $border_light;
-      }
 
-      .dropdown_option {
-        width: 100%;
-      }
+        &[class*="_focused"] {
+          background-color: $border_light;
+        }
 
-      .dropdown_option_list {
-        border-bottom: 1px solid $border_light;
-      }
-      .dropdown_option_selected {
-        background-color: $primary;
-        [class^="pb_body"],
-        [class^="pb_title_kit"] {
-          color: $white !important;
+        &[class*="_list"] {
+          border-bottom: 1px solid $border_light;
         }
-        &:hover {
-          background-color: $primary !important;
+        &[class*="selected"] {
+          background-color: $primary;
+          [class^="pb_body"],
+          [class^="pb_title_kit"] {
+            color: $white !important;
+          }
+          &:hover {
+            background-color: $primary !important;
+          }
         }
       }
+
+      .dropdown_option_wrapper {
+        width: 100%;
+      }
     }
     .close {
       display: none;
+      animation-name: fadeOut;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
 
     .open {
       display: block;
+      animation-name: fadeIn;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+  }
+
+  &.dark {
+    .dropdown_wrapper {
+      [class*="dropdown_trigger_wrapper"] {
+        @include pb_body_light_dark;
+        background-color: rgba($white, 0.1) !important;
+        background: none;
+        border-color: rgba($white, 0.15);
+        @media (hover: hover) {
+          &:hover,
+          &:active,
+          &:focus {
+            background-color: rgba($white, 0.05) !important;
+          }
+        }
+        [class^="pb_body"] {
+          color: $white;
+        }
+        &[class*="_select_only"] {
+          box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+        }
+        .dropdown_input {
+          background-color: unset;
+          color: $white;
+        }
+      }
+    }
+    .pb_dropdown_container {
+      background-color: $bg_dark !important;
+      border-color: rgba($white, 0.15);
+      color: $white;
+      [class^="pb_body"],
+      [class^="pb_title_kit"] {
+        color: $white !important;
+      }
+
+      [class*="pb_dropdown_option"] {
+        &:hover {
+          background-color: $hover_dark;
+        }
+
+        &[class*="_focused"] {
+          background-color: $hover_dark;
+        }
+
+        &[class*="_list"] {
+          border-color: rgba($white, 0.15);
+        }
+        &[class*="selected"] {
+          background-color: $primary;
+        }
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -1,32 +1,38 @@
-import React, { useState, useRef, useEffect, ReactElement } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GenericObject } from "../types";
 
 import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
+import DropdownContext from "./context";
 import DropdownOption from "./subcomponents/DropdownOption";
 import DropdownTrigger from "./subcomponents/DropdownTrigger";
-import DropdownContext from "./context";
 import useDropdown from "./hooks/useDropdown";
 
 import {
   separateChildComponents,
   prepareSubcomponents,
-} from "./utilities/subComponentHelper";
-import { GenericObject } from "../types";
+  handleClickOutside,
+} from "./utilities";
 
 type DropdownProps = {
   aria?: { [key: string]: string };
   autocomplete?: boolean;
+  children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
   className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  children?: React.ReactChild[] | React.ReactChild | ReactElement[];
-  options: GenericObject;
+  isClosed?: boolean;
+  label?: string;
   onSelect?: (arg: GenericObject) => null;
+  options: GenericObject;
+  triggerRef?: any;
 };
 
 const Dropdown = (props: DropdownProps) => {
@@ -35,11 +41,15 @@ const Dropdown = (props: DropdownProps) => {
     autocomplete = false,
     children,
     className,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
-    options,
+    isClosed = true,
+    label,
     onSelect,
+    options,
+    triggerRef
   } = props;
 
   const ariaProps = buildAriaProps(aria);
@@ -51,7 +61,7 @@ const Dropdown = (props: DropdownProps) => {
     className
   );
 
-  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown();
+  const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
   const [filterItem, setFilterItem] = useState("");
   const [selected, setSelected] = useState<GenericObject>({});
@@ -59,28 +69,38 @@ const Dropdown = (props: DropdownProps) => {
   const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
   const [hasContainerSubcomponent, setHasContainerSubcomponent] =
     useState(true);
-
   //state for keyboard events
   const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
 
   const dropdownRef = useRef(null);
   const inputRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const dropdownContainerRef = useRef(null);
 
   const { trigger, container, otherChildren } =
     separateChildComponents(children);
 
-  // useEffect to handle clicks outside the dropdown
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        setIsDropDownClosed(true);
-        setFocusedOptionIndex(-1)
-        setIsInputFocused(false);
+    // Set the parent element of the trigger to relative to allow for absolute positioning of the dropdown
+    //Only needed for when useDropdown hook used with external trigger
+    if (triggerRef?.current) {
+      const parentElement = triggerRef.current.parentNode;
+      if (parentElement) {
+          parentElement.style.position = 'relative';
       }
-    };
-    window.addEventListener("click", handleClickOutside);
+  }
+  // Handle clicks outside the dropdown
+  const handleClick = handleClickOutside({
+    inputWrapperRef,
+    dropdownContainerRef,
+    setIsDropDownClosed,
+    setFocusedOptionIndex,
+    setIsInputFocused,
+  });
+  
+    window.addEventListener("click", handleClick);
     return () => {
-      window.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("click", handleClick);
     };
   }, []);
 
@@ -89,11 +109,16 @@ const Dropdown = (props: DropdownProps) => {
     setHasContainerSubcomponent(!!container);
   }, []);
 
+// dropdown to toggle with external control
+  useEffect(()=> {
+    setIsDropDownClosed(isClosed)
+   },[isClosed])
 
   const filteredOptions = options?.filter((option: GenericObject) =>
     option.label.toLowerCase().includes(filterItem.toLowerCase())
   );
 
+// For keyboard accessibility: Set focus within dropdown to selected item if it exists
   useEffect(() => {
     if (!isDropDownClosed) { 
         let newIndex = 0; 
@@ -107,6 +132,7 @@ const Dropdown = (props: DropdownProps) => {
     }
 }, [isDropDownClosed]);
 
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFilterItem(e.target.value);
     setIsDropDownClosed(false);
@@ -116,7 +142,7 @@ const Dropdown = (props: DropdownProps) => {
     setSelected(selectedItem);
     setFilterItem("");
     setIsDropDownClosed(true);
-    onSelect(selectedItem);
+    onSelect && onSelect(selectedItem);
   };
 
   const handleWrapperClick = () => {
@@ -126,7 +152,7 @@ const Dropdown = (props: DropdownProps) => {
 
   const handleBackspace = () => {
     setSelected({});
-    onSelect(null);
+    onSelect && onSelect(null);
     setFocusedOptionIndex(-1);
   };
 
@@ -137,18 +163,22 @@ const Dropdown = (props: DropdownProps) => {
     trigger,
     container,
     otherChildren,
+    dark
   });
 
+
   return (
     <div {...ariaProps} 
         {...dataProps} 
         {...htmlProps}
         className={classes} 
         id={id}
+        style={triggerRef ? { position: "absolute"} : { position: "relative"}}
     >
       <DropdownContext.Provider
           value={{
               autocomplete,
+              dropdownContainerRef,
               filteredOptions,
               filterItem,
               focusedOptionIndex,
@@ -157,6 +187,7 @@ const Dropdown = (props: DropdownProps) => {
               handleOptionClick,
               handleWrapperClick,
               inputRef,
+              inputWrapperRef,
               isDropDownClosed,
               isInputFocused,
               options,
@@ -166,8 +197,16 @@ const Dropdown = (props: DropdownProps) => {
               setIsInputFocused,
               setSelected,
               toggleDropdown,
+              triggerRef
           }}
       >
+        {label &&
+        <Caption
+            dark={dark}
+            marginBottom="xs"
+            text={label}
+        />
+        }
         <div className="dropdown_wrapper" 
             onBlur={() => {
                 // Debounce to delay the execution to prevent jumpiness in Focus state
@@ -204,7 +243,7 @@ const Dropdown = (props: DropdownProps) => {
         </div>
       </DropdownContext.Provider>
     </div>
-  );
+  )
 };
 
 Dropdown.Option = DropdownOption;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -1,31 +1,20 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Dropdown } from '../../'
 
 const DropdownDefault = (props) => {
-// eslint-disable-next-line no-unused-vars
-const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
       label: "United States",
       value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
     },
     {
       label: "Canada",
       value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
     }
   ];  
 
@@ -33,16 +22,9 @@ const [selectedOption, setSelectedOption] = useState();
   return (
   <div>
     <Dropdown
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        /> 
-      ))}
-    </Dropdown>
+    />
   </div>
   )
 }