playbook_ui 11.13.0.pre.alpha.fileupload1 → 11.13.0

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { Node } from 'react'
+import React, { Node, useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -50,8 +50,19 @@ const SelectableListItem = ({
     className
   )
 
+  const initialCheckedState = checked
+  const [checkedState, setCheckedState] = useState(initialCheckedState)
+
+  const handleChecked = (event) => {
+    onChange(event)
+    setCheckedState(event.target.checked)
+  }
+
   return (
-    <ListItem {...props}>
+    <ListItem 
+        {...props}
+        className={classnames(checkedState ? "checked_item" : "", className)}
+    >
       <div
           {...ariaProps}
           {...dataProps}
@@ -60,10 +71,10 @@ const SelectableListItem = ({
         <Choose>
           <When condition={variant == 'checkbox'}>
             <Checkbox
-                checked={checked}
+                checked={checkedState}
                 id={id}
                 name={name}
-                onChange={onChange}
+                onChange={handleChecked}
                 // eslint suppressor, text is needed to display on screen
                 text={label || (text && false)}
                 type="checkbox"

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -29,7 +29,29 @@ const SelectableList = (props: SelectableListProps) => {
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
   const dataProps = buildDataProps(data)
+  const isRadio = props.variant === "radio"
+  const defaultCheckedRadioValue = children.filter(item => item.props.defaultChecked)[0]?.props?.value
+  const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
+  
+  const onChangeRadioValue = ({ target }) => {
+    setSelectedRadioValue(target.value)
+  }
 
+  let selectableListItems = children
+
+  if (isRadio) {
+    selectableListItems = children.map(({ props }) => {
+      return (
+        <SelectableListItem
+            {...props}
+            className={classnames(selectedRadioValue === props.value ? "checked_item" : "", props.className)}
+            key={props.value}
+            onChange={evt => { onChangeRadioValue(evt); props?.onChange?.(evt); }}
+        />
+      )
+    })
+  }
+  
   return (
     <div
         {...ariaProps}
@@ -38,7 +60,7 @@ const SelectableList = (props: SelectableListProps) => {
         id={id}
     >
       <List {...props}>
-        {children}
+        {selectableListItems}
       </List>
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -7,6 +7,9 @@
     &:hover {
       background-color: $bg_light;
     }
+    &[class*=checked_item] {
+      background-color: $bg_light;
+    }
   }
   [class^=pb_radio_kit] {
     margin-left: $space_xs;

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb

@@ -5,7 +5,7 @@
     id: object.id) do %>
   <%= pb_rails("list") do %>
     <% object.items.each do |item| %>
-      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "securerandom"
+
 module Playbook
   module PbSelectableList
     class SelectableList < Playbook::KitBase
@@ -15,6 +17,10 @@ module Playbook
       def classname
         generate_classname("pb_selectable_list_kit")
       end
+
+      def get_id(item)
+        item[:id] || ("a".."z").to_a.sample(12).join
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -14,4 +14,36 @@
       <%= content %>
     <% end %>
   <% end %>
+
+  <% if object.variant == "checkbox"%>
+    <script>
+      var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
+      
+      checkboxElement.addEventListener("change", (evt) => {
+        var listItemElement = document.querySelector("#<%=object.id%>")
+        
+        if (evt.target.checked) {
+          listItemElement.classList.add("checked_item");
+        } else {
+          listItemElement.classList.remove("checked_item")
+        }
+      })
+    </script>
+  <% else %>
+    <script>
+      var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
+
+      radioElement.addEventListener("change", () => {        
+        var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
+        
+        radios.forEach((radio) => {
+          if (radio.checked) {
+            radio.closest("li").classList.add("checked_item");
+          } else {
+            radio.closest("li").classList.remove("checked_item")
+          }
+        });
+      })
+    </script>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -4,7 +4,6 @@ module Playbook
   module PbSelectableList
     class SelectableListItem < Playbook::KitBase
       prop :tabindex
-
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name, type: Playbook::Props::String
@@ -17,7 +16,13 @@ module Playbook
                            default: {}
 
       def classname
-        generate_classname("pb_item_kit")
+        generate_classname("pb_item_kit") + checked_class
+      end
+
+    private
+
+      def checked_class
+        checked ? " checked_item" : ""
       end
     end
   end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.12.0"
-  VERSION = "11.13.0.pre.alpha.fileupload1"
+  PREVIOUS_VERSION = "11.12.1"
+  VERSION = "11.13.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.13.0.pre.alpha.fileupload1
+  version: 11.13.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-18 00:00:00.000000000 Z
+date: 2022-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -836,20 +836,26 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
 - app/pb_kits/playbook/pb_dialog/docs/example.yml
@@ -870,8 +876,8 @@ files:
 - app/pb_kits/playbook/pb_docs/kit_api.rb
 - app/pb_kits/playbook/pb_docs/kit_example.html.erb
 - app/pb_kits/playbook/pb_docs/kit_example.rb
-- app/pb_kits/playbook/pb_enhanced_element/element_observer.js
-- app/pb_kits/playbook/pb_enhanced_element/index.js
+- app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
+- app/pb_kits/playbook/pb_enhanced_element/index.ts
 - app/pb_kits/playbook/pb_file_upload/_file_upload.scss
 - app/pb_kits/playbook/pb_file_upload/_file_upload.tsx
 - app/pb_kits/playbook/pb_file_upload/docs/_description.md
@@ -2352,9 +2358,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key: