@vibe/core 4.4.0-alpha-26200.0 → 4.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Dropdown/Dropdown.types.d.ts +0 -12
- package/dist/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.d.ts +1 -5
- package/dist/components/Dropdown/components/Trigger/DropdownInput.d.ts +2 -4
- package/dist/components/Dropdown/context/DropdownContext.types.d.ts +0 -6
- package/dist/components/Dropdown/hooks/useDropdownMultiCombobox.d.ts +1 -1
- package/dist/components/Modal/Modal/Modal.types.d.ts +6 -0
- package/dist/metadata/components.json +11 -18
- package/dist/metadata.json +11 -18
- package/dist/mocked_classnames/components/Dropdown/Dropdown.types.d.ts +0 -12
- package/dist/mocked_classnames/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.d.ts +1 -5
- package/dist/mocked_classnames/components/Dropdown/components/Trigger/DropdownInput.d.ts +2 -4
- package/dist/mocked_classnames/components/Dropdown/context/DropdownContext.types.d.ts +0 -6
- package/dist/mocked_classnames/components/Dropdown/hooks/useDropdownMultiCombobox.d.ts +1 -1
- package/dist/mocked_classnames/components/Modal/Modal/Modal.types.d.ts +6 -0
- package/dist/mocked_classnames/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/DropdownInput.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/DropdownInput.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/Trigger/Trigger.module.scss.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/hooks/useDropdownCombobox.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/hooks/useDropdownCombobox.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/hooks/useDropdownMultiCombobox.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/hooks/useDropdownMultiCombobox.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/modes/DropdownMultiComboboxController.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/modes/DropdownMultiComboboxController.js.map +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.module.scss.js +1 -1
- package/dist/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js +1 -1
- package/dist/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js.map +1 -1
- package/dist/src/components/Dropdown/components/Trigger/DropdownInput.js +1 -1
- package/dist/src/components/Dropdown/components/Trigger/DropdownInput.js.map +1 -1
- package/dist/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js +1 -1
- package/dist/src/components/Dropdown/components/Trigger/MultiSelectTrigger.js.map +1 -1
- package/dist/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js +1 -1
- package/dist/src/components/Dropdown/components/Trigger/SingleSelectTrigger.js.map +1 -1
- package/dist/src/components/Dropdown/components/Trigger/Trigger.module.scss.js +1 -1
- package/dist/src/components/Dropdown/hooks/useDropdownCombobox.js +1 -1
- package/dist/src/components/Dropdown/hooks/useDropdownCombobox.js.map +1 -1
- package/dist/src/components/Dropdown/hooks/useDropdownMultiCombobox.js +1 -1
- package/dist/src/components/Dropdown/hooks/useDropdownMultiCombobox.js.map +1 -1
- package/dist/src/components/Dropdown/modes/DropdownMultiComboboxController.js +1 -1
- package/dist/src/components/Dropdown/modes/DropdownMultiComboboxController.js.map +1 -1
- package/dist/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/src/components/Modal/Modal/Modal.js.map +1 -1
- package/dist/src/components/Modal/Modal/Modal.module.scss.js +1 -1
- package/package.json +2 -2
- package/dist/metadata/examples/DropdownMultiSelectA11y.md +0 -50
- package/dist/metadata/examples/DropdownSearchableSingleSelect.md +0 -379
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{useMemo as e,useCallback as t}from"react";import n from"./useDropdownFiltering.js";import{useMultipleSelection as l,useCombobox as i}from"downshift";function o(o,s,u,r,a,d,p,c,g,m,I,f,h,v,P,O){var S=void 0!==p?p:s,C=n(o,v,P,S),b=C.filteredOptions,M=C.filterOptions,T=e((function(){return b.flatMap((function(e){return e.options}))}),[b]),y=l({selectedItems:S,initialSelectedItems:d,onSelectedItemsChange:function(e){var t=e.selectedItems;void 0===p&&u(t||[]),null==g||g(t||[])}}),V=y.getSelectedItemProps,w=y.getDropdownProps,j=y.addSelectedItem,x=y.removeSelectedItem,D=i({items:T,itemToString:function(e){var t;return null!==(t=null==e?void 0:e.label)&&void 0!==t?t:""},itemToKey:function(e){return void 0!==(null==e?void 0:e.value)?e.value+"":""},isItemDisabled:function(e){return!!e.disabled},isOpen:r,initialIsOpen:a,initialInputValue:c||"",id:O,onIsOpenChange:function(e){e.isOpen?null==f||f():null==I||I()},onInputValueChange:function(e){var t=e.inputValue;M(t||""),null==m||m(t)},onSelectedItemChange:function(e){var t=e.selectedItem;if(t){var n=S.find((function(e){return e.value===t.value}));n?x(n):j(t),null==h||h(t),M("")}},stateReducer:function(e,t){var n,l;switch(t.type){case i.stateChangeTypes.InputKeyDownEnter:case i.stateChangeTypes.ItemClick:return Object.assign(Object.assign({},t.changes),{inputValue:null,isOpen:!0,highlightedIndex:null!==(l=null===(n=t.changes.selectedItem)||void 0===n?void 0:n.index)&&void 0!==l?l:0});case i.stateChangeTypes.InputBlur:case i.stateChangeTypes.ControlledPropUpdatedSelectedItem:return Object.assign(Object.assign({},t.changes),{inputValue:null});default:return t.changes}}}),B=D.isOpen,K=D.inputValue,L=D.highlightedIndex,k=D.getToggleButtonProps,E=D.getLabelProps,F=D.getMenuProps,R=D.getInputProps,U=D.getItemProps,q=D.reset,z=D.openMenu,A=D.toggleMenu,G=D.closeMenu,H=t((function(){void 0===p&&u([]),q(),null==g||g([])}),[p,u,q,g]);return{isOpen:B,inputValue:K,highlightedIndex:L,selectedItems:S,getSelectedItemProps:V,getDropdownProps:w,addSelectedItem:j,getToggleButtonProps:k,getLabelProps:E,getMenuProps:F,getInputProps:R,getItemProps:U,reset:H,removeSelectedItem:x,filteredOptions:b,openMenu:z,toggleMenu:A,closeMenu:G}}export{o as default};
|
|
2
2
|
//# sourceMappingURL=useDropdownMultiCombobox.js.map
|
package/dist/mocked_classnames/src/components/Dropdown/hooks/useDropdownMultiCombobox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDropdownMultiCombobox.js","sources":["../../../../../../src/components/Dropdown/hooks/useDropdownMultiCombobox.ts"],"sourcesContent":["import { useMemo, useCallback, useRef } from \"react\";\nimport useDropdownFiltering from \"./useDropdownFiltering\";\nimport { useMultipleSelection, useCombobox } from \"downshift\";\nimport { type DropdownGroupOption } from \"../Dropdown.types\";\nimport { type BaseItemData } from \"../../BaseItem\";\n\nfunction useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(\n options: DropdownGroupOption<T>,\n selectedItems: T[],\n setSelectedItems: (items: T[]) => void,\n isMenuOpen: boolean,\n autoFocus?: boolean,\n defaultValue?: T[],\n value?: T[],\n inputValueProp?: string,\n onChange?: (options: T[]) => void,\n onInputChange?: (value: string | null) => void,\n onMenuOpen?: () => void,\n onMenuClose?: () => void,\n onOptionSelect?: (option: T) => void,\n filterOption?: (option: T, inputValue: string) => boolean,\n showSelectedOptions?: boolean,\n id?: string,\n onOptionRemove?: (option: T) => void,\n textInput?: boolean,\n interactiveChips?: boolean\n) {\n // Use controlled value if provided, otherwise use internal state\n const currentSelectedItems = value !== undefined ? value : selectedItems;\n // Used only in textInput/interactiveChips modes. The stateReducer resets selectedItem to null so\n // onStateChange fires even on repeat clicks; this ref carries the original item across that reset.\n const pendingToggleRef = useRef<T | null>(null);\n // textInput only: carries the clicked item across stateReducer's selectedItem:null reset.\n const enableToggle = textInput;\n\n const { filteredOptions, filterOptions } = useDropdownFiltering<T>(\n options,\n filterOption,\n showSelectedOptions,\n currentSelectedItems\n );\n const flatOptions = useMemo(() => filteredOptions.flatMap(group => group.options), [filteredOptions]);\n const { getSelectedItemProps, getDropdownProps, addSelectedItem, removeSelectedItem } = useMultipleSelection<T>({\n selectedItems: currentSelectedItems,\n initialSelectedItems: defaultValue,\n onSelectedItemsChange: ({ selectedItems }) => {\n if (value === undefined) {\n setSelectedItems(selectedItems || []);\n }\n onChange?.(selectedItems || []);\n },\n onStateChange: ({ type, selectedItems: newSelectedItems }) => {\n // Notify onOptionRemove for keyboard-driven chip deletion (× button uses contextOnOptionRemove).\n if (\n (type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace ||\n type === useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete) &&\n newSelectedItems\n ) {\n const removedItem = currentSelectedItems.find(\n item => !newSelectedItems.some(si => si.value === item.value)\n );\n if (removedItem) onOptionRemove?.(removedItem);\n }\n }\n });\n\n const {\n isOpen,\n inputValue,\n highlightedIndex,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n reset: downshiftReset,\n openMenu,\n toggleMenu,\n closeMenu\n } = useCombobox<T>({\n items: flatOptions,\n itemToString: item => item?.label ?? \"\",\n itemToKey: item => (item?.value !== undefined ? String(item.value) : \"\"),\n isItemDisabled: item => Boolean(item.disabled),\n isOpen: isMenuOpen,\n initialIsOpen: autoFocus,\n initialInputValue: inputValueProp ?? (textInput ? currentSelectedItems.map(i => i.label).join(\", \") : \"\"),\n id,\n onIsOpenChange: ({ isOpen }) => {\n // Reset the text filter on any open/close change so the full list is always ready.\n filterOptions(\"\");\n isOpen ? onMenuClose?.() : onMenuOpen?.();\n },\n onInputValueChange: useCallback(\n ({ inputValue, type }) => {\n // Only filter on actual user typing. Downshift also writes values into the input on\n // open/close/selection — those changes must not filter the list.\n if (type === useCombobox.stateChangeTypes.InputChange) {\n filterOptions(inputValue || \"\");\n }\n onInputChange?.(inputValue);\n },\n [onInputChange, filterOptions]\n ),\n // When enableToggle (textInput), stateReducer resets selectedItem to null so this fires with\n // null and exits early; onStateChange + pendingToggleRef handle selection instead.\n onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n if (enableToggle || !newSelectedItem) return;\n const existingItem = currentSelectedItems.find(item => item.value === newSelectedItem.value);\n if (existingItem) {\n removeSelectedItem(existingItem);\n onOptionRemove?.(existingItem);\n } else {\n addSelectedItem(newSelectedItem);\n }\n onOptionSelect?.(newSelectedItem);\n filterOptions(\"\");\n },\n onStateChange: ({ type }) => {\n if (!enableToggle) return;\n if (\n type !== useCombobox.stateChangeTypes.ItemClick &&\n type !== useCombobox.stateChangeTypes.InputKeyDownEnter\n )\n return;\n\n const clickedItem = pendingToggleRef.current;\n pendingToggleRef.current = null;\n if (!clickedItem) return;\n const existingItem = currentSelectedItems.find(i => i.value === clickedItem.value);\n if (existingItem) {\n removeSelectedItem(existingItem);\n onOptionRemove?.(existingItem);\n } else {\n addSelectedItem(clickedItem);\n }\n onOptionSelect?.(clickedItem);\n filterOptions(\"\");\n },\n stateReducer: (state, actionAndChanges) => {\n const { type, changes } = actionAndChanges;\n // null clears the input and restores the placeholder (original multi-select behavior).\n // textInput mode shows a comma-separated summary instead.\n const closedInputValue = textInput ? currentSelectedItems.map(i => i.label).join(\", \") : null;\n\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick: {\n if (enableToggle) {\n const clickedItem = changes.selectedItem;\n pendingToggleRef.current = clickedItem ?? null;\n const newItems = clickedItem\n ? currentSelectedItems.some(i => i.value === clickedItem.value)\n ? currentSelectedItems.filter(i => i.value !== clickedItem.value)\n : [...currentSelectedItems, clickedItem]\n : currentSelectedItems;\n const newInputValue = textInput ? newItems.map(i => i.label).join(\", \") : null;\n return {\n ...changes,\n selectedItem: null,\n inputValue: newInputValue,\n isOpen: true,\n highlightedIndex: (changes.selectedItem?.index as number) ?? 0\n };\n }\n // Default mode: original behavior — keep the menu open, clear input to restore placeholder.\n return {\n ...changes,\n inputValue: null,\n isOpen: true,\n highlightedIndex: (changes.selectedItem?.index as number) ?? 0\n };\n }\n case useCombobox.stateChangeTypes.InputBlur:\n case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:\n return { ...changes, inputValue: closedInputValue };\n default:\n if (!changes.isOpen && state.isOpen) {\n return { ...changes, inputValue: closedInputValue };\n }\n return changes;\n }\n }\n });\n\n const reset = useCallback(() => {\n if (value === undefined) {\n setSelectedItems([]);\n }\n downshiftReset();\n onChange?.([]);\n }, [value, setSelectedItems, downshiftReset, onChange]);\n\n return {\n isOpen,\n inputValue,\n highlightedIndex,\n selectedItems: currentSelectedItems,\n getSelectedItemProps,\n getDropdownProps,\n addSelectedItem,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n reset,\n removeSelectedItem,\n filteredOptions,\n openMenu,\n toggleMenu,\n closeMenu\n };\n}\n\nexport default useDropdownMultiCombobox;\n"],"names":["useDropdownMultiCombobox","options","selectedItems","setSelectedItems","isMenuOpen","autoFocus","defaultValue","value","inputValueProp","onChange","onInputChange","onMenuOpen","onMenuClose","onOptionSelect","filterOption","showSelectedOptions","id","onOptionRemove","textInput","interactiveChips","currentSelectedItems","undefined","pendingToggleRef","useRef","enableToggle","_useDropdownFiltering","useDropdownFiltering","filteredOptions","filterOptions","flatOptions","useMemo","flatMap","group","_useMultipleSelection","useMultipleSelection","initialSelectedItems","onSelectedItemsChange","_ref","onStateChange","_ref2","type","newSelectedItems","stateChangeTypes","SelectedItemKeyDownBackspace","SelectedItemKeyDownDelete","removedItem","find","item","some","si","getSelectedItemProps","getDropdownProps","addSelectedItem","removeSelectedItem","_useCombobox","useCombobox","items","itemToString","_a","label","itemToKey","String","isItemDisabled","disabled","isOpen","initialIsOpen","initialInputValue","map","i","join","onIsOpenChange","_ref3","onInputValueChange","useCallback","_ref4","inputValue","InputChange","onSelectedItemChange","_ref5","newSelectedItem","selectedItem","existingItem","_ref6","ItemClick","InputKeyDownEnter","clickedItem","current","stateReducer","state","actionAndChanges","changes","closedInputValue","newItems","filter","concat","_toConsumableArray","newInputValue","Object","assign","highlightedIndex","_b","index","_d","_c","InputBlur","ControlledPropUpdatedSelectedItem","getToggleButtonProps","getLabelProps","getMenuProps","getInputProps","getItemProps","downshiftReset","reset","openMenu","toggleMenu","closeMenu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useDropdownMultiCombobox.js","sources":["../../../../../../src/components/Dropdown/hooks/useDropdownMultiCombobox.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\nimport useDropdownFiltering from \"./useDropdownFiltering\";\nimport { useMultipleSelection, useCombobox } from \"downshift\";\nimport { type DropdownGroupOption } from \"../Dropdown.types\";\nimport { type BaseItemData } from \"../../BaseItem\";\n\nfunction useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(\n options: DropdownGroupOption<T>,\n selectedItems: T[],\n setSelectedItems: (items: T[]) => void,\n isMenuOpen: boolean,\n autoFocus?: boolean,\n defaultValue?: T[],\n value?: T[],\n inputValueProp?: string,\n onChange?: (options: T[]) => void,\n onInputChange?: (value: string | null) => void,\n onMenuOpen?: () => void,\n onMenuClose?: () => void,\n onOptionSelect?: (option: T) => void,\n filterOption?: (option: T, inputValue: string) => boolean,\n showSelectedOptions?: boolean,\n id?: string\n) {\n // Use controlled value if provided, otherwise use internal state\n const currentSelectedItems = value !== undefined ? value : selectedItems;\n\n const { filteredOptions, filterOptions } = useDropdownFiltering<T>(\n options,\n filterOption,\n showSelectedOptions,\n currentSelectedItems\n );\n const flatOptions = useMemo(() => filteredOptions.flatMap(group => group.options), [filteredOptions]);\n const { getSelectedItemProps, getDropdownProps, addSelectedItem, removeSelectedItem } = useMultipleSelection<T>({\n selectedItems: currentSelectedItems,\n initialSelectedItems: defaultValue,\n onSelectedItemsChange: ({ selectedItems }) => {\n if (value === undefined) {\n setSelectedItems(selectedItems || []);\n }\n onChange?.(selectedItems || []);\n }\n });\n\n const {\n isOpen,\n inputValue,\n highlightedIndex,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n reset: downshiftReset,\n openMenu,\n toggleMenu,\n closeMenu\n } = useCombobox<T>({\n items: flatOptions,\n itemToString: item => item?.label ?? \"\",\n itemToKey: item => (item?.value !== undefined ? String(item.value) : \"\"),\n isItemDisabled: item => Boolean(item.disabled),\n isOpen: isMenuOpen,\n initialIsOpen: autoFocus,\n initialInputValue: inputValueProp || \"\",\n id,\n onIsOpenChange: ({ isOpen }) => {\n isOpen ? onMenuClose?.() : onMenuOpen?.();\n },\n onInputValueChange: ({ inputValue }) => {\n filterOptions(inputValue || \"\");\n onInputChange?.(inputValue);\n },\n onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {\n if (!newSelectedItem) return;\n const existingItem = currentSelectedItems.find(item => item.value === newSelectedItem.value);\n if (existingItem) {\n removeSelectedItem(existingItem);\n } else {\n addSelectedItem(newSelectedItem);\n }\n onOptionSelect?.(newSelectedItem);\n filterOptions(\"\");\n },\n stateReducer: (state, actionAndChanges) => {\n switch (actionAndChanges.type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...actionAndChanges.changes,\n inputValue: null,\n isOpen: true,\n highlightedIndex: (actionAndChanges.changes.selectedItem?.index as number) ?? 0\n };\n case useCombobox.stateChangeTypes.InputBlur:\n case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:\n return { ...actionAndChanges.changes, inputValue: null };\n default:\n return actionAndChanges.changes;\n }\n }\n });\n\n const reset = useCallback(() => {\n if (value === undefined) {\n setSelectedItems([]);\n }\n downshiftReset();\n onChange?.([]);\n }, [value, setSelectedItems, downshiftReset, onChange]);\n\n return {\n isOpen,\n inputValue,\n highlightedIndex,\n selectedItems: currentSelectedItems,\n getSelectedItemProps,\n getDropdownProps,\n addSelectedItem,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n getItemProps,\n reset,\n removeSelectedItem,\n filteredOptions,\n openMenu,\n toggleMenu,\n closeMenu\n };\n}\n\nexport default useDropdownMultiCombobox;\n"],"names":["useDropdownMultiCombobox","options","selectedItems","setSelectedItems","isMenuOpen","autoFocus","defaultValue","value","inputValueProp","onChange","onInputChange","onMenuOpen","onMenuClose","onOptionSelect","filterOption","showSelectedOptions","id","currentSelectedItems","undefined","_useDropdownFiltering","useDropdownFiltering","filteredOptions","filterOptions","flatOptions","useMemo","flatMap","group","_useMultipleSelection","useMultipleSelection","initialSelectedItems","onSelectedItemsChange","_ref","getSelectedItemProps","getDropdownProps","addSelectedItem","removeSelectedItem","_useCombobox","useCombobox","items","itemToString","item","_a","label","itemToKey","String","isItemDisabled","disabled","isOpen","initialIsOpen","initialInputValue","onIsOpenChange","_ref2","onInputValueChange","_ref3","inputValue","onSelectedItemChange","_ref4","newSelectedItem","selectedItem","existingItem","find","stateReducer","state","actionAndChanges","type","stateChangeTypes","InputKeyDownEnter","ItemClick","Object","assign","changes","highlightedIndex","_b","index","InputBlur","ControlledPropUpdatedSelectedItem","getToggleButtonProps","getLabelProps","getMenuProps","getInputProps","getItemProps","downshiftReset","reset","openMenu","toggleMenu","closeMenu","useCallback"],"mappings":"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"}
|
package/dist/mocked_classnames/src/components/Dropdown/modes/DropdownMultiComboboxController.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useState as n}from"react";import t from"../hooks/useDropdownMultiCombobox.js";import l from"../components/DropdownWrapperUI.js";var i=function(i){var r=i.options,u=i.isMenuOpen,s=i.autoFocus,d=i.defaultValue,a=i.value,p=i.inputValue,c=i.onChange,g=i.onInputChange,m=i.onMenuClose,v=i.onMenuOpen,O=i.onOptionSelect,f=i.filterOption,
|
|
1
|
+
import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useState as n}from"react";import t from"../hooks/useDropdownMultiCombobox.js";import l from"../components/DropdownWrapperUI.js";var i=function(i){var r=i.options,u=i.isMenuOpen,s=i.autoFocus,d=i.defaultValue,a=i.value,p=i.inputValue,c=i.onChange,g=i.onInputChange,m=i.onMenuClose,v=i.onMenuOpen,O=i.onOptionSelect,f=i.filterOption,b=i.showSelectedOptions,I=void 0===b||b,P=i.clearable,h=void 0===P||P,M=i.searchable,w=void 0===M||M,x=i.multi,S=void 0===x||x,j=i.closeMenuOnSelect,y=void 0===j||j,D=i.dropdownRef,B=i.onFocus,C=i.onBlur,F=i.onKeyDown,V=i.onClear,R=i.onOptionRemove,A=i.loading,K=void 0!==A&&A,T=i.size,z=void 0===T?"medium":T,L=i.id,_=i.boxMode,k=void 0!==_&&_,E=n(Array.isArray(d)?d:[]),H=e(E,2),U=H[0],W=H[1],q=n(!1),G=e(q,2),J=G[0],N=G[1],Q=t(r,U,W,k?void 0:u,s,d,a,p,c,g,m,v,O,f,I,L),X=Q.isOpen,Y=Q.inputValue,Z=Q.highlightedIndex,$=Q.getToggleButtonProps,ee=Q.getLabelProps,oe=Q.getMenuProps,ne=Q.getItemProps,te=Q.getInputProps,le=Q.reset,ie=Q.toggleMenu,re=Q.filteredOptions,ue=Q.selectedItems,se=Q.addSelectedItem,de=Q.removeSelectedItem,ae=Q.getDropdownProps,pe=Object.assign(Object.assign({},i),{isOpen:!!k||X,inputValue:null!=Y?Y:null,highlightedIndex:Z,selectedItems:ue||[],filteredOptions:re,getToggleButtonProps:$,getLabelProps:ee,getMenuProps:oe,getItemProps:ne,getInputProps:function(e){return te(Object.assign(Object.assign({},e||{}),{disabled:i.readOnly||i.disabled,onFocus:function(o){var n;N(!0),null==B||B(o),null===(n=null==e?void 0:e.onFocus)||void 0===n||n.call(e,o)},onBlur:function(o){var n;N(!1),null==C||C(o),null===(n=null==e?void 0:e.onBlur)||void 0===n||n.call(e,o)},onKeyDown:function(o){var n;null==F||F(o),null===(n=null==e?void 0:e.onKeyDown)||void 0===n||n.call(e,o)}}))},reset:le,contextOnClear:function(){le(),void 0===a&&W([]),null==V||V()},contextOnOptionRemove:function(e){de&&de(e),null==R||R(e)},addSelectedItem:se,removeSelectedItem:de,isFocused:J,clearable:h,searchable:w,multi:S,closeMenuOnSelect:y,size:z,getDropdownProps:ae,toggleMenu:ie,loading:K});return o.createElement(l,{contextValue:pe,dropdownRef:D})};export{i as default};
|
|
2
2
|
//# sourceMappingURL=DropdownMultiComboboxController.js.map
|
package/dist/mocked_classnames/src/components/Dropdown/modes/DropdownMultiComboboxController.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMultiComboboxController.js","sources":["../../../../../../src/components/Dropdown/modes/DropdownMultiComboboxController.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { type DropdownMultiControllerProps } from \"../Dropdown.types\";\nimport useDropdownMultiCombobox from \"../hooks/useDropdownMultiCombobox\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownContextProps } from \"../context/DropdownContext.types\";\nimport DropdownWrapperUI from \"../components/DropdownWrapperUI\";\n\nconst DropdownMultiComboboxController = <Item extends BaseItemData<Record<string, unknown>>>(\n props: DropdownMultiControllerProps<Item>\n) => {\n const {\n options,\n isMenuOpen: isMenuOpenProp,\n autoFocus,\n defaultValue,\n value,\n inputValue: inputValueProp,\n onChange,\n onInputChange,\n onMenuClose,\n onMenuOpen,\n onOptionSelect,\n filterOption,\n showSelectedOptions = true,\n clearable = true,\n searchable = true,\n multi = true,\n closeMenuOnSelect = true,\n dropdownRef,\n onFocus,\n onBlur,\n onKeyDown,\n onClear,\n onOptionRemove,\n loading = false,\n size = \"medium\",\n id,\n boxMode = false
|
|
1
|
+
{"version":3,"file":"DropdownMultiComboboxController.js","sources":["../../../../../../src/components/Dropdown/modes/DropdownMultiComboboxController.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { type DropdownMultiControllerProps } from \"../Dropdown.types\";\nimport useDropdownMultiCombobox from \"../hooks/useDropdownMultiCombobox\";\nimport { type BaseItemData } from \"../../BaseItem\";\nimport { type DropdownContextProps } from \"../context/DropdownContext.types\";\nimport DropdownWrapperUI from \"../components/DropdownWrapperUI\";\n\nconst DropdownMultiComboboxController = <Item extends BaseItemData<Record<string, unknown>>>(\n props: DropdownMultiControllerProps<Item>\n) => {\n const {\n options,\n isMenuOpen: isMenuOpenProp,\n autoFocus,\n defaultValue,\n value,\n inputValue: inputValueProp,\n onChange,\n onInputChange,\n onMenuClose,\n onMenuOpen,\n onOptionSelect,\n filterOption,\n showSelectedOptions = true,\n clearable = true,\n searchable = true,\n multi = true,\n closeMenuOnSelect = true,\n dropdownRef,\n onFocus,\n onBlur,\n onKeyDown,\n onClear,\n onOptionRemove,\n loading = false,\n size = \"medium\",\n id,\n boxMode = false\n } = props;\n\n const initialMultiSelectedItems = Array.isArray(defaultValue) ? defaultValue : [];\n const [multiSelectedItemsState, setMultiSelectedItemsState] = useState<Item[]>(initialMultiSelectedItems);\n const [isFocused, setIsFocused] = useState(false);\n\n const {\n isOpen,\n inputValue: hookInputValue,\n highlightedIndex,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getItemProps,\n getInputProps: hookGetInputProps,\n reset: hookReset,\n toggleMenu,\n filteredOptions,\n selectedItems: hookSelectedItems,\n addSelectedItem: hookAddSelectedItem,\n removeSelectedItem: hookRemoveSelectedItem,\n getDropdownProps\n } = useDropdownMultiCombobox<Item>(\n options,\n multiSelectedItemsState,\n setMultiSelectedItemsState,\n boxMode ? undefined : isMenuOpenProp,\n autoFocus,\n defaultValue,\n value,\n inputValueProp,\n onChange,\n onInputChange,\n onMenuClose,\n onMenuOpen,\n onOptionSelect,\n filterOption,\n showSelectedOptions,\n id\n );\n\n const contextValue: DropdownContextProps<Item> = {\n ...props,\n isOpen: boxMode ? true : isOpen,\n inputValue: hookInputValue ?? null,\n highlightedIndex,\n selectedItems: hookSelectedItems || [],\n filteredOptions,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getItemProps,\n getInputProps: (inputOptions?: any) => {\n return hookGetInputProps!({\n ...(inputOptions || {}),\n disabled: props.readOnly || props.disabled,\n onFocus: (event: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(true);\n onFocus?.(event as any);\n inputOptions?.onFocus?.(event);\n },\n onBlur: (event: React.FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(event);\n inputOptions?.onBlur?.(event);\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n inputOptions?.onKeyDown?.(event);\n }\n });\n },\n reset: hookReset,\n contextOnClear: () => {\n hookReset();\n if (value === undefined) {\n setMultiSelectedItemsState([]);\n }\n onClear?.();\n },\n contextOnOptionRemove: (option: Item) => {\n if (hookRemoveSelectedItem) {\n hookRemoveSelectedItem(option);\n }\n onOptionRemove?.(option);\n },\n addSelectedItem: hookAddSelectedItem,\n removeSelectedItem: hookRemoveSelectedItem,\n isFocused,\n clearable,\n searchable,\n multi,\n closeMenuOnSelect,\n size,\n getDropdownProps,\n toggleMenu,\n loading\n };\n\n return <DropdownWrapperUI contextValue={contextValue} dropdownRef={dropdownRef} />;\n};\n\nexport default DropdownMultiComboboxController;\n"],"names":["DropdownMultiComboboxController","props","options","isMenuOpenProp","isMenuOpen","autoFocus","defaultValue","value","inputValueProp","inputValue","onChange","onInputChange","onMenuClose","onMenuOpen","onOptionSelect","filterOption","_props$showSelectedOp","showSelectedOptions","_props$clearable","clearable","_props$searchable","searchable","_props$multi","multi","_props$closeMenuOnSel","closeMenuOnSelect","dropdownRef","onFocus","onBlur","onKeyDown","onClear","onOptionRemove","_props$loading","loading","_props$size","size","id","_props$boxMode","boxMode","_useState","useState","Array","isArray","_useState2","_slicedToArray","multiSelectedItemsState","setMultiSelectedItemsState","_useState3","_useState4","isFocused","setIsFocused","_useDropdownMultiComb","useDropdownMultiCombobox","undefined","isOpen","hookInputValue","highlightedIndex","getToggleButtonProps","getLabelProps","getMenuProps","getItemProps","hookGetInputProps","getInputProps","hookReset","reset","toggleMenu","filteredOptions","hookSelectedItems","selectedItems","hookAddSelectedItem","addSelectedItem","hookRemoveSelectedItem","removeSelectedItem","getDropdownProps","contextValue","Object","assign","inputOptions","disabled","readOnly","event","_a","call","contextOnClear","contextOnOptionRemove","option","React","createElement","DropdownWrapperUI"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as n,useMemo as s}from"react";import l from"classnames";import{RemoveScroll as c}from"react-remove-scroll";import m from"react-focus-lock";import{CSSTransition as d}from"react-transition-group";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as f,ComponentVibeId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import E from"../ModalTopActions/ModalTopActions.js";import{useMergeRef as b,getStyle as y}from"@vibe/shared";import{camelCase as A}from"es-toolkit";import{ModalProvider as h}from"../context/ModalContext.js";import{keyCodes as x}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{createPortal as g}from"react-dom";import j from"../hooks/usePortalTarget/usePortalTarget.js";import T from"../hooks/useFocusEscapeTargets/useFocusEscapeTargets.js";import{LayerProvider as
|
|
1
|
+
import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as n,useMemo as s}from"react";import l from"classnames";import{RemoveScroll as c}from"react-remove-scroll";import m from"react-focus-lock";import{CSSTransition as d}from"react-transition-group";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as f,ComponentVibeId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import E from"../ModalTopActions/ModalTopActions.js";import{useMergeRef as b,getStyle as y}from"@vibe/shared";import{camelCase as A}from"es-toolkit";import{ModalProvider as h}from"../context/ModalContext.js";import{keyCodes as x}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{createPortal as g}from"react-dom";import j from"../hooks/usePortalTarget/usePortalTarget.js";import T from"../hooks/useFocusEscapeTargets/useFocusEscapeTargets.js";import{LayerProvider as P}from"@vibe/layer/mockedClassNames";var w=m.default||m,F=r((function(r,m){var F,M=r.id,k=r.show,C=r.size,L=void 0===C?"medium":C,O=r.renderHeaderAction,I=r.closeButtonTheme,N=r.closeButtonAriaLabel,z=r.onClose,B=void 0===z?function(){}:z,D=r.autoFocus,R=void 0===D||D,H=r.allowFocusEscapeTo,_=r.onFocusAttempt,V=r.anchorElementRef,K=r.alertModal,S=r.container,Y=void 0===S?document.body:S,q=r.children,G=r.style,J=r.zIndex,Q=r.useFixedPosition,U=void 0!==Q&&Q,W=r.className,X=r["data-testid"],Z=r["aria-labelledby"],$=r["aria-describedby"],ee=j(Y),te=a(null),oe=b(m,te),re=a(null),ae=i(),ie=e(ae,2),ne=ie[0],se=ie[1],le=i(),ce=e(le,2),me=ce[0],de=ce[1],ue=n((function(e){Z||se(e)}),[Z]),fe=n((function(e){$||de(e)}),[$]),pe=s((function(){return{modalId:M,setTitleId:ue,setDescriptionId:fe,autoFocus:R}}),[M,ue,fe,R]),ve=n((function(e){k&&!K&&B(e)}),[k,K,B]),Ee=n((function(e){e.key===x.ESCAPE&&k&&!K&&B(e)}),[K,B,k]),be="full-view"===L?"fullView":(null==V?void 0:V.current)?"anchorPop":"centerPop",ye=null===(F=null==V?void 0:V.current)||void 0===F?void 0:F.getBoundingClientRect(),Ae=ye?{"--modal-start-x":"".concat(ye.left+ye.width/2,"px"),"--modal-start-y":"".concat(ye.top+ye.height/2,"px")}:{},he=J?{"--monday-modal-z-index":J}:{},xe=T(H),ge=n((function(e){if(_){var t=_(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}return!xe(e)}),[_,xe]);return o.createElement(d,{in:k,nodeRef:re,timeout:{enter:250,exit:150},unmountOnExit:!0,classNames:{enter:v.containerEnter,enterActive:v.containerEnterActive,exitActive:v.containerExitActive}},o.createElement(P,{layerRef:re},o.createElement(h,{value:pe},g(o.createElement(w,{returnFocus:!0,autoFocus:R,whiteList:ge},o.createElement("div",{ref:re,className:v.container,style:he,onKeyDown:Ee},o.createElement("div",{"data-testid":u(f.MODAL_OVERLAY,M),className:v.overlay,onClick:ve,"aria-hidden":!0}),o.createElement(c,{forwardProps:!0,ref:oe},o.createElement("div",{className:l(v.modal,v[be],y(v,A("size-"+L)),t({},v.withHeaderAction,!!O),t({},v.fixedPosition,U),W),id:M,"data-testid":X||u(f.MODAL,M),"data-vibe":p.MODAL,role:"dialog","aria-modal":!0,"aria-labelledby":Z||ne,"aria-describedby":$||me,style:Object.assign(Object.assign({},G),Ae),tabIndex:-1},q,o.createElement(E,{renderAction:O,theme:I,closeButtonAriaLabel:N,onClose:B}))))),ee))))}));export{F as default};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle, useMergeRef } from \"@vibe/shared\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"@vibe/layer\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n autoFocus = true,\n allowFocusEscapeTo,\n onFocusAttempt,\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback,\n autoFocus\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const animationType = size === \"full-view\" ? \"fullView\" : anchorElementRef?.current ? \"anchorPop\" : \"centerPop\";\n\n const anchorRect = anchorElementRef?.current?.getBoundingClientRect();\n const anchorVars = anchorRect\n ? ({\n \"--modal-start-x\": `${anchorRect.left + anchorRect.width / 2}px`,\n \"--modal-start-y\": `${anchorRect.top + anchorRect.height / 2}px`\n } as React.CSSProperties)\n : {};\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n /**\n * Returning true means that the focus-lock is allowed to manage the element.\n * Returning false means that the focus-lock would surrender control to the element.\n */\n const handleFocusLockWhiteList = useCallback(\n (nextFocusedElement?: HTMLElement) => {\n if (onFocusAttempt) {\n const outcome = onFocusAttempt(nextFocusedElement);\n\n if (outcome === true) return true;\n\n if (outcome instanceof HTMLElement) {\n outcome.focus();\n return false;\n }\n\n return false;\n }\n\n return !shouldAllowFocusEscape(nextFocusedElement);\n },\n [onFocusAttempt, shouldAllowFocusEscape]\n );\n\n return (\n <CSSTransition\n in={show}\n nodeRef={containerRef}\n timeout={{ enter: 250, exit: 150 }}\n unmountOnExit\n classNames={{\n enter: styles.containerEnter,\n enterActive: styles.containerEnterActive,\n exitActive: styles.containerExitActive\n }}\n >\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n <div ref={containerRef} className={styles.container} style={zIndexStyle} onKeyDown={onModalKeyDown}>\n <div\n data-testid={getTestId(ComponentDefaultTestId.MODAL_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <div\n className={cx(\n styles.modal,\n styles[animationType],\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}\n data-vibe={ComponentVibeId.MODAL}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={{ ...style, ...anchorVars }}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n </CSSTransition>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","animationType","current","anchorRect","_a","getBoundingClientRect","anchorVars","concat","left","width","top","height","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","CSSTransition","in","nodeRef","timeout","enter","exit","unmountOnExit","classNames","styles","containerEnter","enterActive","containerEnterActive","exitActive","containerExitActive","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","onKeyDown","getTestId","ComponentDefaultTestId","MODAL_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL","ComponentVibeId","role","Object","assign","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { type ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle, useMergeRef } from \"@vibe/shared\";\nimport { camelCase } from \"es-toolkit\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { type ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport useFocusEscapeTargets from \"../hooks/useFocusEscapeTargets/useFocusEscapeTargets\";\nimport { LayerProvider } from \"@vibe/layer\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n autoFocus = true,\n allowFocusEscapeTo,\n onFocusAttempt,\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n useFixedPosition = false,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback,\n autoFocus\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const animationType = size === \"full-view\" ? \"fullView\" : anchorElementRef?.current ? \"anchorPop\" : \"centerPop\";\n\n const anchorRect = anchorElementRef?.current?.getBoundingClientRect();\n const anchorVars = anchorRect\n ? ({\n \"--modal-start-x\": `${anchorRect.left + anchorRect.width / 2}px`,\n \"--modal-start-y\": `${anchorRect.top + anchorRect.height / 2}px`\n } as React.CSSProperties)\n : {};\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n const shouldAllowFocusEscape = useFocusEscapeTargets(allowFocusEscapeTo);\n\n /**\n * Returning true means that the focus-lock is allowed to manage the element.\n * Returning false means that the focus-lock would surrender control to the element.\n */\n const handleFocusLockWhiteList = useCallback(\n (nextFocusedElement?: HTMLElement) => {\n if (onFocusAttempt) {\n const outcome = onFocusAttempt(nextFocusedElement);\n\n if (outcome === true) return true;\n\n if (outcome instanceof HTMLElement) {\n outcome.focus();\n return false;\n }\n\n return false;\n }\n\n return !shouldAllowFocusEscape(nextFocusedElement);\n },\n [onFocusAttempt, shouldAllowFocusEscape]\n );\n\n return (\n <CSSTransition\n in={show}\n nodeRef={containerRef}\n timeout={{ enter: 250, exit: 150 }}\n unmountOnExit\n classNames={{\n enter: styles.containerEnter,\n enterActive: styles.containerEnterActive,\n exitActive: styles.containerExitActive\n }}\n >\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n <div ref={containerRef} className={styles.container} style={zIndexStyle} onKeyDown={onModalKeyDown}>\n <div\n data-testid={getTestId(ComponentDefaultTestId.MODAL_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <div\n className={cx(\n styles.modal,\n styles[animationType],\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n { [styles.fixedPosition]: useFixedPosition },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}\n data-vibe={ComponentVibeId.MODAL}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={{ ...style, ...anchorVars }}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n </CSSTransition>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","allowFocusEscapeTo","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","_ref$useFixedPosition","useFixedPosition","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","animationType","current","anchorRect","_a","getBoundingClientRect","anchorVars","concat","left","width","top","height","zIndexStyle","shouldAllowFocusEscape","useFocusEscapeTargets","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","CSSTransition","in","nodeRef","timeout","enter","exit","unmountOnExit","classNames","styles","containerEnter","enterActive","containerEnterActive","exitActive","containerExitActive","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","onKeyDown","getTestId","ComponentDefaultTestId","MODAL_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","fixedPosition","MODAL","ComponentVibeId","role","Object","assign","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var n={container:"container",overlay:"overlay",centerPop:"centerPop",anchorPop:"anchorPop",modal:"modal",withHeaderAction:"withHeaderAction",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",sizeFullView:"sizeFullView",containerEnter:"containerEnter",fullView:"fullView",containerEnterActive:"containerEnterActive",centerPopIn:"centerPopIn",anchorPopIn:"anchorPopIn",fullViewIn:"fullViewIn",containerExitActive:"containerExitActive",centerPopOut:"centerPopOut",anchorPopOut:"anchorPopOut",fullViewOut:"fullViewOut"};!function(n){const a="s_id-
|
|
1
|
+
var n={container:"container",overlay:"overlay",centerPop:"centerPop",anchorPop:"anchorPop",modal:"modal",fixedPosition:"fixedPosition",withHeaderAction:"withHeaderAction",sizeSmall:"sizeSmall",sizeMedium:"sizeMedium",sizeLarge:"sizeLarge",sizeFullView:"sizeFullView",containerEnter:"containerEnter",fullView:"fullView",containerEnterActive:"containerEnterActive",centerPopIn:"centerPopIn",anchorPopIn:"anchorPopIn",fullViewIn:"fullViewIn",containerExitActive:"containerExitActive",centerPopOut:"centerPopOut",anchorPopOut:"anchorPopOut",fullViewOut:"fullViewOut"};!function(n){const a="s_id-72e80303fba3_4_3_0";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t),t.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=n)}(".container {\n position: fixed;\n inset: 0;\n z-index: var(--monday-modal-z-index, 10000);\n}\n\n.overlay {\n position: fixed;\n inset: 0;\n height: 100%;\n background-color: var(--backdrop-color);\n}\n\n.centerPop {\n transform: translate(-50%, -50%);\n}\n\n.anchorPop {\n transform: translate(-50%, -50%);\n}\n\n.modal {\n --top-actions-margin-inline: var(--space-24);\n --top-actions-margin-block: var(--space-24);\n --top-actions-width: var(--space-32);\n --modal-inline-padding: var(--space-32);\n position: relative;\n top: 50%;\n left: 50%;\n display: flex;\n flex-direction: column;\n width: var(--modal-width);\n max-height: var(--modal-max-height);\n background-color: var(--primary-background-color);\n overflow: hidden;\n border-radius: var(--border-radius-big);\n box-shadow: var(--box-shadow-large);\n outline: none;\n}\n\n.modal.fixedPosition {\n position: fixed;\n}\n\n.modal.withHeaderAction {\n --top-actions-width: calc(var(--space-32) * 2);\n}\n\n.modal.sizeSmall {\n --modal-max-height: 50%;\n --modal-width: 460px;\n}\n\n.modal.sizeMedium {\n --modal-max-height: 80%;\n --modal-width: 540px;\n}\n\n.modal.sizeLarge {\n --modal-max-height: 80%;\n --modal-width: 800px;\n}\n\n.modal.sizeFullView {\n --top-actions-margin-inline: var(--space-32);\n --modal-max-height: 100%;\n --modal-width: auto;\n position: fixed;\n inset: 0;\n height: calc(100% - 40px);\n margin-inline: var(--space-24);\n margin-block-start: 40px;\n border-end-start-radius: unset;\n border-end-end-radius: unset;\n}\n\n@media (min-width: 1280px) {\n .modal.sizeSmall {\n --modal-width: 480px;\n }\n .modal.sizeMedium {\n --modal-width: 580px;\n }\n .modal.sizeLarge {\n --modal-width: 840px;\n }\n}\n\n@media (min-width: 1440px) {\n .modal.sizeSmall {\n --modal-width: 520px;\n }\n .modal.sizeMedium {\n --modal-width: 620px;\n }\n .modal.sizeLarge {\n --modal-width: 900px;\n }\n}\n\n@media (min-width: 1720px) {\n .modal.sizeFullView {\n margin-inline: 40px;\n }\n}\n\n.containerEnter .overlay {\n opacity: 0;\n}\n\n.containerEnter .centerPop {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.8);\n}\n\n.containerEnter .anchorPop {\n opacity: 0;\n transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);\n}\n\n.containerEnter .fullView {\n opacity: 0.3;\n transform: translateY(30px);\n}\n\n.containerEnterActive .overlay {\n opacity: 1;\n transition: opacity 100ms cubic-bezier(0, 0, 0.4, 1);\n}\n\n.containerEnterActive .centerPop {\n animation: centerPopIn 150ms cubic-bezier(0, 0, 0.4, 1) forwards;\n}\n\n.containerEnterActive .anchorPop {\n animation: anchorPopIn 200ms cubic-bezier(0, 0, 0.4, 1) forwards;\n}\n\n.containerEnterActive .fullView {\n animation: fullViewIn 250ms cubic-bezier(0, 0, 0.4, 1) forwards;\n}\n\n.containerExitActive .overlay {\n opacity: 0;\n transition: opacity 100ms cubic-bezier(0.6, 0, 1, 1);\n}\n\n.containerExitActive .centerPop {\n animation: centerPopOut 100ms cubic-bezier(0.6, 0, 1, 1) forwards;\n}\n\n.containerExitActive .anchorPop {\n animation: anchorPopOut 150ms cubic-bezier(0.6, 0, 1, 1) forwards;\n}\n\n.containerExitActive .fullView {\n animation: fullViewOut 100ms cubic-bezier(0.6, 0, 1, 1) forwards;\n}\n\n@keyframes centerPopIn {\n 0% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.8);\n }\n 50%, 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes centerPopOut {\n 0%, 50% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.8);\n }\n}\n\n@keyframes anchorPopIn {\n 0%, 40% {\n opacity: 0;\n transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);\n }\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n}\n\n@keyframes anchorPopOut {\n 0% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n 60%, 100% {\n opacity: 0;\n transform: translate(calc(-50% + var(--modal-start-x, 0px)), calc(-50% + var(--modal-start-y, 0px))) scale(0.8);\n }\n}\n\n@keyframes fullViewIn {\n 0% {\n opacity: 0.3;\n transform: translateY(30px);\n }\n 33% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fullViewOut {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(30px);\n }\n}");export{n as default};
|
|
2
2
|
//# sourceMappingURL=Modal.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import
|
|
1
|
+
import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useRef as t,useMemo as o,createRef as i}from"react";import r from"../../../Chips/Chips.js";import a from"../../../../hooks/useItemsOverflow/useItemsOverflow.js";import l from"./MultiSelectedValues.module.scss.js";import s from"classnames";import c from"../Trigger/DropdownChip.js";import d from"../../../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";import u from"../../../../../components/layout/dist/Flex/Flex.js";import m from"../../../../../components/dialog/dist/Dialog/Dialog.js";function p(p){var f=p.selectedItems,g=p.onRemove,h=p.renderInput,v=p.disabled,C=p.readOnly,w=p.minVisibleCount,b=void 0===w?0:w,D=t(null),y=t(null),E=o((function(){return f.map((function(){return i()}))}),[f]),j=a({containerRef:D,itemRefs:E,gap:4,deductedSpaceRef:y,deductedWidth:h?48:0,minVisibleCount:1===f.length?1:b}),N=j.visibleCount,k=j.hasMeasured,O=o((function(){var e=f.length>N?f.slice(N):[];return{hiddenItems:e,hiddenCount:e.length}}),[f,N]),W=O.hiddenItems,x=O.hiddenCount,I=o((function(){return function(){return n.createElement(d,null,n.createElement(u,{direction:"column",gap:"xs",align:"start",className:l.hiddenChipsDialog},W.map((function(e){return n.createElement(c,{key:"dropdown-chip-dialog-".concat(e.value),item:e,onDelete:function(){return g(e)},className:l.dialogChip,disabled:v,readOnly:C})}))))}}),[W,g,v,C]),M=o((function(){return f.map((function(t,o){var i=N>o;return n.createElement("div",{key:"dropdown-chip-visible-".concat(t.value),ref:E[o],className:s(e(e({},l.chipWrapperWithOverflow,void 0!==b),l.hiddenChip,!i)),"aria-hidden":!i,"data-testid":"dropdown-chip-".concat(t.value)},n.createElement(c,{item:t,onDelete:function(){return g(t)},disabled:v,readOnly:C,className:l.visibleChip}))}))}),[f,N,g,E,v,C,b]);return(null==f?void 0:f.length)?n.createElement(u,{align:"center",wrap:!1,gap:"xs",ref:D,className:s(l.containerWrapper,e(e({},l.singleChip,1===f.length),l.measuring,!k))},M,n.createElement(u,{gap:"xs",className:l.inputAndCounterWrapper},x>0&&n.createElement("div",{ref:y,onClick:function(e){e.stopPropagation()},onKeyDown:function(e){e.stopPropagation()},onMouseDown:function(e){e.stopPropagation()}},n.createElement(m,{content:I,showTrigger:["click","enter"],hideTrigger:["clickoutside","enter"],position:"bottom",moveBy:{main:4},hideWhenReferenceHidden:!0,addKeyboardHideShowTriggersByDefault:!0},n.createElement(r,{label:"+ ".concat(x),readOnly:!0,noMargin:!0,"aria-label":"+".concat(x,". ").concat(f.length-x," items are visible out of ").concat(f.length),"data-testid":"dropdown-overflow-counter",className:l.overflowCounter,onClick:function(){},onMouseDown:function(e){e.preventDefault()}}))),h&&n.createElement("div",{className:l.inputWrapper},h()))):null}export{p as default};
|
|
2
2
|
//# sourceMappingURL=MultiSelectedValues.js.map
|
package/dist/src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectedValues.js","sources":["../../../../../../src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx"],"sourcesContent":["import React, { useRef, useMemo, createRef } from \"react\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport { Chips } from \"../../../Chips\";\nimport { Flex } from \"@vibe/layout\";\nimport { DialogContentContainer, Dialog } from \"@vibe/dialog\";\nimport useItemsOverflow from \"../../../../hooks/useItemsOverflow/useItemsOverflow\";\nimport styles from \"./MultiSelectedValues.module.scss\";\nimport cx from \"classnames\";\nimport DropdownChip from \"../Trigger/DropdownChip\";\n\nconst INPUT_DEDUCTED_WIDTH = 48;\n\ntype MultiSelectedValuesProps<Item> = {\n selectedItems: Item[];\n onRemove: (item: Item) => void;\n renderInput?: () => React.ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n minVisibleCount?: number;\n /** Extra props (tabIndex, onKeyDown, etc.) to spread on each visible chip container. */\n getChipContainerProps?: (item: Item, index: number) => Record<string, any>;\n /** Ref forwarded to the +N overflow Chips element, for external keyboard focus management. */\n badgeRef?: React.Ref<HTMLDivElement>;\n};\n\nfunction MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({\n selectedItems,\n onRemove,\n renderInput,\n disabled,\n readOnly,\n minVisibleCount = 0,\n getChipContainerProps,\n badgeRef\n}: MultiSelectedValuesProps<Item>) {\n const containerRef = useRef<HTMLDivElement>(null);\n const deductedSpaceRef = useRef<HTMLDivElement>(null);\n\n const itemRefs = useMemo(() => selectedItems.map(() => createRef<HTMLDivElement>()), [selectedItems]);\n\n const { visibleCount, hasMeasured } = useItemsOverflow({\n containerRef,\n itemRefs,\n gap: 4,\n deductedSpaceRef,\n deductedWidth: renderInput ? INPUT_DEDUCTED_WIDTH : 0,\n minVisibleCount: selectedItems.length === 1 ? 1 : minVisibleCount\n });\n\n const { hiddenItems, hiddenCount } = useMemo(() => {\n const hiddenItems = selectedItems.length > visibleCount ? selectedItems.slice(visibleCount) : [];\n return {\n hiddenItems,\n hiddenCount: hiddenItems.length\n };\n }, [selectedItems, visibleCount]);\n\n const dialogContent = useMemo(() => {\n return () => (\n <DialogContentContainer>\n <Flex direction=\"column\" gap=\"xs\" align=\"start\" className={styles.hiddenChipsDialog}>\n {hiddenItems.map(item => {\n return (\n <DropdownChip\n key={`dropdown-chip-dialog-${item.value}`}\n item={item}\n onDelete={() => onRemove(item)}\n className={styles.dialogChip}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n })}\n </Flex>\n </DialogContentContainer>\n );\n }, [hiddenItems, onRemove, disabled, readOnly]);\n\n const chipElements = useMemo(() => {\n return selectedItems.map((item, index) => {\n const isVisible = index < visibleCount;\n const extraProps = isVisible && getChipContainerProps ? getChipContainerProps(item, index) : {};\n const { ref: extraRef, ...extraAttrs } = extraProps;\n\n return (\n <div\n key={`dropdown-chip-visible-${item.value}`}\n ref={el => {\n (itemRefs[index] as React.MutableRefObject<HTMLDivElement | null>).current = el;\n if (typeof extraRef === \"function\") extraRef(el);\n }}\n className={cx({\n [styles.chipWrapperWithOverflow]: minVisibleCount !== undefined,\n [styles.hiddenChip]: !isVisible\n })}\n aria-hidden={!isVisible}\n data-testid={`dropdown-chip-${item.value}`}\n {...extraAttrs}\n >\n <DropdownChip\n item={item}\n onDelete={() => onRemove(item)}\n disabled={disabled}\n readOnly={readOnly}\n className={styles.visibleChip}\n />\n </div>\n );\n });\n }, [selectedItems, visibleCount, onRemove, itemRefs, disabled, readOnly, minVisibleCount, getChipContainerProps]);\n\n if (!selectedItems?.length) return null;\n\n const isSingleChip = selectedItems.length === 1;\n\n return (\n <Flex\n align=\"center\"\n wrap={false}\n gap=\"xs\"\n ref={containerRef}\n className={cx(styles.containerWrapper, {\n [styles.singleChip]: isSingleChip,\n [styles.measuring]: !hasMeasured\n })}\n >\n {chipElements}\n\n <Flex gap=\"xs\" className={styles.inputAndCounterWrapper}>\n {hiddenCount > 0 && (\n <div\n ref={deductedSpaceRef}\n onClick={e => {\n e.stopPropagation();\n }}\n onKeyDown={e => {\n e.stopPropagation();\n if (e.key === \"ArrowLeft\") {\n e.preventDefault();\n (itemRefs[visibleCount - 1] as React.MutableRefObject<HTMLDivElement | null>)?.current?.focus();\n }\n }}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n >\n <Dialog\n content={dialogContent}\n showTrigger={[\"click\", \"enter\"]}\n hideTrigger={[\"clickoutside\", \"enter\"]}\n position=\"bottom\"\n moveBy={{ main: 4 }}\n hideWhenReferenceHidden\n addKeyboardHideShowTriggersByDefault\n >\n <Chips\n ref={badgeRef}\n label={`+ ${hiddenCount}`}\n readOnly\n noMargin\n aria-label={`+${hiddenCount}. ${selectedItems.length - hiddenCount} items are visible out of ${\n selectedItems.length\n }`}\n data-testid=\"dropdown-overflow-counter\"\n className={styles.overflowCounter}\n onClick={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </Dialog>\n </div>\n )}\n {renderInput && <div className={styles.inputWrapper}>{renderInput()}</div>}\n </Flex>\n </Flex>\n );\n}\n\nexport default MultiSelectedValues;\n"],"names":["MultiSelectedValues","_ref","selectedItems","onRemove","renderInput","disabled","readOnly","_ref$minVisibleCount","minVisibleCount","getChipContainerProps","badgeRef","containerRef","useRef","deductedSpaceRef","itemRefs","useMemo","map","createRef","_useItemsOverflow","useItemsOverflow","gap","deductedWidth","length","visibleCount","hasMeasured","_useMemo","hiddenItems","slice","hiddenCount","dialogContent","React","DialogContentContainer","createElement","Flex","direction","align","className","styles","hiddenChipsDialog","item","DropdownChip","key","concat","value","onDelete","dialogChip","chipElements","index","isVisible","extraProps","extraRef","ref","extraAttrs","__rest","Object","assign","el","current","cx","_defineProperty","chipWrapperWithOverflow","undefined","hiddenChip","visibleChip","wrap","containerWrapper","singleChip","measuring","inputAndCounterWrapper","onClick","e","stopPropagation","onKeyDown","preventDefault","_b","_a","focus","onMouseDown","Dialog","content","showTrigger","hideTrigger","position","moveBy","main","hideWhenReferenceHidden","addKeyboardHideShowTriggersByDefault","Chips","label","noMargin","overflowCounter","inputWrapper"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiSelectedValues.js","sources":["../../../../../../src/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.tsx"],"sourcesContent":["import React, { useRef, useMemo, createRef } from \"react\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport { Chips } from \"../../../Chips\";\nimport { Flex } from \"@vibe/layout\";\nimport { DialogContentContainer, Dialog } from \"@vibe/dialog\";\nimport useItemsOverflow from \"../../../../hooks/useItemsOverflow/useItemsOverflow\";\nimport styles from \"./MultiSelectedValues.module.scss\";\nimport cx from \"classnames\";\nimport DropdownChip from \"../Trigger/DropdownChip\";\n\nconst INPUT_DEDUCTED_WIDTH = 48;\n\ntype MultiSelectedValuesProps<Item> = {\n selectedItems: Item[];\n onRemove: (item: Item) => void;\n renderInput?: () => React.ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n minVisibleCount?: number;\n};\n\nfunction MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({\n selectedItems,\n onRemove,\n renderInput,\n disabled,\n readOnly,\n minVisibleCount = 0\n}: MultiSelectedValuesProps<Item>) {\n const containerRef = useRef<HTMLDivElement>(null);\n const deductedSpaceRef = useRef<HTMLDivElement>(null);\n\n const itemRefs = useMemo(() => selectedItems.map(() => createRef<HTMLDivElement>()), [selectedItems]);\n\n const { visibleCount, hasMeasured } = useItemsOverflow({\n containerRef,\n itemRefs,\n gap: 4,\n deductedSpaceRef,\n deductedWidth: renderInput ? INPUT_DEDUCTED_WIDTH : 0,\n minVisibleCount: selectedItems.length === 1 ? 1 : minVisibleCount\n });\n\n const { hiddenItems, hiddenCount } = useMemo(() => {\n const hiddenItems = selectedItems.length > visibleCount ? selectedItems.slice(visibleCount) : [];\n return {\n hiddenItems,\n hiddenCount: hiddenItems.length\n };\n }, [selectedItems, visibleCount]);\n\n const dialogContent = useMemo(() => {\n return () => (\n <DialogContentContainer>\n <Flex direction=\"column\" gap=\"xs\" align=\"start\" className={styles.hiddenChipsDialog}>\n {hiddenItems.map(item => {\n return (\n <DropdownChip\n key={`dropdown-chip-dialog-${item.value}`}\n item={item}\n onDelete={() => onRemove(item)}\n className={styles.dialogChip}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n })}\n </Flex>\n </DialogContentContainer>\n );\n }, [hiddenItems, onRemove, disabled, readOnly]);\n\n const chipElements = useMemo(() => {\n return selectedItems.map((item, index) => {\n const isVisible = index < visibleCount;\n\n return (\n <div\n key={`dropdown-chip-visible-${item.value}`}\n ref={itemRefs[index]}\n className={cx({\n [styles.chipWrapperWithOverflow]: minVisibleCount !== undefined,\n [styles.hiddenChip]: !isVisible\n })}\n aria-hidden={!isVisible}\n data-testid={`dropdown-chip-${item.value}`}\n >\n <DropdownChip\n item={item}\n onDelete={() => onRemove(item)}\n disabled={disabled}\n readOnly={readOnly}\n className={styles.visibleChip}\n />\n </div>\n );\n });\n }, [selectedItems, visibleCount, onRemove, itemRefs, disabled, readOnly, minVisibleCount]);\n\n if (!selectedItems?.length) return null;\n\n const isSingleChip = selectedItems.length === 1;\n\n return (\n <Flex\n align=\"center\"\n wrap={false}\n gap=\"xs\"\n ref={containerRef}\n className={cx(styles.containerWrapper, {\n [styles.singleChip]: isSingleChip,\n [styles.measuring]: !hasMeasured\n })}\n >\n {chipElements}\n\n <Flex gap=\"xs\" className={styles.inputAndCounterWrapper}>\n {hiddenCount > 0 && (\n <div\n ref={deductedSpaceRef}\n onClick={e => {\n e.stopPropagation();\n }}\n onKeyDown={e => {\n e.stopPropagation();\n }}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n >\n <Dialog\n content={dialogContent}\n showTrigger={[\"click\", \"enter\"]}\n hideTrigger={[\"clickoutside\", \"enter\"]}\n position=\"bottom\"\n moveBy={{ main: 4 }}\n hideWhenReferenceHidden\n addKeyboardHideShowTriggersByDefault\n >\n <Chips\n label={`+ ${hiddenCount}`}\n readOnly\n noMargin\n aria-label={`+${hiddenCount}. ${selectedItems.length - hiddenCount} items are visible out of ${\n selectedItems.length\n }`}\n data-testid=\"dropdown-overflow-counter\"\n className={styles.overflowCounter}\n onClick={() => {}}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </Dialog>\n </div>\n )}\n {renderInput && <div className={styles.inputWrapper}>{renderInput()}</div>}\n </Flex>\n </Flex>\n );\n}\n\nexport default MultiSelectedValues;\n"],"names":["MultiSelectedValues","_ref","selectedItems","onRemove","renderInput","disabled","readOnly","_ref$minVisibleCount","minVisibleCount","containerRef","useRef","deductedSpaceRef","itemRefs","useMemo","map","createRef","_useItemsOverflow","useItemsOverflow","gap","deductedWidth","length","visibleCount","hasMeasured","_useMemo","hiddenItems","slice","hiddenCount","dialogContent","React","DialogContentContainer","createElement","Flex","direction","align","className","styles","hiddenChipsDialog","item","DropdownChip","key","concat","value","onDelete","dialogChip","chipElements","index","isVisible","ref","cx","_defineProperty","chipWrapperWithOverflow","undefined","hiddenChip","visibleChip","wrap","containerWrapper","singleChip","measuring","inputAndCounterWrapper","onClick","e","stopPropagation","onKeyDown","onMouseDown","Dialog","content","showTrigger","hideTrigger","position","moveBy","main","hideWhenReferenceHidden","addKeyboardHideShowTriggersByDefault","Chips","label","noMargin","overflowCounter","preventDefault","inputWrapper"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{useRef as l}from"react";import a from"classnames";import r from"./Trigger.module.scss.js";import{useDropdownContext as o}from"../../context/DropdownContext.js";import s from"../../../../../base/dist/BaseInput/BaseInput.js";import i from"../../../../../components/typography/dist/Text/Text.js";var n=function(n){var p
|
|
1
|
+
import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import t,{useRef as l}from"react";import a from"classnames";import r from"./Trigger.module.scss.js";import{useDropdownContext as o}from"../../context/DropdownContext.js";import s from"../../../../../base/dist/BaseInput/BaseInput.js";import i from"../../../../../components/typography/dist/Text/Text.js";var n=function(n){var m,p=n.inputSize,d=n.fullWidth,u=o(),c=u.inputValue,b=u.autoFocus,f=u.disabled,g=u.readOnly,h=u.placeholder,v=u.multi,x=u.selectedItem,y=u.selectedItems,j=void 0===y?[]:y,I=u.inputAriaLabel,O=u.searchable,P=u.size,E=u.label,F=u.isOpen,T=u.getDropdownProps,z=u.getLabelProps,B=u.getInputProps,S=l(null),W=v?j.length>0:!!x,w=T?T({preventKeyAction:F}):{};return t.createElement(t.Fragment,null,O?t.createElement(s,Object.assign({},B(Object.assign({"aria-labelledby":E?z().id:void 0,"aria-label":I||(E||null===(m=z())||void 0===m?void 0:m.id),placeholder:W?"":h,ref:S},w)),{inputRole:"combobox",value:c||"",autoFocus:b,size:p||P,className:a(r.inputWrapper,e(e(e(e(e({},r.hasSelected,!v&&x&&!c),r.small,"small"===p),r.multi,v&&W),r.multiSelected,v&&W&&"small"===p),r.fullWidth,d)),disabled:f,readOnly:g})):t.createElement(t.Fragment,null,!W&&h&&t.createElement(i,{color:"secondary",className:a(r.placeholderText,e({},r.disabled,!!f)),type:"small"===P?"text2":"text1"},h)))};export{n as default};
|
|
2
2
|
//# sourceMappingURL=DropdownInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownInput.js","sources":["../../../../../../src/components/Dropdown/components/Trigger/DropdownInput.tsx"],"sourcesContent":["import React, { useRef
|
|
1
|
+
{"version":3,"file":"DropdownInput.js","sources":["../../../../../../src/components/Dropdown/components/Trigger/DropdownInput.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport cx from \"classnames\";\nimport { BaseInput } from \"@vibe/base\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport { Text } from \"@vibe/typography\";\n\nconst DropdownInput = ({ inputSize, fullWidth }: { inputSize?: \"small\" | \"medium\" | \"large\"; fullWidth?: boolean }) => {\n const {\n inputValue,\n autoFocus,\n disabled,\n readOnly,\n placeholder,\n multi,\n selectedItem,\n selectedItems = [],\n inputAriaLabel,\n searchable,\n size,\n label,\n isOpen,\n getDropdownProps,\n getLabelProps,\n getInputProps\n } = useDropdownContext<BaseItemData>();\n\n const inputRef = useRef<HTMLInputElement>(null);\n const hasSelection = multi ? selectedItems.length > 0 : !!selectedItem;\n const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction: isOpen }) : {};\n\n return (\n <>\n {searchable ? (\n <BaseInput\n {...getInputProps({\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": inputAriaLabel || (label ? undefined : getLabelProps()?.id),\n placeholder: hasSelection ? \"\" : placeholder,\n ref: inputRef,\n ...multipleSelectionDropdownProps\n })}\n inputRole=\"combobox\"\n value={inputValue || \"\"}\n autoFocus={autoFocus}\n size={inputSize || size}\n className={cx(styles.inputWrapper, {\n [styles.hasSelected]: !multi && selectedItem && !inputValue,\n [styles.small]: inputSize === \"small\",\n [styles.multi]: multi && hasSelection,\n [styles.multiSelected]: multi && hasSelection && inputSize === \"small\",\n [styles.fullWidth]: fullWidth\n })}\n disabled={disabled}\n readOnly={readOnly}\n />\n ) : (\n <>\n {!hasSelection && placeholder && (\n <Text\n color=\"secondary\"\n className={cx(styles.placeholderText, {\n [styles.disabled]: !!disabled\n })}\n type={size === \"small\" ? \"text2\" : \"text1\"}\n >\n {placeholder}\n </Text>\n )}\n </>\n )}\n </>\n );\n};\n\nexport default DropdownInput;\n"],"names":["DropdownInput","_ref","inputSize","fullWidth","_useDropdownContext","useDropdownContext","inputValue","autoFocus","disabled","readOnly","placeholder","multi","selectedItem","_useDropdownContext$s","selectedItems","inputAriaLabel","searchable","size","label","isOpen","getDropdownProps","getLabelProps","getInputProps","inputRef","useRef","hasSelection","length","multipleSelectionDropdownProps","preventKeyAction","React","BaseInput","Object","assign","id","undefined","ref","inputRole","value","className","cx","styles","inputWrapper","_defineProperty","hasSelected","small","multiSelected","createElement","Text","color","placeholderText","type"],"mappings":"qYAQA,IAAMA,EAAgB,SAAHC,GAAmG,MAA7FC,EAASD,EAATC,UAAWC,EAASF,EAATE,UAClCC,EAiBIC,IAhBFC,EAAUF,EAAVE,WACAC,EAASH,EAATG,UACAC,EAAQJ,EAARI,SACAC,EAAQL,EAARK,SACAC,EAAWN,EAAXM,YACAC,EAAKP,EAALO,MACAC,EAAYR,EAAZQ,aAAYC,EAAAT,EACZU,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAcX,EAAdW,eACAC,EAAUZ,EAAVY,WACAC,EAAIb,EAAJa,KACAC,EAAKd,EAALc,MACAC,EAAMf,EAANe,OACAC,EAAgBhB,EAAhBgB,iBACAC,EAAajB,EAAbiB,cACAC,EAAalB,EAAbkB,cAGIC,EAAWC,EAAyB,MACpCC,EAAed,EAAQG,EAAcY,OAAS,IAAMd,EACpDe,EAAiCP,EAAmBA,EAAiB,CAAEQ,iBAAkBT,IAAY,CAAA,EAE3G,OACEU,gCACGb,EACCa,gBAACC,EAASC,OAAAC,OAAA,CAAA,EACJV,EACFS,OAAAC,OAAA,CAAA,kBAAmBd,EAAQG,IAAgBY,QAAKC,EAChD,aAAcnB,IAAmBG,aAAoBG,sBAAZa,IAA6BD,IACtEvB,YAAae,EAAe,GAAKf,EACjCyB,IAAKZ,GACFI,IAEL,CAAAS,UAAU,WACVC,MAAO/B,GAAc,GACrBC,UAAWA,EACXU,KAAMf,GAAae,EACnBqB,UAAWC,EAAGC,EAAOC,aAAYC,EAAAA,EAAAA,EAAAA,EAAAA,EAC9BF,CAAAA,EAAAA,EAAOG,aAAehC,GAASC,IAAiBN,GAChDkC,EAAOI,MAAsB,UAAd1C,GACfsC,EAAO7B,MAAQA,GAASc,GACxBe,EAAOK,cAAgBlC,GAASc,GAA8B,UAAdvB,GAChDsC,EAAOrC,UAAYA,IAEtBK,SAAUA,EACVC,SAAUA,KAGZoB,iCACIJ,GAAgBf,GAChBmB,EAAAiB,cAACC,EAAI,CACHC,MAAM,YACNV,UAAWC,EAAGC,EAAOS,gBAAeP,EACjCF,GAAAA,EAAOhC,WAAaA,IAEvB0C,KAAe,UAATjC,EAAmB,QAAU,SAElCP,IAOf"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e
|
|
1
|
+
import e from"react";import t from"../MultiSelectedValues/MultiSelectedValues.js";import l from"./DropdownInput.js";import{useDropdownContext as r}from"../../context/DropdownContext.js";import i from"./TriggerActions.js";import a from"./Trigger.module.scss.js";import n from"classnames";import o from"./DropdownChip.js";import s from"../../../../../components/layout/dist/Flex/Flex.js";import{getStyle as m}from"../../../../../shared/dist/utils/typesciptCssModulesHelper.js";var d=function(){var d,u=r(),p=u.selectedItems,c=void 0===p?[]:p,v=u.contextOnOptionRemove,f=u.multiline,g=u.disabled,b=u.readOnly,E=u.error,j=u.searchable,y=u.getToggleButtonProps,h=u.label,x=u.getLabelProps,O=u["aria-label"],w=u.minVisibleCount;return e.createElement(s,{justify:"space-between",align:"center"},e.createElement("div",Object.assign({className:n(a.triggerWrapper,m(a,u.size))},j?{}:y({"aria-haspopup":"dialog","aria-labelledby":h?x().id:void 0,"aria-label":O||(h||null===(d=x())||void 0===d?void 0:d.id),"aria-disabled":g?"true":void 0,"aria-invalid":E?"true":void 0,"aria-readonly":b?"true":void 0})),c.length>0?e.createElement("div",{className:a.multiWrapper},f?e.createElement(s,{gap:"xs",wrap:!0},c.map((function(t,r){var i,a;return e.createElement(s,{key:(null!==(a=null!==(i=t.id)&&void 0!==i?i:t.value)&&void 0!==a?a:r)+""},e.createElement("div",{style:{flexShrink:0}},e.createElement(o,{item:t,onDelete:function(){null==v||v(t)},readOnly:b,disabled:g})),r===c.length-1&&e.createElement(l,{inputSize:"small"}))}))):e.createElement(t,{disabled:g,readOnly:b,selectedItems:c,onRemove:function(e){null==v||v(e)},renderInput:j?function(){return e.createElement(l,{inputSize:"small",fullWidth:!0})}:void 0,minVisibleCount:w})):e.createElement(l,null)),e.createElement(i,null))};export{d as default};
|
|
2
2
|
//# sourceMappingURL=MultiSelectTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectTrigger.js","sources":["../../../../../../src/components/Dropdown/components/Trigger/MultiSelectTrigger.tsx"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"MultiSelectTrigger.js","sources":["../../../../../../src/components/Dropdown/components/Trigger/MultiSelectTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"@vibe/layout\";\nimport MultiSelectedValues from \"../MultiSelectedValues/MultiSelectedValues\";\nimport DropdownInput from \"./DropdownInput\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseItemData } from \"../../../BaseItem\";\nimport TriggerActions from \"./TriggerActions\";\nimport styles from \"./Trigger.module.scss\";\nimport { getStyle } from \"@vibe/shared\";\nimport cx from \"classnames\";\nimport DropdownChip from \"./DropdownChip\";\n\nconst MultiSelectTrigger = () => {\n const {\n selectedItems = [],\n contextOnOptionRemove,\n multiline,\n disabled,\n readOnly,\n error,\n size,\n searchable,\n getToggleButtonProps,\n label,\n getLabelProps,\n \"aria-label\": ariaLabel,\n minVisibleCount\n } = useDropdownContext<BaseItemData>();\n\n return (\n <Flex justify=\"space-between\" align=\"center\">\n <div\n className={cx(styles.triggerWrapper, getStyle(styles, size))}\n {...(!searchable\n ? getToggleButtonProps({\n \"aria-haspopup\": \"dialog\",\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": ariaLabel || (label ? undefined : getLabelProps()?.id),\n \"aria-disabled\": disabled ? \"true\" : undefined,\n \"aria-invalid\": error ? \"true\" : undefined,\n \"aria-readonly\": readOnly ? \"true\" : undefined\n })\n : {})}\n >\n {selectedItems.length > 0 ? (\n <div className={styles.multiWrapper}>\n {!multiline ? (\n <MultiSelectedValues\n disabled={disabled}\n readOnly={readOnly}\n selectedItems={selectedItems}\n onRemove={item => {\n contextOnOptionRemove?.(item);\n }}\n renderInput={searchable ? () => <DropdownInput inputSize=\"small\" fullWidth /> : undefined}\n minVisibleCount={minVisibleCount}\n />\n ) : (\n <Flex gap=\"xs\" wrap>\n {selectedItems.map((item, index) => (\n <Flex key={String(item.id ?? item.value ?? index)}>\n <div style={{ flexShrink: 0 }}>\n <DropdownChip\n item={item}\n onDelete={() => {\n contextOnOptionRemove?.(item);\n }}\n readOnly={readOnly}\n disabled={disabled}\n />\n </div>\n {index === selectedItems.length - 1 && <DropdownInput inputSize=\"small\" />}\n </Flex>\n ))}\n </Flex>\n )}\n </div>\n ) : (\n <DropdownInput />\n )}\n </div>\n <TriggerActions />\n </Flex>\n );\n};\n\nexport default MultiSelectTrigger;\n"],"names":["MultiSelectTrigger","_useDropdownContext","useDropdownContext","_useDropdownContext$s","selectedItems","contextOnOptionRemove","multiline","disabled","readOnly","error","searchable","getToggleButtonProps","label","getLabelProps","ariaLabel","minVisibleCount","React","createElement","Flex","justify","align","Object","assign","className","cx","styles","triggerWrapper","getStyle","size","id","undefined","_a","length","multiWrapper","gap","wrap","map","item","index","key","_b","value","String","style","flexShrink","DropdownChip","onDelete","DropdownInput","inputSize","MultiSelectedValues","onRemove","renderInput","fullWidth","TriggerActions"],"mappings":"2dAYA,IAAMA,EAAqB,iBACzBC,EAcIC,IAAkCC,EAAAF,EAbpCG,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAqBJ,EAArBI,sBACAC,EAASL,EAATK,UACAC,EAAQN,EAARM,SACAC,EAAQP,EAARO,SACAC,EAAKR,EAALQ,MAEAC,EAAUT,EAAVS,WACAC,EAAoBV,EAApBU,qBACAC,EAAKX,EAALW,MACAC,EAAaZ,EAAbY,cACcC,EAASb,EAAvB,cACAc,EAAed,EAAfc,gBAGF,OACEC,EAACC,cAAAC,EAAK,CAAAC,QAAQ,gBAAgBC,MAAM,UAClCJ,EAAAC,cAAA,MAAAI,OAAAC,OAAA,CACEC,UAAWC,EAAGC,EAAOC,eAAgBC,EAASF,EAZ9CxB,EAAJ2B,QAaUlB,EASF,CAAA,EARAC,EAAqB,CACnB,gBAAiB,SACjB,kBAAmBC,EAAQC,IAAgBgB,QAAKC,EAChD,aAAchB,IAAcF,GAAmC,QAAfmB,EAAAlB,WAAe,IAAAkB,OAA3BD,EAA2BC,EAAEF,IACjE,gBAAiBtB,EAAW,YAASuB,EACrC,eAAgBrB,EAAQ,YAASqB,EACjC,gBAAiBtB,EAAW,YAASsB,KAI1C1B,EAAc4B,OAAS,EACtBhB,uBAAKO,UAAWE,EAAOQ,cACnB3B,EAYAU,EAACC,cAAAC,EAAK,CAAAgB,IAAI,KAAKC,MAAI,GAChB/B,EAAcgC,KAAI,SAACC,EAAMC,WAAU,OAClCtB,EAACC,cAAAC,GAAKqB,KAAiC,QAArBC,EAAW,UAAXH,EAAKR,UAAM,IAAAE,EAAAA,EAAAM,EAAKI,aAAK,IAAAD,EAAAA,EAAIF,GAAhCI,IACT1B,EAAAC,cAAA,MAAA,CAAK0B,MAAO,CAAEC,WAAY,IACxB5B,EAACC,cAAA4B,GACCR,KAAMA,EACNS,SAAU,WACRzC,SAAAA,EAAwBgC,EACzB,EACD7B,SAAUA,EACVD,SAAUA,KAGb+B,IAAUlC,EAAc4B,OAAS,GAAKhB,EAAAC,cAAC8B,EAAa,CAACC,UAAU,UAEnE,KA1BHhC,EAACC,cAAAgC,GACC1C,SAAUA,EACVC,SAAUA,EACVJ,cAAeA,EACf8C,SAAU,SAAAb,GACRhC,SAAAA,EAAwBgC,EACzB,EACDc,YAAazC,EAAa,WAAA,OAAMM,EAAAC,cAAC8B,EAAc,CAAAC,UAAU,QAAQI,cAAY,OAAGtB,EAChFf,gBAAiBA,KAuBvBC,EAACC,cAAA8B,EAAgB,OAGrB/B,EAAAC,cAACoC,EAAc,MAGrB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import
|
|
1
|
+
import{defineProperty as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import t from"react";import r from"classnames";import a from"../../../BaseItem/BaseItem.js";import i from"./DropdownInput.js";import l from"./Trigger.module.scss.js";import{useDropdownContext as s}from"../../context/DropdownContext.js";import o from"./TriggerActions.js";import n from"../../../../../components/layout/dist/Flex/Flex.js";import{getStyle as d}from"../../../../../shared/dist/utils/typesciptCssModulesHelper.js";var m=function(){var m,p,c=s(),u=c.inputValue,v=c.selectedItem,g=c.searchable,b=c.size,f=c.valueRenderer,j=c.isFocused,y=c.getToggleButtonProps,E=c.disabled,x=c.readOnly,I=c.error,O=c.label,B=c.getLabelProps,P=c["aria-label"];return t.createElement(n,{justify:"space-between",align:"center"},t.createElement("div",Object.assign({className:r(l.triggerWrapper,d(l,b))},g?{}:y({"aria-haspopup":"dialog","aria-labelledby":O?B().id:void 0,"aria-label":P||(O||null===(m=B())||void 0===m?void 0:m.id),"aria-disabled":E?"true":void 0,"aria-invalid":I?"true":void 0,"aria-readonly":x?"true":void 0})),t.createElement(i,null),!u&&v&&t.createElement("div",{className:r(l.selectedItem,e({},l.faded,j&&g),d(l,b))},t.createElement(a,{component:"div",itemRenderer:f,size:b,readOnly:!0,item:Object.assign(Object.assign({},v),{disabled:E,startElement:"indent"===(null===(p=v.startElement)||void 0===p?void 0:p.type)?void 0:v.startElement})}))),t.createElement(o,null))};export{m as default};
|
|
2
2
|
//# sourceMappingURL=SingleSelectTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SingleSelectTrigger.js","sources":["../../../../../../src/components/Dropdown/components/Trigger/SingleSelectTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { BaseItem, type BaseItemData } from \"../../../BaseItem\";\nimport DropdownInput from \"./DropdownInput\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { Flex } from \"@vibe/layout\";\nimport TriggerActions from \"./TriggerActions\";\nimport { getStyle } from \"@vibe/shared\";\n\nconst SingleSelectTrigger = () => {\n const {\n selectedItem,\n searchable,\n size,\n valueRenderer,\n getToggleButtonProps,\n disabled,\n readOnly,\n error,\n label,\n getLabelProps,\n \"aria-label\": ariaLabel\n } = useDropdownContext<BaseItemData>();\n\n return (\n <Flex justify=\"space-between\" align=\"center\">\n <div\n className={cx(styles.triggerWrapper, getStyle(styles, size))}\n {...(!searchable\n ? getToggleButtonProps({\n \"aria-haspopup\": \"dialog\",\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": ariaLabel || (label ? undefined : getLabelProps()?.id),\n \"aria-disabled\": disabled ? \"true\" : undefined,\n \"aria-invalid\": error ? \"true\" : undefined,\n \"aria-readonly\": readOnly ? \"true\" : undefined\n })\n : {})}\n >\n <DropdownInput />\n\n {
|
|
1
|
+
{"version":3,"file":"SingleSelectTrigger.js","sources":["../../../../../../src/components/Dropdown/components/Trigger/SingleSelectTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { BaseItem, type BaseItemData } from \"../../../BaseItem\";\nimport DropdownInput from \"./DropdownInput\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { Flex } from \"@vibe/layout\";\nimport TriggerActions from \"./TriggerActions\";\nimport { getStyle } from \"@vibe/shared\";\n\nconst SingleSelectTrigger = () => {\n const {\n inputValue,\n selectedItem,\n searchable,\n size,\n valueRenderer,\n isFocused,\n getToggleButtonProps,\n disabled,\n readOnly,\n error,\n label,\n getLabelProps,\n \"aria-label\": ariaLabel\n } = useDropdownContext<BaseItemData>();\n\n return (\n <Flex justify=\"space-between\" align=\"center\">\n <div\n className={cx(styles.triggerWrapper, getStyle(styles, size))}\n {...(!searchable\n ? getToggleButtonProps({\n \"aria-haspopup\": \"dialog\",\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": ariaLabel || (label ? undefined : getLabelProps()?.id),\n \"aria-disabled\": disabled ? \"true\" : undefined,\n \"aria-invalid\": error ? \"true\" : undefined,\n \"aria-readonly\": readOnly ? \"true\" : undefined\n })\n : {})}\n >\n <DropdownInput />\n\n {!inputValue && selectedItem && (\n <div\n className={cx(\n styles.selectedItem,\n {\n [styles.faded]: isFocused && searchable\n },\n getStyle(styles, size)\n )}\n >\n <BaseItem\n component=\"div\"\n itemRenderer={valueRenderer}\n size={size}\n readOnly\n item={{\n ...selectedItem,\n disabled,\n startElement: selectedItem.startElement?.type === \"indent\" ? undefined : selectedItem.startElement\n }}\n />\n </div>\n )}\n </div>\n <TriggerActions />\n </Flex>\n );\n};\n\nexport default SingleSelectTrigger;\n"],"names":["SingleSelectTrigger","_useDropdownContext","useDropdownContext","inputValue","selectedItem","searchable","size","valueRenderer","isFocused","getToggleButtonProps","disabled","readOnly","error","label","getLabelProps","ariaLabel","React","createElement","Flex","justify","align","Object","assign","className","cx","styles","triggerWrapper","getStyle","id","undefined","_a","DropdownInput","_defineProperty","faded","BaseItem","component","itemRenderer","item","startElement","_b","type","TriggerActions"],"mappings":"ggBAUA,IAAMA,EAAsB,mBAC1BC,EAcIC,IAbFC,EAAUF,EAAVE,WACAC,EAAYH,EAAZG,aACAC,EAAUJ,EAAVI,WACAC,EAAIL,EAAJK,KACAC,EAAaN,EAAbM,cACAC,EAASP,EAATO,UACAC,EAAoBR,EAApBQ,qBACAC,EAAQT,EAARS,SACAC,EAAQV,EAARU,SACAC,EAAKX,EAALW,MACAC,EAAKZ,EAALY,MACAC,EAAab,EAAba,cACcC,EAASd,EAAvB,cAGF,OACEe,EAACC,cAAAC,EAAK,CAAAC,QAAQ,gBAAgBC,MAAM,UAClCJ,EAAAC,cAAA,MAAAI,OAAAC,OAAA,CACEC,UAAWC,EAAGC,EAAOC,eAAgBC,EAASF,EAAQnB,KAChDD,EASF,CAAA,EARAI,EAAqB,CACnB,gBAAiB,SACjB,kBAAmBI,EAAQC,IAAgBc,QAAKC,EAChD,aAAcd,IAAcF,GAAmC,QAAfiB,EAAAhB,WAAe,IAAAgB,OAA3BD,EAA2BC,EAAEF,IACjE,gBAAiBlB,EAAW,YAASmB,EACrC,eAAgBjB,EAAQ,YAASiB,EACjC,gBAAiBlB,EAAW,YAASkB,KAI3Cb,EAAAC,cAACc,EAAgB,OAEf5B,GAAcC,GACdY,EAAAC,cAAA,MAAA,CACEM,UAAWC,EACTC,EAAOrB,aAAY4B,EAAA,CAAA,EAEhBP,EAAOQ,MAAQzB,GAAaH,GAE/BsB,EAASF,EAAQnB,KAGnBU,EAACC,cAAAiB,GACCC,UAAU,MACVC,aAAc7B,EACdD,KAAMA,EACNK,UAAQ,EACR0B,KACKhB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAlB,GACH,CAAAM,SAAAA,EACA4B,aAAkD,oBAApCC,EAAAnC,EAAakC,mCAAcE,WAAoBX,EAAYzB,EAAakC,mBAMhGtB,EAAAC,cAACwB,EAAc,MAGrB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={triggerWrapper:"triggerWrapper_fddff14248",small:"small_16da88c08b",placeholderText:"placeholderText_f3cbd0a03f",medium:"medium_8cd579b800",large:"large_51c62e8bdc",inputWrapper:"inputWrapper_3869bfacb0",multiSelected:"multiSelected_7e84fb1cfd",fullWidth:"fullWidth_004eff2b88",selectedItem:"selectedItem_2d4905545d",disabled:"disabled_704f6cb59a",multiWrapper:"multiWrapper_724bc6cb2b",actionsWrapper:"actionsWrapper_74c3c7ce0d"};!function(e){const n="s_id-
|
|
1
|
+
var e={triggerWrapper:"triggerWrapper_fddff14248",small:"small_16da88c08b",placeholderText:"placeholderText_f3cbd0a03f",medium:"medium_8cd579b800",large:"large_51c62e8bdc",inputWrapper:"inputWrapper_3869bfacb0",multiSelected:"multiSelected_7e84fb1cfd",fullWidth:"fullWidth_004eff2b88",hasSelected:"hasSelected_4f6c5a5814",selectedItem:"selectedItem_2d4905545d",faded:"faded_dbd429487d",disabled:"disabled_704f6cb59a",multiWrapper:"multiWrapper_724bc6cb2b",actionsWrapper:"actionsWrapper_74c3c7ce0d"};!function(e){const n="s_id-ac180f0c654f_4_3_0";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.triggerWrapper_fddff14248 {\n flex-grow: 1;\n position: relative;\n min-width: 1px;\n display: flex;\n align-items: center;\n cursor: pointer;\n outline: none;\n}\n.triggerWrapper_fddff14248.small_16da88c08b {\n min-height: 32px;\n}\n.triggerWrapper_fddff14248.small_16da88c08b .placeholderText_f3cbd0a03f {\n padding-inline-start: var(--space-8);\n}\n.triggerWrapper_fddff14248.medium_8cd579b800 {\n min-height: 40px;\n}\n.triggerWrapper_fddff14248.large_51c62e8bdc {\n min-height: 48px;\n}\n.triggerWrapper_fddff14248 .inputWrapper_3869bfacb0 {\n border: none;\n width: 100%;\n background: transparent;\n}\n.triggerWrapper_fddff14248 .inputWrapper_3869bfacb0.small_16da88c08b {\n height: 24px;\n min-height: 24px;\n}\n.triggerWrapper_fddff14248 .inputWrapper_3869bfacb0.multiSelected_7e84fb1cfd {\n width: 48px;\n flex-shrink: 0;\n padding: 0 var(--space-4);\n}\n.triggerWrapper_fddff14248 .inputWrapper_3869bfacb0.multiSelected_7e84fb1cfd.fullWidth_004eff2b88 {\n width: 100%;\n flex-grow: 1;\n}\n.triggerWrapper_fddff14248 .inputWrapper_3869bfacb0.hasSelected_4f6c5a5814 {\n position: absolute;\n inset: 0;\n cursor: pointer;\n}\n.triggerWrapper_fddff14248 .selectedItem_2d4905545d {\n position: relative;\n pointer-events: none;\n inset: 0;\n padding-inline-start: 0;\n width: 100%;\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.triggerWrapper_fddff14248 .selectedItem_2d4905545d.small_16da88c08b {\n min-height: 32px;\n height: 32px;\n}\n.triggerWrapper_fddff14248 .selectedItem_2d4905545d.medium_8cd579b800 {\n min-height: 40px;\n height: 40px;\n}\n.triggerWrapper_fddff14248 .selectedItem_2d4905545d.large_51c62e8bdc {\n min-height: 48px;\n height: 48px;\n}\n.triggerWrapper_fddff14248 .selectedItem_2d4905545d.faded_dbd429487d {\n opacity: 0.6;\n}\n.triggerWrapper_fddff14248 .placeholderText_f3cbd0a03f {\n padding-inline-start: var(--space-12);\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n color: var(--placeholder-color);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.triggerWrapper_fddff14248 .placeholderText_f3cbd0a03f.disabled_704f6cb59a {\n color: var(--disabled-text-color);\n}\n.multiWrapper_724bc6cb2b {\n padding: var(--space-4) 0 var(--space-4) var(--space-8);\n width: 100%;\n}\n.actionsWrapper_74c3c7ce0d {\n padding: 0 var(--space-4);\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=Trigger.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as n,useRef as t,useMemo as l,useCallback as u}from"react";import{useCombobox as i}from"downshift";import
|
|
1
|
+
import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as n,useRef as t,useMemo as l,useCallback as u}from"react";import{useCombobox as i}from"downshift";import s from"./useDropdownFiltering.js";function o(o,r,a,p,g,c,d,f,h,m,I,v,O,b,C){var y=n(g||null),P=e(y,2),T=P[0],M=P[1],j=t(null),V=void 0!==c?c:T,w=l((function(){return V?[V]:[]}),[V]),B=s(o,O,b,w),D=B.filteredOptions,S=B.filterOptions,x=l((function(){return D.flatMap((function(e){return e.options}))}),[D]),K=i({items:x,itemToString:function(e){var n;return null!==(n=null==e?void 0:e.label)&&void 0!==n?n:""},itemToKey:function(e){return void 0!==(null==e?void 0:e.value)?e.value+"":""},isItemDisabled:function(e){return!!e.disabled},initialInputValue:d||"",selectedItem:V,isOpen:r,initialIsOpen:a,id:C,onIsOpenChange:function(e){e.isOpen?null==I||I():null==m||m()},onInputValueChange:u((function(e){var n=e.inputValue;S(n||""),null==h||h(n)}),[h,S]),onSelectedItemChange:u((function(e){var n=e.selectedItem;void 0===c&&M(n||null),n?(null==v||v(n),null==f||f(n),S("")):(null==f||f(null),S(""))}),[c,v,S,f]),onStateChange:u((function(e){var n,t=e.type;!p||t!==i.stateChangeTypes.ItemClick&&t!==i.stateChangeTypes.InputKeyDownEnter||null===(n=j.current)||void 0===n||n.blur()}),[p]),stateReducer:function(e,n){switch(n.type){case i.stateChangeTypes.InputKeyDownEnter:case i.stateChangeTypes.ItemClick:return Object.assign(Object.assign({},n.changes),{inputValue:null,isOpen:!p});case i.stateChangeTypes.InputBlur:case i.stateChangeTypes.ControlledPropUpdatedSelectedItem:return Object.assign(Object.assign({},n.changes),{inputValue:null});default:return n.changes}}}),k=K.getInputProps,E=K.reset;return{isOpen:K.isOpen,inputValue:K.inputValue,highlightedIndex:K.highlightedIndex,selectedItem:V,getToggleButtonProps:K.getToggleButtonProps,getLabelProps:K.getLabelProps,getMenuProps:K.getMenuProps,getInputProps:function(e){return k(Object.assign(Object.assign({},e),{ref:j}))},getItemProps:K.getItemProps,reset:function(){void 0===c&&M(null),E(),S("")},filteredOptions:D,openMenu:K.openMenu,toggleMenu:K.toggleMenu,closeMenu:K.closeMenu}}export{o as default};
|
|
2
2
|
//# sourceMappingURL=useDropdownCombobox.js.map
|