playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY785typeaheadts608

data/lib/playbook/number_spacing.rb

@@ -6,6 +6,16 @@ module Playbook
       base.prop :number_spacing
     end
 
+    def number_spacing_values
+      %w[tabular]
+    end
+
+    def number_spacing_options
+      {
+        number_spacing: "ns",
+      }
+    end
+
   private
 
     def number_spacing_props
@@ -17,15 +27,5 @@ module Playbook
         "ns_#{index_value}" if number_spacing_values.include? index_value
       end.compact.join(" ")
     end
-
-    def number_spacing_options
-      {
-        number_spacing: "ns",
-      }
-    end
-
-    def number_spacing_values
-      %w[tabular]
-    end
   end
 end

data/lib/playbook/position.rb

@@ -6,6 +6,16 @@ module Playbook
       base.prop :position
     end
 
+    def position_values
+      %w[relative absolute fixed sticky]
+    end
+
+    def position_options
+      {
+        position: "position",
+      }
+    end
+
   private
 
     def position_props
@@ -19,15 +29,5 @@ module Playbook
         "position_#{value}"
       end.compact.join(" ")
     end
-
-    def position_options
-      {
-        position: "position",
-      }
-    end
-
-    def position_values
-      %w[relative absolute fixed sticky]
-    end
   end
 end

data/lib/playbook/spacing.rb

@@ -20,6 +20,16 @@ module Playbook
       base.prop :padding_y
     end
 
+    def max_width_options
+      {
+        max_width: "mw",
+      }
+    end
+
+    def max_width_values
+      %w[xs sm md lg xl 0 none]
+    end
+
     def spacing_options
       {
         margin: "m",
@@ -62,15 +72,5 @@ module Playbook
         "max_width_#{width_value}" if max_width_values.include? width_value
       end.compact.join(" ")
     end
-
-    def max_width_options
-      {
-        max_width: "mw",
-      }
-    end
-
-    def max_width_values
-      %w[xs sm md lg xl 0 none]
-    end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.17.0"
-  VERSION = "12.17.1"
+  PREVIOUS_VERSION = "12.18.0"
+  VERSION = "12.18.0.pre.alpha.PLAY785typeaheadts608"
 end

data/lib/playbook/z_index.rb

@@ -6,6 +6,16 @@ module Playbook
       base.prop :z_index
     end
 
+    def z_index_values
+      %w[1 2 3 4 5 6 7 8 9 10]
+    end
+
+    def z_index_options
+      {
+        z_index: "z-index",
+      }
+    end
+
   private
 
     def z_index_props
@@ -17,15 +27,5 @@ module Playbook
         "z_index_#{index_value}" if z_index_values.include? index_value
       end.compact.join(" ")
     end
-
-    def z_index_options
-      {
-        z_index: "z-index",
-      }
-    end
-
-    def z_index_values
-      %w[1 2 3 4 5 6 7 8 9 10]
-    end
   end
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.17.1
+  version: 12.18.0.pre.alpha.PLAY785typeaheadts608
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-01 00:00:00.000000000 Z
+date: 2023-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -73,14 +73,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: '3.6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.5'
+        version: '3.6'
 - !ruby/object:Gem::Dependency
   name: rouge
   requirement: !ruby/object:Gem::Requirement
@@ -1332,6 +1332,8 @@ files:
 - app/pb_kits/playbook/pb_lightbox/docs/_description.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -1717,9 +1719,19 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.html.erb
 - app/pb_kits/playbook/pb_radio/radio.rb
 - app/pb_kits/playbook/pb_radio/radio.test.js
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
@@ -2072,14 +2084,15 @@ files:
 - app/pb_kits/playbook/pb_time/docs/index.js
 - app/pb_kits/playbook/pb_time/time.html.erb
 - app/pb_kits/playbook/pb_time/time.rb
-- app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx
 - app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss
+- app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx
 - app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.html.erb
 - app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx
 - app/pb_kits/playbook/pb_time_range_inline/docs/example.yml
 - app/pb_kits/playbook/pb_time_range_inline/docs/index.js
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb
+- app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb
@@ -2160,8 +2173,8 @@ files:
 - app/pb_kits/playbook/pb_title_count/title_count.html.erb
 - app/pb_kits/playbook/pb_title_count/title_count.rb
 - app/pb_kits/playbook/pb_title_count/title_count.test.js
-- app/pb_kits/playbook/pb_title_detail/_title_detail.jsx
 - app/pb_kits/playbook/pb_title_detail/_title_detail.scss
+- app/pb_kits/playbook/pb_title_detail/_title_detail.tsx
 - app/pb_kits/playbook/pb_title_detail/docs/_description.md
 - app/pb_kits/playbook/pb_title_detail/docs/_footer.md
 - app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.html.erb
@@ -2171,8 +2184,9 @@ files:
 - app/pb_kits/playbook/pb_title_detail/docs/index.js
 - app/pb_kits/playbook/pb_title_detail/title_detail.html.erb
 - app/pb_kits/playbook/pb_title_detail/title_detail.rb
-- app/pb_kits/playbook/pb_toggle/_toggle.jsx
+- app/pb_kits/playbook/pb_title_detail/title_detail.test.js
 - app/pb_kits/playbook/pb_toggle/_toggle.scss
+- app/pb_kits/playbook/pb_toggle/_toggle.tsx
 - app/pb_kits/playbook/pb_toggle/docs/_description.md
 - app/pb_kits/playbook/pb_toggle/docs/_footer.md
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb
@@ -2188,6 +2202,7 @@ files:
 - app/pb_kits/playbook/pb_toggle/docs/index.js
 - app/pb_kits/playbook/pb_toggle/toggle.html.erb
 - app/pb_kits/playbook/pb_toggle/toggle.rb
+- app/pb_kits/playbook/pb_toggle/toggle.test.js
 - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
 - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
@@ -2204,7 +2219,6 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/example.yml
 - app/pb_kits/playbook/pb_tooltip/docs/index.js
@@ -2234,17 +2248,17 @@ files:
 - app/pb_kits/playbook/pb_treemap_chart/docs/index.js
 - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
 - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
-- app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
-- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
-- app/pb_kits/playbook/pb_typeahead/components/Control.jsx
-- app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
-- app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
-- app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx
-- app/pb_kits/playbook/pb_typeahead/components/Option.jsx
-- app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx
-- app/pb_kits/playbook/pb_typeahead/components/ValueContainer.jsx
+- app/pb_kits/playbook/pb_typeahead/_typeahead.tsx
+- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx
+- app/pb_kits/playbook/pb_typeahead/components/Control.tsx
+- app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx
+- app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx
+- app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx
+- app/pb_kits/playbook/pb_typeahead/components/Option.tsx
+- app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx
+- app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx
@@ -2275,9 +2289,10 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
 - app/pb_kits/playbook/pb_typeahead/docs/index.js
-- app/pb_kits/playbook/pb_typeahead/index.js
+- app/pb_kits/playbook/pb_typeahead/index.ts
 - app/pb_kits/playbook/pb_typeahead/typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/typeahead.rb
+- app/pb_kits/playbook/pb_typeahead/types.d.ts
 - app/pb_kits/playbook/pb_user/_user.scss
 - app/pb_kits/playbook/pb_user/_user.tsx
 - app/pb_kits/playbook/pb_user/docs/_description.md
@@ -2440,7 +2455,6 @@ files:
 - lib/playbook/line_height.rb
 - lib/playbook/markdown.rb
 - lib/playbook/markdown/helper.rb
-- lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
 - lib/playbook/order.rb
 - lib/playbook/pagination_renderer.rb
@@ -2472,7 +2486,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2483,12 +2497,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -1,172 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-
-type TimeRangeInlineProps = {
-  className?: string,
-  id?: string,
-  data?: string,
-  alignment?: "left" | "center" | "vertical",
-  size?: "sm" | "xs",
-  dark?: boolean,
-  icon?: boolean,
-  timezone?: boolean,
-  startTime: string,
-  endTime: string,
-}
-
-const timezoneString = (dateValue) => {
-  const date = new DateTime({ value: dateValue })
-  return `${date.convertToTimezone()}`
-}
-
-const dateTimestamp = (dateValue) => {
-  const date = new DateTime({ value: dateValue })
-  return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
-}
-
-const dateTimeIso = (dateValue) => {
-  const date = new DateTime({ value: dateValue })
-  return date.toIso()
-}
-
-const TimeRangeInline = (props: TimeRangeInlineProps) => {
-  const {
-    className,
-    alignment = 'left',
-    size = 'sm',
-    dark = false,
-    icon = false,
-    timezone = false,
-    startTime,
-    endTime,
-  } = props
-  const separator = (
-    <Body color="light">
-      <Icon
-          className="pb_time_range_inline_arrow"
-          dark={dark}
-          fixedWidth
-          icon="long-arrow-right"
-      />
-    </Body>
-  )
-
-  const iconContent = () => {
-    return (
-      <If condition={icon}>
-        <Body
-            color="light"
-            tag="span"
-        >
-          <Icon
-              className="pb_time_range_inline_icon"
-              dark={dark}
-              fixedWidth
-              icon="clock"
-              size={size}
-              tag="span"
-          />
-        </Body>
-      </If>
-    )
-  }
-
-  return (
-    <div
-        className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
-    >
-      <div className="pb_time_range_inline_wrapper">
-        <If condition={size == 'xs'}>
-          <Caption
-              dark={dark}
-              tag="span"
-          >
-            {iconContent()}
-            <time dateTime={dateTimeIso(startTime)}>
-              {` ${dateTimestamp(
-              startTime
-            )} `}
-            </time>
-          </Caption>
-          <Caption
-              className="pb_time_range_inline_arrow"
-              dark={dark}
-              tag="span"
-          >
-            {separator}
-          </Caption>
-          <Caption
-              dark={dark}
-              tag="span"
-          >
-            <time dateTime={dateTimeIso(endTime)}>
-              {` ${dateTimestamp(
-              endTime
-            )} `}
-            </time>
-          </Caption>
-          <If condition={timezone}>
-            <Caption
-                className="pb_time_range_inline_timezone"
-                dark={dark}
-                tag="span"
-            >
-              {timezoneString(endTime)}
-            </Caption>
-          </If>
-        </If>
-        <If condition={size == 'sm'}>
-          <Body
-              dark={dark}
-              tag="span"
-          >
-            {iconContent()}
-            <time dateTime={dateTimeIso(startTime)}>
-              {` ${dateTimestamp(
-              startTime
-            )} `}
-            </time>
-          </Body>
-          <Body
-              className="pb_time_range_inline_arrow"
-              dark={dark}
-              tag="span"
-          >
-            {separator}
-          </Body>
-          <Body
-              dark={dark}
-              tag="span"
-          >
-            <time dateTime={dateTimeIso(endTime)}>
-              {` ${dateTimestamp(
-              endTime
-            )} `}
-            </time>
-          </Body>
-          <If condition={timezone}>
-            <Body
-                className="pb_time_range_inline_timezone"
-                color="light"
-                dark={dark}
-                tag="span"
-            >
-              {timezoneString(endTime)}
-            </Body>
-          </If>
-        </If>
-      </div>
-    </div>
-  )
-}
-
-export default TimeRangeInline

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

@@ -1,44 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-import { buildCss, buildDataProps } from '../utilities/props'
-
-import Body from '../pb_body/_body'
-import Title from '../pb_title/_title'
-
-type TitleDetailProps = {
-  align?: "left" | "center" | "right",
-  className?: string,
-  data?: object,
-  detail: string,
-  id?: string,
-  title: string,
-}
-
-const TitleDetail = (props: TitleDetailProps) => {
-  const { align = 'left', className, data = {}, detail, id, title } = props
-  const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_title_detail_kit', align)
-
-  return (
-    <div
-        {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
-        id={id}
-    >
-      <Title
-          size={4}
-          text={title}
-      />
-      <Body
-          color="light"
-          text={detail}
-      />
-    </div>
-  )
-}
-
-export default TitleDetail

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb

@@ -1,9 +0,0 @@
-<span id='regular-tooltip-5'>I am a white tooltip.</span>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_id: "regular-tooltip-5",
-  tooltip_id: "tooltip-5",
-  position: 'top'
-}) do %>
-    Whoa. I'm a white tooltip.
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -1,62 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-import Badge from '../../pb_badge/_badge'
-import FormPill from '../../pb_form_pill/_form_pill'
-
-type Props = {
-  data: object,
-  multiValueTemplate: any,
-  removeProps: any,
-  selectProps: any,
-}
-
-const MultiValue = (props: Props) => {
-  const { removeProps } = props
-  const { imageUrl, label } = props.data
-  const { multiKit } = props.selectProps
-
-  const formPillProps = {
-    marginRight: 'xs',
-    name: label,
-  }
-
-  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
-
-  return (
-    <components.MultiValueContainer
-        className="text_input_multivalue_container"
-        {...props}
-    >
-      <If condition={multiKit === 'badge'}>
-        <Badge
-            closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
-        />
-        <Else />
-        <If condition={imageUrl}>
-          <FormPill
-              avatarUrl={imageUrl}
-              closeProps={removeProps}
-              marginRight="xs"
-              name={label}
-              size={multiKit === 'smallPill' ? 'small' : ''}
-          />
-          <Else />
-          <FormPill
-              closeProps={removeProps}
-              marginRight="xs"
-              size={multiKit === 'smallPill' ? 'small' : ''}
-              text={label}
-          />
-        </If>
-      </If>
-    </components.MultiValueContainer>
-  )
-}
-
-export default MultiValue

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -1,39 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-import User from '../../pb_user/_user'
-
-const Option = (props: any) => {
-  const {
-    imageUrl,
-  } = props.data
-  const { valueComponent } = props.selectProps
-
-  return (
-    <components.Option {...props}>
-      <div>
-        <Choose>
-          <When condition={!valueComponent && imageUrl}>
-            <User
-                align="left"
-                avatarUrl={imageUrl}
-                dark={props.selectProps.dark}
-                name={props.label}
-                orientation="horizontal"
-            />
-          </When>
-          <When condition={valueComponent}>
-            { valueComponent(props.data) }
-          </When>
-          <Otherwise>
-            {props.label}
-          </Otherwise>
-        </Choose>
-      </div>
-    </components.Option>
-  )
-}
-
-export default Option