RubyGems - playbook_ui - Versions diffs - 13.23.0 → 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 - Mend

playbook_ui 13.23.0 → 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681

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 (47) hide show

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx ADDED Viewed

@@ -0,0 +1,118 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
+import DropdownContext from "../context";
+import Body from "../../pb_body/_body";
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+type DropdownTriggerProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  customDisplay?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+};
+const DropdownTrigger = (props: DropdownTriggerProps) => {
+  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
+  const {
+    handleWrapperClick,
+    selected,
+    filterItem,
+    handleChange,
+    toggleDropdown,
+    isDropDownClosed,
+    inputRef,
+    isInputFocused,
+    setIsInputFocused
+  } = useContext(DropdownContext);
+  const handleKeyDown = useHandleOnKeyDown();
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_trigger"),
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children ? (
+        <div
+            onClick={() => toggleDropdown()}
+            style={{ display: "inline-block" }}
+        >
+          {children}
+        </div>
+      ) : (
+        <>
+          <Flex align="center"
+              borderRadius="lg"
+              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
+              cursor="text"
+              htmlOptions={{ onClick: () => handleWrapperClick(), tabIndex:"0" }}
+              justify="between"
+              paddingX="sm"
+              paddingY="xs"
+          >
+            <FlexItem>
+                <Flex align="center">
+                    {customDisplay ? (
+                      <Flex align="center">
+                          {customDisplay}
+                          <Body paddingLeft="xs">
+                              <b>{selected.label}</b>
+                          </Body>
+                      </Flex>
+                      ) : (
+                        selected.label && <Body text={selected.label} />
+                      )
+                    }
+                    <input
+                        className="dropdown_input"
+                        onChange={handleChange}
+                        onClick={() => toggleDropdown()}
+                        onFocus={() => setIsInputFocused(true)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={selected.label ? "" : "Select..."}
+                        ref={inputRef}
+                        value={filterItem}
+                    />
+                </Flex>
+            </FlexItem>
+            <FlexItem>
+                <Body color="light"
+                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                >
+                    <Icon cursor="pointer"
+                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                        size="sm"
+                    />
+                </Body>
+            </FlexItem>
+          </Flex>
+        </>
+      )}
+    </div>
+  );
+};
+export default DropdownTrigger;

data/app/pb_kits/playbook/pb_list/_list_item.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type ListItemProps = {
   aria?: { [key: string]: string },
@@ -11,7 +11,7 @@ type ListItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,
-}
+} & GlobalProps
 const ListItem = (props: ListItemProps) => {
   const {

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

@@ -7,17 +7,21 @@ import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
-import Control from './components/Control'
-import ClearIndicator from './components/ClearIndicator'
-import IndicatorsContainer from './components/IndicatorsContainer'
-import MenuList from './components/MenuList'
-import MultiValue from './components/MultiValue'
-import Option from './components/Option'
-import Placeholder from './components/Placeholder'
-import ValueContainer from './components/ValueContainer'
+import {
+  Control,
+  ClearIndicator,
+  IndicatorsContainer,
+  MenuList,
+  MultiValue,
+  Option,
+  Placeholder,
+  ValueContainer,
+} from "./components"
+import * as kitComponents from "./components"
 import { noop, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { Noop } from '../types'
+import { GenericObject, Noop } from '../types'
 /**
  * @typedef {object} Props
@@ -29,7 +33,7 @@ import { Noop } from '../types'
 type TypeaheadProps = {
   async?: boolean,
   className?: string,
-  components?: object,
+  components?: GenericObject,
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -100,7 +104,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
-    onMultiValueClick: (_option: SelectValueType) => { },
+    onMultiValueClick: (_option: SelectValueType): any => undefined,
     ...props,
   }
@@ -137,19 +141,23 @@ const Typeahead = ({
   const inlineClass = selectProps.inline ? 'inline' : null
   return (
-    <div
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(classes, inlineClass)}
+    <div
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(classes, inlineClass)}
     >
       <Tag
-        classNamePrefix="typeahead-kit-select"
-        error={error}
-        onChange={handleOnChange}
-        {...selectProps}
+          classNamePrefix="typeahead-kit-select"
+          error={error}
+          onChange={handleOnChange}
+          {...selectProps}
       />
     </div>
   )
 }
+Object.keys(kitComponents).forEach((k) => {
+  (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
+})
 export default Typeahead

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

@@ -1,10 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
-const MenuList = (props: any) => (
+const MenuList = (props: any) => {
+  return (
   <components.MenuList {...props}>
     {props.children}
+    {props.footer}
   </components.MenuList>
-)
+)}
 export default MenuList

data/app/pb_kits/playbook/pb_typeahead/components/index.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import Control from './Control'
+import ClearIndicator from './ClearIndicator'
+import IndicatorsContainer from './IndicatorsContainer'
+import MenuList from './MenuList'
+import MultiValue from './MultiValue'
+import Option from './Option'
+import Placeholder from './Placeholder'
+import ValueContainer from './ValueContainer'
+export {
+  Control,
+  ClearIndicator,
+  IndicatorsContainer,
+  MenuList,
+  MultiValue,
+  Option,
+  Placeholder,
+  ValueContainer,
+}

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import {
+  Button,
+} from '../..'
+import Typeahead from '../_typeahead'
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Amaranth', value: '#9F2B68' },
+  { label: 'Key Lime', value: '#DAF7A6' },
+  { label: 'Turquois', value: '#00FFD0' },
+]
+const TypeaheadCustomMenuList = (props) => {
+  const defaultColorOptions = options.slice(0, 3)
+  const [colorOptions, setColorOptions] = useState(defaultColorOptions)
+  const moreToLoad = colorOptions.length == defaultColorOptions.length
+  const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
+  const menuListProps = {
+    footer: (<Button
+        margin="sm"
+        onClick={loadColors}
+        text={`Load ${moreToLoad ? "More" : "Less"}`}
+             />)
+  }
+  const MenuList = (props) => (
+    <Typeahead.MenuList
+        {...menuListProps}
+        {...props}
+    />
+  )
+  return (
+    <Typeahead
+        components={{ MenuList }}
+        label="Colors"
+        options={colorOptions}
+        {...props}
+    />
+  )
+}
+export default TypeaheadCustomMenuList

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

@@ -46,7 +46,7 @@ const TypeaheadWithHighlight = (props) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
-        highlighted => `<mark>${highlighted}</mark>`
+        (highlighted) => `<mark>${highlighted}</mark>`
       )
     }
     return (

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml CHANGED Viewed

@@ -22,3 +22,4 @@ examples:
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
+    - typeahead_custom_menu_list: Custom MenuList

data/app/pb_kits/playbook/pb_typeahead/docs/index.js CHANGED Viewed

@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
+export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'

data/app/pb_kits/playbook/playbook-doc.js CHANGED Viewed

@@ -34,6 +34,7 @@ import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
+import * as Dropdown from 'pb_dropdown/docs'
 import * as FileUpload from 'pb_file_upload/docs'
 import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
@@ -136,6 +137,7 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
+  ...Dropdown,
   ...FileUpload,
   ...Filter,
   ...FixedConfirmationToast,

data/app/pb_kits/playbook/tokens/_colors.scss CHANGED Viewed

@@ -213,7 +213,7 @@ $status_color_text: (
   warning:            darken($warning, 10%),
   error:              $error,
   info:               $info,
-  neutral:            darken($neutral, 15%),
+  neutral:            $text_lt_light,
   primary:            $primary
 );

data/dist/menu.yml CHANGED Viewed

@@ -254,6 +254,10 @@ kits:
         platforms: *web
         description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
         status: "stable"
+      - name: dropdown
+        platforms: *react_only
+        description: ""
+        status: "beta"
       - name: "multi_level_select"
         platforms: *web
         description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
@@ -460,4 +464,4 @@ kits:
       - name: "user"
         platforms: *web
         description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
-        status: "stable"
+        status: "stable"