RubyGems - playbook_ui - Versions diffs - 13.32.0.pre.alpha.play1416movealiaslogic3266 → 13.33.0.pre.alpha.PLAY1454formpillicons3309 - Mend

playbook_ui 13.32.0.pre.alpha.play1416movealiaslogic3266 → 13.33.0.pre.alpha.PLAY1454formpillicons3309

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED Viewed

@@ -24,7 +24,7 @@ type TimeProps = {
   unstyled?: boolean;
 } & GlobalProps
-const Time = (props: TimeProps) => {
+const Time = (props: TimeProps): React.ReactElement => {
   const {
     align,
     className,
@@ -47,8 +47,8 @@ const Time = (props: TimeProps) => {
   return (
     <div
-      {...htmlProps}
-      className={classes}
+        {...htmlProps}
+        className={classes}
     >
       {showIcon && (
         unstyled

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx CHANGED Viewed

@@ -36,7 +36,7 @@ const dateTimeIso = (dateValue: Date) => {
   return DateTime.toIso(dateValue)
 }
-const TimeRangeInline = (props: TimeRangeInlineProps) => {
+const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_timeline/_item.tsx CHANGED Viewed

@@ -26,7 +26,7 @@ const TimelineItem = ({
   iconColor = 'default',
   lineStyle = 'solid',
   ...props
-}: ItemProps) => {
+}: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ const Timeline = ({
   orientation = 'horizontal',
   showDate = false,
   ...props
-}: TimelineProps) => {
+}: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

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

@@ -18,7 +18,7 @@ type TitleDetailProps = {
   title: string,
 } & GlobalProps
-const TitleDetail = (props: TitleDetailProps) => {
+const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
   const {
     align = "left",
     aria = {},
@@ -37,19 +37,19 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(pbCss, globalProps(props), className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(pbCss, globalProps(props), className)}
+        id={id}
     >
       <Title
-        size={4}
-        text={title}
+          size={4}
+          text={title}
       />
       <Body
-        color="light"
-        text={detail}
+          color="light"
+          text={detail}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_toggle/_toggle.tsx CHANGED Viewed

@@ -42,7 +42,7 @@ const Toggle = ({
   size = 'sm',
   value,
   ...props
-}: Props) => {
+}: Props): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx CHANGED Viewed

@@ -50,8 +50,8 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     ...rest
   } = props
-  const dataProps: { [key: string]: any } = buildDataProps(data)
-  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const dataProps: { [key: string]: string } = buildDataProps(data)
+  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx CHANGED Viewed

@@ -52,7 +52,7 @@ const TreemapChart = ({
   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
   type = "treemap",
   ...props
-}: TreemapChartProps) => {
+}: TreemapChartProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -98,7 +98,6 @@ const TreemapChart = ({
   const [options, setOptions] = useState({});
   useEffect(() => {
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js CHANGED Viewed

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
 import React from 'react';
 import { render, screen } from '../utilities/test-utils';
 import TreemapChart from './_treemap_chart';

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx CHANGED Viewed

@@ -42,8 +42,8 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
   name?: string,
 }
@@ -77,7 +77,7 @@ const Typeahead = ({
   id,
   loadOptions = noop,
   ...props
-}: TypeaheadProps) => {
+}: TypeaheadProps): React.ReactElement => {
   const selectProps = {
     cacheOptions: true,
     components: {

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx CHANGED Viewed

@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
-const ClearContainer = (props: any) => {
+const ClearContainer = (props: any): React.ReactElement => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [true])
+  }, [])
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx CHANGED Viewed

@@ -5,20 +5,24 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 type Props = {
-  selectProps: any,
+  selectProps: {
+    dark?: boolean,
+    label: string,
+    error?: string,
+  },
 }
-const TypeaheadControl = (props: Props) => (
+const TypeaheadControl = (props: Props): React.ReactElement => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
+        dark={props.selectProps.dark}
+        error={props.selectProps.error}
+        label={props.selectProps.label}
     >
       <Flex>
         <components.Control
-          className="text_input"
-          {...props}
+            className="text_input"
+            {...props}
         />
       </Flex>
     </TextInput>

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx CHANGED Viewed

@@ -1,10 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
-const IndicatorsContainer = (props: any) => (
+type IndicatorsContainerProps = {
+  children: React.ReactNode,
+}
+const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx CHANGED Viewed

@@ -1,7 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
-const MenuList = (props: any) => {
+type MenuListProps = {
+  children: React.ReactNode,
+  footer: React.ReactNode,
+}
+const MenuList = (props: MenuListProps): React.ReactElement => {
   return (
   <components.MenuList {...props}>
     {props.children}

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx CHANGED Viewed

@@ -7,12 +7,11 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
-  multiValueTemplate: any,
   removeProps: any,
   selectProps: any,
 }
-const MultiValue = (props: Props) => {
+const MultiValue = (props: Props): React.ReactElement => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
   const { multiKit } = props.selectProps
@@ -27,36 +26,36 @@ const MultiValue = (props: Props) => {
   return (
     <components.MultiValueContainer
-      className="text_input_multivalue_container"
-      {...props}
+        className="text_input_multivalue_container"
+        {...props}
     >
       {multiKit === 'badge' &&
         <Badge
-          closeProps={removeProps}
-          removeIcon
-          text={label}
-          variant="primary"
+            closeProps={removeProps}
+            removeIcon
+            text={label}
+            variant="primary"
         />
       }
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
-          avatarUrl={imageUrl}
-          closeProps={removeProps}
-          marginRight="xs"
-          name={label}
-          size={multiKit === 'smallPill' ? 'small' : ''}
-          text=''
+            avatarUrl={imageUrl}
+            closeProps={removeProps}
+            marginRight="xs"
+            name={label}
+            size={multiKit === 'smallPill' ? 'small' : ''}
+            text=''
         />
       }
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-          closeProps={removeProps}
-          marginRight="xs"
-          name=''
-          size={multiKit === 'smallPill' ? 'small' : ''}
-          text={label}
+            closeProps={removeProps}
+            marginRight="xs"
+            name=''
+            size={multiKit === 'smallPill' ? 'small' : ''}
+            text={label}
         />
       }
     </components.MultiValueContainer>

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { components } from 'react-select'
 import User from '../../pb_user/_user'
-const Option = (props: any) => {
+const Option = (props: any): React.ReactElement => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +14,11 @@ const Option = (props: any) => {
       <>
         {!valueComponent && imageUrl &&
           <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
+              align="left"
+              avatarUrl={imageUrl}
+              dark={props.selectProps.dark}
+              name={props.label}
+              orientation="horizontal"
           />
         }

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx CHANGED Viewed

@@ -4,19 +4,19 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
-const Placeholder = (props: any) => (
+const Placeholder = (props: any): React.ReactElement => (
   <>
     <Flex
-      align="center"
-      className="placeholder"
+        align="center"
+        className="placeholder"
     >
       <components.IndicatorsContainer
-        {...props}
+          {...props}
       />
       {props.selectProps.plusIcon &&
         <Icon
-          className="typeahead-plus-icon"
-          icon="plus"
+            className="typeahead-plus-icon"
+            icon="plus"
         />
       }
     </Flex>

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
 import React from 'react'
 import { components } from 'react-select'
-const ValueContainer = (props: any) => (
+const ValueContainer = (props: any): React.ReactElement => (
   <components.ValueContainer
-    className="text_input_value_container"
-    {...props}
+      className="text_input_value_container"
+      {...props}
   />
 )

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx CHANGED Viewed

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb CHANGED Viewed

@@ -1,63 +1,28 @@
-<%= pb_rails("typeahead", props: {
-  label: "user",
-  name: :foo,
-  data: { typeahead_example: true },
-  input_options: {
-    classname: "my-typeahead-class",
-    data: {
-      typeahead_testing: "data field test"
-    },
-    id: "typeahead-input-id-test",
-  },
-})%>
-<br><br><br>
-<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
-  <%= pb_rails("body") do %>
-    Use the above input to search for users on Github, and see the results as you type.
-  <% end %>
-  <%= pb_rails("body") do %>
-    When you make a selection, you will see it appear in the list below
-  <% end %>
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
-  <div data-selected-option></div>
-<% end %>
-<template data-typeahead-example-result-option>
-  <%= pb_rails("user", props: {
-    name: tag(:slot, name: "name"),
-    orientation: "horizontal",
-    align: "left",
-    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
-    avatar: true
-    }) %>
-</template>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
-    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
-      .then(response => response.json())
-      .then((result) => {
-        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
-        event.detail.setResults((result.items || []).map((user) => {
-          const wrapper = resultOptionTemplate.content.cloneNode(true)
-          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
   })
-  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
-    if (!event.target.dataset.typeaheadExample) return;
-    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
-    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
+    console.log('All options cleared')
   })
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx CHANGED Viewed

@@ -47,8 +47,6 @@ const promiseOptions = (inputValue) =>
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -59,6 +57,8 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
   return (
     <>