playbook_ui 14.18.0.pre.alpha.play2087emptystatekitbuildrails7533 → 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.18.0"
-  VERSION = "14.18.0.pre.alpha.play2087emptystatekitbuildrails7533"
+  VERSION = "14.18.0.pre.alpha.play2149overlaykitdynamicbug7619"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.18.0.pre.alpha.play2087emptystatekitbuildrails7533
+  version: 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-06 00:00:00.000000000 Z
+date: 2025-05-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1229,11 +1229,16 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_react.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_rails.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
@@ -1318,10 +1323,12 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
@@ -1338,10 +1345,14 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/example.yml
 - app/pb_kits/playbook/pb_dropdown/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/dropdown.html.erb
@@ -1366,20 +1377,14 @@ files:
 - app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx
 - app/pb_kits/playbook/pb_empty_state/_empty_state.scss
 - app/pb_kits/playbook/pb_empty_state/_empty_state.tsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb
 - app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb
 - app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb
 - app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb
 - app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx
 - app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg
 - app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx
 - app/pb_kits/playbook/pb_empty_state/docs/example.yml
 - app/pb_kits/playbook/pb_empty_state/docs/index.js
-- app/pb_kits/playbook/pb_empty_state/empty_state.html.erb
-- app/pb_kits/playbook/pb_empty_state/empty_state.rb
 - app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx
 - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
 - app/pb_kits/playbook/pb_enhanced_element/index.ts
@@ -3545,8 +3550,8 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-D8CsVBZO.js
-- dist/chunks/_weekday_stacked-D3oLTSkH.js
+- dist/chunks/_typeahead-Bc1SPP0-.js
+- dist/chunks/_weekday_stacked-DDrCiip0.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-BmTAc7Nc.js
 - dist/chunks/pb_form_validation-BWjy4bFn.js

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md

@@ -1 +0,0 @@
-`autocomplete` prop can also be used in conjunction with the `customDisplay` prop.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx

@@ -1,79 +0,0 @@
-import React, { useRef } from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import useDropdown from '../../pb_dropdown/hooks/useDropdown'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-
-const DropdownWithHook = (props) => {
-const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
-const buttonRef = useRef(null);
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "United-states"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "canada"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-  return (
-  <div>
-      <CircleIconButton
-          htmlOptions={{ref: buttonRef}}
-          icon={"flag"}
-          onClick={() => setIsDropdownClosed(!isDropDownClosed)}
-          variant="secondary"
-      />
-    <Dropdown
-        isClosed={isDropDownClosed}
-        options={options}
-        triggerRef={buttonRef}
-        {...props}
-    >
-      {options.map((option) => (
-        <Dropdown.Option key={option.id} 
-            option={option}
-        > 
-        <>
-          <FlexItem>
-              <Flex paddingRight='md'>
-                <Icon icon={option.icon} 
-                    paddingRight="xs"
-                />
-                <Body text={option.label} />
-              </Flex>
-          </FlexItem>
-              <FlexItem>
-                <Body color="light" 
-                    text={option.areaCode} 
-                />
-              </FlexItem>
-            </>
-        </Dropdown.Option>
-      ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownWithHook

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb

@@ -1,30 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", spacing: "evenly"}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    id: "empty_state_default",
-    primary_button: "Next Action",
-    primary_button_url: "https://www.playbook.com",
-    alignment: "left",
-  }) %>
-
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    id: "empty_state_default",
-    primary_button: "Next Action",
-    primary_button_url: "https://www.playbook.com",
-  }) %>
-
-    <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    id: "empty_state_default",
-    primary_button: "Next Action",
-    primary_button_url: "https://www.playbook.com",
-    alignment: "right",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb

@@ -1,8 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    id: "empty_state_default",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb

@@ -1,13 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    id: "empty_state_default",
-    orientation:"horizontal",
-    alignment: "left",
-    size: "lg",
-    primary_button: "Next Action",
-    primary_button_url: "https://www.playbook.com",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", spacing: "evenly"}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    id: "empty_state_default",
-    primary_button: "Next Action",
-    primary_button_url: "https://www.playbook.com",
-    link_button: "Alt Action",
-    size: "sm",
-  }) %>
-
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    id: "empty_state_default",
-    primary_button: "Next Action",
-    primary_button_url: "https://www.playbook.com",
-    link_button: "Alt Action",
-    size: "lg",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb

@@ -1,24 +0,0 @@
-<%= pb_content_tag(:div,
-aria: aria,
-class: classname,
-data: data,
-id: id,
-**combined_html_options) do %>
-  <%= pb_rails("flex", props: { align: flex_align, orientation: config[:flex_direction], padding_left: padding_size, padding_right: padding_size, vertical: "center", classname: config[:scss_class] }) do %>
-    <%= pb_rails("image", props: { url: image == "default" ? default_image_data_uri : image, alt: "Empty State Image", html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
-    <%= pb_rails("flex/flex_item") do %>
-      <%= pb_rails("title", props: { text: object.header, size: config[:title_size], padding_bottom: config[:title_padding], text_align: alignment }) %>
-      <% if size == "sm" %>
-        <%= pb_rails("detail", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
-      <% else %>
-        <%= pb_rails("body", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
-      <% end %>
-      <% if primary_button.present? %>
-        <%= pb_rails("button", props: { text: primary_button, variant: "primary", width: "100%", size: config[:button_size], href: primary_button_url,  margin_bottom: config[:button_margin] }) %>
-      <% end %>
-      <% if link_button.present? %>
-        <%= pb_rails("button", props: { text: link_button, variant: "link", size: config[:button_size], href: primary_button_url, width: "100%" }) %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/empty_state.rb

@@ -1,123 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbEmptyState
-    class EmptyState < Playbook::KitBase
-      prop :alignment, type: Playbook::Props::Enum,
-                       values: %w[center left right],
-                       default: "center"
-      prop :description
-      prop :header
-      prop :image
-      prop :link_button
-      prop :link_button_url
-      prop :orientation, type: Playbook::Props::Enum,
-                         values: %w[horizontal vertical],
-                         default: "vertical"
-      prop :primary_button
-      prop :primary_button_url
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg],
-                  default: "md"
-
-      SIZE_CONFIGS = {
-        sm: {
-          vertical: {
-            image_width: "100px",
-            title_size: 4,
-            title_padding: "xxs",
-            description_pad: "sm",
-            button_size: "sm",
-            button_margin: "xs",
-            scss_class: "sm-state-vertical",
-            flex_direction: "column",
-          },
-          horizontal: {
-            image_width: "100px",
-            title_size: 4,
-            title_padding: "xxs",
-            description_pad: "sm",
-            button_size: "sm",
-            button_margin: "xs",
-            scss_class: "sm-state-horizontal",
-            flex_direction: "row",
-          },
-        },
-        md: {
-          vertical: {
-            image_width: "140px",
-            title_size: 3,
-            title_padding: "xs",
-            description_pad: "md",
-            button_size: "md",
-            button_margin: "sm",
-            scss_class: "md-state-vertical",
-            flex_direction: "column",
-          },
-          horizontal: {
-            image_width: "140px",
-            title_size: 3,
-            title_padding: "xs",
-            description_pad: "md",
-            button_size: "md",
-            button_margin: "sm",
-            scss_class: "md-state-horizontal",
-            flex_direction: "row",
-          },
-        },
-        lg: {
-          vertical: {
-            image_width: "100%",
-            title_size: 1,
-            title_padding: "sm",
-            description_pad: "lg",
-            button_size: "md",
-            button_margin: "md",
-            scss_class: "lg-state-vertical",
-            flex_direction: "column",
-          },
-          horizontal: {
-            image_width: "100%",
-            title_size: 2,
-            title_padding: "sm",
-            description_pad: "lg",
-            button_size: "md",
-            button_margin: "md",
-            scss_class: "lg-state-horizontal",
-            flex_direction: "row",
-          },
-        },
-      }.freeze
-
-      def classname
-        generate_classname("pb_empty_state_kit")
-      end
-
-      def config
-        SIZE_CONFIGS[size.to_sym][orientation.to_sym]
-      end
-
-      def default_image_data_uri
-        svg_path = __dir__.then { |d| File.join(d, "docs", "default_image", "computer_fly_no_branding.svg") }
-        svg      = File.read(svg_path)
-        encoded  = ERB::Util.url_encode(svg)
-        "data:image/svg+xml,#{encoded}"
-      end
-
-      def padding_size
-        size == "sm" ? "xs" : "xl"
-      end
-
-      def flex_align
-        case alignment
-        when "left"
-          "start"
-        when "right"
-          "end"
-        else
-          "center"
-        end
-      end
-    end
-  end
-end