playbook_ui 12.28.0 → 12.29.0.pre.alpha.play716popoverkitcloseonclickissue893

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

@@ -19,4 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
+export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -0,0 +1,173 @@
+import moment from 'moment'
+
+type FpTypes = {
+  setDate: (arg0: any, arg1: boolean) => void,
+  config: { [key: string]: string },
+  clear: (arg0: boolean, arg1: boolean) => void,
+  close: () => void,
+  calendarContainer?: {
+    classList: { add: (arg0: string) => void };
+    prepend: (arg0: HTMLDivElement) => void;
+    append: (arg0: HTMLDivElement) => void;
+  },
+  loadedPlugins: string[],
+};
+
+type pluginDataType = {
+  ranges: { [key: string]: Date[] },
+  rangesNav: HTMLUListElement,
+  rangesButtons: [] | any,
+}
+
+let activeLabel = ""
+
+const quickPickPlugin = (thisRangesEndToday: boolean) => {
+  return function (fp: FpTypes & any): any {
+    const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
+    const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
+    const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
+    const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
+
+    // variable that holds the ranges available
+    const ranges = {
+      'Today': [new Date(), new Date()],
+      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
+      'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
+      'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
+      'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
+      'This year': [moment().startOf('year').toDate(), thisYearEndDate],
+      'Last week': [
+        moment().subtract(1, 'week').startOf('isoWeek').toDate(),
+        moment().subtract(1, 'week').endOf('isoWeek').toDate()
+      ],
+      'Last month': [
+        moment().subtract(1, 'month').startOf('month').toDate(),
+        moment().subtract(1, 'month').endOf('month').toDate()
+      ],
+      'Last quarter': [
+        moment().subtract(1, 'quarter').startOf('quarter').toDate(),
+        moment().subtract(1, 'quarter').endOf('quarter').toDate()
+      ],
+      'Last year': [
+        moment().subtract(1, 'year').startOf('year').toDate(),
+        moment().subtract(1, 'year').endOf('year').toDate()
+      ]
+    }
+    //creating the ul element for the nav dropdown and giving it classnames
+    const rangesNav = document.createElement('ul');
+
+    // creating the pluginData object that will hold the properties of this plugin
+    const pluginData: pluginDataType = {
+      ranges: ranges,
+      rangesNav: rangesNav,
+      rangesButtons: [],
+    };
+
+    /**
+   *    @param {string} label
+   *    @returns HTML Element
+   */
+
+    //function for creating the range buttons in the nav
+    const addRangeButton = (label: string) => {
+
+      // creating new elements to mimick selectable card component
+      const div2 = document.createElement('div');
+      div2.className = "nav-item-link"
+      div2.innerHTML = label;
+
+      pluginData.rangesButtons[label] = div2;
+
+      // create li elements inside the dropdown
+      const item = document.createElement('li');
+      item.className = "nav-item";
+
+      // append those nav items to the li items
+      item.appendChild(pluginData.rangesButtons[label]);
+
+      // append the li item to the ul rangeNav prop
+      pluginData.rangesNav.appendChild(item);
+
+      // return the ranges buton prop
+      return pluginData.rangesButtons[label];
+    };
+
+    const selectActiveRangeButton = (selectedDates: Array<Date>) => {
+      const current = pluginData.rangesNav.querySelector('.active');
+
+      if (current) {
+        current.classList.remove('active');
+      }
+     
+      if (selectedDates.length > 0 && activeLabel) {
+        pluginData.rangesButtons[activeLabel].classList.add('active');
+      }
+    }
+
+    const isLabelMatchingSelectedDates = (selectedDates: Array<Date>) => {
+      return activeLabel && selectedDates[0].toDateString() === pluginData.ranges[activeLabel][0].toDateString() &&
+        selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
+    }
+
+
+    return {
+      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      onReady(selectedDates: Array<Date>) {
+        // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
+        for (const [label, range] of Object.entries(pluginData.ranges)) {
+          addRangeButton(label).addEventListener('click', function () {
+
+            const start = moment(range[0]).toDate();
+            const end = moment(range[1]).toDate();
+
+            if (!start) {
+              fp.clear();
+            }
+            else {
+              activeLabel = label
+              fp.setDate([start, end], true);
+              fp.close();
+            }
+          });
+        }
+        // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
+        if (pluginData.rangesNav.children.length > 0) {
+
+          fp.calendarContainer.prepend(pluginData.rangesNav);
+          pluginData.rangesNav.classList.add('quick-pick-ul')
+          fp.calendarContainer.classList.add('quick-pick-drop-down');
+
+          /**
+           *
+           * @param {Array} selectedDates
+           */
+          // function to give the active button the active class
+          selectActiveRangeButton(selectedDates);
+        }
+      },
+      onValueUpdate(selectedDates: Array<Date>) {
+        selectActiveRangeButton(selectedDates)
+      },
+
+      onClose(selectedDates: Array<Date>) {
+        // remove the active class from the button if the selected dates don't match the label
+        if (!isLabelMatchingSelectedDates(selectedDates)) {
+          pluginData.rangesButtons[activeLabel]?.classList.remove('active');
+          activeLabel = ""
+        }
+
+        // set the date to the first date in the array if the user types only one date
+        if (selectedDates.length === 1) {
+          fp.setDate([selectedDates[0], selectedDates[0]], true);
+        }
+
+        // set the input value to the selected dates when the dropdown is closed
+        if (selectedDates.length < 2 && selectedDates.length > 0) {
+          fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
+        }
+      }
+    };
+  };
+}
+
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -1,3 +1,4 @@
+@import "../../tokens/colors";
 // Calendar Icon Styles
 .cal_icon_wrapper {
   pointer-events: none;
@@ -13,8 +14,8 @@
   padding-left: $space_sm - 1;
   color: $text_lt_light;
   @media (hover: hover) {
-    &:hover {
-      cursor: pointer;
+    &:hover{
+      background-color: rgba($focus_input_light,$opacity_5);
     }
   }
   &.dark {

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -0,0 +1,75 @@
+@import "../../tokens/animation-curves";
+@import "../../tokens/colors";
+@import "../../tokens/typography";
+@import "../../tokens/titles";
+@import "../../tokens/spacing";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
+
+// used to display dropdown on the left of the calender
+.quick-pick-drop-down {
+  width: auto;
+  display: grid;
+}
+
+.quick-pick-ul {
+  padding: $space_xs 0px;
+  margin: 0;
+  list-style: none;
+}
+
+.nav-item {
+  list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: $space_xs $space_sm;
+}
+
+.nav-item-link {
+  text-decoration: none;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_light;
+  border-radius: $pb_card_border_radius;
+  padding: $space_xs 14px;
+  transition-property: color, background-color;
+  transition-duration: 0.15s;
+  transition-timing-function: $bezier;
+  line-height: 1.4;
+  color: $charcoal;
+  font-size: $font_default;
+  font-weight: $regular;
+  &.active {
+    border-width: 2px;
+    border-color: $primary;
+  }
+  @media (hover:hover) {
+    &:hover {
+      cursor: pointer;
+      box-shadow: $shadow-deep;
+      border-color: $slate;
+    }
+  }
+}
+
+// Hide the calendar
+.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
+  display: none;
+}
+
+@media only screen and (max-width: 767px) {
+  .quick-pick-ul {
+    padding: $space_xs $space_xs;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .nav-item {
+    margin: $space_xxs $space_xs;
+  }
+
+  .nav-item-link {
+    padding: $space_xs $space_xxs;
+  }
+}

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -5,6 +5,21 @@
 @import "./_pb_map_button_mixin.scss";
 
 [class*="pb_map"] {
+  .pb_map-custom-button {
+    @include pb_map_button;
+    position: relative;
+    margin-top: $space_xs;
+    box-shadow: $shadow_deep;
+    .pb_icon_kit {
+      width: $space_sm - 2;
+      height: $space_sm;
+    }
+
+    .pb_button_content {
+      height: $space_sm;
+    }
+  }
+
   .mapboxgl-map,
   .maplibregl-map {
     font-family: $font_family_base !important;
@@ -185,7 +200,7 @@
     }
     .map-zoom-in-button,
     .map-zoom-out-button,
-    .map-flyto-button {
+    .map-flyto-button, .pb_map-custom-button {
       @include pb_map_button_dark;
     }
 

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -3,9 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 
-import Flex  from "../pb_flex/_flex"
-import Icon from '../pb_icon/_icon'
-import Button from '../pb_button/_button'
+import MapControls from './_map_controls';
 
 type MapProps = {
   aria?: { [key: string]: string },
@@ -47,29 +45,13 @@ const Map = (props: MapProps) => {
     >
       {
         zoomBtns ? (
-          <Flex className="custom-nav-control" orientation='column'>
-            <div className="custom-nav-control-zoom">
-              <Button className='map-zoom-in-button'
-                  onClick={zoomInClick}
-              >
-                    <Icon icon="plus"/>
-              </Button>
-              <Button className='map-zoom-out-button'
-                 onClick={zoomOutClick}
-              >
-                    <Icon icon="minus"/>
-              </Button>
-            </div>
-            {
-              flyTo ? (
-                <Button className='map-flyto-button'
-                  onClick={flyToClick}
-                >
-                      <Icon icon="eye"/>
-                </Button>
-              ) : null
-            }
-         </Flex>
+          <Map.Controls
+          flyTo={flyTo}
+          flyToClick={flyToClick}
+          zoomBtns={zoomBtns}
+          zoomInClick={zoomInClick}
+          zoomOutClick={zoomOutClick}
+          />
          ) : null
       }
       {children}
@@ -77,4 +59,5 @@ const Map = (props: MapProps) => {
   )
 }
 
+Map.Controls = MapControls
 export default Map

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Button from "../pb_button/_button";
+import Icon from "../pb_icon/_icon";
+import Flex from "../pb_flex/_flex";
+
+type MapControlTypes = {
+  zoomBtns?: boolean, 
+  flyTo?: boolean, 
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
+  children?: React.ReactNode | React.ReactNode[]
+}
+
+const MapControls = ({
+  zoomBtns,
+  zoomInClick,
+  zoomOutClick,
+  flyTo,
+  flyToClick,
+  children,
+}: MapControlTypes) => {
+  return (
+    <Flex className="custom-nav-control" orientation="column">
+      {zoomBtns ? (
+        <>
+          <div className="custom-nav-control-zoom">
+            <Button className="map-zoom-in-button" onClick={zoomInClick}>
+              <Icon icon="plus" />
+            </Button>
+            <Button className="map-zoom-out-button" onClick={zoomOutClick}>
+              <Icon icon="minus" />
+            </Button>
+          </div>
+          {flyTo ? (
+            <Button className="map-flyto-button" onClick={flyToClick}>
+              <Icon icon="eye" />
+            </Button>
+          ) : null}
+        </>
+      ) : null}
+      {children}
+    </Flex>
+  );
+};
+
+export default MapControls;

data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Button from "../pb_button/_button";
+import Icon from "../pb_icon/_icon";
+
+type MapCustomButtonTypes = {
+  onClick?: () => {};
+  icon?: string;
+};
+
+const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
+  return (
+    <Button className="pb_map-custom-button" onClick={onClick}>
+      <Icon icon={icon} />
+    </Button>
+  );
+};
+
+export default MapCustomButton;

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -0,0 +1,83 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { Map, mapTheme, MapCustomButton } from '../..'
+import maplibregl from 'maplibre-gl'
+
+const MapWithCustomButton = (props) => {
+
+  //set Map instance to access from outside useEffect
+  const [mapInstance, setMapInstance] = useState(null)
+  const mapContainerRef = useRef(null)
+
+  //Set default position
+  const defaultPosition = [-75.379143, 39.831200]
+
+  // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
+  const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
+  const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
+  const handleFlyTo = (map) => {map.flyTo({
+                                center: defaultPosition,
+                                ... mapTheme.flyToConfig
+                                });}
+
+  //This function is called by the useEffect when map instance first loads
+  const loadMap = ( { target: map }) => {
+        //set marker/pin
+        new maplibregl.Marker({
+          color: mapTheme.marker,
+        }).setLngLat(defaultPosition)
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .addTo(map);
+
+        // disable map zoom when using scroll
+        map.scrollZoom.disable();
+        
+        //add attributioncontrols
+        map.addControl(new maplibregl.AttributionControl({
+          compact: true
+          }));
+
+        //set map instance
+        setMapInstance(map)
+  }
+
+    useEffect(() => {
+         new maplibregl.Map({
+            container: mapContainerRef.current,
+            center: defaultPosition,
+            ...mapTheme.mapConfig
+        }).on('load', loadMap)
+
+    }, [])
+
+return ( 
+  <Map 
+      {...props}
+  >
+    <Map.Controls flyTo
+        flyToClick={()=> {handleFlyTo(mapInstance)}}
+        zoomBtns
+        zoomInClick={() => {handleZoomIn(mapInstance)}}
+        zoomOutClick={()=> {handleZoomOut(mapInstance)}}
+    >
+      <MapCustomButton icon="home" 
+          onClick={() => alert("button clicked!")}
+      />
+      <MapCustomButton icon="search" 
+          onClick={() => alert("button clicked!")}
+      />
+    </Map.Controls>
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0, 
+              bottom: 0,
+           }}
+       />
+    </Map>
+)
+}
+
+export default MapWithCustomButton

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.md

@@ -0,0 +1 @@
+If you want to add custom buttons to the Map, you can use the `MapCustomButton` component nested inside Map.Controls as shown in the code snippet below. Note that when Map.Controls is used in this way, the props for the rest of the buttons must also be passed to Map.Controls instead of the Map itself.

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

@@ -4,3 +4,4 @@ examples:
   react:
   - map_default: Default
   - map_with_plugin: Map With Polygon Draw Plugin
+  - map_with_custom_button: Map With Custom Button

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

@@ -1,2 +1,3 @@
 export { default as MapDefault } from './_map_default.jsx'
 export { default as MapWithPlugin } from './_map_with_plugin.jsx'
+export {default as MapWithCustomButton} from './_map_with_custom_button.jsx'

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
-        
+
         {iconRight &&
           <div
             className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-       letter-spacing: normal;
+      letter-spacing: normal;
     }
   }
 }

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -171,17 +171,19 @@ const PbReactPopover = (props: PbPopoverProps) => {
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover || targetIsReference) {
+            if (!targetIsPopover && !targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover || targetIsReference) {
+            if (targetIsPopover) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            shouldClosePopover(true);
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
         }
       },

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -49,13 +49,16 @@ export default class PbPopover extends PbEnhancedElement {
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
+      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        this.hideTooltip()
+        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
+          this.hideTooltip()
+        }
         break
       case 'outside':
-        if (!isTooltipElement) {
+        if (!isTooltipElement && !isTriggerElement) {
           this.hideTooltip()
         }
         break