playbook_ui_docs 14.19.0.pre.alpha.PLAY2171advancedtable7832 → 14.19.0.pre.alpha.PLAY2172homeaddressstreetundefinedstatebug7716

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.19.0.pre.alpha.PLAY2171advancedtable7832
+  version: 14.19.0.pre.alpha.PLAY2172homeaddressstreetundefinedstatebug7716
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-22 00:00:00.000000000 Z
+date: 2025-05-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -811,29 +811,13 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
@@ -2308,8 +2292,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -1,31 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-
-%>
-
-<% 
-  options2 = [
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'Mexico', value: 'Mexico', id: 'mx' },
-    { label: 'Brazil', value: 'Brazil', id: 'br' },
-    { label: 'Argentina', value: 'Argentina', id: 'ar' },
-    { label: 'Colombia', value: 'Colombia', id: 'co' },
-    { label: 'Chile', value: 'Chile', id: 'cl' },
-    { label: 'Peru', value: 'Peru', id: 'pe' },
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) %>
-
-<script>
-  document.addEventListener("pb:dropdown:selected", (e) => {
-    const option   = e.detail;
-    const dropdown = e.target;
-    console.log("Selected option:", option);
-})
-</script>

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

@@ -1,5 +0,0 @@
-This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each MUST contain `label`, `value` and `id`. 
-
-The kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
-
-In addition, a data attribute called `data-option-selected` with the selection is also rendered on the parent dropdown div.

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

@@ -1,56 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownMultiSelect = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-        label: "United Kingdom",
-        value: "United Kingdom",
-    },  
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    },
-    {
-      label: "India",
-      value: "India",
-    },
-    {
-      label: "Australia",
-      value: "Australia",
-    },
-    {
-      label: "New Zealand",
-      value: "New Zealand",
-    },
-    {
-      label: "Italy",
-      value: "Italy",
-    },
-    {
-      label: "Spain",
-      value: "Spain",
-    }
-  ];  
-
-  return (
-  <div>
-    <Dropdown
-        multiSelect
-        options={options}
-        {...props}
-    />
-  </div>
-  )
-}
-
-export default DropdownMultiSelect

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

@@ -1,3 +0,0 @@
-`multiSelect` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown.
-
-`multiSelect` is set to false by default.

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

@@ -1,58 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownMultiSelectDisplay = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-        label: "United Kingdom",
-        value: "United Kingdom",
-    },  
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    },
-    {
-      label: "India",
-      value: "India",
-    },
-    {
-      label: "Australia",
-      value: "Australia",
-    },
-    {
-      label: "New Zealand",
-      value: "New Zealand",
-    },
-    {
-      label: "Italy",
-      value: "Italy",
-    },
-    {
-      label: "Spain",
-      value: "Spain",
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        formPillProps={{size:"small", color:"neutral"}}
-        multiSelect
-        options={options}
-        {...props}
-    />
-  </div>
-  )
-}
-
-export default DropdownMultiSelectDisplay

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

@@ -1,3 +0,0 @@
-By default, the `multiSelect` prop will render selected options as the default FormPill. `FormPillProps` however can be used to customize these Pills with any props that exist for the FormPill. 
-
-This prop must be an object that contains valid FormPill props. For a full list of FormPill props, see [here](https://playbook.powerapp.cloud/kits/form_pill/react).

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb

@@ -1,20 +0,0 @@
-<%
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: {
-  options: options,
-  multi_select: true,
-  form_pill_props: { size:"small", color:"neutral" },
-}) %>

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

@@ -1 +0,0 @@
-By default, the `multi_select` prop will render selected options as the default form_pill. `form_pill_props` however can be used to customize these Pills with props that exist for the form_pill. Currently, only the '[color](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-colors)' and '[size](https://playbook.powerapp.cloud/kits/form_pill/rails#form-pill-size)' props are supported as shown here.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb

@@ -1,19 +0,0 @@
-<%
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: {
-  options: options,
-  multi_select: true,
-}) %>

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

@@ -1,3 +0,0 @@
-`multi_select` is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown.
-
-`multi_select` is set to false by default.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb

@@ -1,20 +0,0 @@
-<%
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: {
-  autocomplete: true,
-  options: options,
-  multi_select: true,
-}) %>

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

@@ -1,57 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownMultiSelectWithAutocomplete = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-        label: "United Kingdom",
-        value: "United Kingdom",
-    },  
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    },
-    {
-      label: "India",
-      value: "India",
-    },
-    {
-      label: "Australia",
-      value: "Australia",
-    },
-    {
-      label: "New Zealand",
-      value: "New Zealand",
-    },
-    {
-      label: "Italy",
-      value: "Italy",
-    },
-    {
-      label: "Spain",
-      value: "Spain",
-    }
-  ];  
-
-  return (
-  <div>
-    <Dropdown
-        autocomplete
-        multiSelect
-        options={options}
-        {...props}
-    />
-  </div>
-  )
-}
-
-export default DropdownMultiSelectWithAutocomplete

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

@@ -1 +0,0 @@
-`multiSelect` can also be used with the `autocomplete` functionality.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb

@@ -1,50 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-      areaCode: "+1",
-      icon: "🇨🇦",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: { options: options, multi_select: true }) do %>
-    <%= pb_rails("dropdown/dropdown_trigger", props:{ multi_select: true }) %>
-    <%= pb_rails("dropdown/dropdown_container") do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -1,105 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-
-const DropdownMultiSelectWithCustomOptions = (props) => {
-
- 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"
-    },
-    {
-      label: "India",
-      value: "India",
-      areaCode: "+91",
-      icon: "🇮🇳",
-      id: "india"
-    },
-    {
-      label: "Australia",
-      value: "Australia",
-      areaCode: "+61",
-      icon: "🇦🇺",
-      id: "australia"
-    },
-    {
-      label: "New Zealand",
-      value: "New Zealand",
-      areaCode: "+64",
-      icon: "🇳🇿",
-      id: "new-zealand"
-    },
-    {
-      label: "Italy",
-      value: "Italy",
-      areaCode: "+39",
-      icon: "🇮🇹",
-      id: "italy"
-    },
-    {
-      label: "Spain",
-      value: "Spain",
-      areaCode: "+34",
-      icon: "🇪🇸",
-      id: "spain"
-    }
-  ];  
-
-  return (
-  <div>
-    <Dropdown
-        multiSelect
-        options={options}
-        {...props}
-    >
-    {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <Flex
-                align="center"
-                justify="between"
-            >
-              <FlexItem>
-                <Flex>
-                  <Icon icon={option.icon} 
-                      paddingRight="xs"
-                  />
-                  <Body text={option.label} />
-                </Flex>
-              </FlexItem>
-              <FlexItem>
-                <Body color="light" 
-                    text={option.areaCode} 
-                />
-              </FlexItem>
-            </Flex>
-          </Dropdown.Option>
-        ))}
-    </Dropdown>
-  </div>
-  )
-}
-
-export default DropdownMultiSelectWithCustomOptions

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb

@@ -1,22 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
-  ]
-%>
-
-<% 
-default_value = [
-  { label: 'United States', value: 'United States', id: 'us' },
-  { label: 'Canada', value: 'Canada', id: 'ca' },
-]
- %>
-<%= pb_rails("dropdown", props: {options: options, multi_select: true, default_value: default_value}) %>

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

@@ -1,67 +0,0 @@
-import React from "react";
-import Dropdown from "../../pb_dropdown/_dropdown";
-
-const DropdownMultiSelectWithDefault = (props) => {
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-    },
-    {
-      label: "Canada",
-      value: "Canada",
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-    },
-    {
-      label: "India",
-      value: "India",
-    },
-    {
-      label: "Australia",
-      value: "Australia",
-    },
-    {
-      label: "New Zealand",
-      value: "New Zealand",
-    },
-    {
-      label: "Italy",
-      value: "Italy",
-    },
-    {
-      label: "Spain",
-      value: "Spain",
-    },
-  ];
-
-  const defaultSelectedOptions = [
-    {
-      label: "United States",
-      value: "United States",
-    },
-    {
-      label: "Italy",
-      value: "Italy",
-    },
-  ];
-
-  return (
-    <div>
-      <Dropdown
-          defaultValue={defaultSelectedOptions}
-          multiSelect
-          options={options}
-          {...props}
-      />
-    </div>
-  );
-};
-
-export default DropdownMultiSelectWithDefault;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const TypeaheadPreserveInput = (props) => {
-  return (
-    <Typeahead
-        label="Colors"
-        options={options}
-        preserveSearchInput
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadPreserveInput

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md

@@ -1 +0,0 @@
-By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus