@abgov/react-components 4.0.0-alpha.159 → 4.0.0-alpha.160

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.159",
+  "version": "4.0.0-alpha.160",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -148,7 +148,7 @@ function create_each_block$7(ctx){let option;let t0_value=/*option*/ctx[50].labe
   `);toggle_class(div,"dropdown-native",/*_native*/ctx[14]);},m(target,anchor){insert(target,div,anchor);if_block.m(div,null);/*div_binding*/ctx[35](div);},p(ctx,dirty){if(current_block_type===(current_block_type=select_block_type(ctx))&&if_block){if_block.p(ctx,dirty);}else {if_block.d(1);if_block=current_block_type(ctx);if(if_block){if_block.c();if_block.m(div,null);}}if(dirty[0]&/*name*/1&&div_data_testid_value!==(div_data_testid_value=`${/*name*/ctx[0]}-dropdown`)){attr(div,"data-testid",div_data_testid_value);}if(dirty[0]&/*mt, mr, mb, ml, width, _computedWidth*/528160&&div_style_value!==(div_style_value=`
     ${calculateMargin(/*mt*/ctx[8],/*mr*/ctx[9],/*mb*/ctx[10],/*ml*/ctx[11])}
     --width: ${/*width*/ctx[5]||/*_computedWidth*/ctx[19]}
-  `)){attr(div,"style",div_style_value);}if(dirty[0]&/*_native*/16384){toggle_class(div,"dropdown-native",/*_native*/ctx[14]);}},i:noop,o:noop,d(detaching){if(detaching)detach(div);if_block.d();/*div_binding*/ctx[35](null);}};}function parseValues(selectedValue){let rawValue;try{rawValue=JSON.parse(selectedValue||"[]");}catch(e){rawValue=[selectedValue];}const rawValues=typeof rawValue==="object"?rawValue:[rawValue];// convert all values to strings to avoid later type comparison issues
+  `)){attr(div,"style",div_style_value);}if(dirty[0]&/*_native*/16384){toggle_class(div,"dropdown-native",/*_native*/ctx[14]);}},i:noop,o:noop,d(detaching){if(detaching)detach(div);if_block.d();/*div_binding*/ctx[35](null);}};}function parseValues(selectedValue){let rawValue;try{rawValue=JSON.parse(selectedValue||`[""]`);}catch(e){rawValue=[selectedValue];}const rawValues=typeof rawValue==="object"?rawValue:[rawValue];// convert all values to strings to avoid later type comparison issues
 return rawValues.map(val=>`${val}`);}function instance$w($$self,$$props,$$invalidate){let _disabled;let _error;let _multiselect;let _native;let{name}=$$props;let{arialabel=""}=$$props;let{value=""}=$$props;let{leadingicon=null}=$$props;let{maxheight="276px"}=$$props;let{placeholder=""}=$$props;let{width=""}=$$props;let{disabled="false"}=$$props;let{error="false"}=$$props;let{multiselect="false"}=$$props;let{native="false"}=$$props;let{mt=null}=$$props;let{mr=null}=$$props;let{mb=null}=$$props;let{ml=null}=$$props;// Private
 let _values=[];let _options=[];let _selectedLabel="";let _isMenuVisible=false;let _highlightedIndex=0;let _computedWidth;let _dropdownMenuPos="auto";let _el;let _menuEl;let _selectEl;onMount(async()=>{// watch for DOM changes within the slot => dynamic binding
 const slot=_el.querySelector("slot");slot===null||slot===void 0?void 0:slot.addEventListener("slotchange",_e=>{$$invalidate(16,_selectedLabel="");$$invalidate(15,_values=parseValues(value));$$invalidate(12,_options=getOptions());});});onDestroy(()=>{removeKeyboardEventListeners();});// Functions
@@ -157,7 +157,7 @@ return slot.assignedElements();}// unit tests
 const el=_native?_selectEl:_el;return [...el.children];}// Create a list of the options based on the children within the slot
 // The children don't have to be goa-dropdown-item elements. Any child element
 // work as long as it has a value and label content
-function getOptions(){const children=getChildren();return children.filter(child=>child.tagName==="GOA-DROPDOWN-ITEM").map(el=>{const option=el;const value=el.getAttribute("value")||option.value;const label=el.getAttribute("label")||option.label||value;const selected=_values.includes(value);if(selected){$$invalidate(16,_selectedLabel=label);$$invalidate(15,_values=[value]);}return {selected,value,label};});}// compute the required width to enure all children fit
+function getOptions(){const children=getChildren();return children.filter(child=>child.tagName==="GOA-DROPDOWN-ITEM").map(el=>{const option=el;const value=el.getAttribute("value")||option.value||"";const label=el.getAttribute("label")||option.label||value;const selected=_values.includes(value);if(selected){$$invalidate(16,_selectedLabel=label);$$invalidate(15,_values=[value]);}return {selected,value,label};});}// compute the required width to enure all children fit
 function getCustomDropdownWidth(options){let width;let maxCount=0;if(options.length===0&&placeholder!==""){return `${placeholder.length+12}ch`;}options.forEach(option=>{const label=option.label||option.value||"";if(!width&&maxCount<label.length){maxCount=label.length;width=`${Math.max(20,maxCount+12)}ch`;}});return width;}function addKeyboardEventListeners(){_el.addEventListener("focus",onFocus,true);_el.addEventListener("blur",onBlur,true);}function removeKeyboardEventListeners(){_el.removeEventListener("focus",onFocus,true);_el.removeEventListener("blur",onBlur,true);}async function showMenu(){if(_disabled||_isMenuVisible){return;}$$invalidate(17,_isMenuVisible=true);await tick();// hide menu on blur
 _menuEl.addEventListener("blur",closeMenu);// bind up/down arrows to navigate options
 _menuEl.addEventListener("mouseover",onHighlight);setDropdownMenuPosition();}function closeMenu(){_menuEl.removeEventListener("blur",closeMenu);_menuEl.removeEventListener("mouseover",onHighlight);setHighlightedIndexToSelected();$$invalidate(17,_isMenuVisible=false);$$invalidate(20,_dropdownMenuPos="auto");}function setDropdownMenuPosition(){const dropdownRect=_el.getBoundingClientRect();const menuRect=_menuEl.getBoundingClientRect();if(window.innerHeight-dropdownRect.top<dropdownRect.height+menuRect.height){$$invalidate(20,_dropdownMenuPos=menuRect.top-dropdownRect.top+'px');}}function setHighlightedIndexToSelected(){$$invalidate(18,_highlightedIndex=_options.findIndex(option=>_values.includes(option.value)));}// Event handlers

package/react-components.umd.js

@@ -150,7 +150,7 @@
   `);toggle_class(div,"dropdown-native",/*_native*/ctx[14]);},m(target,anchor){insert(target,div,anchor);if_block.m(div,null);/*div_binding*/ctx[35](div);},p(ctx,dirty){if(current_block_type===(current_block_type=select_block_type(ctx))&&if_block){if_block.p(ctx,dirty);}else {if_block.d(1);if_block=current_block_type(ctx);if(if_block){if_block.c();if_block.m(div,null);}}if(dirty[0]&/*name*/1&&div_data_testid_value!==(div_data_testid_value=`${/*name*/ctx[0]}-dropdown`)){attr(div,"data-testid",div_data_testid_value);}if(dirty[0]&/*mt, mr, mb, ml, width, _computedWidth*/528160&&div_style_value!==(div_style_value=`
     ${calculateMargin(/*mt*/ctx[8],/*mr*/ctx[9],/*mb*/ctx[10],/*ml*/ctx[11])}
     --width: ${/*width*/ctx[5]||/*_computedWidth*/ctx[19]}
-  `)){attr(div,"style",div_style_value);}if(dirty[0]&/*_native*/16384){toggle_class(div,"dropdown-native",/*_native*/ctx[14]);}},i:noop,o:noop,d(detaching){if(detaching)detach(div);if_block.d();/*div_binding*/ctx[35](null);}};}function parseValues(selectedValue){let rawValue;try{rawValue=JSON.parse(selectedValue||"[]");}catch(e){rawValue=[selectedValue];}const rawValues=typeof rawValue==="object"?rawValue:[rawValue];// convert all values to strings to avoid later type comparison issues
+  `)){attr(div,"style",div_style_value);}if(dirty[0]&/*_native*/16384){toggle_class(div,"dropdown-native",/*_native*/ctx[14]);}},i:noop,o:noop,d(detaching){if(detaching)detach(div);if_block.d();/*div_binding*/ctx[35](null);}};}function parseValues(selectedValue){let rawValue;try{rawValue=JSON.parse(selectedValue||`[""]`);}catch(e){rawValue=[selectedValue];}const rawValues=typeof rawValue==="object"?rawValue:[rawValue];// convert all values to strings to avoid later type comparison issues
 	return rawValues.map(val=>`${val}`);}function instance$w($$self,$$props,$$invalidate){const showMenu=_async(function(){if(_disabled||_isMenuVisible){return;}$$invalidate(17,_isMenuVisible=true);return _call(tick,function(){// hide menu on blur
 	_menuEl.addEventListener("blur",closeMenu);// bind up/down arrows to navigate options
 	_menuEl.addEventListener("mouseover",onHighlight);setDropdownMenuPosition();});});let _disabled;let _error;let _multiselect;let _native;let{name}=$$props;let{arialabel=""}=$$props;let{value=""}=$$props;let{leadingicon=null}=$$props;let{maxheight="276px"}=$$props;let{placeholder=""}=$$props;let{width=""}=$$props;let{disabled="false"}=$$props;let{error="false"}=$$props;let{multiselect="false"}=$$props;let{native="false"}=$$props;let{mt=null}=$$props;let{mr=null}=$$props;let{mb=null}=$$props;let{ml=null}=$$props;// Private
@@ -161,7 +161,7 @@
 	const el=_native?_selectEl:_el;return [...el.children];}// Create a list of the options based on the children within the slot
 	// The children don't have to be goa-dropdown-item elements. Any child element
 	// work as long as it has a value and label content
-	function getOptions(){const children=getChildren();return children.filter(child=>child.tagName==="GOA-DROPDOWN-ITEM").map(el=>{const option=el;const value=el.getAttribute("value")||option.value;const label=el.getAttribute("label")||option.label||value;const selected=_values.includes(value);if(selected){$$invalidate(16,_selectedLabel=label);$$invalidate(15,_values=[value]);}return {selected,value,label};});}// compute the required width to enure all children fit
+	function getOptions(){const children=getChildren();return children.filter(child=>child.tagName==="GOA-DROPDOWN-ITEM").map(el=>{const option=el;const value=el.getAttribute("value")||option.value||"";const label=el.getAttribute("label")||option.label||value;const selected=_values.includes(value);if(selected){$$invalidate(16,_selectedLabel=label);$$invalidate(15,_values=[value]);}return {selected,value,label};});}// compute the required width to enure all children fit
 	function getCustomDropdownWidth(options){let width;let maxCount=0;if(options.length===0&&placeholder!==""){return `${placeholder.length+12}ch`;}options.forEach(option=>{const label=option.label||option.value||"";if(!width&&maxCount<label.length){maxCount=label.length;width=`${Math.max(20,maxCount+12)}ch`;}});return width;}function addKeyboardEventListeners(){_el.addEventListener("focus",onFocus,true);_el.addEventListener("blur",onBlur,true);}function removeKeyboardEventListeners(){_el.removeEventListener("focus",onFocus,true);_el.removeEventListener("blur",onBlur,true);}function closeMenu(){_menuEl.removeEventListener("blur",closeMenu);_menuEl.removeEventListener("mouseover",onHighlight);setHighlightedIndexToSelected();$$invalidate(17,_isMenuVisible=false);$$invalidate(20,_dropdownMenuPos="auto");}function setDropdownMenuPosition(){const dropdownRect=_el.getBoundingClientRect();const menuRect=_menuEl.getBoundingClientRect();if(window.innerHeight-dropdownRect.top<dropdownRect.height+menuRect.height){$$invalidate(20,_dropdownMenuPos=menuRect.top-dropdownRect.top+'px');}}function setHighlightedIndexToSelected(){$$invalidate(18,_highlightedIndex=_options.findIndex(option=>_values.includes(option.value)));}// Event handlers
 	/**
 	* @property value the selected value