playbook_ui 18.2.0.pre.rc.3 → 18.3.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c86866d416fa61cd6ef95462feacdaab4821a38f7512d171709d74ae355ca79
-  data.tar.gz: 881dc11beb08455d597c2fef659070af84626c562597566f69fcdb773a61f5e7
+  metadata.gz: 88b3c7acb984d6ec746498490e23eb8d4331520919cc6c3e609e9fff446bdaa3
+  data.tar.gz: 2d681d215b4fb8d8c0059779981325e75289915e5ffa4df4a1a76f03c5327e3f
 SHA512:
-  metadata.gz: 2a6e88281370f5ce11a7467aab89ed9db923a593f34748c39f43143488daa0f92b9f55b8eb9c1636c2f2c64215a3b092cdd5fbc3702315cc9612ef9cfe2327b0
-  data.tar.gz: 398a941db88d54157eb9ca15fb952d290961fc05074a7c62ec0e6246cf315ae9d75da943f31d57b6c654d99652f32036b33c4dc1fda9bd3b2454e1cf524dae50
+  metadata.gz: ba772fd2326b5e74beabc4a8a36d99b3e85abaf3fdfa961b0768e59f5742b22fab17b994a53e32ce914d952f332d0ac430af15dd06f5b7f2a09beba8fa9881ea
+  data.tar.gz: f687567b001ed365e906da885b8528d2baf542e4e0f752ee98e7dc3a87d48f4e9b2e563d302afbb843a558eadd7bc50f7763bf1bc2a703f7b16d347b51c7123b

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -28,7 +29,7 @@ type CurrencyProps = {
   unit?: string,
   unstyled?: boolean,
   commaSeparator?: boolean,
-}
+} & GlobalEventProps
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
   lg: 1,
@@ -132,6 +133,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_currency/kit.schema.json

@@ -137,6 +137,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Currency } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import StatChange from '../pb_stat_change/_stat_change'
@@ -23,7 +24,7 @@ type DashboardValueProps = {
     unit?: string,
     value?: string | number
   }
-}
+} & GlobalEventProps
 
 const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
   const {
@@ -52,6 +53,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_dashboard_value/kit.schema.json

@@ -43,6 +43,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DashboardValue } from 'playbook-ui'",

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

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
+
+const USERS = [
+  {
+    label: "Wade Winningham",
+    title: "Nitro Principal Developer",
+    territory: "PHL",
+    value: "wadeWinningham",
+  },
+  {
+    label: "Carlos Lima",
+    title: "Nitro Developer",
+    territory: "PHL",
+    value: "carlosLima",
+  },
+  {
+    label: "Stephen Marshall",
+    title: "Senior Nitro Developer",
+    territory: "PHL",
+    value: "stephenMarshall",
+  },
+  {
+    label: "Jasper Furniss",
+    title: "Lead User Experience Engineer",
+    territory: "PHL",
+    value: "jasperFurniss",
+  },
+]
+
+const escapeRegExp = (value = "") => (
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+)
+
+const highlighted = (text, searchInput) => {
+  if (!searchInput) return text
+
+  const regex = new RegExp(`(${escapeRegExp(searchInput)})`, 'gi')
+
+  return text.split(regex).map((part, index) => (
+    part.toLowerCase() === searchInput.toLowerCase()
+      ? <mark key={`${part}-${index}`}>{part}</mark>
+      : <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
+  ))
+}
+
+const loadUsers = (searchInput) => {
+  const normalizedInput = searchInput.toLowerCase()
+
+  return Promise.resolve(USERS.filter(({ label, title }) => (
+    `${label} ${title}`.toLowerCase().includes(normalizedInput)
+  )))
+}
+
+const DropdownWithHighlight = (props) => {
+  const [searchInput, setSearchInput] = useState("")
+
+  const renderUser = ({ label, territory, title }) => (
+    <Flex>
+      <FlexItem>
+        <Avatar
+            marginRight="sm"
+            name={label}
+            size="sm"
+        />
+      </FlexItem>
+      <FlexItem>
+        <Title size={4}>
+          {highlighted(label, searchInput)}
+        </Title>
+        <Body color="light">
+          {highlighted(title, searchInput)}{" • "}
+          {territory}
+        </Body>
+      </FlexItem>
+    </Flex>
+  )
+
+  return (
+    <Dropdown
+        async
+        autocomplete
+        defaultOptions={USERS}
+        label="Users"
+        loadOptions={loadUsers}
+        onInputChange={(input) => setSearchInput(input)}
+        onSelect={() => setSearchInput("")}
+        placeholder="Search users"
+        renderOption={renderUser}
+        {...props}
+    />
+  )
+}
+
+export default DropdownWithHighlight

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_highlight.md

@@ -0,0 +1,3 @@
+Use `onInputChange` to track the current search and `renderOption` to customize each option row. Split each field by the search input, then render matching text inside `<mark>` so users can quickly see why a result matched.
+
+This example uses `loadOptions` to search both the user's name and title.

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

@@ -51,6 +51,7 @@ examples:
   react:
   - dropdown_default: Default
   - dropdown_with_autocomplete: Autocomplete
+  - dropdown_with_highlight: With Highlight
   - dropdown_multi_select: Multi Select
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display: Multi Select with Form Pill Props

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

@@ -47,4 +47,5 @@ export { default as DropdownAsyncMultiSelect } from './_dropdown_async_multi_sel
 export { default as DropdownAsyncRichResults } from './_dropdown_async_rich_results.jsx'
 export { default as DropdownAsyncInitialOptions } from './_dropdown_async_initial_options.jsx'
 export { default as DropdownExternalSearch } from './_dropdown_external_search.jsx'
-export { default as DropdownQuickpickEnableTime } from './_dropdown_quickpick_enable_time.jsx'
+export { default as DropdownQuickpickEnableTime } from './_dropdown_quickpick_enable_time.jsx'
+export { default as DropdownWithHighlight } from './_dropdown_with_highlight.jsx'

data/app/pb_kits/playbook/pb_form/docs/_description_react.md

@@ -0,0 +1,3 @@
+Use `Controller` to build React forms with Playbook kits and [react-hook-form](https://react-hook-form.com/). It keeps every field's binding consistent, and it's required for kits that don't forward a ref to a native element or whose `onChange` sends a value instead of a DOM event.
+
+Pick an input below to see Defaults, Validation, Default Values, and Multi-Column layout patterns one field at a time.