playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -22,6 +22,7 @@ type CircleIconButtonProps = {
   type?: 'button' | 'submit' | 'reset' | undefined,
   target?: string
   variant?: 'primary' | 'secondary' | 'link',
+  size?: 'default' | 'sm',
 }
 
 const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
@@ -41,13 +42,16 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     link,
     newWindow,
     variant,
+    size = 'default',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const sizeClass = size === 'sm' ? 'size_small' : ''
   const classes = classnames(
     buildCss('pb_circle_icon_button_kit'),
+    sizeClass,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -18,8 +18,16 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :target
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[default sm],
+                  default: "default"
+
       def classname
-        generate_classname("pb_circle_icon_button_kit")
+        generate_classname("pb_circle_icon_button_kit") + size_class
+      end
+
+      def size_class
+        size == "sm" ? " size_small" : ""
       end
     end
   end

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -30,3 +30,17 @@ test('passes loading prop to button', () => {
   
   expect(button).toBeInTheDocument()
 })
+
+test('adds size_small class when size is sm', () => {
+  render(
+    <CircleIconButton
+        data={{ testid: 'small-size-test' }}
+        icon="plus"
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('small-size-test')
+  
+  expect(kit).toHaveClass('pb_circle_icon_button_kit size_small')
+})

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("flex", props: { orientation: "column", gap: "sm" }) do %>
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "plus",
+    size: "sm",
+    variant: "primary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "pen",
+    loading: true,
+    size: "sm",
+    variant: "secondary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    disabled: true,
+    icon: "times",
+    size: "sm"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "info",
+    link: "https://playbook.powerapp.cloud/",
+    size: "sm",
+    target: "child",
+    variant: "link"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import CircleIconButton from '../_circle_icon_button'
+import Flex from '../../pb_flex/_flex'
+
+const CircleIconButtonSize = (props) => (
+  <>
+    <Flex gap="sm"
+        orientation="column"
+    >
+        <CircleIconButton
+            icon="plus"
+            size="sm"
+            variant="primary"
+            {...props}
+        />
+        <CircleIconButton
+            icon="pen"
+            loading
+            size="sm"
+            variant="secondary"
+            {...props}
+        />
+        <CircleIconButton
+            disabled
+            icon="times"
+            size="sm"
+            {...props}
+        />
+        <CircleIconButton
+            icon="info"
+            link="https://playbook.powerapp.cloud/"
+            size="sm"
+            target="child"
+            variant="link"
+            {...props}
+        />
+    </Flex>
+  </>
+)
+
+export default CircleIconButtonSize

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md

@@ -0,0 +1 @@
+The `size` prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size.

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

@@ -4,9 +4,11 @@ examples:
   - circle_icon_button_default: Default
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size

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

@@ -2,3 +2,4 @@ export { default as CircleIconButtonDefault } from './_circle_icon_button_defaul
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
 export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
+export { default as CircleIconButtonSize } from './_circle_icon_button_size.jsx'

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,5 +1,4 @@
-
-import React, { useState } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -7,16 +6,19 @@ import { globalProps } from '../utilities/globalProps'
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
 
+import usePBCopy from './usePBCopy'
+
 type CopyButtonProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  from?: string,
-  text?: string,
-  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
-  tooltipText?: string,
-  value?: string,
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  id?: string
+  from?: string
+  text?: string
+  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
+  tooltipText?: string
+  value?: string
+  timeout?: number
 }
 
 const CopyButton = (props: CopyButtonProps) => {
@@ -27,62 +29,34 @@ const CopyButton = (props: CopyButtonProps) => {
     from = '',
     id,
     text= 'Copy',
+    timeout = 1000,
     tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
   } = props
 
-  const [copied, setCopied] = useState(false)
+  const [copied, copy] = usePBCopy({ value, from, timeout })
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
-  const copy = () => {
-    if (!from && !value) {
-      return
-    }
-
-    if (value) {
-      navigator.clipboard.writeText(value)
-    } else if (from) {
-      const copyElement = document.getElementById(from);
-      let copyText = copyElement?.innerText
-
-      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
-        copyText = copyElement.value;
-      }
-
-      if (copyText) {
-        navigator.clipboard.writeText(copyText)
-      }
-    }
-
-    setCopied(true)
-
-    setTimeout(() => {
-      setCopied(false)
-    }, 1000);
-  }
-
   return (
-    <div
-        {...ariaProps}
+    <div {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
     >
-      <Tooltip 
+      <Tooltip
           forceOpenTooltip={copied}
           placement={tooltipPlacement}
           showTooltip={false}
           text={tooltipText}
       >
-        <Button
-            icon='copy'
+        <Button icon="copy"
             onClick={copy}
         >
-          { text }
+          {text}
         </Button>
       </Tooltip>
     </div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react'
+import usePBCopy from '../../pb_copy_button/usePBCopy'
+import Body from '../../pb_body/_body'
+import Textarea from '../../pb_textarea/_textarea'
+import Tooltip from '../../pb_tooltip/_tooltip'
+
+const CopyButtonHook = ({...props}) => {
+  // This is how you can use the copy button hook to copy text to the clipboard
+  // eslint-disable-next-line no-unused-vars
+  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
+  // I added a tooltip so it looks better in the ui
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  const handleCopy = () => {
+    copyToClipboard()
+    setShowTooltip(true)
+    setTimeout(() => setShowTooltip(false), 1500)
+  }
+
+  useEffect(() => {
+    const el = document.getElementById('hookbody')
+    if (!el) return
+
+    el.addEventListener('click', handleCopy)
+    return () => {
+      el.removeEventListener('click', handleCopy)
+    }
+  }, [copyToClipboard])
+
+  return (
+    <div>
+      <Tooltip
+          delay={{ close: 1000 }}
+          forceOpenTooltip={showTooltip}
+          placement="top"
+          showTooltip={false}
+          text="Copied!"
+      >
+        <Body
+            cursor="pointer"
+            id="hookbody"
+            text="I'm a custom copy hook! Click this body to copy this text!"
+        />
+      </Tooltip>
+
+      <Textarea
+          {...props}
+          placeholder="Paste here"
+      />
+    </div>
+  )
+}
+
+export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md

@@ -0,0 +1,3 @@
+We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
+
+`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("body", props: { cursor: "pointer", data: { "external-copy-from": "hookbody"} }) do %>
+  <span id="hookbody">I'm a custom copy hook! Click this body to copy this text!</span>
+<% end %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_selector: "#hookbody",
+  tooltip_id: "hookbody_tooltip",
+  position: 'top',
+  trigger_method: "click"
+}) do %>
+  Copied!
+<% end %>
+
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md

@@ -0,0 +1,3 @@
+You can use any external control (like the text itself or an icon) to copy. To use this hook, set the `data-external-copy-from` attribute on the external control to the copying ID. This will grab the `innerText` from `your_id` element, or `value` if it is an input element. Alternatively, you can set a `data-external-copy-value` attribute and copy custom text.
+
+See the code example for details. 

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

@@ -2,7 +2,9 @@ examples:
   rails:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  - copy_button_hook: Copy Hook

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

@@ -1,2 +1,3 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
-export { default as CopyButtonFrom } from './_copy_button_from.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
+export { default as CopyButtonHook } from './_copy_button_hook.jsx'

data/app/pb_kits/playbook/pb_copy_button/index.js

@@ -1,6 +1,33 @@
 import PbEnhancedElement from "../pb_enhanced_element"
 
-export default class PbCopyButton extends PbEnhancedElement {
+function getTextFromElement(element) {
+  if (!element) return ''
+  return element.tagName.toLowerCase() === 'input'
+    ? element.value
+    : element.innerText
+}
+
+function copyTextToClipboard(text) {
+  if (!text) return
+  navigator.clipboard.writeText(text)
+    .catch(err => console.error('Failed to copy text:', err))
+}
+
+function handleExternalControlCopyClick(element) {
+  const value = element.getAttribute('data-external-copy-value')
+  const fromId = element.getAttribute('data-external-copy-from')
+
+  if (value) {
+    copyTextToClipboard(value)
+  } else if (fromId) {
+    const fromElement = document.querySelector(`#${fromId}`)
+    copyTextToClipboard(getTextFromElement(fromElement))
+  } else {
+    console.warn('Failed to copy:', element)
+  }
+}
+
+export class PbCopyButton extends PbEnhancedElement {
   static get selector() {
     return '.pb_copy_button_kit'
   }
@@ -20,28 +47,27 @@ export default class PbCopyButton extends PbEnhancedElement {
   }
 
   handleClick() {
+    const value = this.element.getAttribute('data-copy-value')
     const fromId = this.element.getAttribute('data-from')
-    if (fromId) {
-      const fromElement = document.querySelector(`#${fromId}`)
-      if (fromElement) {
-        let contentToCopy = ''
-        if (fromElement.tagName.toLowerCase() === 'input') {
-          contentToCopy = fromElement.value
-        } else {
-          contentToCopy = fromElement.innerText
-        }
-        navigator.clipboard.writeText(contentToCopy)
-          .catch(err => console.error('Failed to copy text', err))
-        return
-      }
-    }
 
-    const textToCopy = this.element.getAttribute('data-copy-value')
-    if (textToCopy) {
-      navigator.clipboard.writeText(textToCopy)
-        .catch(err => console.error('Failed to copy text', err))
+    if (value) {
+      copyTextToClipboard(value)
+    } else if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      copyTextToClipboard(getTextFromElement(fromElement))
     } else {
-      console.warn('No data-copy-value attribute found or data-from element')
+      console.warn('No data-copy-value or data-from attribute found')
     }
   }
 }
+
+export function addCopyEventListeners() {
+  const externalCopyElements = [
+    ...document.querySelectorAll('div[data-external-copy-value]'),
+    ...document.querySelectorAll('div[data-external-copy-from]')
+  ]
+
+  externalCopyElements.forEach(element => {
+    element.addEventListener('click', () => handleExternalControlCopyClick(element))
+  })
+}

data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts

@@ -0,0 +1,45 @@
+import { useState, useRef, useEffect } from 'react'
+
+type UsePBCopyProps = {
+  value?: string
+  from?: string
+  timeout?: number
+}
+
+export default function usePBCopy({
+  value = '',
+  from = '',
+  timeout = 0,
+}: UsePBCopyProps) {
+  const [copied, setCopied] = useState(false)
+  const timerRef = useRef<number>()
+
+  const copy = () => {
+    if (!value && !from) return
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else {
+      const el = document.getElementById(from)
+      let text = el?.innerText
+      if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
+        text = el.value
+      }
+      if (text) navigator.clipboard.writeText(text)
+    }
+
+    setCopied(true)
+    window.clearTimeout(timerRef.current)
+    timerRef.current = window.setTimeout(() => {
+      setCopied(false)
+    }, timeout)
+  }
+
+  useEffect(() => {
+    return () => {
+      window.clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  return [copied, copy] as const
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -50,6 +50,10 @@ type DatePickerProps = {
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
+  controlsStartId?: string,
+    controlsEndId?: string,
+    syncStartWith?: string,
+    syncEndWith?: string,
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
@@ -98,6 +102,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     staticPosition = true,
     thisRangesEndToday = false,
     yearRange = [1900, 2100],
+    controlsStartId,
+    controlsEndId,
+    syncStartWith,
+    syncEndWith,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -134,6 +142,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       staticPosition,
       thisRangesEndToday,
       yearRange,
+      controlsStartId,
+      controlsEndId,
+      syncStartWith,
+      syncEndWith,
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -77,6 +77,14 @@ module Playbook
                                default: ""
       prop :validation_message, type: Playbook::Props::String,
                                 default: ""
+      prop :controls_start_id, type: Playbook::Props::String,
+                               default: ""
+      prop :controls_end_id, type: Playbook::Props::String,
+                             default: ""
+      prop :sync_start_with, type: Playbook::Props::String,
+                             default: ""
+      prop :sync_end_with, type: Playbook::Props::String,
+                           default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -108,6 +116,10 @@ module Playbook
           staticPosition: static_position,
           thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
+          controlsStartId: controls_start_id,
+          controlsEndId: controls_end_id,
+          syncStartWith: sync_start_with,
+          syncEndWith: sync_end_with,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -32,7 +32,11 @@ type DatePickerConfig = {
   thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
-  yearRange: number[]
+  yearRange: number[],
+  controlsStartId?: string,
+    controlsEndId?: string,
+    syncStartWith?: string,
+    syncEndWith?: string,
 } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
 
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
@@ -67,6 +71,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
+    controlsStartId,
+    controlsEndId,
+    syncStartWith,
+    syncEndWith,
   } = config
 
   // ===========================================================
@@ -275,6 +283,47 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
+  // === Automatic Sync Logic for 3 input range pattern===
+
+  // If this is a quickpick that controls start and end
+  if (selectionType === "quickpick" && (controlsStartId || controlsEndId)) {
+    picker.config.onClose.push((selectedDates:string) => {
+      const [start, end] = selectedDates;
+
+      if (controlsStartId) {
+        const startPicker = (document.querySelector(`#${controlsStartId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        startPicker?.setDate(start, true);
+      }
+
+      if (controlsEndId) {
+        const endPicker = (document.querySelector(`#${controlsEndId}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        endPicker?.setDate(end, true);
+      }
+    });
+  }
+
+  // If this is a start picker that syncs with a quickpick
+  if (syncStartWith) {
+    picker.config.onClose.push((selectedDates: string) => {
+      if (selectedDates?.length) {
+        const quickpick = (document.querySelector(`#${syncStartWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
+      }
+    });
+  }
+
+  // If this is an end picker that syncs with a quickpick
+  if (syncEndWith) {
+    picker.config.onClose.push((selectedDates: string) => {
+      if (selectedDates?.length) {
+        const quickpick = (document.querySelector(`#${syncEndWith}`) as HTMLElement & { _flatpickr?: any })?._flatpickr;
+        quickpick?.clear();
+      }
+    });
+  }
+// === End of Automatic Sync Logic ===
+
+    
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

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

@@ -1,4 +1,4 @@
-<%= pb_rails("date_picker", props: { 
-  error: "Invalid date. Please pick a valid date.",
+<%= pb_rails("date_picker", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
   picker_id: "date-picker-error"
 }) %>

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

@@ -1,11 +1,14 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
+import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error="Invalid date. Please pick a valid date."
+        error={<>
+          <Icon icon="warning" /> Invalid date. Please pick a valid date.
+        </>}
         pickerId="date-picker-error"
         {...props}
     />

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

@@ -1,3 +1,7 @@
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selection_type` must be set to `quickpick`
+
 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.md

@@ -1 +1 @@
-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.
+Use `this_ranges_end_today`/`thisRangesEndToday` to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the `this_ranges_end_today`/`thisRangesEndToday` prop is used, end date on that range will be today's date.

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

@@ -1 +1,5 @@
-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.
+To use the `quickpick`:
+- prop `mode` must be set to `range`
+- prop `selectionType` must be set to `quickpick`
+
+Use the `onClose` handler function to access the startDate and endDate values. Check the [`onClose` example](https://playbook.powerapp.cloud/kits/date_picker/react#onclose) for more information.