playbook_ui 14.5.0.pre.alpha.play1586datearea4115 → 14.5.0.pre.alpha.psych4support3941

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -60
  3. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
  5. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
  6. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
  7. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  9. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  10. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -4
  11. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
  13. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  14. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  15. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +227 -211
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -4
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
  19. data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
  20. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  21. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
  23. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
  24. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
  25. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
  26. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
  27. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
  28. data/dist/chunks/{_typeahead-C9g4qCcE.js → _typeahead-BYw0HEgO.js} +1 -1
  29. data/dist/chunks/_weekday_stacked-DumiyWjh.js +45 -0
  30. data/dist/chunks/vendor.js +1 -1
  31. data/dist/playbook-doc.js +1 -1
  32. data/dist/playbook-rails-react-bindings.js +1 -1
  33. data/dist/playbook-rails.js +1 -1
  34. data/lib/playbook/version.rb +1 -1
  35. metadata +4 -29
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  38. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
  39. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
  41. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
  42. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
  43. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
  44. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
  45. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
  46. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
  47. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
  48. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
  49. data/app/pb_kits/playbook/pb_timeline/_date_area.tsx +0 -38
  50. data/app/pb_kits/playbook/pb_timeline/_detail_area.tsx +0 -29
  51. data/app/pb_kits/playbook/pb_timeline/_node_area.tsx +0 -42
  52. data/app/pb_kits/playbook/pb_timeline/date_area.html.erb +0 -12
  53. data/app/pb_kits/playbook/pb_timeline/date_area.rb +0 -13
  54. data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb +0 -3
  55. data/app/pb_kits/playbook/pb_timeline/detail_area.rb +0 -11
  56. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  57. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -72
  58. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -4
  59. data/app/pb_kits/playbook/pb_timeline/node_area.html.erb +0 -14
  60. data/app/pb_kits/playbook/pb_timeline/node_area.rb +0 -16
  61. data/dist/chunks/_weekday_stacked-C2sJArua.js +0 -45
@@ -1 +1 @@
1
- import WebpackerReact from"webpacker-react";import{B as BarGraph,C as CircleChart,D as Dialog,a as DialogBody,b as DialogFooter,c as DialogHeader,d as DistributionBar,M as MultiLevelSelect,L as Legend,e as LineGraph,P as Passphrase,R as RichTextEditor,T as TreemapChart,f as Typeahead,G as Gauge,g as PhoneNumberInput}from"./chunks/_typeahead-C9g4qCcE.js";import"react/jsx-runtime";import"react";import"./chunks/lib-CEpcaI8y.js";import"react-dom";import"react-trix";import"trix";import"react-is";var ujs$1={};Object.defineProperty(ujs$1,"__esModule",{value:true});var ujs={handleEvent:function handleEvent(eventName,callback){var _ref=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:false},once=_ref.once;var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){if(once){$(document).one(eventName,callback)}else{$(document).on(eventName,callback)}}else{document.addEventListener(eventName,callback,{once:once})}},setup:function setup(onMount,onUnmount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;var Turbolinks=window.Turbolinks;if(typeof Turbolinks!=="undefined"&&Turbolinks.supported){if(typeof Turbolinks.EVENTS!=="undefined"){this.turbolinksClassic(onMount,onUnmount)}else if(typeof Turbolinks.controller!=="undefined"){this.turbolinks5(onMount,onUnmount)}else{this.turbolinksClassicDeprecated(onMount,onUnmount)}}else if($&&typeof $.pjax==="function"){this.pjax(onMount,onUnmount)}else{this.native(onMount)}},turbolinks5:function turbolinks5(onMount,onUnmount){this.handleEvent("turbolinks:load",onMount,{once:true});this.handleEvent("turbolinks:render",onMount);this.handleEvent("turbolinks:before-render",onUnmount)},turbolinksClassic:function turbolinksClassic(onMount,onUnmount){var Turbolinks=window.Turbolinks;this.handleEvent(Turbolinks.EVENTS.CHANGE,onMount);this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,onUnmount)},turbolinksClassicDeprecated:function turbolinksClassicDeprecated(onMount,onUnmount){var Turbolinks=window.Turbolinks;Turbolinks.pagesCached(0);this.handleEvent("page:change",onMount);this.handleEvent("page:receive",onUnmount)},pjax:function pjax(onMount,onUnmount){this.handleEvent("ready",onMount);this.handleEvent("pjax:end",onMount);this.handleEvent("pjax:beforeReplace",onUnmount)},native:function native(onMount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){$((function(){return onMount()}))}else if("addEventListener"in window){document.addEventListener("DOMContentLoaded",onMount)}else{window.attachEvent("onload",onMount)}}};var _default=ujs$1.default=ujs;WebpackerReact.registerComponents({BarGraph:BarGraph,CircleChart:CircleChart,Dialog:Dialog,DialogBody:DialogBody,DialogFooter:DialogFooter,DialogHeader:DialogHeader,DistributionBar:DistributionBar,MultiLevelSelect:MultiLevelSelect,Legend:Legend,LineGraph:LineGraph,Passphrase:Passphrase,RichTextEditor:RichTextEditor,TreemapChart:TreemapChart,Typeahead:Typeahead,Gauge:Gauge,PhoneNumberInput:PhoneNumberInput});_default.setup((()=>WebpackerReact.mountComponents()),(()=>WebpackerReact.unmountComponents()));
1
+ import WebpackerReact from"webpacker-react";import{B as BarGraph,C as CircleChart,D as Dialog,a as DialogBody,b as DialogFooter,c as DialogHeader,d as DistributionBar,M as MultiLevelSelect,L as Legend,e as LineGraph,P as Passphrase,R as RichTextEditor,T as TreemapChart,f as Typeahead,G as Gauge,g as PhoneNumberInput}from"./chunks/_typeahead-BYw0HEgO.js";import"react/jsx-runtime";import"react";import"./chunks/lib-CEpcaI8y.js";import"react-dom";import"react-trix";import"trix";import"react-is";var ujs$1={};Object.defineProperty(ujs$1,"__esModule",{value:true});var ujs={handleEvent:function handleEvent(eventName,callback){var _ref=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:false},once=_ref.once;var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){if(once){$(document).one(eventName,callback)}else{$(document).on(eventName,callback)}}else{document.addEventListener(eventName,callback,{once:once})}},setup:function setup(onMount,onUnmount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;var Turbolinks=window.Turbolinks;if(typeof Turbolinks!=="undefined"&&Turbolinks.supported){if(typeof Turbolinks.EVENTS!=="undefined"){this.turbolinksClassic(onMount,onUnmount)}else if(typeof Turbolinks.controller!=="undefined"){this.turbolinks5(onMount,onUnmount)}else{this.turbolinksClassicDeprecated(onMount,onUnmount)}}else if($&&typeof $.pjax==="function"){this.pjax(onMount,onUnmount)}else{this.native(onMount)}},turbolinks5:function turbolinks5(onMount,onUnmount){this.handleEvent("turbolinks:load",onMount,{once:true});this.handleEvent("turbolinks:render",onMount);this.handleEvent("turbolinks:before-render",onUnmount)},turbolinksClassic:function turbolinksClassic(onMount,onUnmount){var Turbolinks=window.Turbolinks;this.handleEvent(Turbolinks.EVENTS.CHANGE,onMount);this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,onUnmount)},turbolinksClassicDeprecated:function turbolinksClassicDeprecated(onMount,onUnmount){var Turbolinks=window.Turbolinks;Turbolinks.pagesCached(0);this.handleEvent("page:change",onMount);this.handleEvent("page:receive",onUnmount)},pjax:function pjax(onMount,onUnmount){this.handleEvent("ready",onMount);this.handleEvent("pjax:end",onMount);this.handleEvent("pjax:beforeReplace",onUnmount)},native:function native(onMount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){$((function(){return onMount()}))}else if("addEventListener"in window){document.addEventListener("DOMContentLoaded",onMount)}else{window.attachEvent("onload",onMount)}}};var _default=ujs$1.default=ujs;WebpackerReact.registerComponents({BarGraph:BarGraph,CircleChart:CircleChart,Dialog:Dialog,DialogBody:DialogBody,DialogFooter:DialogFooter,DialogHeader:DialogHeader,DistributionBar:DistributionBar,MultiLevelSelect:MultiLevelSelect,Legend:Legend,LineGraph:LineGraph,Passphrase:Passphrase,RichTextEditor:RichTextEditor,TreemapChart:TreemapChart,Typeahead:Typeahead,Gauge:Gauge,PhoneNumberInput:PhoneNumberInput});_default.setup((()=>WebpackerReact.mountComponents()),(()=>WebpackerReact.unmountComponents()));
@@ -1 +1 @@
1
- var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:true,configurable:true,writable:true,value:value}):obj[key]=value;var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!=="symbol"?key+"":key,value);import"./chunks/pb_form_validation-D9zkwt2b.js";import{P as PbEnhancedElement,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,f as PbTypeahead,g as PbTable,h as PbTextarea}from"./chunks/lib-CEpcaI8y.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"webpacker-react";import"./chunks/_typeahead-C9g4qCcE.js";import"react-dom";import"react-trix";import"trix";import"react-is";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR$1="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR$1)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const CONTENT_SELECTOR='[data-advanced-table-content="id"]';const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";const _PbAdvancedTable=class _PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){return document.querySelector(CONTENT_SELECTOR.replace("id",this.element.id))}connect(){this.element.addEventListener("click",(()=>{if(!_PbAdvancedTable.isCollapsing){const isExpanded=this.element.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block";if(!isExpanded){_PbAdvancedTable.expandedRows.add(this.element.id)}else{_PbAdvancedTable.expandedRows.delete(this.element.id)}}this.toggleElement(this.target)}))}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),250)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),200)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}static handleToggleAllHeaders(element){const table=element.closest(".pb_table");const firstLevelButtons=table.querySelectorAll(".pb_advanced_table_body > .pb_table_tr [data-advanced-table]");const expandedRows=Array.from(firstLevelButtons).filter((button=>button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block"));if(expandedRows.length===firstLevelButtons.length){expandedRows.forEach((button=>{button.click()}));this.expandedRows.clear()}else{firstLevelButtons.forEach((button=>{if(!this.expandedRows.has(button.id)){button.click()}}))}}static handleToggleAllSubRows(element,rowDepth){const parentElement=element.closest(".toggle-content");const subrowButtons=parentElement.querySelectorAll(".depth-sub-row-"+rowDepth+" [data-advanced-table]");const expandedSubRows=Array.from(subrowButtons).filter((button=>button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block"));if(expandedSubRows.length===subrowButtons.length){expandedSubRows.forEach((button=>{button.click()}))}else{subrowButtons.forEach((button=>{if(!this.expandedRows.has(button.id)){button.click()}}))}}};__publicField(_PbAdvancedTable,"expandedRows",new Set);__publicField(_PbAdvancedTable,"isCollapsing",false);let PbAdvancedTable=_PbAdvancedTable;window.expandAllRows=element=>{PbAdvancedTable.handleToggleAllHeaders(element)};window.expandAllSubRows=(element,rowDepth)=>{PbAdvancedTable.handleToggleAllSubRows(element,rowDepth)};const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}const STAR_RATING_WRAPPER_SELECTOR="[data-pb-star-rating-wrapper]";const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_DATA_SELECTOR="[data-pb-star-rating-input]";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_WRAPPER_SELECTOR}connect(){this.addEventListeners();this.handleFormReset();this.setDefaultValue()}addEventListeners(){this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId);this.clearFormValidation()}));star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{var _a;(_a=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR))==null?void 0:_a.setAttribute("value","");this.resetStarRatingValues()}))}}resetStarRatingValues(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}}))}clearFormValidation(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput.checkValidity()){const errorLabelElement=this.element.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);const defaultValue=hiddenInput.value;if(defaultValue){this.updateStarColors(defaultValue)}}}const RADIO_SELECTOR="[data-pb-radio-children]";const RADIO_WRAPPER_SELECTOR="[data-pb-radio-children-wrapper]";class PbRadio extends PbEnhancedElement{static get selector(){return RADIO_SELECTOR}connect(){const radioWrapperElement=this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR);radioWrapperElement.addEventListener("click",(()=>{this.element.querySelector("input[type='radio']").click()}))}}window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();PbStarRating.start();PbRadio.start();
1
+ import"./chunks/pb_form_validation-D9zkwt2b.js";import{P as PbEnhancedElement,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,f as PbTypeahead,g as PbTable,h as PbTextarea}from"./chunks/lib-CEpcaI8y.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"webpacker-react";import"./chunks/_typeahead-BYw0HEgO.js";import"react-dom";import"react-trix";import"trix";import"react-is";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR$1="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR$1)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const CONTENT_SELECTOR='[data-advanced-table-content="id"]';const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";class PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){return document.querySelector(CONTENT_SELECTOR.replace("id",this.element.id))}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}))}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),250)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),200)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}}const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}const STAR_RATING_WRAPPER_SELECTOR="[data-pb-star-rating-wrapper]";const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_DATA_SELECTOR="[data-pb-star-rating-input]";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_WRAPPER_SELECTOR}connect(){this.addEventListeners();this.handleFormReset();this.setDefaultValue()}addEventListeners(){this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId);this.clearFormValidation()}));star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{var _a;(_a=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR))==null?void 0:_a.setAttribute("value","");this.resetStarRatingValues()}))}}resetStarRatingValues(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}}))}clearFormValidation(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput.checkValidity()){const errorLabelElement=this.element.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);const defaultValue=hiddenInput.value;if(defaultValue){this.updateStarColors(defaultValue)}}}const RADIO_SELECTOR="[data-pb-radio-children]";const RADIO_WRAPPER_SELECTOR="[data-pb-radio-children-wrapper]";class PbRadio extends PbEnhancedElement{static get selector(){return RADIO_SELECTOR}connect(){const radioWrapperElement=this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR);radioWrapperElement.addEventListener("click",(()=>{this.element.querySelector("input[type='radio']").click()}))}}window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();PbStarRating.start();PbRadio.start();
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.5.0"
5
- VERSION = "14.5.0.pre.alpha.play1586datearea4115"
5
+ VERSION = "14.5.0.pre.alpha.psych4support3941"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.5.0.pre.alpha.play1586datearea4115
4
+ version: 14.5.0.pre.alpha.psych4support3941
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-10-17 00:00:00.000000000 Z
12
+ date: 2024-10-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1126,8 +1126,6 @@ files:
1126
1126
  - app/pb_kits/playbook/pb_dropdown/context/index.tsx
1127
1127
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
1128
1128
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
1129
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
1130
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
1131
1129
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
1132
1130
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
1133
1131
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
@@ -1366,9 +1364,6 @@ files:
1366
1364
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
1367
1365
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
1368
1366
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
1369
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
1370
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
1371
- - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
1372
1367
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
1373
1368
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
1374
1369
  - app/pb_kits/playbook/pb_form_pill/docs/example.yml
@@ -1798,7 +1793,6 @@ files:
1798
1793
  - app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
1799
1794
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
1800
1795
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
1801
- - app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
1802
1796
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb
1803
1797
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx
1804
1798
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md
@@ -1806,8 +1800,6 @@ files:
1806
1800
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
1807
1801
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
1808
1802
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
1809
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
1810
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
1811
1803
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
1812
1804
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
1813
1805
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
@@ -1821,17 +1813,12 @@ files:
1821
1813
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
1822
1814
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
1823
1815
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
1824
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
1825
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
1826
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
1827
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
1828
1816
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
1829
1817
  - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
1830
1818
  - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
1831
1819
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
1832
1820
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
1833
1821
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
1834
- - app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
1835
1822
  - app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
1836
1823
  - app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx
1837
1824
  - app/pb_kits/playbook/pb_multiple_users/docs/_description.md
@@ -2699,24 +2686,14 @@ files:
2699
2686
  - app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb
2700
2687
  - app/pb_kits/playbook/pb_time_stacked/time_stacked.rb
2701
2688
  - app/pb_kits/playbook/pb_time_stacked/time_stacked.test.js
2702
- - app/pb_kits/playbook/pb_timeline/_date_area.tsx
2703
- - app/pb_kits/playbook/pb_timeline/_detail_area.tsx
2704
2689
  - app/pb_kits/playbook/pb_timeline/_item.tsx
2705
- - app/pb_kits/playbook/pb_timeline/_node_area.tsx
2706
2690
  - app/pb_kits/playbook/pb_timeline/_timeline.scss
2707
2691
  - app/pb_kits/playbook/pb_timeline/_timeline.tsx
2708
- - app/pb_kits/playbook/pb_timeline/date_area.html.erb
2709
- - app/pb_kits/playbook/pb_timeline/date_area.rb
2710
- - app/pb_kits/playbook/pb_timeline/detail_area.html.erb
2711
- - app/pb_kits/playbook/pb_timeline/detail_area.rb
2712
2692
  - app/pb_kits/playbook/pb_timeline/docs/_description.md
2713
2693
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb
2714
2694
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
2715
2695
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
2716
2696
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
2717
- - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
2718
- - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
2719
- - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
2720
2697
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
2721
2698
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
2722
2699
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
@@ -2724,8 +2701,6 @@ files:
2724
2701
  - app/pb_kits/playbook/pb_timeline/docs/index.js
2725
2702
  - app/pb_kits/playbook/pb_timeline/item.html.erb
2726
2703
  - app/pb_kits/playbook/pb_timeline/item.rb
2727
- - app/pb_kits/playbook/pb_timeline/node_area.html.erb
2728
- - app/pb_kits/playbook/pb_timeline/node_area.rb
2729
2704
  - app/pb_kits/playbook/pb_timeline/timeline.html.erb
2730
2705
  - app/pb_kits/playbook/pb_timeline/timeline.rb
2731
2706
  - app/pb_kits/playbook/pb_timeline/timeline.test.js
@@ -3095,8 +3070,8 @@ files:
3095
3070
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3096
3071
  - app/pb_kits/playbook/utilities/text.ts
3097
3072
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3098
- - dist/chunks/_typeahead-C9g4qCcE.js
3099
- - dist/chunks/_weekday_stacked-C2sJArua.js
3073
+ - dist/chunks/_typeahead-BYw0HEgO.js
3074
+ - dist/chunks/_weekday_stacked-DumiyWjh.js
3100
3075
  - dist/chunks/lazysizes-B7xYodB-.js
3101
3076
  - dist/chunks/lib-CEpcaI8y.js
3102
3077
  - dist/chunks/pb_form_validation-D9zkwt2b.js
@@ -1,45 +0,0 @@
1
- import React, { useRef } from 'react'
2
- import { Button, Dropdown } from 'playbook-ui'
3
-
4
- const options = [
5
- {
6
- label: "United States",
7
- value: "United States",
8
- },
9
- {
10
- label: "Canada",
11
- value: "Canada",
12
- },
13
- {
14
- label: "Pakistan",
15
- value: "Pakistan",
16
- }
17
- ]
18
-
19
- const DropdownClearSelection = (props) => {
20
- const dropdownRef = useRef(null)
21
-
22
- const handleReset = () => {
23
- if (dropdownRef.current) {
24
- dropdownRef.current.clearSelected()
25
- }
26
- }
27
-
28
- return (
29
- <>
30
- <Dropdown
31
- defaultValue={options[2]}
32
- options={options}
33
- ref={dropdownRef}
34
- {...props}
35
- />
36
- <Button
37
- marginTop="md"
38
- onClick={handleReset}
39
- text="Reset"
40
- />
41
- </>
42
- )
43
- }
44
-
45
- export default DropdownClearSelection
@@ -1 +0,0 @@
1
- To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
@@ -1,19 +0,0 @@
1
- <%
2
- names = [
3
- { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
4
- { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
5
- { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
6
- { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
7
- { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
8
- ]
9
- %>
10
-
11
- <%= pb_rails("typeahead", props: {
12
- html_options: { style: { maxWidth: "240px" }},
13
- id: "typeahead-form-pill",
14
- is_multi: true,
15
- options: names,
16
- label: "Names",
17
- pills: true,
18
- truncate: 1,
19
- }) %>
@@ -1,27 +0,0 @@
1
- import React from 'react'
2
- import Typeahead from '../../pb_typeahead/_typeahead'
3
-
4
- const names = [
5
- { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
6
- { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
7
- { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
8
- { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
9
- { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
10
- ]
11
-
12
- const FormPillTruncatedText = (props) => {
13
- return (
14
- <>
15
- <Typeahead
16
- htmlOptions={{ style: { maxWidth: "240px" }}}
17
- isMulti
18
- label="Names"
19
- options={names}
20
- truncate={1}
21
- {...props}
22
- />
23
- </>
24
- )
25
- }
26
-
27
- export default FormPillTruncatedText
@@ -1 +0,0 @@
1
- For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
@@ -1,5 +0,0 @@
1
- import { createContext } from "react";
2
-
3
- const MultiLevelSelectContext = createContext<any>({});
4
-
5
- export default MultiLevelSelectContext;
@@ -1,93 +0,0 @@
1
- <% treeData = [{
2
- label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
4
- id: "100",
5
- expanded: true,
6
- children: [
7
- {
8
- label: "People",
9
- value: "People",
10
- id: "101",
11
- expanded: true,
12
- children: [
13
- {
14
- label: "Talent Acquisition",
15
- value: "Talent Acquisition",
16
- id: "102",
17
- },
18
- {
19
- label: "Business Affairs",
20
- value: "Business Affairs",
21
- id: "103",
22
- children: [
23
- {
24
- label: "Initiatives",
25
- value: "Initiatives",
26
- id: "104",
27
- },
28
- {
29
- label: "Learning & Development",
30
- value: "Learning & Development",
31
- id: "105",
32
- },
33
- ],
34
- },
35
- {
36
- label: "People Experience",
37
- value: "People Experience",
38
- id: "106",
39
- },
40
- ],
41
- },
42
- {
43
- label: "Contact Center",
44
- value: "Contact Center",
45
- id: "107",
46
- children: [
47
- {
48
- label: "Appointment Management",
49
- value: "Appointment Management",
50
- id: "108",
51
- },
52
- {
53
- label: "Customer Service",
54
- value: "Customer Service",
55
- id: "109",
56
- },
57
- {
58
- label: "Energy",
59
- value: "Energy",
60
- id: "110",
61
- },
62
- ],
63
- },
64
- ],
65
- }] %>
66
-
67
- <%= pb_rails("multi_level_select", props: {
68
- id: "multi-level-select-reset-example",
69
- name: "my_array",
70
- tree_data: treeData,
71
- return_all_selected: true
72
- }) %>
73
-
74
- <%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
75
-
76
-
77
- <script>
78
- window.addEventListener('DOMContentLoaded', () => {
79
- const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
80
-
81
- exampleResetButton.addEventListener("click", () => {
82
- clearMultiLevelSelectById('multi-level-select-reset-example');
83
- });
84
- function clearMultiLevelSelectById(id) {
85
- const clearFunction = window[`clearMultiLevelSelect_${id}`];
86
- if (clearFunction) {
87
- clearFunction();
88
- } else {
89
- console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
90
- }
91
- }
92
- })
93
- </script>
@@ -1 +0,0 @@
1
- In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work.
@@ -1,105 +0,0 @@
1
- import React from "react";
2
- import MultiLevelSelect from "../_multi_level_select";
3
- import Badge from "../../pb_badge/_badge";
4
-
5
- const treeData = [
6
- {
7
- label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
9
- id: "powerhome1",
10
- expanded: true,
11
- children: [
12
- {
13
- label: "People",
14
- value: "People",
15
- id: "people1",
16
- expanded: true,
17
- status: "active",
18
- children: [
19
- {
20
- label: "Talent Acquisition",
21
- value: "Talent Acquisition",
22
- id: "talent1",
23
- },
24
- {
25
- label: "Business Affairs",
26
- value: "Business Affairs",
27
- id: "business1",
28
- status: "active",
29
- variant: "primary",
30
-
31
- children: [
32
- {
33
- label: "Initiatives",
34
- value: "Initiatives",
35
- id: "initiative1",
36
- },
37
- {
38
- label: "Learning & Development",
39
- value: "Learning & Development",
40
- id: "development1",
41
- status: "Inactive",
42
- },
43
- ],
44
- },
45
- {
46
- label: "People Experience",
47
- value: "People Experience",
48
- id: "experience1",
49
- },
50
- ],
51
- },
52
- {
53
- label: "Contact Center",
54
- value: "Contact Center",
55
- id: "contact1",
56
- status: "Inactive",
57
- variant: "error",
58
- children: [
59
- {
60
- label: "Appointment Management",
61
- value: "Appointment Management",
62
- id: "appointment1",
63
- },
64
- {
65
- label: "Customer Service",
66
- value: "Customer Service",
67
- id: "customer1",
68
- },
69
- {
70
- label: "Energy",
71
- value: "Energy",
72
- id: "energy1",
73
- },
74
- ],
75
- },
76
- ],
77
- },
78
- ];
79
-
80
- const MultiLevelSelectWithChildren = (props) => {
81
- return (
82
- <div>
83
- <MultiLevelSelect
84
- id="multiselect-with-children"
85
- onSelect={(selectedNodes) =>
86
- console.log("Selected Items", selectedNodes)
87
- }
88
- treeData={treeData}
89
- {...props}
90
- >
91
- <MultiLevelSelect.Options>
92
- {(item) => (
93
- <Badge
94
- marginLeft="sm"
95
- text={item.status}
96
- variant={item.status === "active" ? "success" : "warning"}
97
- />
98
- )}
99
- </MultiLevelSelect.Options>
100
- </MultiLevelSelect>
101
- </div>
102
- );
103
- };
104
-
105
- export default MultiLevelSelectWithChildren;
@@ -1 +0,0 @@
1
- The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
@@ -1,106 +0,0 @@
1
- import React from "react";
2
- import MultiLevelSelect from "../_multi_level_select";
3
- import Badge from "../../pb_badge/_badge";
4
-
5
- const treeData = [
6
- {
7
- label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
9
- id: "powerhome1",
10
- expanded: true,
11
- children: [
12
- {
13
- label: "People",
14
- value: "People",
15
- id: "people1",
16
- expanded: true,
17
- status: "active",
18
- children: [
19
- {
20
- label: "Talent Acquisition",
21
- value: "Talent Acquisition",
22
- id: "talent1",
23
- },
24
- {
25
- label: "Business Affairs",
26
- value: "Business Affairs",
27
- id: "business1",
28
- status: "active",
29
- variant: "primary",
30
-
31
- children: [
32
- {
33
- label: "Initiatives",
34
- value: "Initiatives",
35
- id: "initiative1",
36
- },
37
- {
38
- label: "Learning & Development",
39
- value: "Learning & Development",
40
- id: "development1",
41
- status: "Inactive",
42
- },
43
- ],
44
- },
45
- {
46
- label: "People Experience",
47
- value: "People Experience",
48
- id: "experience1",
49
- },
50
- ],
51
- },
52
- {
53
- label: "Contact Center",
54
- value: "Contact Center",
55
- id: "contact1",
56
- status: "Inactive",
57
- variant: "error",
58
- children: [
59
- {
60
- label: "Appointment Management",
61
- value: "Appointment Management",
62
- id: "appointment1",
63
- },
64
- {
65
- label: "Customer Service",
66
- value: "Customer Service",
67
- id: "customer1",
68
- },
69
- {
70
- label: "Energy",
71
- value: "Energy",
72
- id: "energy1",
73
- },
74
- ],
75
- },
76
- ],
77
- },
78
- ];
79
-
80
- const MultiLevelSelectWithChildrenWithRadios = (props) => {
81
- return (
82
- <div>
83
- <MultiLevelSelect
84
- id="multiselect-with-children"
85
- onSelect={(selectedNodes) =>
86
- console.log("Selected Items", selectedNodes)
87
- }
88
- treeData={treeData}
89
- variant="single"
90
- {...props}
91
- >
92
- <MultiLevelSelect.Options>
93
- {(item) => (
94
- <Badge
95
- marginLeft="sm"
96
- text={item.status}
97
- variant={item.status === "active" ? "success" : "warning"}
98
- />
99
- )}
100
- </MultiLevelSelect.Options>
101
- </MultiLevelSelect>
102
- </div>
103
- );
104
- };
105
-
106
- export default MultiLevelSelectWithChildrenWithRadios;