playbook_ui 18.2.0.pre.rc.3 → 18.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c86866d416fa61cd6ef95462feacdaab4821a38f7512d171709d74ae355ca79
-  data.tar.gz: 881dc11beb08455d597c2fef659070af84626c562597566f69fcdb773a61f5e7
+  metadata.gz: b5ac75f8f899c8e692ebc15d9e4c233540f1b055707c362099ca5f6bd23da085
+  data.tar.gz: 96f74ff346de6735599cbd46bf9d8b81e541b7ad7b258275e4174a922fe637ac
 SHA512:
-  metadata.gz: 2a6e88281370f5ce11a7467aab89ed9db923a593f34748c39f43143488daa0f92b9f55b8eb9c1636c2f2c64215a3b092cdd5fbc3702315cc9612ef9cfe2327b0
-  data.tar.gz: 398a941db88d54157eb9ca15fb952d290961fc05074a7c62ec0e6246cf315ae9d75da943f31d57b6c654d99652f32036b33c4dc1fda9bd3b2454e1cf524dae50
+  metadata.gz: c8dc8cf0775094f3d738ff9fdb1bc5a7101d9f950c6503dd75c598da03e0a4353d9466a864947fbc905a42997a60f3e8ee29569179106b9c8fc796feb2fe6819
+  data.tar.gz: 119a30f2687af34eb8bfbc1c942182d128838437cb8c15f71a061600892d9fe5498fe400db526ee306120e4b90f220d0f97bb1467e829191e6b5fe9c35a09eaf

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_icon_stat_value/_icon_stat_value.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,7 +34,7 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -94,6 +95,7 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx

@@ -3,6 +3,7 @@ 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 Icon from '../pb_icon/_icon'
@@ -18,7 +19,7 @@ type IconValueProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
-}
+} & GlobalEventProps
 
 const IconValue = (props: IconValueProps): React.ReactElement => {
   const {
@@ -46,6 +47,7 @@ const IconValue = (props: IconValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_label_value/_label_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 DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -25,7 +26,7 @@ type LabelValueProps = {
   icon?: string;
   description?: string;
   title?: string;
-};
+} & GlobalEventProps;
 
 const dateString = (value: Date) => {
   const month = DateTime.toMonthNum(value);
@@ -67,6 +68,7 @@ const LabelValue = (props: LabelValueProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
         title={title}

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

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

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
@@ -28,7 +29,7 @@ type MessageProps = {
   timestampObject?: Date,
   timezone?: string,
   alignTimestamp?: string,
-}
+} & GlobalEventProps
 
 const Message = (props: MessageProps) => {
   const {
@@ -68,6 +69,7 @@ const Message = (props: MessageProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Tooltip from '../pb_tooltip/_tooltip'
@@ -19,7 +20,7 @@ type MultipleUsersProps = {
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   withTooltip?: boolean,
   users: Array<{ [key: string]: string }>,
-}
+} & GlobalEventProps
 
 const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   const {
@@ -126,6 +127,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Badge from '../pb_badge/_badge'
@@ -17,7 +18,7 @@ type MultipleUsersStackedProps = {
   size?: "md" | "lg" | "sm" | "xl" 
   users: Array<{ [key: string]: string }>,
   variant: "default" | "bubble",
-}
+} & GlobalEventProps
 
 const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   const {
@@ -132,6 +133,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_stat_value/_stat_value.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 { buildHtmlProps } from '../utilities/props'
 import Title from '../pb_title/_title'
 
@@ -11,7 +12,7 @@ type StatValueProps = {
   id?: string,
   unit?: string,
   value: string | number,
-}
+} & GlobalEventProps
 
 const StatValue = (props: StatValueProps): React.ReactElement => {
   const {
@@ -53,6 +54,7 @@ const StatValue = (props: StatValueProps): React.ReactElement => {
         className={classnames('pb_stat_value_kit', globalProps(props), className)}
         id={id}
         {...htmlProps}
+        {...globalEventProps(props)}
     >
       <div className="pb_stat_value_wrapper">
         {displayValue(value)}

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

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

data/app/pb_kits/playbook/pb_title_count/_title_count.tsx

@@ -4,6 +4,7 @@ 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 Title from '../pb_title/_title'
@@ -19,7 +20,7 @@ type TitleCountProps = {
   id?: string,
   title?: string,
   size?: "lg" | "sm",
-};
+} & GlobalEventProps;
 
 const TitleCount = (props: TitleCountProps): React.ReactElement => {
   const {
@@ -50,6 +51,7 @@ const TitleCount = (props: TitleCountProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
         id={id}
     >

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

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

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -16,7 +17,7 @@ type TitleDetailProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   title: string,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
   const {
@@ -40,6 +41,7 @@ const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classnames(pbCss, globalProps(props), className)}
         id={id}
     >

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

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