playbook_ui_docs 12.28.0.pre.alpha.20230613implementbakesupport865 → 12.29.0.pre.alpha.play716popoverkitcloseonclickissue893

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 01b3fb9a706c9943042356a2f51edcd0e7ba199667090fc8db34e8b9a6317ccb
-  data.tar.gz: 436621f03c7350be624910e6b1c8be5e6389d494dd8e35a8b474367e2df38867
+  metadata.gz: 2e789156f94ae954cd02fd69d7604306f6d645b40e1b9fb9c10b250fe663b658
+  data.tar.gz: 7ed006f7b8b2dcf930ef8e457c664fa7de11ff0ad71d9bb897549f205e91d1a9
 SHA512:
-  metadata.gz: 91458cd1c421b338d693405fd0b4cf61bf45dc6ffc9f4b73482d2927ac2372a5f43f1cccd0722ba1c0c2189b40b3e42ba065aed08abbf0db8cfd82342435cc29
-  data.tar.gz: 00fda82effe7904428e3b73733caa47ab6329ab9c59251344b12cb5cbd0082bd4fa970693f6925532344e794ced94290a63596fa3d576f1eb7bc12038ba89810
+  metadata.gz: 58e09483e4cac927a5cf69b8ea766e33b0883a202e9ab10f6a5f0af9f31a60ee83426d4eaeea17faacc87a2df048d4fa2ad6a5f6597870e867ec42683bf1380b
+  data.tar.gz: 389de65e49bff2d7658209c15cb65b4f1de556bfa7b8994df4fa7112a216e9ae8f1b19184aa0daa57b0a9ec07bbc005fada4c962f9c2623fec55e6b3f5297133

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

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

@@ -0,0 +1,3 @@
+This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
+
+Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  end_date_id: "range-limit-end-date",
+  end_date_name: "range-limit-end-date",
+  mode: "range",
+  picker_id: "thisRangesEndToday",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "range-limit-start-date",
+  start_date_name: "range-limit-start-date",
+  this_ranges_end_today: true
+}) %>

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPickRangeLimit = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="thisRangesEndToday"
+        placeholder="mm/dd/yyyy to mm/dd/yyyy"
+        selectionType="quickpick"
+        thisRangesEndToday
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickRangeLimit

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

@@ -0,0 +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.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPickReact = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="date-picker-quick-pick"
+        placeholder="mm/dd/yyyy to mm/dd/yyyy"
+        selectionType="quickpick"
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickReact

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

@@ -0,0 +1 @@
+Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.

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

@@ -8,6 +8,8 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
+  - date_picker_quick_pick_rails: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -33,6 +35,8 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
+  - date_picker_quick_pick_react: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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_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'