playbook_ui 14.8.0.pre.alpha.PBNTR713dropdowncustomtriggerbug4696 → 14.8.0.pre.alpha.PLAY1598floatinguiupgrade4563

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7776c1f464d6ba8dfb924b88a819e7d8ffaa73a2e5bb8c634d842d74e518b181
-  data.tar.gz: 426631d54aa230c2730bd84e2f100ddc1bdabd7ac2e665d1b467a7be5e5ea1e3
+  metadata.gz: 9353b3b402295905df0220cec1a5c043cdfaf017635cfb8e53887a581f1932ca
+  data.tar.gz: d68b282ac69c6ea7d57e48b7aaee56682c0247fff6ca297c54e1a8c70cf2a7d3
 SHA512:
-  metadata.gz: d0eff8fe9fecb531b16b97bf63c76c1bb6c0746e3542f5a401947cf1d62e4b314700d0ed23e616d00faa36d057e8d39a06734db7b54322625c295339b0fe5af3
-  data.tar.gz: a2807364db12b9e5594df46d76931e33d4602f6b74892ae578efd465a46c9f7ef93e947e2e6c969c6c96518900cbe9f6fbfb25cc8dee868376197ee165050f1d
+  metadata.gz: d32c0d53ed43c2f064913f1a73499f8652bb1c13a388646721590fd9cd8c0f57893c912b9d0d1530e3bf28b779567a260e69a66046847186b1e4a4a9a6e0613f
+  data.tar.gz: 1432f779bd804e750f0cee0e9b4fe1adcf01ba489c9a1da7f3495684320cb8cdb2f7d2755316c69f4548404fc1106eea396d4c0a1e2835a3cab970816bb0e904

data/app/pb_kits/playbook/_playbook.scss

@@ -126,4 +126,3 @@
 @import 'utilities/overflow';
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
-@import 'utilities/height';

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -6,12 +6,12 @@
                 ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+    <span class="pb_checkbox_indeterminate">
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
     </span>
   <% else %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+    <span class="pb_checkbox_checkmark">
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
     </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -18,6 +18,10 @@ module Playbook
       prop :form_spacing, type: Playbook::Props::Boolean,
                           default: false
 
+      def checked_html
+        checked ? "checked='true'" : nil
+      end
+
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -1,84 +1,7 @@
-<% checkboxes = [
-  { name: 'Coffee', id: 'coffee', checked: false },
-  { name: 'Ice Cream', id: 'ice-cream', checked: false },
-  { name: 'Chocolate', id: 'chocolate', checked: true }
-] %>
-
-<%= pb_rails("table", props: { container: false, size: "md" }) do %>
-  <thead>
-    <tr>
-      <th>
-        <%= pb_rails("checkbox", props: {
-          checked: true,
-          text: "Uncheck All",
-          value: "checkbox-value",
-          name: "main-checkbox",
-          indeterminate: true,
-          id: "indeterminate-checkbox"
-        }) %>
-      </th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% checkboxes.each do |checkbox| %>
-      <tr>
-        <td>
-          <%= pb_rails("checkbox", props: {
-            checked: checkbox[:checked],
-            text: checkbox[:name],
-            value: checkbox[:id],
-            name: "#{checkbox[:id]}-indeterminate-checkbox",
-            id: "#{checkbox[:id]}-indeterminate-checkbox",
-          }) %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-<% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
-    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
-    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
-
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-      
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-    };
-
-    mainCheckbox.addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
-      updateMainCheckbox();
-    });
-
-    childCheckboxes.forEach(cb => {
-      cb.addEventListener('change', updateMainCheckbox);
-    });
-  });
-</script>
+<%= pb_rails("checkbox" , props: {
+  text: "Select ",
+  value: "checkbox-value",
+  name: "main",
+  indeterminate: true,
+  id: "test-indeterminate-js"
+}) %>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -53,7 +53,6 @@
     }
 
     .pb_dropdown_container {
-      position: absolute;
       background-color: $white;
       overflow: hidden;
       box-shadow: $shadow_deep;

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -3,6 +3,7 @@
     class: object.classname,
     data: object.data,
     id: object.id,
+    style: object.container_style,
     **combined_html_options) do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
             <% if content.present? %> 

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -7,6 +7,10 @@ module Playbook
         generate_classname("pb_dropdown_container", "close", separator: " ")
       end
 
+      def container_style
+        "position: absolute"
+      end
+
       def data
         Hash(prop(:data)).merge(dropdown_container: true)
       end

data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx

@@ -18,19 +18,9 @@ export const separateChildComponents = (children: React.ReactChild[] | React.Rea
   const otherChildren: React.ReactChild[] = [];
 
   React.Children.forEach(children, (child) => {
-    const element = child as ReactElement;
-    const childType = element?.type;
-    const childDisplayName = (childType as any)?.displayName || (childType as any)?.name;
-
-    if (
-      childType === DropdownTrigger ||
-      childDisplayName === "DropdownTrigger"
-    ) {
+    if (child && (child as ReactElement).type === DropdownTrigger) {
       trigger = child;
-    } else if (
-      childType === DropdownContainer ||
-      childDisplayName === "DropdownContainer"
-    ) {
+    } else if (child && (child as ReactElement).type === DropdownContainer) {
       container = child;
     } else {
       otherChildren.push(child);
@@ -40,7 +30,6 @@ export const separateChildComponents = (children: React.ReactChild[] | React.Rea
   return { trigger, container, otherChildren };
 };
 
-
 export const prepareSubcomponents = ({
   children,
   hasTriggerSubcomponent,

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -23,7 +23,7 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
-  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
+  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
     const selectedUserData = JSON.parse(selectedUserJSON)
 
     // set the input field's value
-    event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
+    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
 
     // log the selected option's dataset
     console.log('The selected user data:')

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -1,5 +1,5 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
-  <%= form.text_field :example_text_field_loading, props: { label: true } %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -22,74 +22,23 @@
 %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
-  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
-  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
-  <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
-  <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
-  <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
-  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
-  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
-  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
+  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
+  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
-  <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
-
-<!-- form.typeahead user results example template -->
-<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>
-
-<!-- form.typeahead JS example implementation -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) 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.children[0].dataset.user = JSON.stringify(user)
-          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
-  })
-
-
-  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
-    if (!event.target.dataset.typeaheadExample2) return
-
-    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
-    const selectedUserData = JSON.parse(selectedUserJSON)
-
-    // set the input field's value
-    event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
-
-    // log the selected option's dataset
-    console.log('The selected user data:')
-    console.dir(selectedUserData)
-
-    // do even more with the data later - TBD
-    event.target.dataset.user = selectedUserJSON
-  })
-<% end %>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb

@@ -6,7 +6,6 @@
     value: "selected_with_icon",
     checked: true,
     icon: true,
-
   }) do %>
     Selected, with icon
   <% end %>
@@ -37,4 +36,4 @@
     Disabled
   <% end %>
 
-</div>
+</div>

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -4,11 +4,11 @@ import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/pro
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
-    TableHead,
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableCell,
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
 } from "./subcomponents";
 
 type TableProps = {
@@ -28,7 +28,6 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -52,7 +51,6 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -78,7 +76,6 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -88,56 +85,6 @@ const Table = (props: TableProps): React.ReactElement => {
         className
     )
 
-    useEffect(() => {
-        const handleStickyColumns = () => {
-            let accumulatedWidth = 0;
-    
-            stickyLeftcolumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftcolumn.length - 1;
-                const header = document.querySelector(`th[id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[id="${colId}"]`);
-    
-                if (header) {
-                    header.classList.add('sticky');
-                    (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-    
-                    if (!isLastColumn) {
-                        header.classList.add('with-border');
-                        header.classList.remove('sticky-shadow');
-                    } else {
-                        header.classList.remove('with-border');
-                        header.classList.add('sticky-shadow');
-                    }
-    
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
-    
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
-                    
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border');
-                        cell.classList.remove('sticky-shadow');
-                    } else {
-                        cell.classList.remove('with-border');
-                        cell.classList.add('sticky-shadow');
-                    }
-                });
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyColumns();
-        }, 10);
-
-        window.addEventListener('resize', handleStickyColumns);
-
-        return () => {
-            window.removeEventListener('resize', handleStickyColumns);
-        };
-    }, [stickyLeftcolumn]);
-
     useEffect(() => {
         const instance = new PbTable()
         instance.connect()
@@ -145,52 +92,26 @@ const Table = (props: TableProps): React.ReactElement => {
 
     return (
         <>
-            {responsive === 'scroll' ? (
-                <div className='table-responsive-scroll'>
-                    {isTableTag ? (
-                        <table
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                        >
-                            {children}
-                        </table>
-                    ) : (
-                        <div
-                            {...ariaProps}
-                            {...dataProps}
-                            {...htmlProps}
-                            className={classNames}
-                            id={id}
-                        >
-                            {children}
-                        </div>
-                    )}
-                </div>
+            {isTableTag ? (
+                <table
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </table>
             ) : (
-                isTableTag ? (
-                    <table
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                    >
-                        {children}
-                    </table>
-                ) : (
-                    <div
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                    >
-                        {children}
-                    </div>
-                )
+                <div
+                    {...ariaProps}
+                    {...dataProps}
+                    {...htmlProps}
+                    className={classNames}
+                    id={id}
+                >
+                    {children}
+                </div>
             )}
         </>
     )

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -25,4 +25,3 @@ export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
-export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -20,5 +20,3 @@
 @import "table_header";
 @import "striped";
 @import "outer_padding";
-@import "sticky_columns";
-@import "scroll";

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -41,50 +41,3 @@
       }) %>
     <% end %>
 <% end %>
-
-<br /><br /><br />
-
-<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
-  <%= pb_rails("timeline/item") do |item| %>
-
-    <% item.label do %>
-      <%= pb_rails("timeline/label") do %>
-        <%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
-      <% end %>
-    <% end %>
-  
-    <% item.step do %>
-      <%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
-    <% end %>
-  
-    <% item.detail do %>
-      <%= pb_rails("title_detail", props: {
-        title: "Jackson Heights",
-        detail: "37-27 74th Street"
-      }) %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
-    <%= pb_rails("title_detail", props: {
-        title: "Society Hill",
-        detail: "72 E St Astoria"
-    }) %>
-  <% end %>
-
-  <%= pb_rails("timeline/item") do |item| %>
-
-    <% item.step do %>
-      <%= pb_rails("timeline/step") do %>
-        <%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
-      <% end %>
-    <% end %>
-  
-    <% item.detail do %>
-      <%= pb_rails("title_detail", props: {
-        title: "Greenpoint",
-        detail: "81 Gate St Brooklyn"
-      }) %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -62,65 +62,6 @@ const TimelineWithChildren = (props) => (
         </Timeline.Detail>
       </Timeline.Item>
     </Timeline>
-
-    <br />
-    <br />
-    <br />
-
-    <Timeline orientation="vertical"
-        showDate
-        {...props}
-    >
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label>
-          <Title size={4}
-              text='Any Kit'
-          />
-        </Timeline.Label>
-        <Timeline.Step icon="user"
-            iconColor="royal"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="dotted"
-          {...props}
-      >
-        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <Timeline.Step icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Step>
-          <Pill text="3"
-              variant="success"
-          />
-        </Timeline.Step>
-        <Timeline.Detail>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
   </div>
 )
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -2,7 +2,6 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/shadows";
-@import "../tokens/positioning";
 
 [class^=pb_typeahead_kit] {
   .typeahead-kit-select__option {
@@ -100,7 +99,6 @@
     .typeahead-kit-select__menu {
       background-color: $bg_dark;
       color: $white;
-      z-index: $z_1;
     }
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
@@ -184,7 +182,6 @@
   }
  
   .typeahead-kit-select__menu {
-    z-index: $z_1;
     .typeahead-kit-select__menu-list {
       padding: 0;
     }