playbook_ui 12.5.0.pre.alpha.datepickerinput1 → 12.5.0.pre.alpha.filter1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d384648066bfca20bd817be4065e8d4710f06672a2a335e451a7748b60c2a74
-  data.tar.gz: 5b95638a4466aedc9ad816b84b22fda494c6c3556ad78bcb9b8053a3a18766fd
+  metadata.gz: f38164cc9c607578c2f74686bf2715e8006cffd060879d9c23cc52021e42109e
+  data.tar.gz: 00bdea5c26205ae76a885adc0872c05b36c4965d7736ad60aa685d8cb7ac268c
 SHA512:
-  metadata.gz: cfb26ce98684faae10c092af1ae16e9f8b3b5641343a5c60164eb489290c1e328e355c3c400822adc0366965ba9d00d4600073b3791b5ef754a6150baa00445e
-  data.tar.gz: c09f2ff8f7b8b8e3f803021421783fc98d931d838e0485c4b0345ac3d654999a08fa07e038e3be68ff2947aba85c4e070e4e80327c8a14fc60dc9e6a26270851
+  metadata.gz: 42f54dad230676a4f4a9546ac425c3cd0e3772540df2b367a811a83c488176461f5253305865d93e50283d482eb0dbe2cb14ca4feb9e4c52f83d4eac7b576875
+  data.tar.gz: b7f08be337b4876fc30ac264aa70332793e463526c1b90ddfc32a4335009e61506d313bd4b246d80c301e0019d3867fffcda77ea526f46c16a2dcd2b321ce487

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

@@ -5,7 +5,8 @@
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
-@import "./sass_partials/input_styles";
+
+
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -19,10 +20,8 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  &:focus,
-  :focus-within {
-    div.cal_icon_wrapper,
-    input.date_picker_input {
+  &:focus, :focus-within {
+    div.cal_icon_wrapper, input.text_input{
       @include transition_default;
       border-color: $primary;
     }
@@ -34,20 +33,18 @@
   @import "./sass_partials/header_styles";
   @import "./sass_partials/overrides";
 
-  .date_picker_input.flatpickr-input {
+  .text_input.flatpickr-input {
     text-overflow: ellipsis;
     padding-right: $space_xl + 10 !important;
   }
-
   // Calendar Shadow and Border
   .flatpickr-calendar {
     box-shadow: $shadow_deeper;
     border: 1px solid $border_light;
   }
-
   // Hide Caret
   &:before,
   &:after {
     content: none;
   }
-}
+}

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

@@ -5,13 +5,13 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
+
 import Icon from '../pb_icon/_icon'
-import Caption from '../pb_caption/_caption'
-import Body from '../pb_body/_body'
+import TextInput from '../pb_text_input/_text_input'
 
 type DatePickerProps = {
   allowInput?: boolean,
-  aria?: { [key: string]: string },
+  aria?: {[key: string]: string},
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -27,15 +27,15 @@ type DatePickerProps = {
   hideLabel?: boolean,
   id?: string,
   inLine?: boolean,
-  inputAria?: { [key: string]: string },
-  inputData?: { [key: string]: string },
-  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
+  inputAria?: {[key: string]: string},
+  inputData?: {[key: string]: string},
+  inputOnChange?: (arg: string) => void,
   inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: string,
+  pickerId?: ArrayLike<Node> | Node | string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -68,8 +68,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     id,
     inLine = false,
-    inputAria = {},
-    inputData = {},
+    inputAria,
+    inputData,
     inputOnChange,
     inputValue,
     label = 'Date Picker',
@@ -87,14 +87,11 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
-    yearRange = [1900, 2100],
+    yearRange = [ 1900, 2100 ],
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const inputAriaProps = buildAriaProps(inputAria)
-  const inputDataProps = buildDataProps(inputData)
-
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
     globalProps(props),
@@ -131,13 +128,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
-    if (dark) {
+    if (dark){
       base += ' dark'
     }
-    if (hideLabel) {
+    if (hideLabel){
       base += ' no_label_shift'
     }
-    if (error) {
+    if (error){
       base += ' error'
     }
     return base
@@ -145,75 +142,61 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
-      <div
-        {...inputAriaProps}
-        {...inputDataProps}
-        className="input_wrapper">
-
-        <Caption
-          className="pb_date_picker_kit_label"
-          text={hideLabel ? null : label}
-        />
-
-        <div className="date_picker_input_wrapper">
-          <input
+      <div className="input_wrapper">
+        <TextInput
+            aria={inputAria}
             autoComplete="off"
-            className="date_picker_input"
+            dark={dark}
+            data={inputData}
             disabled={disableInput}
+            error={error}
             id={pickerId}
+            label={hideLabel ? null : label}
             name={name}
             onChange={inputOnChange}
             placeholder={placeholder}
             value={inputValue}
-          />
-
-          {error && <Body
-            status="negative"
-            text={error}
-            variant={null}
-          />
-          }
-        </div>
+        />
 
-        {!hideIcon &&
+        { !hideIcon &&
           <div
-            className={iconWrapperClass()}
-            id={`cal-icon-${pickerId}`}
+              className={iconWrapperClass()}
+              id={`cal-icon-${pickerId}`}
           >
-            <Icon
+          <Icon
               className="cal_icon"
               icon="calendar-alt"
-            />
-          </div>
+          />
+        </div>
         }
 
-        {hideIcon && inLine ?
+        { hideIcon && inLine ? 
           <div>
             <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
+                className={iconWrapperClass()}
+                id={`${pickerId}-icon-plus`}
             >
               <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
+                  className="date-picker-plus-icon"
+                  icon="plus"
               />
             </div>
             <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
+                className={iconWrapperClass()}
+                id={`${pickerId}-angle-down`}
             >
-              <Icon
-                className="angle_down_icon"
-                icon="angle-down"
-              />
+                <Icon
+                    className="angle_down_icon"
+                    icon="angle-down" 
+                />
             </div>
-          </div>
-          : null}
+          </div>  
+        : null }
       </div>
     </div>
   )

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

@@ -112,7 +112,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // ===========================================================
 
   flatpickr(`#${pickerId}`, {
-    allowInput,
     closeOnSelect,
     disableMobile: true,
     dateFormat: getDateFormat(),

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { isEmpty, map, omitBy } from 'lodash'
+
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+
+export type FilterDescription = {
+  [key: string]: string | null | boolean,
+}
+
+export type CurrentFiltersProps = {
+  dark: boolean,
+  filters: FilterDescription,
+}
+
+const hiddenFilters = (value: any) => isEmpty(value) && value !== true
+
+const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
+  const displayableFilters = omitBy(filters, hiddenFilters)
+
+  return (
+    <div className="maskContainer">
+      { isEmpty(filters) &&
+      <div className="filters">
+        <Body
+            color="light"
+            paddingLeft="xs"
+            size={4}
+            tag="h4"
+            text="No Filter Selected"
+        />
+      </div>
+      }
+      { !isEmpty(filters) &&
+        <div className="filters">
+          <div className="left_gradient" />
+            {map(displayableFilters, (value, name) => (
+              <div
+                  className="filter"
+                  key={`filter-${name}`}
+              >
+                { value === true ? 
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="h4"
+                    text={name}
+                /> : 
+                <div>
+                  <Caption
+                      dark={dark}
+                      text={name}
+                  />
+                  <Title
+                      dark={dark}
+                      size={4}
+                      tag="h4"
+                      text={value}
+                  />
+                </div>    
+                }
+              </div>
+            ))}
+          <div className="right_gradient" />
+        </div>
+      }
+    </div>
+  )
+}
+
+export default CurrentFilters

data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx}

@@ -1,35 +1,33 @@
-/* @flow */
-
-import React, { Node } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../../utilities/globalProps'
+import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Card from '../../pb_card/_card'
 
-type FilterBackgroundProps = {
+export type FilterBackgroundProps = {
   background: boolean,
   className: string,
-  children: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   dark: boolean,
-}
+} & GlobalProps
 
-const FilterBackground = (props: FilterBackgroundProps) => {
+const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {
   const { background = true, className, children, dark } = props
 
   return (
     <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
-      <Choose>
-        <When condition={background}>
+      { background ? 
           <Card
               dark={dark}
               padding="none"
           >
             {children}
-          </Card>
-        </When>
-        <Otherwise>{children}</Otherwise>
-      </Choose>
+          </Card> : 
+          <>
+            {children}
+          </>
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 
 import CurrentFilters, { FilterDescription } from './CurrentFilters'
@@ -15,13 +13,14 @@ import SortMenu, {
 import Caption from '../../pb_caption/_caption'
 import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
+
 export type FilterDoubleProps = {
-  children: Node,
+  children?: React.ReactChild[] | React.ReactChild, 
   filters?: FilterDescription,
-  onSortChange: SortingChangeCallback,
+  onSortChange?: SortingChangeCallback,
   results?: number,
-  sortOptions: SortOptions,
-  sortValue?: SortValue,
+  sortOptions?: SortOptions,
+  sortValue?: SortValue[],
 } & FilterBackgroundProps
 
 const FilterDouble = ({
@@ -35,7 +34,7 @@ const FilterDouble = ({
   minWidth,
   placement,
   ...bgProps
-}: FilterDoubleProps) => (
+}: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
       dark={dark}
       {...bgProps}
@@ -49,7 +48,7 @@ const FilterDouble = ({
           minWidth={minWidth}
           placement={placement}
       >
-        {children}
+          {children}
       </FiltersPopover>
       <CurrentFilters
           dark={dark}

data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { isEmpty } from 'lodash'
 
@@ -16,12 +14,12 @@ import SortMenu, {
 } from './SortMenu'
 
 export type FilterSingleProps = {
-  children?: Node,
+  children?: React.ReactChild[] | React.ReactChild, 
   filters?: FilterDescription,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
-  sortValue?: SortValue,
+  sortValue?: SortValue[],
 } & FilterBackgroundProps
 
 const FilterSingle = ({
@@ -35,7 +33,7 @@ const FilterSingle = ({
   minWidth,
   placement,
   ...bgProps
-}: FilterSingleProps) => {
+}: FilterSingleProps): React.ReactElement => {
   return (
     <FilterBackground
         dark={dark}
@@ -46,31 +44,33 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        <If condition={children}>
-          <FiltersPopover
-              dark={dark}
-              minWidth={minWidth}
-              placement={placement}
-          >
+        { children && 
+          <>
+            <FiltersPopover
+                dark={dark}
+                minWidth={minWidth}
+                placement={placement}
+            >
             {children}
-          </FiltersPopover>
-          <CurrentFilters
-              dark={dark}
-              filters={filters}
-          />
-        </If>
+            </FiltersPopover>
+            <CurrentFilters
+                dark={dark}
+                filters={filters}
+            />
+          </>
+        }
         <ResultsCount
             dark={dark}
             results={results}
         />
-        <If condition={!isEmpty(sortOptions)}>
-          <SortMenu
-              dark={dark}
-              onChange={onSortChange}
-              options={sortOptions}
-              value={sortValue}
-          />
-        </If>
+        { !isEmpty(sortOptions) &&
+            <SortMenu
+                dark={dark}
+                onChange={onSortChange}
+                options={sortOptions}
+                value={sortValue}
+            />
+        }
       </Flex>
     </FilterBackground>
   )

data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx}

@@ -1,12 +1,15 @@
-/* @flow */
-
-import React, { Node, useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
-const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
+type FiltersPopoverProps = { 
+  children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
+  dark?: boolean,
+  minWidth?: string,
+  placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
+}
+const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -16,7 +19,6 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
         icon="filter"
         id="filter"
         onClick={toggle}
-        text="filter"
         variant="secondary"
     />
   )
@@ -30,11 +32,11 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
         shouldClosePopover={updateHide}
         show={!hide}
     >
-      <div className="pb-form">
-        {typeof children === 'function'
-          ? children({ closePopover: () => (updateHide(true)) })
-          : children}
-      </div>
+        <div className="pb-form">
+          {typeof children === 'function'
+            ? children({ closePopover: () => (updateHide(true)) })
+            : children}
+        </div>
     </PbReactPopover>
   )
 }

data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 
 import Caption from '../../pb_caption/_caption'
@@ -9,31 +7,58 @@ const resultsText = (results: number): string => results == 1 ? 'Result' : 'Resu
 
 type ResultsCountProps = {
   dark?: boolean,
-  results?: ?number,
+  results?: number | null,
   title?: boolean,
 }
-const ResultsCount = ({ dark, results, title }: ResultsCountProps) => (
-  <Choose>
-    <When condition={results && title}>
+const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
+  
+  const resultTitle = () => {
+    return (
       <TitleCount
           align="center"
           count={results}
           dark={dark}
           title={`${resultsText(results)}:`}
       />
-    </When>
-    <When condition={results}>
+    )
+  }
+
+  const justResults = () => {
+    return (
       <Caption
           className="filter-results"
           dark={dark}
           size="xs"
           text={`${results} ${resultsText(results)}`}
       />
-    </When>
-    <Otherwise>
-      <div />
-    </Otherwise>
-  </Choose>
-)
+    )
+  }
+
+  const displayResultsCount = () => {
+    if (results && title) {
+      return (
+        <>
+          {resultTitle()}
+        </>
+      )
+    } else if (results) {
+      return (
+        <>
+          {justResults()}
+        </>
+      )
+    } else {
+      return (
+        <div />
+      )
+    }
+  }
+  
+  return (
+    <>
+      {displayResultsCount()}
+    </>
+  )
+}
 
 export default ResultsCount

data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useState } from 'react'
 import { find, map, partial } from 'lodash'
 
@@ -12,9 +10,9 @@ import PbReactPopover from '../../pb_popover/_popover'
 export type Direction = 'asc' | 'desc'
 export type SortOptions = { [name: string]: string }
 export type SortValue = { name: string, dir: Direction }
-export type SortingChangeCallback = (SortValue[]) => void
+export type SortingChangeCallback = (value: SortValue[]) => void
 
-const nextValue = (value: SortValue[], name: string): Direction => {
+const nextValue = (value: SortValue[], name: string): SortValue => {
   const current = find(value, { name })
   return {
     name,
@@ -26,12 +24,13 @@ const directionIcon = (dir: Direction) => (
   dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
 )
 
-const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (SortValue) => void) => (
+const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
     const next = nextValue(value, name)
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button
+            htmlType={undefined}
             onClick={partial(handleChange, next)}
             text={` ${label}`}
             variant="link"
@@ -47,7 +46,7 @@ export type SortMenuProps = {
   options: SortOptions,
   value?: SortValue[],
 }
-const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
+const SortMenu = ({ dark, options, value, onChange }: SortMenuProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
   const handleChange = (value: SortValue) => {
@@ -58,6 +57,7 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
   const sortButton = (
     <Button
         dark={dark}
+        htmlType={undefined}
         id="sort-button"
         onClick={toggle}
         paddingRight="none"

data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
@@ -10,16 +8,25 @@ type FilterProps =
       double?: boolean,
     })
 
-const Filter = ({ double = false, ...templateProps }: FilterProps) => {
-  return (
-    <Choose>
-      <When condition={double}>
+const Filter = ({ 
+  double = false,
+  ...templateProps
+  }: FilterProps): React.ReactElement => {
+  const displayFilter = () => {
+    if (double === true) {
+      return (
         <FilterDouble {...templateProps} />
-      </When>
-      <Otherwise>
+      )
+    } else {
+      return (
         <FilterSingle {...templateProps} />
-      </Otherwise>
-    </Choose>
+      )
+    }
+  }
+  return (
+    <>
+      {displayFilter()}
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx}

@@ -1,3 +1 @@
-/* @flow */
-
 export { default } from './Filter'

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -11,14 +11,14 @@ type ListProps = {
   dark?: boolean;
   data?: object;
   id?: string;
-  layout: "" | "left" | "right";
+  layout?: "" | "left" | "right";
   ordered?: boolean;
   role?: string;
   tabIndex?: number;
   text?: string;
   size?: string;
   variant?: string;
-  xpadding: boolean;
+  xpadding?: boolean;
 };
 
 const List = (props: ListProps) => {

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
-
 import {
   Popper,
   Manager as PopperManager,
@@ -23,7 +22,7 @@ type PbPopoverProps = {
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
-  data?: object;
+  data?: { [key: string]: string },
   id?: string;
   offset?: boolean;
   reference: PopperReference & any;
@@ -100,31 +99,31 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-      modifiers={popoverModifiers({ modifiers, offset })}
-      placement={placement}
-      referenceElement={referenceElement}
+        modifiers={popoverModifiers({ modifiers, offset })}
+        placement={placement}
+        referenceElement={referenceElement}
     >
       {({ placement, ref, style }) => {
         return (
           <div
-            {...ariaProps}
-            {...dataProps}
-            className={classes}
-            data-placement={placement}
-            id={id}
-            ref={ref}
-            style={Object.assign({}, style, zIndexStyle)}
+              {...ariaProps}
+              {...dataProps}
+              className={classes}
+              data-placement={placement}
+              id={id}
+              ref={ref}
+              style={Object.assign({}, style, zIndexStyle)}
           >
             <div
-              className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
+                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
             >
               <div
-                className={classnames(
-                  "pb_popover_body",
-                  popoverSpacing,
-                  overflowHandling
-                )}
-                style={widthHeightStyles()}
+                  className={classnames(
+                    "pb_popover_body",
+                    popoverSpacing,
+                    overflowHandling
+                  )}
+                  style={widthHeightStyles()}
               >
                 {children}
               </div>
@@ -192,17 +191,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
 
   const popoverComponent = (
     <Popover
-      className={className}
-      maxHeight={maxHeight}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      minWidth={minWidth}
-      modifiers={modifiers}
-      offset={offset}
-      placement={placement}
-      referenceElement={referenceElement}
-      zIndex={zIndex}
-      {...props}
+        className={className}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        minWidth={minWidth}
+        modifiers={modifiers}
+        offset={offset}
+        placement={placement}
+        referenceElement={referenceElement}
+        zIndex={zIndex}
+        {...props}
     >
       {children}
     </Popover>
@@ -214,7 +213,9 @@ const PbReactPopover = (props: PbPopoverProps) => {
         {reference && !referenceElement && (
           <PopperReference>
             {({ ref }) => (
-              <span className="pb_popover_reference_wrapper" ref={ref}>
+              <span
+                  className="pb_popover_reference_wrapper"
+                  ref={ref}>
                 <reference.type {...reference.props} />
               </span>
             )}
@@ -236,4 +237,4 @@ const PbReactPopover = (props: PbPopoverProps) => {
   );
 };
 
-export default PbReactPopover;
+export default PbReactPopover;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.5.0"
-  VERSION = "12.5.0.pre.alpha.datepickerinput1"
+  PREVIOUS_VERSION = "12.5.0.pre.alpha.filter1"
+  VERSION = "12.5.0.pre.alpha.filter1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.5.0.pre.alpha.datepickerinput1
+  version: 12.5.0.pre.alpha.filter1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-03 00:00:00.000000000 Z
+date: 2023-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -754,7 +754,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
-- app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
@@ -911,16 +910,16 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
-- app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx
-- app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx
-- app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx
-- app/pb_kits/playbook/pb_filter/Filter/index.jsx
-- app/pb_kits/playbook/pb_filter/_filter.jsx
+- app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
+- app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
+- app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx
+- app/pb_kits/playbook/pb_filter/Filter/index.tsx
 - app/pb_kits/playbook/pb_filter/_filter.scss
+- app/pb_kits/playbook/pb_filter/_filter.tsx
 - app/pb_kits/playbook/pb_filter/docs/_description.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -1,68 +0,0 @@
-@import "../../pb_textarea/textarea_mixin";
-
-[class^=pb_date_picker_kit] {
-  margin-bottom: $space_sm;
-
-  .pb_date_picker_kit_label {
-    margin-bottom: $space_xs;
-    display: block;
-  }
-
-  .date_picker_input_wrapper {
-    display: block;
-
-    input::placeholder,
-    .date_picker_input .placeholder {
-      @include pb_body_light;
-    }
-
-    input,
-    .date_picker_input {
-      max-height: 45px;
-      @include pb_textarea_light;
-      overflow: hidden;
-    }
-
-    input:hover,
-    .date_picker_input:hover {
-      background-color: rgba($focus_input_light, $opacity_5);
-    }
-
-    input:focus,
-    .date_picker_input:focus,
-    input:-webkit-autofill:focus,
-    .date_picker_input:-webkit-autofill:focus {
-      @include pb_textarea_focus;
-      @include transition_default;
-      border-color: $primary;
-      background-color: rgba($focus_input_light, $opacity_5);
-    }
-  }
-
-  &.error {
-    .date_picker_input_wrapper {
-      [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
-      }
-
-      input,
-      .date_picker_input {
-        border-color: $error;
-      }
-    }
-  }
-
-  &.inline {
-    .date_picker_input_wrapper input::placeholder,
-    .date_picker_input_wrapper .date_picker_input .placeholder {
-      opacity: 1;
-    }
-
-    &:not(:hover) {
-      .date_picker_input_wrapper input:not(:focus) {
-        background-color: transparent;
-        border-color: transparent;
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx

@@ -1,76 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
-
-import Body from '../../pb_body/_body'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-
-export type FilterDescription = {
-  [key: string]: ?string | boolean,
-}
-
-export type CurrentFiltersProps = {
-  dark: boolean,
-  filters: FilterDescription,
-}
-
-const hiddenFilters = (value) => isEmpty(value) && value !== true
-
-const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
-  const displayableFilters = omitBy(filters, hiddenFilters)
-
-  return (
-    <div className="maskContainer">
-      <If condition={isEmpty(filters)}>
-        <div className="filters">
-          <Body
-              color="light"
-              paddingLeft="xs"
-              size={4}
-              tag="h4"
-              text="No Filter Selected"
-          />
-        </div>
-      </If>
-      <If condition={!isEmpty(filters)}>
-        <div className="filters">
-          <div className="left_gradient" />
-          {map(displayableFilters, (value, name) => (
-            <div
-                className="filter"
-                key={`filter-${name}`}
-            >
-              <Choose>
-                <When condition={value === true}>
-                  <Title
-                      dark={dark}
-                      size={4}
-                      tag="h4"
-                      text={name}
-                  />
-                </When>
-                <Otherwise>
-                  <Caption
-                      dark={dark}
-                      text={name}
-                  />
-                  <Title
-                      dark={dark}
-                      size={4}
-                      tag="h4"
-                      text={value}
-                  />
-                </Otherwise>
-              </Choose>
-            </div>
-          ))}
-          <div className="right_gradient" />
-        </div>
-      </If>
-    </div>
-  )
-}
-
-export default CurrentFilters