@oracle/oraclejet-preact 20.0.2 → 20.0.3
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/amd/BaseCardView-b8119561.js +2 -0
- package/amd/{BaseCardView-16fda4c3.js.map → BaseCardView-b8119561.js.map} +1 -1
- package/amd/CardFlexView-aa2f3de8.js +2 -0
- package/amd/{CardFlexView-d3eb7373.js.map → CardFlexView-aa2f3de8.js.map} +1 -1
- package/amd/CardGridView-85f90c75.js +2 -0
- package/amd/{CardGridView-842f70cd.js.map → CardGridView-85f90c75.js.map} +1 -1
- package/amd/CheckboxSet-f000e5c2.js +2 -0
- package/amd/CheckboxSet-f000e5c2.js.map +1 -0
- package/amd/ExpandableList-233c279e.js +2 -0
- package/amd/{ExpandableList-a9a86ad8.js.map → ExpandableList-233c279e.js.map} +1 -1
- package/amd/{InlineSelectSingle-7c1cc5b5.js → InlineSelectSingle-87bc8a45.js} +2 -2
- package/amd/{InlineSelectSingle-7c1cc5b5.js.map → InlineSelectSingle-87bc8a45.js.map} +1 -1
- package/amd/ListView-2678b2af.js +2 -0
- package/amd/{ListView-6d21e8f9.js.map → ListView-2678b2af.js.map} +1 -1
- package/amd/NavigationList-a6bb123d.js +2 -0
- package/amd/NavigationList-a6bb123d.js.map +1 -0
- package/amd/NavigationListItem-10bf6656.js +2 -0
- package/amd/NavigationListItem-10bf6656.js.map +1 -0
- package/amd/NavigationListLinkItem-df1826e6.js +2 -0
- package/amd/NavigationListLinkItem-df1826e6.js.map +1 -0
- package/amd/{OverflowTabBar-5ff68da7.js → OverflowTabBar-f8bf9356.js} +2 -2
- package/amd/{OverflowTabBar-5ff68da7.js.map → OverflowTabBar-f8bf9356.js.map} +1 -1
- package/amd/OverflowTabBarItem-0aa39512.js +2 -0
- package/amd/{OverflowTabBarItem-926b0c8a.js.map → OverflowTabBarItem-0aa39512.js.map} +1 -1
- package/amd/PRIVATE_BaseCardView.js +1 -1
- package/amd/PRIVATE_SelectCommon.js +1 -1
- package/amd/PRIVATE_TableList.js +1 -1
- package/amd/RemovableNavigationListItem-60593d4c.js +2 -0
- package/amd/{RemovableNavigationListItem-e298c5de.js.map → RemovableNavigationListItem-60593d4c.js.map} +1 -1
- package/amd/ReorderableTabBar-19a503c7.js +2 -0
- package/amd/{ReorderableTabBar-0c69bfd4.js.map → ReorderableTabBar-19a503c7.js.map} +1 -1
- package/amd/{SelectMobileFieldInput-d499ef86.js → SelectMobileFieldInput-4795a794.js} +2 -2
- package/amd/{SelectMobileFieldInput-d499ef86.js.map → SelectMobileFieldInput-4795a794.js.map} +1 -1
- package/amd/{SelectMultiple-cc9bffc6.js → SelectMultiple-e216b16c.js} +2 -2
- package/amd/{SelectMultiple-cc9bffc6.js.map → SelectMultiple-e216b16c.js.map} +1 -1
- package/amd/{SelectSingle-2bb35b67.js → SelectSingle-d53cf202.js} +2 -2
- package/amd/{SelectSingle-2bb35b67.js.map → SelectSingle-d53cf202.js.map} +1 -1
- package/amd/TabBar-92bac52f.js +2 -0
- package/amd/{TabBar-de723fbc.js.map → TabBar-92bac52f.js.map} +1 -1
- package/amd/TabBarMixed-5b5a5047.js +2 -0
- package/amd/{TabBarMixed-cfd346bf.js.map → TabBarMixed-5b5a5047.js.map} +1 -1
- package/amd/TextArea-345f89d4.js +2 -0
- package/amd/TextArea-345f89d4.js.map +1 -0
- package/amd/TextAreaAutosize-01dfd98e.js +2 -0
- package/amd/{TextAreaAutosize-3a13ebb2.js.map → TextAreaAutosize-01dfd98e.js.map} +1 -1
- package/amd/Theme-redwood/theme.css +122 -122
- package/amd/Theme-stable/theme.css +174 -174
- package/amd/UNSAFE_CardFlexView.js +1 -1
- package/amd/UNSAFE_CardGridView.js +1 -1
- package/amd/UNSAFE_CheckboxItem.js +1 -1
- package/amd/UNSAFE_CheckboxItem.js.map +1 -1
- package/amd/UNSAFE_CheckboxSet.js +1 -1
- package/amd/UNSAFE_CheckboxSet.js.map +1 -1
- package/amd/UNSAFE_ExpandableList.js +1 -1
- package/amd/UNSAFE_InlineSelectSingle.js +1 -1
- package/amd/UNSAFE_ListView.js +1 -1
- package/amd/UNSAFE_NavigationList.js +1 -1
- package/amd/UNSAFE_NavigationListCommon.js +1 -1
- package/amd/UNSAFE_OverflowTabBar.js +1 -1
- package/amd/UNSAFE_ReorderableTabBar.js +1 -1
- package/amd/UNSAFE_RichCheckboxSet.js +1 -1
- package/amd/UNSAFE_RichCheckboxSet.js.map +1 -1
- package/amd/UNSAFE_RichSelectionItem.js +1 -1
- package/amd/UNSAFE_RichSelectionItem.js.map +1 -1
- package/amd/UNSAFE_SelectMultiple.js +1 -1
- package/amd/UNSAFE_SelectSingle.js +1 -1
- package/amd/UNSAFE_TabBar.js +1 -1
- package/amd/UNSAFE_TabBarCommon.js +1 -1
- package/amd/UNSAFE_TabBarMixed.js +1 -1
- package/amd/UNSAFE_TextArea.js +1 -1
- package/amd/UNSAFE_TextAreaAutosize.js +1 -1
- package/amd/UNSAFE_VirtualizedListView.js +1 -1
- package/amd/VirtualizedListView-a0f338c2.js +2 -0
- package/amd/{VirtualizedListView-1ae7151d.js.map → VirtualizedListView-a0f338c2.js.map} +1 -1
- package/amd/{useDisplayValue-0e90bf4c.js → useDisplayValue-9b671893.js} +2 -2
- package/amd/{useDisplayValue-0e90bf4c.js.map → useDisplayValue-9b671893.js.map} +1 -1
- package/amd/useNavigationListItem-582f5564.js +2 -0
- package/amd/useNavigationListItem-582f5564.js.map +1 -0
- package/amd/useSelectCommon-f33709d2.js +2 -0
- package/amd/{useSelectCommon-a02ddf3c.js.map → useSelectCommon-f33709d2.js.map} +1 -1
- package/cjs/{BaseCardView-c0909427.js → BaseCardView-ba63723a.js} +4 -1
- package/cjs/{BaseCardView-c0909427.js.map → BaseCardView-ba63723a.js.map} +1 -1
- package/cjs/{NavigationListItem-3b9eb0fb.js → NavigationList-d0d74565.js} +21 -8
- package/cjs/NavigationList-d0d74565.js.map +1 -0
- package/cjs/NavigationListItem-b0b03089.js +12 -0
- package/cjs/NavigationListItem-b0b03089.js.map +1 -0
- package/cjs/{NavigationListLinkItem-62c3912e.js → NavigationListLinkItem-317a5200.js} +8 -99
- package/cjs/NavigationListLinkItem-317a5200.js.map +1 -0
- package/cjs/{OverflowTabBarItem-abcd2327.js → OverflowTabBarItem-19ad4971.js} +6 -4
- package/cjs/{OverflowTabBarItem-abcd2327.js.map → OverflowTabBarItem-19ad4971.js.map} +1 -1
- package/cjs/PRIVATE_BaseCardView.js +1 -1
- package/cjs/PRIVATE_TableList.js +4 -4
- package/cjs/SegmentStyles.styles.css +9 -12
- package/cjs/SegmentStyles.styles2.css +12 -9
- package/cjs/{TabBar-27ae2c21.js → TabBar-d84e222e.js} +9 -1
- package/cjs/{TabBar-27ae2c21.js.map → TabBar-d84e222e.js.map} +1 -1
- package/cjs/{TabBarLinkItem-b0c4b100.js → TabBarLinkItem-e924f83b.js} +2 -2
- package/cjs/{TabBarLinkItem-b0c4b100.js.map → TabBarLinkItem-e924f83b.js.map} +1 -1
- package/cjs/Theme-redwood/theme.css +131 -131
- package/cjs/Theme-stable/theme.css +233 -233
- package/cjs/UNSAFE_CardFlexView.js +1 -1
- package/cjs/UNSAFE_CardGridView.js +1 -1
- package/cjs/UNSAFE_ListView.js +53 -53
- package/cjs/UNSAFE_NavigationList.js +17 -15
- package/cjs/UNSAFE_NavigationList.js.map +1 -1
- package/cjs/UNSAFE_NavigationListCommon.js +14 -13
- package/cjs/UNSAFE_NavigationListCommon.js.map +1 -1
- package/cjs/UNSAFE_OverflowTabBar.js +56 -53
- package/cjs/UNSAFE_OverflowTabBar.js.map +1 -1
- package/cjs/UNSAFE_ReorderableTabBar.js +43 -30
- package/cjs/UNSAFE_ReorderableTabBar.js.map +1 -1
- package/cjs/UNSAFE_TabBar.js +57 -54
- package/cjs/UNSAFE_TabBar.js.map +1 -1
- package/cjs/UNSAFE_TabBarCommon.js +78 -75
- package/cjs/UNSAFE_TabBarCommon.js.map +1 -1
- package/cjs/UNSAFE_TabBarMixed.js +38 -35
- package/cjs/UNSAFE_TabBarMixed.js.map +1 -1
- package/cjs/useNavigationListItem-b97e76d5.js +104 -0
- package/cjs/useNavigationListItem-b97e76d5.js.map +1 -0
- package/es/{Chart-b866a74c.js → Chart-8c63da28.js} +2 -2
- package/es/{Chart-b866a74c.js.map → Chart-8c63da28.js.map} +1 -1
- package/es/PRIVATE_Chart.js +4 -4
- package/es/TextArea-93ce78a7.js +225 -0
- package/es/TextArea-93ce78a7.js.map +1 -0
- package/es/Theme-redwood/theme.css +427 -427
- package/es/Theme-stable/theme.css +583 -583
- package/es/UNSAFE_BarChart.js +4 -4
- package/es/UNSAFE_ComboChart.js +4 -4
- package/es/UNSAFE_LineAreaChart.js +4 -4
- package/es/UNSAFE_ScatterChart.js +4 -4
- package/es/UNSAFE_TextArea.js +106 -226
- package/es/UNSAFE_TextArea.js.map +1 -1
- package/es/UNSAFE_TextAreaAutosize.js +1 -1
- package/package.json +2 -2
- package/amd/BaseCardView-16fda4c3.js +0 -2
- package/amd/CardFlexView-d3eb7373.js +0 -2
- package/amd/CardGridView-842f70cd.js +0 -2
- package/amd/CheckboxSetContext-2e486ea8.js +0 -2
- package/amd/CheckboxSetContext-2e486ea8.js.map +0 -1
- package/amd/ExpandableList-a9a86ad8.js +0 -2
- package/amd/ListView-6d21e8f9.js +0 -2
- package/amd/NavigationListItem-9df5446c.js +0 -2
- package/amd/NavigationListItem-9df5446c.js.map +0 -1
- package/amd/NavigationListLinkItem-161049bb.js +0 -2
- package/amd/NavigationListLinkItem-161049bb.js.map +0 -1
- package/amd/OverflowTabBarItem-926b0c8a.js +0 -2
- package/amd/RemovableNavigationListItem-e298c5de.js +0 -2
- package/amd/ReorderableTabBar-0c69bfd4.js +0 -2
- package/amd/TabBar-de723fbc.js +0 -2
- package/amd/TabBarMixed-cfd346bf.js +0 -2
- package/amd/TextArea-4a3b8b56.js +0 -2
- package/amd/TextArea-4a3b8b56.js.map +0 -1
- package/amd/TextAreaAutosize-3a13ebb2.js +0 -2
- package/amd/VirtualizedListView-1ae7151d.js +0 -2
- package/amd/useSelectCommon-a02ddf3c.js +0 -2
- package/amd/useTextAreaAltEnter-32272da6.js +0 -2
- package/amd/useTextAreaAltEnter-32272da6.js.map +0 -1
- package/cjs/NavigationListItem-3b9eb0fb.js.map +0 -1
- package/cjs/NavigationListLinkItem-62c3912e.js.map +0 -1
- package/es/useTextAreaAltEnter-ac460f4c.js +0 -61
- package/es/useTextAreaAltEnter-ac460f4c.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './Flex-4b81b412', './Label-701506b1', './useDisplayValue-
|
|
2
|
-
//# sourceMappingURL=InlineSelectSingle-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './Flex-4b81b412', './Label-701506b1', './useDisplayValue-9b671893', './Separator-181f7541', './logger-0f873e29', './TabbableModeContext-a9c97640', './LayerHost-0b288129', 'css!./UserAssistanceStyles.styles.css', 'module', './UNSAFE_UserAssistance/themes/redwood/UserAssistanceVariants.css', './InlineUserAssistance-a59440e5', 'css!./MessageBannerStyles.styles.css', 'module', './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css', 'preact', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-2bb62284', 'css!./IconStyle.styles.css', './IconButton-dc1be00e', 'css!./MessageStyles.styles.css', './MessageFormattingUtils-ea0be23e', './TransitionGroup-3b9d81b6', './MessagesContext-602a69a2', 'css!./HiddenAccessibleStyles.styles.css', 'css!./ComponentMessageStyles.styles.css', 'module', './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css', './FormFieldContext-a024b891', './Popup-6b57cc3e', 'css!./LabelStyles.styles.css', 'module', './UNSAFE_Label/themes/redwood/LabelVariants.css', './InputGroupContext-372087af', 'module', './UNSAFE_Popup/themes/redwood/PopupVariants.css', './View-35699bb2', './FormContext-6b0879a0', './useFormContext-b8cbbb21', './useLoadingIndicatorTimer-20a3bf5f', './useTextField-3ab0a23b', './useTranslationBundle-e4dd341e', './keyboardUtils-fb6219eb', './tabbableUtils-f95361a6', './unsafeDomAccess-602c5dde', './useSelectCommon-f33709d2'], (function(e,s,t,n,o,a,r,i,l,c,d,u,b,p,h,S,m,y,x,C,g,F,v,f,w,A,T,U,E,L,k,I,K,B,R,P,M,_,j,V,N,D,O,z,Y,$,G,H,W,q,Z){"use strict";const J={isTabbable:!1};const Q=t.forwardRef((function(e,t){const{data:l,itemRenderer:d,itemText:u,label:b,onLoadRange:p,testId:S,userAssistancePosition:m="belowList"}=e,{collectionRendererContext:y,formFieldContext:x,hasUserAssistance:C,isEmptyResults:g,isUserFiltering:F,labelProps:v,listContainerProps:f,selectSingleFieldProps:w,selectFieldInputProps:A,userAssistanceProps:T}=function({"aria-describedby":e,assistiveText:s,data:t,hasBackIcon:o="never",hasClearIcon:a="never",helpSourceLink:i,helpSourceText:l,isLoading:c,itemText:d,label:u,onBackIconAction:b,onCommit:p,onFilter:h,placeholder:S,textAlign:m,valueItem:y,virtualKeyboard:x},C){const g=n.useRef(null),{textAlign:F}=z.useFormContext(),v=m??F??"start",f=null!=t&&!Z.isBeforeDataFetch(t),w=f&&0===t?.totalSize,A=n.useRef(t),T=n.useRef(y),U=n.useRef(!0),[E,L]=n.useState(void 0===y?void 0:new Set([y.key])),k=Y.useLoadingIndicatorTimer(c??!1),I=r.useDisplayValue(d,y,"InlineSelectSingle");n.useImperativeHandle(C,(()=>({focus:()=>g.current?.focus(),blur:()=>g.current?.blur(),[q.UNSAFE_DOM_ACCESS]:g.current})),[]);const{currentRowKeyRef:K,currentRowOverride:B,dropdownRef:R,isFocused:P,isUserFiltering:M,onCurrentKeyChange:_,searchText:j,setCurrentRowOverride:V,stopFiltering:N,updateFiltering:D,userInput:O}=Z.useSelectCommon({data:t,inputRef:g,isFocused:!0,onFilter:h}),{baseId:J,formFieldContext:Q,inputProps:X,labelProps:ee,userAssistanceProps:se}=$.useTextField({ariaDescribedBy:e,helpSourceLink:i,helpSourceText:l,isFocused:P,isLoading:k,value:void 0!==y||void 0}),te=`${J}-list`;Q.hasValue=c||Q.hasValue;const ne=G.useTranslationBundle("@oracle/oraclejet-preact"),oe=f?0===t?.totalSize?ne.select_noMatchesFound():1===t?.totalSize?ne.select_oneMatchFound():"exact"===t?.sizePrecision?ne.select_sizeMatchesFound({TOTAL_SIZE:`${t?.totalSize}`}):ne.select_sizeOrMoreMatchesFound({TOTAL_SIZE:`${t?.totalSize}`}):"";T.current!==y&&(T.current=y,L(void 0===y?void 0:new Set([y.key]))),A.current!==t&&(A.current=t,M&&null!=t&&0===t.offset&&t.data.length>0&&V({rowKey:Z.isSearchTextEmptyOrUndefined(j)?void 0:t.data[0].metadata.key})),U.current&&(U.current=!1,V({rowKey:[...E??[void 0]][0]}));const ae=n.useCallback(((e,s)=>{p?.({value:e,previousValue:void 0!==y?y.key:void 0,reason:s.reason})}),[p,y]),re=n.useCallback((e=>{L(new Set),ae(void 0,e)}),[ae]),ie=n.useCallback((()=>M&&""===O&&void 0!==y),[M,O,y]),le=n.useCallback((e=>{N();const s=e.context.key;L(new Set([s])),ae(s,{reason:"itemAction"})}),[ae,N]),ce=n.useCallback((({value:e})=>{D(e),h?.({searchText:e})}),[h,D]),de=n.useCallback((e=>{if(!H.isControlOrFunctionKey(e))switch(e.code){case H.KEYS.UP:case H.KEYS.DOWN:e.preventDefault();break;case H.KEYS.ENTER:case H.KEYS.TAB:{if(Z.isPhone())return;const s={reason:e.code===H.KEYS.TAB?"tabKey":"itemAction"};if(ie())return void re(s);if(null==t||0===t.data.length)return;if(N(),void 0!==K.current&&null!=t&&t.data.length>0)return L(new Set([K.current])),void ae(K.current,s);ae(y?.key??void 0,s);break}}}),[re,K,t,ie,ae,N,y]),ue=n.useCallback((e=>{if(!H.isControlOrFunctionKey(e))switch(e.code){case H.KEYS.UP:case H.KEYS.DOWN:if(null!=t&&R.current){const e=W.allTabbableElements(R.current,void 0,!0)[0];e?.focus(),void 0===B.rowKey&&V({rowKey:t.data[0]?.metadata?.key})}e.preventDefault()}}),[B,t,R,V]),be=n.useCallback((e=>{e.code===H.KEYS.TAB&&void 0!==K.current&&null!=t&&t.data.length>0&&(L(new Set([K.current])),ae(K.current,{reason:"tabKey"}))}),[K,t,ae]),pe=n.useCallback((()=>{N(),re({reason:"itemAction"}),g.current?.focus(),h?.({searchText:void 0})}),[re,h,N]),he=Z.useCollectionRenderer({currentKey:B.rowKey,searchText:j,selectedKeys:E,onCurrentKeyChange:_,onItemAction:le});return n.useEffect((()=>{const e=R.current?.querySelector('div[role="listbox"][tabindex="0"]');e?.setAttribute("tabindex","-1")})),{collectionRendererContext:he,formFieldContext:Q,hasUserAssistance:Boolean(s||i),isEmptyResults:w,isUserFiltering:M,labelProps:{...ee,children:u},listContainerProps:{id:te,dropdownListRef:R,onKeyDown:be},selectSingleFieldProps:{contentVariant:"input",hasInsideLabel:!0,isBackButtonShown:"always"===o,isClearButtonShown:"conditionally"===a&&void 0!==y,onBackButtonClick:b,onClearButtonClick:pe,styleVariant:"embedded"},selectFieldInputProps:{...X,"aria-controls":te,"aria-expanded":!0,displayValue:I,hasEmptyLabel:!1,hasInsideLabel:!0,inputRef:g,isAddToListShown:!1,isAdvancedSearchShown:!1,isRequired:!1,isUserFiltering:M,liveRegionText:oe,onInput:ce,onKeyDown:de,onKeyUp:ue,placeholder:S,textAlign:v,userInput:O,variant:"embedded",virtualKeyboard:x},userAssistanceProps:{...se,assistiveText:s,fieldLabel:u,helpSourceLink:i,helpSourceText:l}}}(e,t),U=n.useCallback((({onPersistCurrentRowKey:e,onRowAction:t,selected:n,searchText:o,currentRowKeyOverride:a})=>s.jsx(Z.DefaultList,{"aria-label":b,componentName:"InlineSelectSingle",currentItemVariant:"highlight",currentKey:a,data:l,itemRenderer:d,itemText:u,onCurrentKeyChange:e,onItemAction:t,onLoadRange:p,searchText:F?o:void 0,selectedKeys:n,selectionMode:"single"})),[l,F,d,u,b,p]),E=s.jsx(D.View,{minWidth:"100%",padding:"2x",children:s.jsx(h.InlineUserAssistance,{testId:S&&`${S}_userAssistance`,...T})});return s.jsx(o.Flex,{direction:"column",gap:"2x",maxHeight:"100%",width:"100%",children:s.jsxs(B.FormFieldContext.Provider,{value:x,children:[s.jsxs(D.View,{flex:0,children:[s.jsx(r.SelectSingleField,{...w,label:s.jsx(a.Label,{...v}),testId:S&&`${S}_selectSingleField`,children:s.jsx(r.SelectSingleFieldInput,{...A})}),"aboveList"===m&&s.jsx(i.Separator,{}),"aboveList"===m&&C&&s.jsxs(s.Fragment,{children:[E,s.jsx(i.Separator,{})]})]}),"aboveList"!==m&&s.jsx(i.Separator,{}),s.jsx(Z.DropdownList,{...f,hasBottomGap:"aboveList"===m,hasTopGap:!1,children:s.jsx(c.TabbableModeContext.Provider,{value:J,children:g?s.jsx(Z.EmptyResults,{}):U(y)})}),"belowList"===m&&C&&s.jsxs("div",{children:[s.jsx(i.Separator,{}),E]})]})})}));e.InlineSelectSingle=Q}));
|
|
2
|
+
//# sourceMappingURL=InlineSelectSingle-87bc8a45.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineSelectSingle-7c1cc5b5.js","sources":["../../src/UNSAFE_InlineSelectSingle/InlineSelectSingle.tsx","../../src/UNSAFE_InlineSelectSingle/useInlineSelectSingle.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ContextType, JSX, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { useCallback } from 'preact/hooks';\n\nimport {\n DefaultList,\n DropdownList,\n EmptyResults,\n type SelectSingleCollectionRendererContext\n} from '#PRIVATE_SelectCommon';\nimport { Flex } from '#UNSAFE_Flex';\nimport { Label } from '#UNSAFE_Label';\nimport { SelectSingleField } from '#UNSAFE_SelectSingle/SelectSingleField';\nimport { SelectSingleFieldInput } from '#UNSAFE_SelectSingle/SelectSingleFieldInput';\nimport { Separator } from '#UNSAFE_Separator';\nimport { InlineUserAssistance } from '#UNSAFE_UserAssistance';\nimport { View } from '#UNSAFE_View';\nimport { FormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { TabbableModeContext } from '#hooks/UNSAFE_useTabbableMode';\nimport type { Data, InlineSelectHandle, InlineSelectSingleProps, Key } from './types';\nimport { useInlineSelectSingle } from './useInlineSelectSingle';\n\nconst PREVENT_TABBING = { isTabbable: false } satisfies ContextType<typeof TabbableModeContext>;\n\n/**\n * A InlineSelectSingle is a text field with an inline list that supports single selection and search filtering.\n * Note: This is only meant to be used by the Spectra Smart Search component. As such, it only has limited features\n * needed for the Smart Search component.\n */\nfunction InlineSelectSingleImpl<K extends Key, D extends Data>(\n props: InlineSelectSingleProps<K, D>,\n ref: Ref<InlineSelectHandle>\n) {\n const {\n data,\n itemRenderer,\n itemText,\n label,\n onLoadRange,\n testId,\n userAssistancePosition = 'belowList'\n } = props;\n const {\n collectionRendererContext,\n formFieldContext,\n hasUserAssistance,\n isEmptyResults,\n isUserFiltering,\n labelProps,\n listContainerProps,\n selectSingleFieldProps,\n selectFieldInputProps,\n userAssistanceProps\n } = useInlineSelectSingle(props, ref);\n\n const defaultCollectionRenderer = useCallback(\n ({\n onPersistCurrentRowKey,\n onRowAction,\n selected,\n searchText,\n currentRowKeyOverride\n }: SelectSingleCollectionRendererContext<K, D>) => (\n <DefaultList\n aria-label={label}\n componentName=\"InlineSelectSingle\"\n currentItemVariant=\"highlight\"\n currentKey={currentRowKeyOverride}\n data={data}\n itemRenderer={itemRenderer}\n itemText={itemText}\n onCurrentKeyChange={onPersistCurrentRowKey}\n onItemAction={onRowAction}\n onLoadRange={onLoadRange}\n searchText={isUserFiltering ? searchText : undefined}\n selectedKeys={selected}\n selectionMode=\"single\"\n />\n ),\n [data, isUserFiltering, itemRenderer, itemText, label, onLoadRange]\n );\n\n const userAssistance = (\n <View minWidth=\"100%\" padding=\"2x\">\n <InlineUserAssistance\n testId={testId && `${testId}_userAssistance`}\n {...userAssistanceProps}\n />\n </View>\n );\n\n return (\n <Flex direction=\"column\" gap=\"2x\" maxHeight=\"100%\" width=\"100%\">\n <FormFieldContext.Provider value={formFieldContext}>\n <View flex={0}>\n <SelectSingleField\n {...selectSingleFieldProps}\n label={<Label {...labelProps} />}\n testId={testId && `${testId}_selectSingleField`}>\n <SelectSingleFieldInput {...selectFieldInputProps} />\n </SelectSingleField>\n {/* Render separator & UA without gaps when we are configured for UA between the field and the dropdown */}\n {userAssistancePosition === 'aboveList' && <Separator />}\n {userAssistancePosition === 'aboveList' && hasUserAssistance && (\n <>\n {userAssistance}\n <Separator />\n </>\n )}\n </View>\n {/* Render separator with gaps when we are not configured for UA between the field and the dropdown */}\n {userAssistancePosition !== 'aboveList' && <Separator />}\n <DropdownList\n {...listContainerProps}\n // Add bottom gap only when we are configured to show UA above the list\n hasBottomGap={userAssistancePosition === 'aboveList'}\n hasTopGap={false}>\n <TabbableModeContext.Provider value={PREVENT_TABBING}>\n {isEmptyResults ? (\n <EmptyResults />\n ) : (\n defaultCollectionRenderer(collectionRendererContext)\n )}\n </TabbableModeContext.Provider>\n </DropdownList>\n {userAssistancePosition === 'belowList' && hasUserAssistance && (\n <div>\n <Separator />\n {userAssistance}\n </div>\n )}\n </FormFieldContext.Provider>\n </Flex>\n );\n}\n\nexport const InlineSelectSingle = forwardRef(InlineSelectSingleImpl) as {\n <K extends Key, D extends Data>(\n props: InlineSelectSingleProps<K, D> & { ref?: Ref<InlineSelectHandle> }\n ): JSX.Element;\n}; // forwardRef will remove generics, so we cast it explicitly to preserve generics.;\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentProps, Ref } from 'preact';\nimport { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';\n\nimport {\n type DropdownList,\n isBeforeDataFetch,\n isPhone,\n isSearchTextEmptyOrUndefined,\n useCollectionRenderer,\n UseCollectionRendererSelectSingleParams,\n useSelectCommon\n} from '#PRIVATE_SelectCommon';\nimport type { Label } from '#UNSAFE_Label';\nimport type { SelectSingleField } from '#UNSAFE_SelectSingle/SelectSingleField';\nimport type { SelectSingleFieldInput } from '#UNSAFE_SelectSingle/SelectSingleFieldInput';\nimport { useDisplayValue } from '#UNSAFE_SelectSingle/useDisplayValue';\nimport type { InlineUserAssistance } from '#UNSAFE_UserAssistance';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useLoadingIndicatorTimer } from '#hooks/UNSAFE_useLoadingIndicatorTimer';\nimport { useTextField } from '#hooks/UNSAFE_useTextField';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '#resources/nls/bundle';\nimport { isControlOrFunctionKey, KEYS } from '#utils/PRIVATE_keyboardUtils';\nimport { allTabbableElements } from '#utils/PRIVATE_tabbableUtils';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport type {\n CommitMetadata,\n Data,\n InlineSelectHandle,\n InlineSelectSingleProps,\n Key\n} from './types';\nimport { UNSAFE_DOM_ACCESS } from '#utils/UNSAFE_unsafeDomAccess';\n\ntype UseInlineSelectSingleOptions<K extends Key, D extends Data> = InlineSelectSingleProps<K, D>;\n\n/**\n * A custom hook for determining prop values for the InlineSelectSingle's child\n * components from its own props.\n * @param param0 options\n * @param ref The ref handle of the component.\n */\nexport function useInlineSelectSingle<K extends Key, D extends Data>(\n {\n 'aria-describedby': ariaDescribedBy,\n assistiveText,\n data,\n hasBackIcon = 'never',\n hasClearIcon = 'never',\n helpSourceLink,\n helpSourceText,\n isLoading: propIsLoading,\n itemText,\n label,\n onBackIconAction,\n onCommit: propOnCommit,\n onFilter,\n placeholder,\n textAlign: propTextAlign,\n valueItem,\n virtualKeyboard\n }: UseInlineSelectSingleOptions<K, D>,\n ref: Ref<InlineSelectHandle>\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const { textAlign: formTextAlign } = useFormContext();\n const textAlign = propTextAlign ?? formTextAlign ?? 'start';\n const isDataFetched = data != null && !isBeforeDataFetch<K, D>(data);\n const isEmptyResults = isDataFetched && data?.totalSize === 0;\n\n // Refs to keep track of prop changes and sync internal state\n const prevDataRef = useRef(data);\n const prevValueItemRef = useRef(valueItem);\n const isInitialRender = useRef(true);\n\n // State for holding the selected keys in the list\n const [selectedKeys, setSelectedKeys] = useState(\n valueItem === undefined ? undefined : new Set([valueItem.key])\n );\n\n // The incoming propIsLoading tells us that we are in a loading state, but we don't want to\n // show the loading indicator until after a delay, because showing it immediately could result\n // in unwanted flashing. The isLoading var below will be set to true by useLoadingIndicatorTimer\n // after the delay, when the timer expires, at which point we should show the loading indicator.\n // If propIsLoading is set to false before the timer expires, then the timer will be cancelled\n // and no loading indicator will be shown.\n // (ListView detects its loading state by checking data === null. While it would be nice for\n // us to be consistent and check valueItems === null, we need to use a separate isLoading prop.\n // If valueItems === null triggers our loading state, then the selections in the dropdown\n // are cleared for that period of time, which is undesirable.)\n const isLoading = useLoadingIndicatorTimer(propIsLoading ?? false);\n const displayValue = useDisplayValue(itemText, valueItem, 'InlineSelectSingle');\n\n // add methods to the ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n [UNSAFE_DOM_ACCESS]: inputRef.current!\n }),\n []\n );\n\n const {\n currentRowKeyRef,\n currentRowOverride,\n dropdownRef,\n isFocused,\n isUserFiltering,\n onCurrentKeyChange,\n searchText,\n setCurrentRowOverride,\n stopFiltering,\n updateFiltering,\n userInput\n } = useSelectCommon<K, D>({\n data,\n inputRef,\n // The component can only be in a focused visual state\n isFocused: true,\n onFilter\n });\n\n const { baseId, formFieldContext, inputProps, labelProps, userAssistanceProps } = useTextField({\n ariaDescribedBy,\n helpSourceLink,\n helpSourceText,\n isFocused,\n isLoading,\n value: valueItem !== undefined ? true : undefined\n });\n const listId = `${baseId}-list`;\n\n // If we're waiting for the selected values to load, the component should look like it\n // has a value in the meantime.\n // Use the original propIsLoading instead of isLoading because we don't want to delay\n // the inside label position by a timer like we do the progressive loading indicator.\n formFieldContext.hasValue = propIsLoading || formFieldContext.hasValue;\n\n const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n const liveRegionText = isDataFetched\n ? data?.totalSize === 0\n ? translations.select_noMatchesFound()\n : data?.totalSize === 1\n ? translations.select_oneMatchFound()\n : data?.sizePrecision === 'exact'\n ? translations.select_sizeMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })\n : translations.select_sizeOrMoreMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })\n : '';\n\n /**\n * Lifecycle updates\n */\n // When the valueItem changes, save the new selectedKeys\n if (prevValueItemRef.current !== valueItem) {\n prevValueItemRef.current = valueItem;\n setSelectedKeys(valueItem === undefined ? undefined : new Set([valueItem.key]));\n }\n\n // When data changes, highlight the first result\n if (prevDataRef.current !== data) {\n prevDataRef.current = data;\n // when filtering, set the first result of the filtered data set to be the current item\n // (check the data offset so we don't try to highlight again if the user scrolls through\n // the list and more data is fetched)\n if (isUserFiltering && data != null && data.offset === 0 && data.data.length > 0) {\n // if there are results and search text, highlight the first row, otherwise clear\n // an existing highlight\n setCurrentRowOverride({\n rowKey: !isSearchTextEmptyOrUndefined(searchText) ? data.data[0].metadata.key : undefined\n });\n }\n }\n\n // During the initial render, set the current row override if we have selected values.\n // This way pressing DOWN arrow will start the navigation from the selected row.\n if (isInitialRender.current) {\n isInitialRender.current = false;\n setCurrentRowOverride({ rowKey: [...(selectedKeys ?? [undefined])][0] });\n }\n\n /**\n * A helper onCommit wrapper that consumes the metadata and calls the\n * propOnCommit with only the necessary information.\n * (Similar to onCommit in useSelectSingle.ts)\n */\n const onCommit = useCallback(\n (value: K | undefined, metadata: CommitMetadata) => {\n propOnCommit?.({\n value: value,\n previousValue: valueItem !== undefined ? valueItem.key : undefined,\n reason: metadata.reason\n });\n },\n [propOnCommit, valueItem]\n );\n\n /**\n * A helper function to clear the selectedKeys and commits empty value.\n * (Similar to clearValue in useSelectSingle.ts but without dropdown related logic)\n */\n const clearValue = useCallback(\n (metadata: CommitMetadata) => {\n setSelectedKeys(new Set<K>());\n // call the onCommit callback so that the consuming code can update the valueItem\n onCommit(undefined, metadata);\n },\n [onCommit]\n );\n\n /**\n * Determine if we need to clear the value because the user has deleted all the text.\n * (Similar to isClearValueNeeded in useSelectSingle.ts)\n */\n const isClearValueNeeded = useCallback(() => {\n return isUserFiltering && userInput === '' && valueItem !== undefined;\n }, [isUserFiltering, userInput, valueItem]);\n\n /**\n * Handler for List.onItemAction\n * (Similar to useSelectSingle.ts's onItemAction but without dropdown related logic)\n * This is used for handling:\n * - Commits value when one performs an action on the list\n */\n const handleItemAction = useCallback<\n UseCollectionRendererSelectSingleParams<K, D>['onItemAction']\n >(\n (detail) => {\n // after selecting a value, the user is no longer actively filtering, so update related\n // state accordingly so that the newly selected value appears in the field\n stopFiltering();\n\n const newKey = detail.context.key;\n // update the selectedKeys so that the selection visual state of the collection\n // updates immediately while waiting for a new valueItem to be set\n setSelectedKeys(new Set([newKey]));\n // call the onCommit callback so that the consuming code can update the valueItem\n onCommit(newKey, { reason: 'itemAction' });\n },\n [onCommit, stopFiltering]\n );\n\n /**\n * Handler for SelectSingleFieldInput.onInput\n * This is used for handling:\n * - Typing in text in the field should filter the results (i.e. invoke onFilter with the text)\n */\n const handleFieldInput = useCallback(\n ({ value }: ValueUpdateDetail<string>) => {\n updateFiltering(value);\n onFilter?.({ searchText: value });\n },\n [onFilter, updateFiltering]\n );\n\n /**\n * Handler for SelectSingleFieldInput.onKeyDown\n * This is used for handling:\n * - Prevents default browser behavior on UP/DOWN to avoid scrolling\n * - Clears value or selects current row on ENTER\n * - Clears value or selects current row on TAB\n */\n const handleFieldKeyDown = useCallback(\n (event: KeyboardEvent) => {\n // ignore ctrl and fn key events\n if (isControlOrFunctionKey(event)) return;\n\n switch (event.code) {\n case KEYS.UP:\n case KEYS.DOWN:\n // prevent the default action, since we do not want the page to scroll\n event.preventDefault();\n break;\n case KEYS.ENTER:\n case KEYS.TAB: {\n // if this is on a mobile device (only phone and not in tablet devices), do not do anything\n if (isPhone()) return;\n\n // Otherwise, proceed\n const commitMetadata: CommitMetadata = {\n reason: event.code === KEYS.TAB ? 'tabKey' : 'itemAction'\n };\n // check to see if we need to clear the value\n if (isClearValueNeeded()) {\n // in this case, clear the value and return.\n clearValue(commitMetadata);\n return;\n }\n\n // if there is no data to select, no need to handle this event\n if (data == null || data.data.length === 0) return;\n\n // If we will be making a selection, the user is no longer actively filtering,\n // so update related state accordingly so that the newly selected value appears in the field.\n stopFiltering();\n\n // Current design have this component in a dropdown/modal. So, pressing Tab from\n // the main field without doing any other interaction is still considered a selection\n // unlike SelectSingle (see JET-68215). So, we handle both Enter and Tab similarly.\n // If there is a currentRow in the dropdown (meaning a highlighted item that would\n // have keyboard focus if the dropdown list had physical focus, which may be different\n // from the currently selected item), select it and commit it.\n if (currentRowKeyRef.current !== undefined && data != null && data.data.length > 0) {\n setSelectedKeys(new Set<K>([currentRowKeyRef.current]));\n onCommit(currentRowKeyRef.current, commitMetadata);\n return;\n }\n // Otherwise commit the currently selected value again so that a valueAction event\n // can be fired from the core-pack side.\n onCommit(valueItem?.key ?? undefined, commitMetadata);\n break;\n }\n }\n },\n [clearValue, currentRowKeyRef, data, isClearValueNeeded, onCommit, stopFiltering, valueItem]\n );\n\n /**\n * Handler for SelectSingleFieldInput.onKeyUp\n * This is used for handling:\n * - Pressing UP/DOWN from the main field should move the focus to the list\n * - If Ctrl or Fn key is pressed, then ignore the event\n */\n const handleFieldKeyUp = useCallback(\n (event: KeyboardEvent) => {\n // ignore ctrl and fn key events\n if (isControlOrFunctionKey(event)) return;\n\n switch (event.code) {\n case KEYS.UP:\n case KEYS.DOWN:\n // Transfer physical focus into the dropdown only if the data is present and the dropdown\n // has rendered the data. Otherwise, keep the focus in the field.\n if (data != null && dropdownRef.current) {\n // get the focusable element from the dropdown.\n // consider element with tabindex=-1 as well.\n const firstFocusableElem = allTabbableElements(dropdownRef.current, undefined, true)[0];\n // focus the first element if it exists\n firstFocusableElem?.focus();\n\n // set the first row as current row if there is no current row at the moment\n if (currentRowOverride.rowKey === undefined) {\n setCurrentRowOverride({ rowKey: data.data[0]?.metadata?.key });\n }\n }\n // prevent the default action, since we are handling it\n event.preventDefault();\n break;\n }\n },\n [currentRowOverride, data, dropdownRef, setCurrentRowOverride]\n );\n\n /**\n * Handler for DropdownList.onKeyDown\n * This is used for handling:\n * - Pressing Tab when highlighted on a list item should select & commit that item as value\n */\n const handleListKeyDown = useCallback(\n (event: KeyboardEvent) => {\n switch (event.code) {\n case KEYS.TAB:\n // if there is a currentRow in the dropdown, select it and commit it\n if (currentRowKeyRef.current !== undefined && data != null && data.data.length > 0) {\n setSelectedKeys(new Set<K>([currentRowKeyRef.current]));\n onCommit(currentRowKeyRef.current, { reason: 'tabKey' });\n }\n break;\n }\n },\n [currentRowKeyRef, data, onCommit]\n );\n\n /**\n * Handler for ClearButton.onClick\n * This is for handling:\n * - on clicking the clear icon, the value & selection should be cleared.\n */\n const handleClearButtonClick = useCallback(() => {\n // reset the user filter and the value of the component\n stopFiltering();\n // clear the value\n clearValue({ reason: 'itemAction' });\n // set focus to the input\n inputRef.current?.focus();\n // call onFilter with undefined\n onFilter?.({ searchText: undefined });\n }, [clearValue, onFilter, stopFiltering]);\n\n /**\n * Create collection Renderer context. This will be used by the default\n * collectionRenderer.\n */\n const collectionRendererContext = useCollectionRenderer<K, D>({\n currentKey: currentRowOverride.rowKey,\n searchText,\n selectedKeys,\n onCurrentKeyChange,\n onItemAction: handleItemAction\n });\n\n // TODO: JET-73973 - ListView is not respecting TabbableMode\n // Currently List does not respect TabbableMode, so for now explicitly set tabindex=\"-1\".\n // When this bug is fixed, this useEffect can be removed.\n useEffect(() => {\n const list = dropdownRef.current?.querySelector('div[role=\"listbox\"][tabindex=\"0\"]');\n list?.setAttribute('tabindex', '-1');\n });\n\n return {\n collectionRendererContext,\n formFieldContext,\n hasUserAssistance: Boolean(assistiveText || helpSourceLink),\n isEmptyResults,\n isUserFiltering,\n labelProps: {\n ...labelProps,\n children: label\n } satisfies ComponentProps<typeof Label>,\n listContainerProps: {\n id: listId,\n dropdownListRef: dropdownRef,\n onKeyDown: handleListKeyDown\n } satisfies ComponentProps<typeof DropdownList>,\n selectSingleFieldProps: {\n contentVariant: 'input',\n // InlineSelectSingle currently only supports inside label.\n hasInsideLabel: true,\n isBackButtonShown: hasBackIcon === 'always',\n isClearButtonShown: hasClearIcon === 'conditionally' && valueItem !== undefined,\n onBackButtonClick: onBackIconAction,\n onClearButtonClick: handleClearButtonClick,\n styleVariant: 'embedded' as const\n } satisfies Omit<ComponentProps<typeof SelectSingleField>, 'children'>,\n selectFieldInputProps: {\n ...inputProps,\n 'aria-controls': listId,\n // InlineSelectSingle always have the list open, so it will always be in an expanded state.\n 'aria-expanded': true,\n displayValue,\n // InlineSelectSingle currently only supports inside label,\n // so it is expected to always have a label.\n hasEmptyLabel: false,\n // InlineSelectSingle currently only supports inside label.\n hasInsideLabel: true,\n inputRef,\n // InlineSelectSingle currently does not support Add to List.\n isAddToListShown: false,\n // InlineSelectSingle currently does not support Advanced Search.\n isAdvancedSearchShown: false,\n // InlineSelectSingle currently does not support Required.\n isRequired: false,\n isUserFiltering,\n liveRegionText,\n onInput: handleFieldInput,\n onKeyDown: handleFieldKeyDown,\n onKeyUp: handleFieldKeyUp,\n placeholder,\n textAlign,\n userInput,\n variant: 'embedded',\n virtualKeyboard\n } satisfies ComponentProps<typeof SelectSingleFieldInput>,\n userAssistanceProps: {\n ...userAssistanceProps,\n assistiveText,\n fieldLabel: label,\n helpSourceLink,\n helpSourceText\n } satisfies ComponentProps<typeof InlineUserAssistance>\n };\n}\n"],"names":["PREVENT_TABBING","isTabbable","InlineSelectSingle","forwardRef","props","ref","data","itemRenderer","itemText","label","onLoadRange","testId","userAssistancePosition","collectionRendererContext","formFieldContext","hasUserAssistance","isEmptyResults","isUserFiltering","labelProps","listContainerProps","selectSingleFieldProps","selectFieldInputProps","userAssistanceProps","ariaDescribedBy","assistiveText","hasBackIcon","hasClearIcon","helpSourceLink","helpSourceText","isLoading","propIsLoading","onBackIconAction","onCommit","propOnCommit","onFilter","placeholder","textAlign","propTextAlign","valueItem","virtualKeyboard","inputRef","useRef","formTextAlign","useFormContext","isDataFetched","isBeforeDataFetch","totalSize","prevDataRef","prevValueItemRef","isInitialRender","selectedKeys","setSelectedKeys","useState","undefined","Set","key","useLoadingIndicatorTimer","displayValue","useDisplayValue","useImperativeHandle","focus","current","blur","UNSAFE_DOM_ACCESS","currentRowKeyRef","currentRowOverride","dropdownRef","isFocused","onCurrentKeyChange","searchText","setCurrentRowOverride","stopFiltering","updateFiltering","userInput","useSelectCommon","baseId","inputProps","useTextField","value","listId","hasValue","translations","useTranslationBundle","liveRegionText","select_noMatchesFound","select_oneMatchFound","sizePrecision","select_sizeMatchesFound","TOTAL_SIZE","select_sizeOrMoreMatchesFound","offset","length","rowKey","isSearchTextEmptyOrUndefined","metadata","useCallback","previousValue","reason","clearValue","isClearValueNeeded","handleItemAction","detail","newKey","context","handleFieldInput","handleFieldKeyDown","event","isControlOrFunctionKey","code","KEYS","UP","DOWN","preventDefault","ENTER","TAB","isPhone","commitMetadata","handleFieldKeyUp","firstFocusableElem","allTabbableElements","handleListKeyDown","handleClearButtonClick","useCollectionRenderer","currentKey","onItemAction","useEffect","list","querySelector","setAttribute","Boolean","children","id","dropdownListRef","onKeyDown","contentVariant","hasInsideLabel","isBackButtonShown","isClearButtonShown","onBackButtonClick","onClearButtonClick","styleVariant","hasEmptyLabel","isAddToListShown","isAdvancedSearchShown","isRequired","onInput","onKeyUp","variant","fieldLabel","useInlineSelectSingle","defaultCollectionRenderer","onPersistCurrentRowKey","onRowAction","selected","currentRowKeyOverride","_jsx","DefaultList","componentName","currentItemVariant","selectionMode","userAssistance","View","minWidth","padding","jsx","InlineUserAssistance","Flex","direction","gap","maxHeight","width","_jsxs","FormFieldContext","Provider","flex","SelectSingleField","Label","SelectSingleFieldInput","Separator","DropdownList","hasBottomGap","hasTopGap","TabbableModeContext","EmptyResults","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InlineSelectSingle-87bc8a45.js","sources":["../../src/UNSAFE_InlineSelectSingle/InlineSelectSingle.tsx","../../src/UNSAFE_InlineSelectSingle/useInlineSelectSingle.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ContextType, JSX, Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { useCallback } from 'preact/hooks';\n\nimport {\n DefaultList,\n DropdownList,\n EmptyResults,\n type SelectSingleCollectionRendererContext\n} from '#PRIVATE_SelectCommon';\nimport { Flex } from '#UNSAFE_Flex';\nimport { Label } from '#UNSAFE_Label';\nimport { SelectSingleField } from '#UNSAFE_SelectSingle/SelectSingleField';\nimport { SelectSingleFieldInput } from '#UNSAFE_SelectSingle/SelectSingleFieldInput';\nimport { Separator } from '#UNSAFE_Separator';\nimport { InlineUserAssistance } from '#UNSAFE_UserAssistance';\nimport { View } from '#UNSAFE_View';\nimport { FormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { TabbableModeContext } from '#hooks/UNSAFE_useTabbableMode';\nimport type { Data, InlineSelectHandle, InlineSelectSingleProps, Key } from './types';\nimport { useInlineSelectSingle } from './useInlineSelectSingle';\n\nconst PREVENT_TABBING = { isTabbable: false } satisfies ContextType<typeof TabbableModeContext>;\n\n/**\n * A InlineSelectSingle is a text field with an inline list that supports single selection and search filtering.\n * Note: This is only meant to be used by the Spectra Smart Search component. As such, it only has limited features\n * needed for the Smart Search component.\n */\nfunction InlineSelectSingleImpl<K extends Key, D extends Data>(\n props: InlineSelectSingleProps<K, D>,\n ref: Ref<InlineSelectHandle>\n) {\n const {\n data,\n itemRenderer,\n itemText,\n label,\n onLoadRange,\n testId,\n userAssistancePosition = 'belowList'\n } = props;\n const {\n collectionRendererContext,\n formFieldContext,\n hasUserAssistance,\n isEmptyResults,\n isUserFiltering,\n labelProps,\n listContainerProps,\n selectSingleFieldProps,\n selectFieldInputProps,\n userAssistanceProps\n } = useInlineSelectSingle(props, ref);\n\n const defaultCollectionRenderer = useCallback(\n ({\n onPersistCurrentRowKey,\n onRowAction,\n selected,\n searchText,\n currentRowKeyOverride\n }: SelectSingleCollectionRendererContext<K, D>) => (\n <DefaultList\n aria-label={label}\n componentName=\"InlineSelectSingle\"\n currentItemVariant=\"highlight\"\n currentKey={currentRowKeyOverride}\n data={data}\n itemRenderer={itemRenderer}\n itemText={itemText}\n onCurrentKeyChange={onPersistCurrentRowKey}\n onItemAction={onRowAction}\n onLoadRange={onLoadRange}\n searchText={isUserFiltering ? searchText : undefined}\n selectedKeys={selected}\n selectionMode=\"single\"\n />\n ),\n [data, isUserFiltering, itemRenderer, itemText, label, onLoadRange]\n );\n\n const userAssistance = (\n <View minWidth=\"100%\" padding=\"2x\">\n <InlineUserAssistance\n testId={testId && `${testId}_userAssistance`}\n {...userAssistanceProps}\n />\n </View>\n );\n\n return (\n <Flex direction=\"column\" gap=\"2x\" maxHeight=\"100%\" width=\"100%\">\n <FormFieldContext.Provider value={formFieldContext}>\n <View flex={0}>\n <SelectSingleField\n {...selectSingleFieldProps}\n label={<Label {...labelProps} />}\n testId={testId && `${testId}_selectSingleField`}>\n <SelectSingleFieldInput {...selectFieldInputProps} />\n </SelectSingleField>\n {/* Render separator & UA without gaps when we are configured for UA between the field and the dropdown */}\n {userAssistancePosition === 'aboveList' && <Separator />}\n {userAssistancePosition === 'aboveList' && hasUserAssistance && (\n <>\n {userAssistance}\n <Separator />\n </>\n )}\n </View>\n {/* Render separator with gaps when we are not configured for UA between the field and the dropdown */}\n {userAssistancePosition !== 'aboveList' && <Separator />}\n <DropdownList\n {...listContainerProps}\n // Add bottom gap only when we are configured to show UA above the list\n hasBottomGap={userAssistancePosition === 'aboveList'}\n hasTopGap={false}>\n <TabbableModeContext.Provider value={PREVENT_TABBING}>\n {isEmptyResults ? (\n <EmptyResults />\n ) : (\n defaultCollectionRenderer(collectionRendererContext)\n )}\n </TabbableModeContext.Provider>\n </DropdownList>\n {userAssistancePosition === 'belowList' && hasUserAssistance && (\n <div>\n <Separator />\n {userAssistance}\n </div>\n )}\n </FormFieldContext.Provider>\n </Flex>\n );\n}\n\nexport const InlineSelectSingle = forwardRef(InlineSelectSingleImpl) as {\n <K extends Key, D extends Data>(\n props: InlineSelectSingleProps<K, D> & { ref?: Ref<InlineSelectHandle> }\n ): JSX.Element;\n}; // forwardRef will remove generics, so we cast it explicitly to preserve generics.;\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport type { ComponentProps, Ref } from 'preact';\nimport { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';\n\nimport {\n type DropdownList,\n isBeforeDataFetch,\n isPhone,\n isSearchTextEmptyOrUndefined,\n useCollectionRenderer,\n UseCollectionRendererSelectSingleParams,\n useSelectCommon\n} from '#PRIVATE_SelectCommon';\nimport type { Label } from '#UNSAFE_Label';\nimport type { SelectSingleField } from '#UNSAFE_SelectSingle/SelectSingleField';\nimport type { SelectSingleFieldInput } from '#UNSAFE_SelectSingle/SelectSingleFieldInput';\nimport { useDisplayValue } from '#UNSAFE_SelectSingle/useDisplayValue';\nimport type { InlineUserAssistance } from '#UNSAFE_UserAssistance';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { useLoadingIndicatorTimer } from '#hooks/UNSAFE_useLoadingIndicatorTimer';\nimport { useTextField } from '#hooks/UNSAFE_useTextField';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '#resources/nls/bundle';\nimport { isControlOrFunctionKey, KEYS } from '#utils/PRIVATE_keyboardUtils';\nimport { allTabbableElements } from '#utils/PRIVATE_tabbableUtils';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport type {\n CommitMetadata,\n Data,\n InlineSelectHandle,\n InlineSelectSingleProps,\n Key\n} from './types';\nimport { UNSAFE_DOM_ACCESS } from '#utils/UNSAFE_unsafeDomAccess';\n\ntype UseInlineSelectSingleOptions<K extends Key, D extends Data> = InlineSelectSingleProps<K, D>;\n\n/**\n * A custom hook for determining prop values for the InlineSelectSingle's child\n * components from its own props.\n * @param param0 options\n * @param ref The ref handle of the component.\n */\nexport function useInlineSelectSingle<K extends Key, D extends Data>(\n {\n 'aria-describedby': ariaDescribedBy,\n assistiveText,\n data,\n hasBackIcon = 'never',\n hasClearIcon = 'never',\n helpSourceLink,\n helpSourceText,\n isLoading: propIsLoading,\n itemText,\n label,\n onBackIconAction,\n onCommit: propOnCommit,\n onFilter,\n placeholder,\n textAlign: propTextAlign,\n valueItem,\n virtualKeyboard\n }: UseInlineSelectSingleOptions<K, D>,\n ref: Ref<InlineSelectHandle>\n) {\n const inputRef = useRef<HTMLInputElement>(null);\n const { textAlign: formTextAlign } = useFormContext();\n const textAlign = propTextAlign ?? formTextAlign ?? 'start';\n const isDataFetched = data != null && !isBeforeDataFetch<K, D>(data);\n const isEmptyResults = isDataFetched && data?.totalSize === 0;\n\n // Refs to keep track of prop changes and sync internal state\n const prevDataRef = useRef(data);\n const prevValueItemRef = useRef(valueItem);\n const isInitialRender = useRef(true);\n\n // State for holding the selected keys in the list\n const [selectedKeys, setSelectedKeys] = useState(\n valueItem === undefined ? undefined : new Set([valueItem.key])\n );\n\n // The incoming propIsLoading tells us that we are in a loading state, but we don't want to\n // show the loading indicator until after a delay, because showing it immediately could result\n // in unwanted flashing. The isLoading var below will be set to true by useLoadingIndicatorTimer\n // after the delay, when the timer expires, at which point we should show the loading indicator.\n // If propIsLoading is set to false before the timer expires, then the timer will be cancelled\n // and no loading indicator will be shown.\n // (ListView detects its loading state by checking data === null. While it would be nice for\n // us to be consistent and check valueItems === null, we need to use a separate isLoading prop.\n // If valueItems === null triggers our loading state, then the selections in the dropdown\n // are cleared for that period of time, which is undesirable.)\n const isLoading = useLoadingIndicatorTimer(propIsLoading ?? false);\n const displayValue = useDisplayValue(itemText, valueItem, 'InlineSelectSingle');\n\n // add methods to the ref\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n [UNSAFE_DOM_ACCESS]: inputRef.current!\n }),\n []\n );\n\n const {\n currentRowKeyRef,\n currentRowOverride,\n dropdownRef,\n isFocused,\n isUserFiltering,\n onCurrentKeyChange,\n searchText,\n setCurrentRowOverride,\n stopFiltering,\n updateFiltering,\n userInput\n } = useSelectCommon<K, D>({\n data,\n inputRef,\n // The component can only be in a focused visual state\n isFocused: true,\n onFilter\n });\n\n const { baseId, formFieldContext, inputProps, labelProps, userAssistanceProps } = useTextField({\n ariaDescribedBy,\n helpSourceLink,\n helpSourceText,\n isFocused,\n isLoading,\n value: valueItem !== undefined ? true : undefined\n });\n const listId = `${baseId}-list`;\n\n // If we're waiting for the selected values to load, the component should look like it\n // has a value in the meantime.\n // Use the original propIsLoading instead of isLoading because we don't want to delay\n // the inside label position by a timer like we do the progressive loading indicator.\n formFieldContext.hasValue = propIsLoading || formFieldContext.hasValue;\n\n const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n const liveRegionText = isDataFetched\n ? data?.totalSize === 0\n ? translations.select_noMatchesFound()\n : data?.totalSize === 1\n ? translations.select_oneMatchFound()\n : data?.sizePrecision === 'exact'\n ? translations.select_sizeMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })\n : translations.select_sizeOrMoreMatchesFound({ TOTAL_SIZE: `${data?.totalSize}` })\n : '';\n\n /**\n * Lifecycle updates\n */\n // When the valueItem changes, save the new selectedKeys\n if (prevValueItemRef.current !== valueItem) {\n prevValueItemRef.current = valueItem;\n setSelectedKeys(valueItem === undefined ? undefined : new Set([valueItem.key]));\n }\n\n // When data changes, highlight the first result\n if (prevDataRef.current !== data) {\n prevDataRef.current = data;\n // when filtering, set the first result of the filtered data set to be the current item\n // (check the data offset so we don't try to highlight again if the user scrolls through\n // the list and more data is fetched)\n if (isUserFiltering && data != null && data.offset === 0 && data.data.length > 0) {\n // if there are results and search text, highlight the first row, otherwise clear\n // an existing highlight\n setCurrentRowOverride({\n rowKey: !isSearchTextEmptyOrUndefined(searchText) ? data.data[0].metadata.key : undefined\n });\n }\n }\n\n // During the initial render, set the current row override if we have selected values.\n // This way pressing DOWN arrow will start the navigation from the selected row.\n if (isInitialRender.current) {\n isInitialRender.current = false;\n setCurrentRowOverride({ rowKey: [...(selectedKeys ?? [undefined])][0] });\n }\n\n /**\n * A helper onCommit wrapper that consumes the metadata and calls the\n * propOnCommit with only the necessary information.\n * (Similar to onCommit in useSelectSingle.ts)\n */\n const onCommit = useCallback(\n (value: K | undefined, metadata: CommitMetadata) => {\n propOnCommit?.({\n value: value,\n previousValue: valueItem !== undefined ? valueItem.key : undefined,\n reason: metadata.reason\n });\n },\n [propOnCommit, valueItem]\n );\n\n /**\n * A helper function to clear the selectedKeys and commits empty value.\n * (Similar to clearValue in useSelectSingle.ts but without dropdown related logic)\n */\n const clearValue = useCallback(\n (metadata: CommitMetadata) => {\n setSelectedKeys(new Set<K>());\n // call the onCommit callback so that the consuming code can update the valueItem\n onCommit(undefined, metadata);\n },\n [onCommit]\n );\n\n /**\n * Determine if we need to clear the value because the user has deleted all the text.\n * (Similar to isClearValueNeeded in useSelectSingle.ts)\n */\n const isClearValueNeeded = useCallback(() => {\n return isUserFiltering && userInput === '' && valueItem !== undefined;\n }, [isUserFiltering, userInput, valueItem]);\n\n /**\n * Handler for List.onItemAction\n * (Similar to useSelectSingle.ts's onItemAction but without dropdown related logic)\n * This is used for handling:\n * - Commits value when one performs an action on the list\n */\n const handleItemAction = useCallback<\n UseCollectionRendererSelectSingleParams<K, D>['onItemAction']\n >(\n (detail) => {\n // after selecting a value, the user is no longer actively filtering, so update related\n // state accordingly so that the newly selected value appears in the field\n stopFiltering();\n\n const newKey = detail.context.key;\n // update the selectedKeys so that the selection visual state of the collection\n // updates immediately while waiting for a new valueItem to be set\n setSelectedKeys(new Set([newKey]));\n // call the onCommit callback so that the consuming code can update the valueItem\n onCommit(newKey, { reason: 'itemAction' });\n },\n [onCommit, stopFiltering]\n );\n\n /**\n * Handler for SelectSingleFieldInput.onInput\n * This is used for handling:\n * - Typing in text in the field should filter the results (i.e. invoke onFilter with the text)\n */\n const handleFieldInput = useCallback(\n ({ value }: ValueUpdateDetail<string>) => {\n updateFiltering(value);\n onFilter?.({ searchText: value });\n },\n [onFilter, updateFiltering]\n );\n\n /**\n * Handler for SelectSingleFieldInput.onKeyDown\n * This is used for handling:\n * - Prevents default browser behavior on UP/DOWN to avoid scrolling\n * - Clears value or selects current row on ENTER\n * - Clears value or selects current row on TAB\n */\n const handleFieldKeyDown = useCallback(\n (event: KeyboardEvent) => {\n // ignore ctrl and fn key events\n if (isControlOrFunctionKey(event)) return;\n\n switch (event.code) {\n case KEYS.UP:\n case KEYS.DOWN:\n // prevent the default action, since we do not want the page to scroll\n event.preventDefault();\n break;\n case KEYS.ENTER:\n case KEYS.TAB: {\n // if this is on a mobile device (only phone and not in tablet devices), do not do anything\n if (isPhone()) return;\n\n // Otherwise, proceed\n const commitMetadata: CommitMetadata = {\n reason: event.code === KEYS.TAB ? 'tabKey' : 'itemAction'\n };\n // check to see if we need to clear the value\n if (isClearValueNeeded()) {\n // in this case, clear the value and return.\n clearValue(commitMetadata);\n return;\n }\n\n // if there is no data to select, no need to handle this event\n if (data == null || data.data.length === 0) return;\n\n // If we will be making a selection, the user is no longer actively filtering,\n // so update related state accordingly so that the newly selected value appears in the field.\n stopFiltering();\n\n // Current design have this component in a dropdown/modal. So, pressing Tab from\n // the main field without doing any other interaction is still considered a selection\n // unlike SelectSingle (see JET-68215). So, we handle both Enter and Tab similarly.\n // If there is a currentRow in the dropdown (meaning a highlighted item that would\n // have keyboard focus if the dropdown list had physical focus, which may be different\n // from the currently selected item), select it and commit it.\n if (currentRowKeyRef.current !== undefined && data != null && data.data.length > 0) {\n setSelectedKeys(new Set<K>([currentRowKeyRef.current]));\n onCommit(currentRowKeyRef.current, commitMetadata);\n return;\n }\n // Otherwise commit the currently selected value again so that a valueAction event\n // can be fired from the core-pack side.\n onCommit(valueItem?.key ?? undefined, commitMetadata);\n break;\n }\n }\n },\n [clearValue, currentRowKeyRef, data, isClearValueNeeded, onCommit, stopFiltering, valueItem]\n );\n\n /**\n * Handler for SelectSingleFieldInput.onKeyUp\n * This is used for handling:\n * - Pressing UP/DOWN from the main field should move the focus to the list\n * - If Ctrl or Fn key is pressed, then ignore the event\n */\n const handleFieldKeyUp = useCallback(\n (event: KeyboardEvent) => {\n // ignore ctrl and fn key events\n if (isControlOrFunctionKey(event)) return;\n\n switch (event.code) {\n case KEYS.UP:\n case KEYS.DOWN:\n // Transfer physical focus into the dropdown only if the data is present and the dropdown\n // has rendered the data. Otherwise, keep the focus in the field.\n if (data != null && dropdownRef.current) {\n // get the focusable element from the dropdown.\n // consider element with tabindex=-1 as well.\n const firstFocusableElem = allTabbableElements(dropdownRef.current, undefined, true)[0];\n // focus the first element if it exists\n firstFocusableElem?.focus();\n\n // set the first row as current row if there is no current row at the moment\n if (currentRowOverride.rowKey === undefined) {\n setCurrentRowOverride({ rowKey: data.data[0]?.metadata?.key });\n }\n }\n // prevent the default action, since we are handling it\n event.preventDefault();\n break;\n }\n },\n [currentRowOverride, data, dropdownRef, setCurrentRowOverride]\n );\n\n /**\n * Handler for DropdownList.onKeyDown\n * This is used for handling:\n * - Pressing Tab when highlighted on a list item should select & commit that item as value\n */\n const handleListKeyDown = useCallback(\n (event: KeyboardEvent) => {\n switch (event.code) {\n case KEYS.TAB:\n // if there is a currentRow in the dropdown, select it and commit it\n if (currentRowKeyRef.current !== undefined && data != null && data.data.length > 0) {\n setSelectedKeys(new Set<K>([currentRowKeyRef.current]));\n onCommit(currentRowKeyRef.current, { reason: 'tabKey' });\n }\n break;\n }\n },\n [currentRowKeyRef, data, onCommit]\n );\n\n /**\n * Handler for ClearButton.onClick\n * This is for handling:\n * - on clicking the clear icon, the value & selection should be cleared.\n */\n const handleClearButtonClick = useCallback(() => {\n // reset the user filter and the value of the component\n stopFiltering();\n // clear the value\n clearValue({ reason: 'itemAction' });\n // set focus to the input\n inputRef.current?.focus();\n // call onFilter with undefined\n onFilter?.({ searchText: undefined });\n }, [clearValue, onFilter, stopFiltering]);\n\n /**\n * Create collection Renderer context. This will be used by the default\n * collectionRenderer.\n */\n const collectionRendererContext = useCollectionRenderer<K, D>({\n currentKey: currentRowOverride.rowKey,\n searchText,\n selectedKeys,\n onCurrentKeyChange,\n onItemAction: handleItemAction\n });\n\n // TODO: JET-73973 - ListView is not respecting TabbableMode\n // Currently List does not respect TabbableMode, so for now explicitly set tabindex=\"-1\".\n // When this bug is fixed, this useEffect can be removed.\n useEffect(() => {\n const list = dropdownRef.current?.querySelector('div[role=\"listbox\"][tabindex=\"0\"]');\n list?.setAttribute('tabindex', '-1');\n });\n\n return {\n collectionRendererContext,\n formFieldContext,\n hasUserAssistance: Boolean(assistiveText || helpSourceLink),\n isEmptyResults,\n isUserFiltering,\n labelProps: {\n ...labelProps,\n children: label\n } satisfies ComponentProps<typeof Label>,\n listContainerProps: {\n id: listId,\n dropdownListRef: dropdownRef,\n onKeyDown: handleListKeyDown\n } satisfies ComponentProps<typeof DropdownList>,\n selectSingleFieldProps: {\n contentVariant: 'input',\n // InlineSelectSingle currently only supports inside label.\n hasInsideLabel: true,\n isBackButtonShown: hasBackIcon === 'always',\n isClearButtonShown: hasClearIcon === 'conditionally' && valueItem !== undefined,\n onBackButtonClick: onBackIconAction,\n onClearButtonClick: handleClearButtonClick,\n styleVariant: 'embedded' as const\n } satisfies Omit<ComponentProps<typeof SelectSingleField>, 'children'>,\n selectFieldInputProps: {\n ...inputProps,\n 'aria-controls': listId,\n // InlineSelectSingle always have the list open, so it will always be in an expanded state.\n 'aria-expanded': true,\n displayValue,\n // InlineSelectSingle currently only supports inside label,\n // so it is expected to always have a label.\n hasEmptyLabel: false,\n // InlineSelectSingle currently only supports inside label.\n hasInsideLabel: true,\n inputRef,\n // InlineSelectSingle currently does not support Add to List.\n isAddToListShown: false,\n // InlineSelectSingle currently does not support Advanced Search.\n isAdvancedSearchShown: false,\n // InlineSelectSingle currently does not support Required.\n isRequired: false,\n isUserFiltering,\n liveRegionText,\n onInput: handleFieldInput,\n onKeyDown: handleFieldKeyDown,\n onKeyUp: handleFieldKeyUp,\n placeholder,\n textAlign,\n userInput,\n variant: 'embedded',\n virtualKeyboard\n } satisfies ComponentProps<typeof SelectSingleFieldInput>,\n userAssistanceProps: {\n ...userAssistanceProps,\n assistiveText,\n fieldLabel: label,\n helpSourceLink,\n helpSourceText\n } satisfies ComponentProps<typeof InlineUserAssistance>\n };\n}\n"],"names":["PREVENT_TABBING","isTabbable","InlineSelectSingle","forwardRef","props","ref","data","itemRenderer","itemText","label","onLoadRange","testId","userAssistancePosition","collectionRendererContext","formFieldContext","hasUserAssistance","isEmptyResults","isUserFiltering","labelProps","listContainerProps","selectSingleFieldProps","selectFieldInputProps","userAssistanceProps","ariaDescribedBy","assistiveText","hasBackIcon","hasClearIcon","helpSourceLink","helpSourceText","isLoading","propIsLoading","onBackIconAction","onCommit","propOnCommit","onFilter","placeholder","textAlign","propTextAlign","valueItem","virtualKeyboard","inputRef","useRef","formTextAlign","useFormContext","isDataFetched","isBeforeDataFetch","totalSize","prevDataRef","prevValueItemRef","isInitialRender","selectedKeys","setSelectedKeys","useState","undefined","Set","key","useLoadingIndicatorTimer","displayValue","useDisplayValue","useImperativeHandle","focus","current","blur","UNSAFE_DOM_ACCESS","currentRowKeyRef","currentRowOverride","dropdownRef","isFocused","onCurrentKeyChange","searchText","setCurrentRowOverride","stopFiltering","updateFiltering","userInput","useSelectCommon","baseId","inputProps","useTextField","value","listId","hasValue","translations","useTranslationBundle","liveRegionText","select_noMatchesFound","select_oneMatchFound","sizePrecision","select_sizeMatchesFound","TOTAL_SIZE","select_sizeOrMoreMatchesFound","offset","length","rowKey","isSearchTextEmptyOrUndefined","metadata","useCallback","previousValue","reason","clearValue","isClearValueNeeded","handleItemAction","detail","newKey","context","handleFieldInput","handleFieldKeyDown","event","isControlOrFunctionKey","code","KEYS","UP","DOWN","preventDefault","ENTER","TAB","isPhone","commitMetadata","handleFieldKeyUp","firstFocusableElem","allTabbableElements","handleListKeyDown","handleClearButtonClick","useCollectionRenderer","currentKey","onItemAction","useEffect","list","querySelector","setAttribute","Boolean","children","id","dropdownListRef","onKeyDown","contentVariant","hasInsideLabel","isBackButtonShown","isClearButtonShown","onBackButtonClick","onClearButtonClick","styleVariant","hasEmptyLabel","isAddToListShown","isAdvancedSearchShown","isRequired","onInput","onKeyUp","variant","fieldLabel","useInlineSelectSingle","defaultCollectionRenderer","onPersistCurrentRowKey","onRowAction","selected","currentRowKeyOverride","_jsx","DefaultList","componentName","currentItemVariant","selectionMode","userAssistance","View","minWidth","padding","jsx","InlineUserAssistance","Flex","direction","gap","maxHeight","width","_jsxs","FormFieldContext","Provider","flex","SelectSingleField","Label","SelectSingleFieldInput","Separator","DropdownList","hasBottomGap","hasTopGap","TabbableModeContext","EmptyResults","jsxs"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/compat', 'preact/hooks', './LayerHost-0b288129', 'css!./DragAndDropStyles.styles.css', 'css!./ReorderableItemStyles.styles.css', './ReorderableContext-6d10a1b7', './HiddenAccessible-037ef42d', './List-daac1169', './keys-4755c121', './useReorderableItem-7b4b2c3d', './classNames-08d99695', './UNSAFE_ListView/themes/ListViewStyles.css', './useNavigation-4d87e7e6', './mergeProps-bcfa6a92', './collectionUtils-77dc5fa1', './Menu-1b8fefc5', './MenuItem-85e4ffdc', 'preact', './logger-0f873e29', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-2bb62284', 'css!./IconStyle.styles.css', './SelectMenuGroupContext-67f24a8f', './UNSAFE_Menu/themes/MenuItemStyles.css', './UNSAFE_Separator/themes/SeparatorStyles.css', 'css!./MenuSeparatorStyles.styles.css', 'module', './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css', './menuUtils-8e42385f', 'css!./MenuStyles.styles.css', './useItemAction-3616efde', './useContextMenuGesture-750ef2c6', './LoadMoreCollection-895f1ed5'], (function(e,r,t,o,n,s,i,a,l,c,d,u,m,f,y,I,g,p,C,S,x,R,h,M,b,v,T,E,L,P,O,K,k,_,D,j,w){"use strict";const A=t.memo((function({children:e,dragKey:t,setDragKey:n,onReorder:s,rootRef:i,itemKey:a}){const l=o.useRef(null),c={itemOverlayFront:f.styles.reorderableItemOverlayFront,itemOverlayRear:f.styles.reorderableItemOverlayRear,itemDragger:f.styles.reorderableItemDragger},I=o.useCallback((e=>{e.dataTransfer?.setData("text/listview-items-key",JSON.stringify(a))}),[a]),{rootProps:g,isDragged:p,overlayZoneBeforeProps:C,overlayZoneAfterProps:S}=u.useReorderableItem({isDisabled:!s,dragKey:t,setDragKey:n,onReorder:s,rootRef:i,ref:l,getItem:()=>l?.current?.closest(y.LIST_ITEM_SELECTOR),setTransferData:I,itemStyles:c,itemSelector:y.LIST_ITEM_SELECTOR,isVertical:!0}),x=m.classNames([g?.class,f.styles.reorderableItemDnd]);return r.jsxs("div",{...g,class:x,children:[e,!p&&d.isKeyDefined(t)&&r.jsxs(r.Fragment,{children:[r.jsx("div",{...C}),r.jsx("div",{...S})]})]})}),((e,r)=>!(!e||!r)&&(e.children===r.children&&e.dragKey===r.dragKey)));function F({contextMenuConfig:e,testId:t,contextMenuContext:o,...n}){const s=e.accessibleLabel;let i;if(n.isOpen){if(i=e.itemsRenderer(o),k.isMenuChildrenFalsy(i))return null}else i=null;return r.jsx(p.Menu,{...n,...s&&{"aria-label":s},testId:t,children:i})}const N={mouse:{initialFocus:"menu",placement:"bottom-start",offsetValue:0},keyboard:{initialFocus:"firstItem",placement:"bottom-start",offsetValue:0},touch:{initialFocus:"firstItem",placement:"end",offsetValue:40}},U={isOpen:!1,initialFocus:"menu",placement:"bottom-start",offsetValue:0,anchorRef:{current:null}},V=t.forwardRef((({children:e,...t},n)=>{const{contextMenuConfig:s}=t,i=o.useRef(null),{currentItemOverride:d,updateCurrentItemOverride:m}=(e=>{const r=o.useRef(),t=o.useRef();t.current!==e&&(t.current=e,r.current=e);const n=o.useCallback((e=>{r.current={rowKey:e}}),[]);return{currentItemOverride:r.current,updateCurrentItemOverride:n}})(t.currentItemOverride),f=t.data?t.data.map((e=>({data:e,metadata:{key:t.getRowKey(e)}}))):null,p=t.onLoadMore?t.onLoadMore:()=>{},C=f?{offset:0,data:f,sizePrecision:t.hasMore?"atLeast":"exact",totalSize:f.length}:null;o.useImperativeHandle(n,(()=>({getScrollPosition:()=>i.current?c.getScrollPosition(i.current):{y:0},focus:()=>{i.current&&i.current.focus()}})));const S=null!=t.onReorder,{reorderProps:x,reorderItemProps:R,reorderContext:h,reorderInstructionsId:M,reorderInstructions:b}=(({onReorder:e,rootRef:r,viewportConfig:t})=>{const n=null!=e,[s,i]=o.useState(void 0),{reorderProps:a,reorderContext:l,reorderInstructionsId:c,reorderInstructions:d}=u.useReorderable({onReorder:e,rootRef:r,itemSelector:y.LIST_ITEM_SELECTOR,isDisabled:!n,columns:1}),m=o.useRef(!1);o.useEffect((()=>{if(n&&m.current){const e=r.current,o=g.findElementByKey(e,l.currentItemKey.current,y.LIST_ITEM_SELECTOR);if(o){const r=t?.scrollerRef.current||e;y.scrollToVisible(o,r,0),m.current=!1}}}));const f=o.useMemo((()=>({dragKey:s,setDragKey:i,onReorder:e,rootRef:r})),[s,e,r]);return n?{reorderProps:I.mergeProps({onKeyDown:e=>{n&&("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.metaKey||e.ctrlKey)&&e.shiftKey&&(m.current=!0,a.onKeyDown?.(e))},onDragOver:e=>{void 0!==s&&(m.current=!1,g.dragToScroll(e,void 0!==s,r.current))}}),reorderItemProps:f,reorderContext:l,reorderInstructionsId:c,reorderInstructions:d}:{reorderProps:a,reorderContext:l,reorderInstructionsId:c,reorderInstructions:d}})({onReorder:t.onReorder,rootRef:i,viewportConfig:t.viewportConfig}),{triggerProps:v,menuProps:T,contextMenuContext:E,notifyCurrentKeyChanged:L}=((e,r,t,n)=>{const[s,i]=o.useState(),[a,l]=o.useState(U),c=o.useRef(),{triggerProps:d}=j.useContextMenuGesture((({gesture:r,anchor:o,target:s})=>{let a=o;if("keyboard"===r){a=g.findElementByKey(t.current,c.current,y.LIST_ITEM_SELECTOR)||o;const r=D.findItemContext(c.current,e);i(r)}else{const r=g.keyExtractor(s,y.LIST_ITEM_SELECTOR),t=D.findItemContext(r,e);i(t),n(r)}l({...N[r],anchorRef:{current:a},isOpen:!0})}),{isDisabled:!r}),u=o.useCallback((e=>{"dismissed"!==e.reason&&"itemAction"!==e.reason||t.current?.focus({preventScroll:!0}),l({...U})}),[t]);return{menuProps:{...a,onClose:u},onClose:u,contextMenuContext:s,triggerProps:d,notifyCurrentKeyChanged:e=>{c.current=e.value}}})(C,s,i,m),P=e=>{t.onPersistCurrentItem?.(e),L(e)},O=o.useCallback((t=>r.jsx(A,{...R,itemKey:t.metadata.key,children:e(t)})),[e,R]);if(S&&R)return r.jsxs(r.Fragment,{children:[r.jsxs(a.ReorderableContext.Provider,{value:h,children:[r.jsx(c.List,{...t,"aria-describedby":M,contextMenuTriggerProps:v,reorderProps:x,onLoadRange:p,scrollerRef:i,data:C,currentItemOverride:d,onPersistCurrentItem:P,children:O}),r.jsx("span",{id:M,children:r.jsx(l.HiddenAccessible,{children:b})})]}),s&&r.jsx(F,{...T,testId:t.testId?t.testId+"-menu":void 0,contextMenuConfig:s,contextMenuContext:E})]});return r.jsxs(r.Fragment,{children:[r.jsx(c.List,{...t,loadingIndicator:t.skeletonRenderer?(K=t.skeletonRenderer,r.jsx(c.SkeletonContainer,{minimumCount:25,children:e=>K({loadingStatus:"initial",index:e})})):void 0,loadMoreIndicator:t.skeletonRenderer?(e=>r.jsx("div",{class:w.LOADMORE_STYLE_CLASS,children:r.jsx(c.SkeletonContainer,{minimumCount:3,children:r=>e({loadingStatus:"loadMore",index:r})})}))(t.skeletonRenderer):void 0,onLoadRange:p,scrollerRef:i,data:C,contextMenuTriggerProps:v,currentItemOverride:d,onPersistCurrentItem:P,children:e}),s&&r.jsx(F,{...T,contextMenuConfig:s,contextMenuContext:E,testId:t.testId?t.testId+"-menu":void 0})]});var K}));e.ListView=V}));
|
|
2
|
+
//# sourceMappingURL=ListView-2678b2af.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView-6d21e8f9.js","sources":["../../src/UNSAFE_ListView/ListViewReorderableItem.tsx","../../src/UNSAFE_ListView/ListViewContextMenu.tsx","../../src/UNSAFE_ListView/useListViewContextMenu.ts","../../src/UNSAFE_ListView/ListView.tsx","../../src/UNSAFE_ListView/useListViewCurrentItemOverride.tsx","../../src/UNSAFE_ListView/useListViewReorder.ts"],"sourcesContent":["import { memo } from 'preact/compat';\nimport { useRef, useCallback } from 'preact/hooks';\nimport { useReorderableItem } from '../hooks/PRIVATE_useReorderable';\nimport { ReorderableItemProps } from '../UNSAFE_Collection/Reorderable.types';\nimport { LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { styles } from './themes/ListViewStyles.css';\nimport { isKeyDefined } from '../utils/UNSAFE_keys';\n\nexport type ListReorderableItemProps<K> = ReorderableItemProps<K>;\n\n/**\n * A private item that will be used by ReorderableCardFlexView, location TBD (could be moved to PRIVATE_CardFlexView)\n */\nexport function ListViewReorderableItem<K extends string | number>({\n children,\n dragKey,\n setDragKey,\n onReorder,\n rootRef,\n itemKey\n}: ListReorderableItemProps<K> & { itemKey: K }) {\n const itemRef = useRef<HTMLDivElement | null>(null);\n const itemStyles = {\n itemOverlayFront: styles.reorderableItemOverlayFront,\n itemOverlayRear: styles.reorderableItemOverlayRear,\n itemDragger: styles.reorderableItemDragger\n };\n const getItem = () => itemRef?.current?.closest(LIST_ITEM_SELECTOR);\n const setTransferData = useCallback(\n (event: DragEvent) => {\n event.dataTransfer?.setData('text/listview-items-key', JSON.stringify(itemKey));\n },\n [itemKey]\n );\n const { rootProps, isDragged, overlayZoneBeforeProps, overlayZoneAfterProps } =\n useReorderableItem({\n isDisabled: onReorder ? false : true,\n dragKey,\n setDragKey,\n onReorder,\n rootRef,\n ref: itemRef,\n getItem,\n setTransferData,\n itemStyles,\n itemSelector: LIST_ITEM_SELECTOR,\n isVertical: true\n });\n const classes = classNames([rootProps?.class, styles.reorderableItemDnd]);\n\n return (\n <div {...rootProps} class={classes}>\n {children}\n {!isDragged && isKeyDefined(dragKey) && (\n <>\n <div {...overlayZoneBeforeProps}></div>\n <div {...overlayZoneAfterProps}></div>\n </>\n )}\n </div>\n );\n}\n\nexport const MemoizeListViewReorderableItem = memo(\n ListViewReorderableItem,\n <K,>(prev: ListReorderableItemProps<K>, next: ListReorderableItemProps<K>) => {\n if (prev && next) {\n return prev.children === next.children && prev.dragKey === next.dragKey;\n }\n return false;\n }\n);\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps } from 'preact';\n\nimport { ListItemContext } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { ListViewContextMenuConfig } from './List.types';\nimport { isMenuChildrenFalsy } from '#UNSAFE_Menu/menuUtils';\n\nexport type Props<K extends string | number, D> = Omit<ComponentProps<typeof Menu>, 'children'> & {\n contextMenuConfig: ListViewContextMenuConfig<K, D>;\n} & { contextMenuContext: ListItemContext<K, D> } & {\n testId: ComponentProps<typeof Menu>['testId'];\n};\n\n/**\n * The internal component used to render a custom context menu\n */\nexport function ListViewContextMenu<K extends string | number, D>({\n contextMenuConfig,\n testId,\n contextMenuContext,\n ...menuProps\n}: Props<K, D>) {\n const accessibleLabel = contextMenuConfig.accessibleLabel;\n\n let menuItems: ComponentChildren;\n // Important to call items renderer only when isOpen is true so we know there is a contextMenuContext\n if (menuProps.isOpen) {\n menuItems = contextMenuConfig.itemsRenderer(contextMenuContext);\n if (isMenuChildrenFalsy(menuItems)) {\n return null;\n }\n } else {\n menuItems = null;\n }\n\n return (\n <Menu\n {...menuProps}\n {...(accessibleLabel && {\n 'aria-label': accessibleLabel\n })}\n testId={testId}>\n {menuItems}\n </Menu>\n );\n}\n","import type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useState, useRef } from 'preact/hooks';\n\nimport { DataState, ListItemContext, CurrentKeyDetail } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { findItemContext } from '#hooks/PRIVATE_useItemAction';\nimport { useContextMenuGesture } from '#hooks/UNSAFE_useContextMenuGesture';\nimport { findElementByKey, keyExtractor } from '#utils/PRIVATE_collectionUtils';\nimport { ListView } from './ListView';\nimport { LIST_ITEM_SELECTOR } from '#PRIVATE_List';\n\ntype MenuProps = Pick<\n ComponentProps<typeof Menu>,\n 'anchorRef' | 'initialFocus' | 'placement' | 'offsetValue' | 'isOpen'\n>;\n\nconst TOUCH_OFFSET_VALUE = 40;\n\nconst menuPropGestureStates: Record<\n 'mouse' | 'keyboard' | 'touch',\n Omit<Required<MenuProps>, 'anchorRef' | 'isOpen'>\n> = {\n mouse: {\n initialFocus: 'menu',\n placement: 'bottom-start',\n offsetValue: 0\n },\n keyboard: {\n initialFocus: 'firstItem',\n placement: 'bottom-start',\n offsetValue: 0\n },\n touch: {\n initialFocus: 'firstItem',\n placement: 'end',\n offsetValue: TOUCH_OFFSET_VALUE\n }\n};\n\nconst initialMenuProps: MenuProps = {\n isOpen: false,\n initialFocus: 'menu',\n placement: 'bottom-start',\n offsetValue: 0,\n anchorRef: { current: null }\n};\n\ntype ListViewProps<K extends string | number, D> = ComponentProps<typeof ListView<K, D>>;\n\nexport const useListViewContextMenu = <K extends string | number, D>(\n dataState: DataState<K, D> | null,\n contextMenuConfig: ListViewProps<K, D>['contextMenuConfig'],\n scrollListRef: RefObject<HTMLElement | null>,\n updateCurrentKey: (key: K) => void\n) => {\n /*Context Menu section\n TODO: A version of context Menu listview will be merged using useContextMenuGesture instead. Once it's merged we\n can go back to this to create a hook or utility that could be share among all collection comps. JET-60320\n */\n\n /*\n Steps to open a menu:\n 1.- useContextMenu handler is called when menu is supposed to be opened.\n 2.- We set contextMenuContext when contextMenuRenderer is called.\n 3.- We dispatch opening the menu with the correct anchor.\n 5.- Menu receives updated props and updated contextMenuContext.\n 6.- Menu is opened.\n\n */\n\n //Supposed to be updated when menu is about to be opened\n //We set an initial key value for the context menu context, to allow user use object destructuring inside the\n //contextMenuRenderer. It doesn't matter if the key is not correct at the initial rendering since menu starts\n //being closed always\n const [contextMenuContext, setContextMenuContext] = useState<ListItemContext<K, D>>();\n\n const [menuProps, setMenuProps] = useState<MenuProps>(initialMenuProps);\n\n const currentKeyRef = useRef<K>();\n const notifyCurrentKeyChanged = (detail: CurrentKeyDetail<K>) => {\n currentKeyRef.current = detail.value;\n };\n\n const { triggerProps } = useContextMenuGesture(\n ({ gesture, anchor, target }) => {\n let anchorBasedOnGesture = anchor;\n if (gesture === 'keyboard') {\n //We find the element where the position of the menu is going to be based of\n const elem = findElementByKey(\n scrollListRef.current as HTMLElement,\n currentKeyRef.current as K,\n LIST_ITEM_SELECTOR\n );\n\n //We set the correct anchor\n anchorBasedOnGesture = elem ? elem : anchor;\n\n const context = findItemContext(\n currentKeyRef.current as K,\n dataState as DataState<string | number | null, D>\n );\n\n setContextMenuContext(context as ListItemContext<K, D>);\n } else {\n //We search for the key using the target of the event\n const key = keyExtractor(target as HTMLElement, LIST_ITEM_SELECTOR);\n\n const context = findItemContext(key, dataState as DataState<string | number | null, D>);\n\n setContextMenuContext(context as ListItemContext<K, D>);\n\n //We update the key so when we close logical focus is on the correct item\n updateCurrentKey(key as K);\n }\n setMenuProps({\n ...menuPropGestureStates[gesture],\n anchorRef: { current: anchorBasedOnGesture },\n isOpen: true\n });\n },\n {\n isDisabled: !contextMenuConfig //If there is no a context menu renderer we disable the hook\n }\n );\n\n const handleCloseContextMenu = useCallback<Required<ComponentProps<typeof Menu>>['onClose']>(\n (detail) => {\n /*\n TODO: Focus ring should be visible when context menu was closed because of selecting an item using keyboard,\n but should not be visible when the selection was done using mouse or touch. This would probably means menu\n onClose API is going to be changed a little bit so we can satisfy this requirement. JET-62372\n */\n //Focus has to be set on the current target that was obtained\n //during context menu gesture when menu is dismissed or item is \"selected\"\n if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {\n scrollListRef.current?.focus({ preventScroll: true });\n }\n // We close the menu.The only prop that matters here is isOpen\n setMenuProps({ ...initialMenuProps });\n },\n [scrollListRef]\n );\n\n return {\n menuProps: { ...menuProps, onClose: handleCloseContextMenu },\n onClose: handleCloseContextMenu,\n contextMenuContext: contextMenuContext as ListItemContext<K, D>,\n triggerProps,\n notifyCurrentKeyChanged\n } as const;\n};\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, JSX } from 'preact';\nimport { ForwardedRef, forwardRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { ReorderableContext } from '../hooks/PRIVATE_useReorderable';\nimport { DataState, CurrentKeyDetail, ListItemRendererContext } from '../UNSAFE_Collection';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { List, SkeletonContainer } from '../PRIVATE_List';\nimport {\n ListProps,\n ListViewContextMenuConfig,\n ListViewHandle,\n SkeletonRendererContext\n} from './List.types';\nimport { getScrollPosition } from './ScrollPositionUtils';\nimport { MemoizeListViewReorderableItem } from './ListViewReorderableItem';\nimport { useListViewReorder } from './useListViewReorder';\nimport { ListViewContextMenu } from './ListViewContextMenu';\nimport { useListViewContextMenu } from './useListViewContextMenu';\nimport { useListViewCurrentItemOverride } from './useListViewCurrentItemOverride';\nimport { LOADMORE_STYLE_CLASS } from '../PRIVATE_LoadMoreCollection';\n\n/**\n * Props specific to non-virtualized ListView\n */\ntype NonVirtualizedListProps<K, D> = {\n /**\n * The data that is used to render each item in ListView. If the value is null, then ListView will show nothing\n * if hasMore is false, or loading indicator if hasMore is true.\n */\n data: D[] | null;\n /**\n * A callback function to extract the key which is used to identify the item.\n */\n getRowKey: (data: D) => K;\n /**\n * Whether there are more data available to load. By default this returns false.\n */\n hasMore?: boolean;\n /**\n * An optional callback function which is invoked when user scrolls to the end of the list.\n */\n onLoadMore?: () => void;\n\n /**\n * Configuration used to specify a context menu.\n */\n contextMenuConfig?: ListViewContextMenuConfig<K, D>;\n};\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = Pick<\n ListProps<K, D>,\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'children'\n | 'gridlines'\n | 'currentItemOverride'\n | 'onPersistCurrentItem'\n | 'onItemAction'\n | 'onSelectionChange'\n | 'promotedSection'\n | 'selectedKeys'\n | 'selectionMode'\n | 'viewportConfig'\n | 'testId'\n | 'scrollPositionOverride'\n | 'onReorder'\n | 'itemPadding'\n | 'itemEnterKeyFocusBehavior'\n | 'skeletonRenderer'\n> &\n NonVirtualizedListProps<K, D>;\n/**\n * A list view displays data items as a list or a grid with highly interactive features.\n */\nexport const ListView = forwardRef(\n <K extends string | number, D>(\n { children, ...props }: Props<K, D>,\n ref?: ForwardedRef<ListViewHandle<K>>\n ) => {\n const { contextMenuConfig } = props;\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const { currentItemOverride, updateCurrentItemOverride } = useListViewCurrentItemOverride(\n props.currentItemOverride\n );\n\n const dataMetadata = props.data\n ? props.data.map((aData: D) => {\n const key = props.getRowKey(aData);\n return { data: aData, metadata: { key } };\n })\n : null;\n\n const loadRange = props.onLoadMore ? props.onLoadMore : () => {};\n const dataState = dataMetadata\n ? ({\n offset: 0,\n data: dataMetadata,\n sizePrecision: props.hasMore ? 'atLeast' : 'exact',\n totalSize: dataMetadata.length\n } as DataState<K, D>)\n : null;\n\n useImperativeHandle(ref!, () => ({\n getScrollPosition: () => {\n if (listRef.current) {\n return getScrollPosition(listRef.current);\n }\n return { y: 0 };\n },\n focus: () => {\n if (listRef.current) {\n listRef.current.focus();\n }\n }\n }));\n\n /**\n * Reorder Section\n */\n const isReorderEnabled = props.onReorder != undefined;\n const {\n reorderProps,\n reorderItemProps,\n reorderContext,\n reorderInstructionsId,\n reorderInstructions\n } = useListViewReorder({\n onReorder: props.onReorder,\n rootRef: listRef,\n viewportConfig: props.viewportConfig\n });\n\n const { triggerProps, menuProps, contextMenuContext, notifyCurrentKeyChanged } =\n useListViewContextMenu(dataState, contextMenuConfig, listRef, updateCurrentItemOverride);\n\n const onPersistCurrentItem = (detail: CurrentKeyDetail<K>) => {\n props.onPersistCurrentItem?.(detail);\n notifyCurrentKeyChanged(detail);\n };\n\n const reorderableItemRenderer = useCallback(\n (context: ListItemRendererContext<K, D>) => (\n <MemoizeListViewReorderableItem {...reorderItemProps} itemKey={context.metadata.key}>\n {children(context)}\n </MemoizeListViewReorderableItem>\n ),\n [children, reorderItemProps]\n );\n\n if (isReorderEnabled && reorderItemProps) {\n return (\n <>\n <ReorderableContext.Provider value={reorderContext}>\n <List\n {...props}\n aria-describedby={reorderInstructionsId}\n contextMenuTriggerProps={triggerProps}\n reorderProps={reorderProps}\n onLoadRange={loadRange}\n scrollerRef={listRef}\n data={dataState}\n currentItemOverride={currentItemOverride}\n onPersistCurrentItem={onPersistCurrentItem}>\n {reorderableItemRenderer}\n </List>\n <span id={reorderInstructionsId}>\n <HiddenAccessible>{reorderInstructions}</HiddenAccessible>\n </span>\n </ReorderableContext.Provider>\n {contextMenuConfig && (\n <ListViewContextMenu\n {...menuProps}\n testId={props.testId ? props.testId + '-menu' : undefined}\n contextMenuConfig={contextMenuConfig}\n contextMenuContext={contextMenuContext}\n />\n )}\n </>\n );\n }\n\n const customInitialSkeleton = (\n skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n ) => {\n return (\n <SkeletonContainer minimumCount={25}>\n {(index) => {\n const context: SkeletonRendererContext = {\n loadingStatus: 'initial',\n index: index\n };\n return skeletonRenderer(context);\n }}\n </SkeletonContainer>\n );\n };\n\n const customLoadMoreSkeleton = (\n skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n ) => {\n return (\n <div class={LOADMORE_STYLE_CLASS}>\n <SkeletonContainer minimumCount={3}>\n {(index) => {\n const context: SkeletonRendererContext = {\n loadingStatus: 'loadMore',\n index: index\n };\n return skeletonRenderer(context);\n }}\n </SkeletonContainer>\n </div>\n );\n };\n\n return (\n <>\n <List\n {...props}\n loadingIndicator={\n props.skeletonRenderer ? customInitialSkeleton(props.skeletonRenderer) : undefined\n }\n loadMoreIndicator={\n props.skeletonRenderer ? customLoadMoreSkeleton(props.skeletonRenderer) : undefined\n }\n onLoadRange={loadRange}\n scrollerRef={listRef}\n data={dataState}\n contextMenuTriggerProps={triggerProps}\n currentItemOverride={currentItemOverride}\n onPersistCurrentItem={onPersistCurrentItem}>\n {children}\n </List>\n {contextMenuConfig && (\n <ListViewContextMenu\n {...menuProps}\n contextMenuConfig={contextMenuConfig}\n contextMenuContext={contextMenuContext}\n testId={props.testId ? props.testId + '-menu' : undefined}\n />\n )}\n </>\n );\n }\n) as <K extends string | number, D>(\n props: Props<K, D> & { ref?: ForwardedRef<ListViewHandle<K>> }\n) => JSX.Element;\n","import { useCallback, useRef } from 'preact/hooks';\nimport { Item as CurrentItem } from '#UNSAFE_Collection';\nimport { ListProps } from './List.types';\n\n/**\n * This hook handles the currentItemOverride passing to PRIVATE_List layer.\n *\n * If the app provided new value for 'currentItemOverride', we pass that down to PRIVATE_List layer;\n * otherwise, we will pass down the value of internal override, which would be the value\n * updated by useListViewContextMenu hook\n *\n * @param currentItemOverride\n */\nexport const useListViewCurrentItemOverride = <K extends string | number, D>(\n currentItemOverride: ListProps<K, D>['currentItemOverride']\n) => {\n // the override that will be passed down to PRIVATE_List layer\n const listOverrideRef = useRef<CurrentItem<K>>();\n\n // track the currentItemOverride attribute set by app\n const appOverrideRef = useRef<CurrentItem<K>>();\n if (appOverrideRef.current !== currentItemOverride) {\n appOverrideRef.current = currentItemOverride;\n listOverrideRef.current = currentItemOverride;\n }\n\n // track the internal override updated by useListViewContextMenu hook\n // we can just update ref here since the hook will trigger a state update for its context, which will trigger a rerender\n const updateCurrentItemOverride = useCallback((key: K) => {\n listOverrideRef.current = { rowKey: key };\n }, []);\n\n return {\n currentItemOverride: listOverrideRef.current,\n updateCurrentItemOverride\n };\n};\n","import type { RefObject } from 'preact';\nimport { useMemo, useState, useEffect, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { dragToScroll, findElementByKey } from '../utils/PRIVATE_collectionUtils';\nimport { ViewportConfig } from '../hooks/UNSAFE_useViewportIntersect';\nimport { useReorderable } from '../hooks/PRIVATE_useReorderable';\nimport { scrollToVisible, LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { ListProps } from './List.types';\n\ntype useListViewReorderProps<K, D> = Pick<ListProps<K, D>, 'onReorder'> & {\n rootRef: RefObject<HTMLDivElement>;\n viewportConfig?: ViewportConfig;\n};\n\nexport const useListViewReorder = <K extends string | number, D>({\n onReorder,\n rootRef,\n viewportConfig\n}: useListViewReorderProps<K, D>) => {\n const isReorderEnabled = onReorder != undefined;\n\n const [dragKey, setDragKey] = useState<K | undefined>(undefined);\n const { reorderProps, reorderContext, reorderInstructionsId, reorderInstructions } =\n useReorderable({\n onReorder,\n rootRef,\n itemSelector: LIST_ITEM_SELECTOR,\n isDisabled: !isReorderEnabled,\n columns: 1\n });\n\n // ensure the current item is scrolled into view during keyboard reordering,\n // disable that during mouse reordering\n const reorderScrollIntoView = useRef(false);\n useEffect(() => {\n if (isReorderEnabled && reorderScrollIntoView.current) {\n const rootElement = rootRef.current as HTMLElement;\n const elem = findElementByKey(\n rootElement,\n reorderContext.currentItemKey.current as K,\n LIST_ITEM_SELECTOR\n );\n if (elem) {\n const scroller = viewportConfig?.scrollerRef.current || rootElement;\n // make sure item is visible\n scrollToVisible(elem, scroller, 0);\n reorderScrollIntoView.current = false;\n }\n }\n });\n\n const reorderItemProps = useMemo(() => {\n return { dragKey, setDragKey, onReorder, rootRef };\n }, [dragKey, onReorder, rootRef]);\n\n if (!isReorderEnabled) {\n return {\n reorderProps,\n reorderContext,\n reorderInstructionsId,\n reorderInstructions\n } as const;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // listview only do keyboard reordering with arrow up/down keys\n if (\n isReorderEnabled &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n (event.metaKey || event.ctrlKey) &&\n event.shiftKey\n ) {\n reorderScrollIntoView.current = true;\n reorderProps.onKeyDown?.(event);\n }\n };\n\n const handleDragOver = (event: DragEvent) => {\n if (dragKey !== undefined) {\n reorderScrollIntoView.current = false;\n dragToScroll(event, dragKey !== undefined, rootRef.current);\n }\n };\n\n const reorderEventProps = mergeProps({ onKeyDown: handleKeyDown, onDragOver: handleDragOver });\n\n return {\n reorderProps: reorderEventProps,\n reorderItemProps,\n reorderContext,\n reorderInstructionsId,\n reorderInstructions\n } as const;\n};\n"],"names":["MemoizeListViewReorderableItem","memo","children","dragKey","setDragKey","onReorder","rootRef","itemKey","itemRef","useRef","itemStyles","itemOverlayFront","styles","reorderableItemOverlayFront","itemOverlayRear","reorderableItemOverlayRear","itemDragger","reorderableItemDragger","setTransferData","useCallback","event","dataTransfer","setData","JSON","stringify","rootProps","isDragged","overlayZoneBeforeProps","overlayZoneAfterProps","useReorderableItem","isDisabled","ref","getItem","current","closest","LIST_ITEM_SELECTOR","itemSelector","isVertical","classes","classNames","class","reorderableItemDnd","_jsxs","isKeyDefined","jsxs","_Fragment","Fragment","_jsx","jsx","prev","next","ListViewContextMenu","contextMenuConfig","testId","contextMenuContext","menuProps","accessibleLabel","menuItems","isOpen","itemsRenderer","isMenuChildrenFalsy","Menu","menuPropGestureStates","mouse","initialFocus","placement","offsetValue","keyboard","touch","initialMenuProps","anchorRef","ListView","forwardRef","props","listRef","currentItemOverride","updateCurrentItemOverride","listOverrideRef","appOverrideRef","key","rowKey","useListViewCurrentItemOverride","dataMetadata","data","map","aData","metadata","getRowKey","loadRange","onLoadMore","dataState","offset","sizePrecision","hasMore","totalSize","length","useImperativeHandle","getScrollPosition","y","focus","isReorderEnabled","undefined","reorderProps","reorderItemProps","reorderContext","reorderInstructionsId","reorderInstructions","viewportConfig","useState","useReorderable","columns","reorderScrollIntoView","useEffect","rootElement","elem","findElementByKey","currentItemKey","scroller","scrollerRef","scrollToVisible","useMemo","mergeProps","onKeyDown","metaKey","ctrlKey","shiftKey","onDragOver","dragToScroll","useListViewReorder","triggerProps","notifyCurrentKeyChanged","scrollListRef","updateCurrentKey","setContextMenuContext","setMenuProps","currentKeyRef","useContextMenuGesture","gesture","anchor","target","anchorBasedOnGesture","context","findItemContext","keyExtractor","handleCloseContextMenu","detail","reason","preventScroll","onClose","value","useListViewContextMenu","onPersistCurrentItem","reorderableItemRenderer","ReorderableContext","Provider","List","contextMenuTriggerProps","onLoadRange","id","HiddenAccessible","loadingIndicator","skeletonRenderer","SkeletonContainer","minimumCount","index","loadingStatus","loadMoreIndicator","LOADMORE_STYLE_CLASS","customLoadMoreSkeleton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListView-2678b2af.js","sources":["../../src/UNSAFE_ListView/ListViewReorderableItem.tsx","../../src/UNSAFE_ListView/ListViewContextMenu.tsx","../../src/UNSAFE_ListView/useListViewContextMenu.ts","../../src/UNSAFE_ListView/ListView.tsx","../../src/UNSAFE_ListView/useListViewCurrentItemOverride.tsx","../../src/UNSAFE_ListView/useListViewReorder.ts"],"sourcesContent":["import { memo } from 'preact/compat';\nimport { useRef, useCallback } from 'preact/hooks';\nimport { useReorderableItem } from '../hooks/PRIVATE_useReorderable';\nimport { ReorderableItemProps } from '../UNSAFE_Collection/Reorderable.types';\nimport { LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { styles } from './themes/ListViewStyles.css';\nimport { isKeyDefined } from '../utils/UNSAFE_keys';\n\nexport type ListReorderableItemProps<K> = ReorderableItemProps<K>;\n\n/**\n * A private item that will be used by ReorderableCardFlexView, location TBD (could be moved to PRIVATE_CardFlexView)\n */\nexport function ListViewReorderableItem<K extends string | number>({\n children,\n dragKey,\n setDragKey,\n onReorder,\n rootRef,\n itemKey\n}: ListReorderableItemProps<K> & { itemKey: K }) {\n const itemRef = useRef<HTMLDivElement | null>(null);\n const itemStyles = {\n itemOverlayFront: styles.reorderableItemOverlayFront,\n itemOverlayRear: styles.reorderableItemOverlayRear,\n itemDragger: styles.reorderableItemDragger\n };\n const getItem = () => itemRef?.current?.closest(LIST_ITEM_SELECTOR);\n const setTransferData = useCallback(\n (event: DragEvent) => {\n event.dataTransfer?.setData('text/listview-items-key', JSON.stringify(itemKey));\n },\n [itemKey]\n );\n const { rootProps, isDragged, overlayZoneBeforeProps, overlayZoneAfterProps } =\n useReorderableItem({\n isDisabled: onReorder ? false : true,\n dragKey,\n setDragKey,\n onReorder,\n rootRef,\n ref: itemRef,\n getItem,\n setTransferData,\n itemStyles,\n itemSelector: LIST_ITEM_SELECTOR,\n isVertical: true\n });\n const classes = classNames([rootProps?.class, styles.reorderableItemDnd]);\n\n return (\n <div {...rootProps} class={classes}>\n {children}\n {!isDragged && isKeyDefined(dragKey) && (\n <>\n <div {...overlayZoneBeforeProps}></div>\n <div {...overlayZoneAfterProps}></div>\n </>\n )}\n </div>\n );\n}\n\nexport const MemoizeListViewReorderableItem = memo(\n ListViewReorderableItem,\n <K,>(prev: ListReorderableItemProps<K>, next: ListReorderableItemProps<K>) => {\n if (prev && next) {\n return prev.children === next.children && prev.dragKey === next.dragKey;\n }\n return false;\n }\n);\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, ComponentProps } from 'preact';\n\nimport { ListItemContext } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { ListViewContextMenuConfig } from './List.types';\nimport { isMenuChildrenFalsy } from '#UNSAFE_Menu/menuUtils';\n\nexport type Props<K extends string | number, D> = Omit<ComponentProps<typeof Menu>, 'children'> & {\n contextMenuConfig: ListViewContextMenuConfig<K, D>;\n} & { contextMenuContext: ListItemContext<K, D> } & {\n testId: ComponentProps<typeof Menu>['testId'];\n};\n\n/**\n * The internal component used to render a custom context menu\n */\nexport function ListViewContextMenu<K extends string | number, D>({\n contextMenuConfig,\n testId,\n contextMenuContext,\n ...menuProps\n}: Props<K, D>) {\n const accessibleLabel = contextMenuConfig.accessibleLabel;\n\n let menuItems: ComponentChildren;\n // Important to call items renderer only when isOpen is true so we know there is a contextMenuContext\n if (menuProps.isOpen) {\n menuItems = contextMenuConfig.itemsRenderer(contextMenuContext);\n if (isMenuChildrenFalsy(menuItems)) {\n return null;\n }\n } else {\n menuItems = null;\n }\n\n return (\n <Menu\n {...menuProps}\n {...(accessibleLabel && {\n 'aria-label': accessibleLabel\n })}\n testId={testId}>\n {menuItems}\n </Menu>\n );\n}\n","import type { ComponentProps, RefObject } from 'preact';\nimport { useCallback, useState, useRef } from 'preact/hooks';\n\nimport { DataState, ListItemContext, CurrentKeyDetail } from '#UNSAFE_Collection';\nimport { Menu } from '#UNSAFE_Menu';\nimport { findItemContext } from '#hooks/PRIVATE_useItemAction';\nimport { useContextMenuGesture } from '#hooks/UNSAFE_useContextMenuGesture';\nimport { findElementByKey, keyExtractor } from '#utils/PRIVATE_collectionUtils';\nimport { ListView } from './ListView';\nimport { LIST_ITEM_SELECTOR } from '#PRIVATE_List';\n\ntype MenuProps = Pick<\n ComponentProps<typeof Menu>,\n 'anchorRef' | 'initialFocus' | 'placement' | 'offsetValue' | 'isOpen'\n>;\n\nconst TOUCH_OFFSET_VALUE = 40;\n\nconst menuPropGestureStates: Record<\n 'mouse' | 'keyboard' | 'touch',\n Omit<Required<MenuProps>, 'anchorRef' | 'isOpen'>\n> = {\n mouse: {\n initialFocus: 'menu',\n placement: 'bottom-start',\n offsetValue: 0\n },\n keyboard: {\n initialFocus: 'firstItem',\n placement: 'bottom-start',\n offsetValue: 0\n },\n touch: {\n initialFocus: 'firstItem',\n placement: 'end',\n offsetValue: TOUCH_OFFSET_VALUE\n }\n};\n\nconst initialMenuProps: MenuProps = {\n isOpen: false,\n initialFocus: 'menu',\n placement: 'bottom-start',\n offsetValue: 0,\n anchorRef: { current: null }\n};\n\ntype ListViewProps<K extends string | number, D> = ComponentProps<typeof ListView<K, D>>;\n\nexport const useListViewContextMenu = <K extends string | number, D>(\n dataState: DataState<K, D> | null,\n contextMenuConfig: ListViewProps<K, D>['contextMenuConfig'],\n scrollListRef: RefObject<HTMLElement | null>,\n updateCurrentKey: (key: K) => void\n) => {\n /*Context Menu section\n TODO: A version of context Menu listview will be merged using useContextMenuGesture instead. Once it's merged we\n can go back to this to create a hook or utility that could be share among all collection comps. JET-60320\n */\n\n /*\n Steps to open a menu:\n 1.- useContextMenu handler is called when menu is supposed to be opened.\n 2.- We set contextMenuContext when contextMenuRenderer is called.\n 3.- We dispatch opening the menu with the correct anchor.\n 5.- Menu receives updated props and updated contextMenuContext.\n 6.- Menu is opened.\n\n */\n\n //Supposed to be updated when menu is about to be opened\n //We set an initial key value for the context menu context, to allow user use object destructuring inside the\n //contextMenuRenderer. It doesn't matter if the key is not correct at the initial rendering since menu starts\n //being closed always\n const [contextMenuContext, setContextMenuContext] = useState<ListItemContext<K, D>>();\n\n const [menuProps, setMenuProps] = useState<MenuProps>(initialMenuProps);\n\n const currentKeyRef = useRef<K>();\n const notifyCurrentKeyChanged = (detail: CurrentKeyDetail<K>) => {\n currentKeyRef.current = detail.value;\n };\n\n const { triggerProps } = useContextMenuGesture(\n ({ gesture, anchor, target }) => {\n let anchorBasedOnGesture = anchor;\n if (gesture === 'keyboard') {\n //We find the element where the position of the menu is going to be based of\n const elem = findElementByKey(\n scrollListRef.current as HTMLElement,\n currentKeyRef.current as K,\n LIST_ITEM_SELECTOR\n );\n\n //We set the correct anchor\n anchorBasedOnGesture = elem ? elem : anchor;\n\n const context = findItemContext(\n currentKeyRef.current as K,\n dataState as DataState<string | number | null, D>\n );\n\n setContextMenuContext(context as ListItemContext<K, D>);\n } else {\n //We search for the key using the target of the event\n const key = keyExtractor(target as HTMLElement, LIST_ITEM_SELECTOR);\n\n const context = findItemContext(key, dataState as DataState<string | number | null, D>);\n\n setContextMenuContext(context as ListItemContext<K, D>);\n\n //We update the key so when we close logical focus is on the correct item\n updateCurrentKey(key as K);\n }\n setMenuProps({\n ...menuPropGestureStates[gesture],\n anchorRef: { current: anchorBasedOnGesture },\n isOpen: true\n });\n },\n {\n isDisabled: !contextMenuConfig //If there is no a context menu renderer we disable the hook\n }\n );\n\n const handleCloseContextMenu = useCallback<Required<ComponentProps<typeof Menu>>['onClose']>(\n (detail) => {\n /*\n TODO: Focus ring should be visible when context menu was closed because of selecting an item using keyboard,\n but should not be visible when the selection was done using mouse or touch. This would probably means menu\n onClose API is going to be changed a little bit so we can satisfy this requirement. JET-62372\n */\n //Focus has to be set on the current target that was obtained\n //during context menu gesture when menu is dismissed or item is \"selected\"\n if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {\n scrollListRef.current?.focus({ preventScroll: true });\n }\n // We close the menu.The only prop that matters here is isOpen\n setMenuProps({ ...initialMenuProps });\n },\n [scrollListRef]\n );\n\n return {\n menuProps: { ...menuProps, onClose: handleCloseContextMenu },\n onClose: handleCloseContextMenu,\n contextMenuContext: contextMenuContext as ListItemContext<K, D>,\n triggerProps,\n notifyCurrentKeyChanged\n } as const;\n};\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, JSX } from 'preact';\nimport { ForwardedRef, forwardRef } from 'preact/compat';\nimport { useCallback, useImperativeHandle, useRef } from 'preact/hooks';\nimport { ReorderableContext } from '../hooks/PRIVATE_useReorderable';\nimport { DataState, CurrentKeyDetail, ListItemRendererContext } from '../UNSAFE_Collection';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { List, SkeletonContainer } from '../PRIVATE_List';\nimport {\n ListProps,\n ListViewContextMenuConfig,\n ListViewHandle,\n SkeletonRendererContext\n} from './List.types';\nimport { getScrollPosition } from './ScrollPositionUtils';\nimport { MemoizeListViewReorderableItem } from './ListViewReorderableItem';\nimport { useListViewReorder } from './useListViewReorder';\nimport { ListViewContextMenu } from './ListViewContextMenu';\nimport { useListViewContextMenu } from './useListViewContextMenu';\nimport { useListViewCurrentItemOverride } from './useListViewCurrentItemOverride';\nimport { LOADMORE_STYLE_CLASS } from '../PRIVATE_LoadMoreCollection';\n\n/**\n * Props specific to non-virtualized ListView\n */\ntype NonVirtualizedListProps<K, D> = {\n /**\n * The data that is used to render each item in ListView. If the value is null, then ListView will show nothing\n * if hasMore is false, or loading indicator if hasMore is true.\n */\n data: D[] | null;\n /**\n * A callback function to extract the key which is used to identify the item.\n */\n getRowKey: (data: D) => K;\n /**\n * Whether there are more data available to load. By default this returns false.\n */\n hasMore?: boolean;\n /**\n * An optional callback function which is invoked when user scrolls to the end of the list.\n */\n onLoadMore?: () => void;\n\n /**\n * Configuration used to specify a context menu.\n */\n contextMenuConfig?: ListViewContextMenuConfig<K, D>;\n};\n\n/**\n * Props for the ListView Component\n */\nexport type Props<K, D> = Pick<\n ListProps<K, D>,\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'children'\n | 'gridlines'\n | 'currentItemOverride'\n | 'onPersistCurrentItem'\n | 'onItemAction'\n | 'onSelectionChange'\n | 'promotedSection'\n | 'selectedKeys'\n | 'selectionMode'\n | 'viewportConfig'\n | 'testId'\n | 'scrollPositionOverride'\n | 'onReorder'\n | 'itemPadding'\n | 'itemEnterKeyFocusBehavior'\n | 'skeletonRenderer'\n> &\n NonVirtualizedListProps<K, D>;\n/**\n * A list view displays data items as a list or a grid with highly interactive features.\n */\nexport const ListView = forwardRef(\n <K extends string | number, D>(\n { children, ...props }: Props<K, D>,\n ref?: ForwardedRef<ListViewHandle<K>>\n ) => {\n const { contextMenuConfig } = props;\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const { currentItemOverride, updateCurrentItemOverride } = useListViewCurrentItemOverride(\n props.currentItemOverride\n );\n\n const dataMetadata = props.data\n ? props.data.map((aData: D) => {\n const key = props.getRowKey(aData);\n return { data: aData, metadata: { key } };\n })\n : null;\n\n const loadRange = props.onLoadMore ? props.onLoadMore : () => {};\n const dataState = dataMetadata\n ? ({\n offset: 0,\n data: dataMetadata,\n sizePrecision: props.hasMore ? 'atLeast' : 'exact',\n totalSize: dataMetadata.length\n } as DataState<K, D>)\n : null;\n\n useImperativeHandle(ref!, () => ({\n getScrollPosition: () => {\n if (listRef.current) {\n return getScrollPosition(listRef.current);\n }\n return { y: 0 };\n },\n focus: () => {\n if (listRef.current) {\n listRef.current.focus();\n }\n }\n }));\n\n /**\n * Reorder Section\n */\n const isReorderEnabled = props.onReorder != undefined;\n const {\n reorderProps,\n reorderItemProps,\n reorderContext,\n reorderInstructionsId,\n reorderInstructions\n } = useListViewReorder({\n onReorder: props.onReorder,\n rootRef: listRef,\n viewportConfig: props.viewportConfig\n });\n\n const { triggerProps, menuProps, contextMenuContext, notifyCurrentKeyChanged } =\n useListViewContextMenu(dataState, contextMenuConfig, listRef, updateCurrentItemOverride);\n\n const onPersistCurrentItem = (detail: CurrentKeyDetail<K>) => {\n props.onPersistCurrentItem?.(detail);\n notifyCurrentKeyChanged(detail);\n };\n\n const reorderableItemRenderer = useCallback(\n (context: ListItemRendererContext<K, D>) => (\n <MemoizeListViewReorderableItem {...reorderItemProps} itemKey={context.metadata.key}>\n {children(context)}\n </MemoizeListViewReorderableItem>\n ),\n [children, reorderItemProps]\n );\n\n if (isReorderEnabled && reorderItemProps) {\n return (\n <>\n <ReorderableContext.Provider value={reorderContext}>\n <List\n {...props}\n aria-describedby={reorderInstructionsId}\n contextMenuTriggerProps={triggerProps}\n reorderProps={reorderProps}\n onLoadRange={loadRange}\n scrollerRef={listRef}\n data={dataState}\n currentItemOverride={currentItemOverride}\n onPersistCurrentItem={onPersistCurrentItem}>\n {reorderableItemRenderer}\n </List>\n <span id={reorderInstructionsId}>\n <HiddenAccessible>{reorderInstructions}</HiddenAccessible>\n </span>\n </ReorderableContext.Provider>\n {contextMenuConfig && (\n <ListViewContextMenu\n {...menuProps}\n testId={props.testId ? props.testId + '-menu' : undefined}\n contextMenuConfig={contextMenuConfig}\n contextMenuContext={contextMenuContext}\n />\n )}\n </>\n );\n }\n\n const customInitialSkeleton = (\n skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n ) => {\n return (\n <SkeletonContainer minimumCount={25}>\n {(index) => {\n const context: SkeletonRendererContext = {\n loadingStatus: 'initial',\n index: index\n };\n return skeletonRenderer(context);\n }}\n </SkeletonContainer>\n );\n };\n\n const customLoadMoreSkeleton = (\n skeletonRenderer: (context: SkeletonRendererContext) => ComponentChildren\n ) => {\n return (\n <div class={LOADMORE_STYLE_CLASS}>\n <SkeletonContainer minimumCount={3}>\n {(index) => {\n const context: SkeletonRendererContext = {\n loadingStatus: 'loadMore',\n index: index\n };\n return skeletonRenderer(context);\n }}\n </SkeletonContainer>\n </div>\n );\n };\n\n return (\n <>\n <List\n {...props}\n loadingIndicator={\n props.skeletonRenderer ? customInitialSkeleton(props.skeletonRenderer) : undefined\n }\n loadMoreIndicator={\n props.skeletonRenderer ? customLoadMoreSkeleton(props.skeletonRenderer) : undefined\n }\n onLoadRange={loadRange}\n scrollerRef={listRef}\n data={dataState}\n contextMenuTriggerProps={triggerProps}\n currentItemOverride={currentItemOverride}\n onPersistCurrentItem={onPersistCurrentItem}>\n {children}\n </List>\n {contextMenuConfig && (\n <ListViewContextMenu\n {...menuProps}\n contextMenuConfig={contextMenuConfig}\n contextMenuContext={contextMenuContext}\n testId={props.testId ? props.testId + '-menu' : undefined}\n />\n )}\n </>\n );\n }\n) as <K extends string | number, D>(\n props: Props<K, D> & { ref?: ForwardedRef<ListViewHandle<K>> }\n) => JSX.Element;\n","import { useCallback, useRef } from 'preact/hooks';\nimport { Item as CurrentItem } from '#UNSAFE_Collection';\nimport { ListProps } from './List.types';\n\n/**\n * This hook handles the currentItemOverride passing to PRIVATE_List layer.\n *\n * If the app provided new value for 'currentItemOverride', we pass that down to PRIVATE_List layer;\n * otherwise, we will pass down the value of internal override, which would be the value\n * updated by useListViewContextMenu hook\n *\n * @param currentItemOverride\n */\nexport const useListViewCurrentItemOverride = <K extends string | number, D>(\n currentItemOverride: ListProps<K, D>['currentItemOverride']\n) => {\n // the override that will be passed down to PRIVATE_List layer\n const listOverrideRef = useRef<CurrentItem<K>>();\n\n // track the currentItemOverride attribute set by app\n const appOverrideRef = useRef<CurrentItem<K>>();\n if (appOverrideRef.current !== currentItemOverride) {\n appOverrideRef.current = currentItemOverride;\n listOverrideRef.current = currentItemOverride;\n }\n\n // track the internal override updated by useListViewContextMenu hook\n // we can just update ref here since the hook will trigger a state update for its context, which will trigger a rerender\n const updateCurrentItemOverride = useCallback((key: K) => {\n listOverrideRef.current = { rowKey: key };\n }, []);\n\n return {\n currentItemOverride: listOverrideRef.current,\n updateCurrentItemOverride\n };\n};\n","import type { RefObject } from 'preact';\nimport { useMemo, useState, useEffect, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { dragToScroll, findElementByKey } from '../utils/PRIVATE_collectionUtils';\nimport { ViewportConfig } from '../hooks/UNSAFE_useViewportIntersect';\nimport { useReorderable } from '../hooks/PRIVATE_useReorderable';\nimport { scrollToVisible, LIST_ITEM_SELECTOR } from '../PRIVATE_List';\nimport { ListProps } from './List.types';\n\ntype useListViewReorderProps<K, D> = Pick<ListProps<K, D>, 'onReorder'> & {\n rootRef: RefObject<HTMLDivElement>;\n viewportConfig?: ViewportConfig;\n};\n\nexport const useListViewReorder = <K extends string | number, D>({\n onReorder,\n rootRef,\n viewportConfig\n}: useListViewReorderProps<K, D>) => {\n const isReorderEnabled = onReorder != undefined;\n\n const [dragKey, setDragKey] = useState<K | undefined>(undefined);\n const { reorderProps, reorderContext, reorderInstructionsId, reorderInstructions } =\n useReorderable({\n onReorder,\n rootRef,\n itemSelector: LIST_ITEM_SELECTOR,\n isDisabled: !isReorderEnabled,\n columns: 1\n });\n\n // ensure the current item is scrolled into view during keyboard reordering,\n // disable that during mouse reordering\n const reorderScrollIntoView = useRef(false);\n useEffect(() => {\n if (isReorderEnabled && reorderScrollIntoView.current) {\n const rootElement = rootRef.current as HTMLElement;\n const elem = findElementByKey(\n rootElement,\n reorderContext.currentItemKey.current as K,\n LIST_ITEM_SELECTOR\n );\n if (elem) {\n const scroller = viewportConfig?.scrollerRef.current || rootElement;\n // make sure item is visible\n scrollToVisible(elem, scroller, 0);\n reorderScrollIntoView.current = false;\n }\n }\n });\n\n const reorderItemProps = useMemo(() => {\n return { dragKey, setDragKey, onReorder, rootRef };\n }, [dragKey, onReorder, rootRef]);\n\n if (!isReorderEnabled) {\n return {\n reorderProps,\n reorderContext,\n reorderInstructionsId,\n reorderInstructions\n } as const;\n }\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // listview only do keyboard reordering with arrow up/down keys\n if (\n isReorderEnabled &&\n (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n (event.metaKey || event.ctrlKey) &&\n event.shiftKey\n ) {\n reorderScrollIntoView.current = true;\n reorderProps.onKeyDown?.(event);\n }\n };\n\n const handleDragOver = (event: DragEvent) => {\n if (dragKey !== undefined) {\n reorderScrollIntoView.current = false;\n dragToScroll(event, dragKey !== undefined, rootRef.current);\n }\n };\n\n const reorderEventProps = mergeProps({ onKeyDown: handleKeyDown, onDragOver: handleDragOver });\n\n return {\n reorderProps: reorderEventProps,\n reorderItemProps,\n reorderContext,\n reorderInstructionsId,\n reorderInstructions\n } as const;\n};\n"],"names":["MemoizeListViewReorderableItem","memo","children","dragKey","setDragKey","onReorder","rootRef","itemKey","itemRef","useRef","itemStyles","itemOverlayFront","styles","reorderableItemOverlayFront","itemOverlayRear","reorderableItemOverlayRear","itemDragger","reorderableItemDragger","setTransferData","useCallback","event","dataTransfer","setData","JSON","stringify","rootProps","isDragged","overlayZoneBeforeProps","overlayZoneAfterProps","useReorderableItem","isDisabled","ref","getItem","current","closest","LIST_ITEM_SELECTOR","itemSelector","isVertical","classes","classNames","class","reorderableItemDnd","_jsxs","isKeyDefined","jsxs","_Fragment","Fragment","_jsx","jsx","prev","next","ListViewContextMenu","contextMenuConfig","testId","contextMenuContext","menuProps","accessibleLabel","menuItems","isOpen","itemsRenderer","isMenuChildrenFalsy","Menu","menuPropGestureStates","mouse","initialFocus","placement","offsetValue","keyboard","touch","initialMenuProps","anchorRef","ListView","forwardRef","props","listRef","currentItemOverride","updateCurrentItemOverride","listOverrideRef","appOverrideRef","key","rowKey","useListViewCurrentItemOverride","dataMetadata","data","map","aData","metadata","getRowKey","loadRange","onLoadMore","dataState","offset","sizePrecision","hasMore","totalSize","length","useImperativeHandle","getScrollPosition","y","focus","isReorderEnabled","undefined","reorderProps","reorderItemProps","reorderContext","reorderInstructionsId","reorderInstructions","viewportConfig","useState","useReorderable","columns","reorderScrollIntoView","useEffect","rootElement","elem","findElementByKey","currentItemKey","scroller","scrollerRef","scrollToVisible","useMemo","mergeProps","onKeyDown","metaKey","ctrlKey","shiftKey","onDragOver","dragToScroll","useListViewReorder","triggerProps","notifyCurrentKeyChanged","scrollListRef","updateCurrentKey","setContextMenuContext","setMenuProps","currentKeyRef","useContextMenuGesture","gesture","anchor","target","anchorBasedOnGesture","context","findItemContext","keyExtractor","handleCloseContextMenu","detail","reason","preventScroll","onClose","value","useListViewContextMenu","onPersistCurrentItem","reorderableItemRenderer","ReorderableContext","Provider","List","contextMenuTriggerProps","onLoadRange","id","HiddenAccessible","loadingIndicator","skeletonRenderer","SkeletonContainer","minimumCount","index","loadingStatus","loadMoreIndicator","LOADMORE_STYLE_CLASS","customLoadMoreSkeleton"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/hooks', './mergeProps-bcfa6a92', './classNames-08d99695', './clientUtils-f1eea2db', './useId-c9578d26', './UNSAFE_NavigationList/themes/NavigationListStyles.css', './collectionUtils-77dc5fa1', './useCollectionFocusRing-ae19cd81', './useCurrentKey-5749e7fb', './useContextMenuGesture-750ef2c6', './useTranslationBundle-e4dd341e', './TabBarContextMenu-6a167e27', 'preact/compat', './useTestId-f4240cbd', './HiddenAccessible-037ef42d', './LiveRegion-dbefb95b', './UNSAFE_Text/themes/TextStyles.css', './useNavigationListItem-582f5564', './Flex-4b81b412', './logger-0f873e29', 'css!./BadgeStyles.styles.css', 'module', './UNSAFE_Badge/themes/redwood/BadgeVariants.css', 'preact', './LayerHost-0b288129', 'css!./TooltipContentStyles.styles.css', 'module', './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css', './tooltipUtils-2bb62284', 'css!./IconStyle.styles.css', './UNSAFE_NavigationList/themes/NavigationListItemStyles.css', 'module', './UNSAFE_NavigationList/themes/redwood/NavigationListItemVariants.css', './BaseButton-5a0ad529', './ButtonLabelLayout-6464870c'], (function(e,t,n,o,s,r,i,a,c,l,u,d,m,f,y,g,b,v,x,h,p,C,S,K,R,N,I,F,k,E,L,M,w,A,B,T,U){"use strict";const _='[role="tab"]',D="[data-oj-navigationlist-item-remove-icon]",j={mouse:{initialFocus:"menu",placement:"bottom-start",offsetValue:0},keyboard:{initialFocus:"firstItem",placement:"bottom-start",offsetValue:0},touch:{initialFocus:"menu",placement:"end",offsetValue:40}},P={isOpen:!1,initialFocus:"menu",placement:"bottom-start",offsetValue:0,anchorRef:{current:null}};const V=(e,t,n)=>{const o=c.findElementByKey(t,e,_);if(o){return o.querySelector(n)}},H=(e,t)=>{const n=c.findElementByKey(t,e,_);if(n)return n.innerText},O=(e,t,n)=>{const o=e.closest(t),s=e.closest(n);return o?.contains(s)?null:c.keyExtractor(e,t)},q=(e,t,n)=>{const o=n.indexOf(e);if(o>0){const e=n[o===n.length-1?o-1:o+1];if(-1!==t.indexOf(e))return e}return t[0]},G=y.forwardRef((({children:e,selection:x,edge:p="start",onSelectionChange:C,onRemove:S,"aria-label":K,"aria-labelledby":R,testId:N,display:I="standard"},F)=>{const k=n.useRef(null),E=r.isMobile(),L=n.useMemo((()=>E?{itemsRenderer:e=>{if(e){if(null!=V(e.itemKey,k.current,D)){const n=e.defaultMenuItems;return t.jsx(t.Fragment,{children:n})}}return null}}:void 0),[E]),{showFocusRing:M,currentKey:w,onCurrentKeyChange:A,containerHandlers:B,onKeyDown:T,contextMenuContext:U,menuProps:G,contextMenuDescription:$,contextMenuDescriptionId:z,accStatusInfo:J}=function({containerRef:e,selection:t,onRemove:s,onSelectionChange:r,children:i,contextMenuConfig:a}){const y=m.useTranslationBundle("@oracle/oraclejet-preact"),[g,b]=n.useState(t),v=n.useCallback((e=>{b(e.value)}),[]),{currentKeyProps:x}=u.useCurrentKey((e=>s?O(e,_,D):c.keyExtractor(e,_)),!1,!1,c.getPrevNextKeyUsingRef(e,g,!0,_),c.getPrevNextKeyUsingRef(e,g,!1,_),void 0,void 0,g,v),[h,p]=l.useCollectionFocusRing(e,["Home","End","ArrowUp","ArrowDown"]),C={onFocus:n.useCallback((()=>{if(e.current&&void 0===g){const t=c.getFirstVisibleKey(e.current,_);t&&b(t)}}),[g,e])},S=n.useRef();n.useEffect((()=>{if(e.current){const t=Array.from(e.current.querySelectorAll(_),(e=>c.getKey(e)));if(null!=g&&-1!==t.indexOf(g)){const t=c.findElementByKey(e.current,g,_);t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded():t.scrollIntoView({block:"nearest"})}else g&&-1===t.indexOf(g)&&(S.current?b(q(g,t,S.current)):b(t[0])),S.current=t}}),[i,g,e]);const K=n.useCallback((t=>{if(("Home"===t.key||"End"===t.key)&&e.current&&g){const n=Array.from(e.current.querySelectorAll(_),(e=>c.getKey(e)));v?.({value:n["Home"===t.key?0:n.length-1]})}!g||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),r?.({value:g,reason:"keyboard"})),g&&"Delete"===t.key&&s?.({value:g})}),[g,r,s,v,e]),[R,N]=n.useState(),[I,F]=n.useState(P),[k,E]=n.useState(),{triggerProps:L}=d.useContextMenuGesture((({gesture:t,anchor:n,target:o})=>{let r=n,i=g;if("keyboard"===t){r=c.findElementByKey(e.current,g,_)||n}else{const e=c.keyExtractor(o,_);i=null!=e?e:g}let l=!1;e.current&&(l=null!=V(i,e.current,D));const u=f.getDefaultContextMenu({isRemovable:l,handleRemove:s,handleReorder:void 0,itemKey:i,tabKeys:void 0,direction:void 0,itemLabels:{labelRemove:l?y.tabbar_labelRemove():void 0},handleAccStatus:t=>{const n=H(t.removedKey,e.current),o=l&&t.removedKey?` Removed ${n}`:"";E(o)}});N(u),F({...j[t],anchorRef:{current:r},isOpen:null!=a})}),{isDisabled:!a}),M=n.useCallback((t=>{"dismissed"!==t.reason&&"itemAction"!==t.reason||(b(R?.itemKey),e.current?.focus()),F({...P})}),[e,R?.itemKey]),w="contextMenu_"+n.useId(),A=y.tabbar_labelContextMenu();return{showFocusRing:h,currentKey:g,onCurrentKeyChange:v,onKeyDown:K,menuProps:{...I,onClose:M},contextMenuContext:R,contextMenuDescription:A,contextMenuDescriptionId:w,accStatusInfo:k,containerHandlers:o.mergeProps(p,x,C,L)}}({containerRef:k,selection:x,onRemove:S,onSelectionChange:C,children:e,contextMenuConfig:L}),Q={onKeyDown:T},W=s.classNames([a.navigationListStyles.uListStyle]),X=i.useId()+"_",Y=g.useTestId(N);return y.useImperativeHandle(F,(()=>({focus:()=>{k.current&&k.current.focus()},blur:()=>{k.current&&k.current.focus()}}))),t.jsxs(t.Fragment,{children:[t.jsx("div",{"aria-label":K,"aria-labelledby":R,role:"tablist",ref:k,"aria-orientation":"vertical",tabIndex:0,"aria-activedescendant":w?X+w:"",...o.mergeProps(Q,B),...Y,class:W,children:t.jsx(h.NavigationListContext.Provider,{value:{selection:x,display:I,onSelectionChange:C,onCurrentKeyChange:A,currentKey:w,showFocusRing:M,navigationListItemPrefix:X,onRemove:S,edge:p},children:e})}),L&&z&&$&&t.jsx("span",{id:z,children:t.jsx(b.HiddenAccessible,{children:$})}),L&&J&&t.jsx(v.LiveRegion,{children:J}),L&&t.jsx(f.TabBarContextMenu,{...G,contextMenuConfig:L,contextMenuContext:U})]})}));e.NavigationList=G}));
|
|
2
|
+
//# sourceMappingURL=NavigationList-a6bb123d.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationList-a6bb123d.js","sources":["../../src/UNSAFE_NavigationList/useNavigationList.ts","../../src/UNSAFE_NavigationList/NavigationList.tsx"],"sourcesContent":["import { ComponentChildren, ComponentProps } from 'preact';\nimport { useState, useCallback, MutableRef, useRef, useEffect, useId } from 'preact/hooks';\nimport {\n keyExtractor,\n getFirstVisibleKey,\n getKey,\n getPrevNextKeyUsingRef,\n findElementByKey\n} from '../utils/PRIVATE_collectionUtils';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useCollectionFocusRing } from '../hooks/PRIVATE_useCollectionFocusRing';\nimport { useCurrentKey } from '../hooks/PRIVATE_useCurrentKey';\nimport { MenuProps } from '../hooks/PRIVATE_useVisContextMenu/util';\nimport { useContextMenuGesture } from '../hooks/UNSAFE_useContextMenuGesture';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { Menu } from '../UNSAFE_Menu';\nimport { getDefaultContextMenu } from '../UNSAFE_TabBar/TabBarContextMenu';\nimport { TabBarContextMenuConfig, TabBarItemContextMenuContext } from '../UNSAFE_TabBarCommon';\nimport { NavigationListContextProps } from '../UNSAFE_NavigationListCommon';\n\nconst ITEM_SELECTOR = '[role=\"tab\"]';\nexport const REMOVE_ICON_SELECTOR = '[data-oj-navigationlist-item-remove-icon]';\nconst TOUCH_OFFSET_VALUE = 40;\nconst menuPropGestureStates: Record<\n 'mouse' | 'keyboard' | 'touch',\n Omit<Required<MenuProps>, 'anchorRef' | 'isOpen'>\n> = {\n mouse: {\n initialFocus: 'menu',\n placement: 'bottom-start',\n offsetValue: 0\n },\n keyboard: {\n initialFocus: 'firstItem',\n placement: 'bottom-start',\n offsetValue: 0\n },\n touch: {\n initialFocus: 'menu',\n placement: 'end',\n offsetValue: TOUCH_OFFSET_VALUE\n }\n};\n\n/**\n * type for payload of current key change event handler\n */\ntype CurrentKeyDetail<K> = {\n value: K;\n};\n/**\n * type for payload of selection change event handler\n */\ntype SelectionDetail<K> = {\n value: K;\n reason: 'pointer' | 'keyboard';\n};\n/**\n * type for payload of remove event handler\n */\ntype RemoveDetail<K> = {\n value: K;\n};\n\nconst initialMenuProps: MenuProps = {\n isOpen: false,\n initialFocus: 'menu',\n placement: 'bottom-start',\n offsetValue: 0,\n anchorRef: { current: null }\n};\n\n/*TODO: JET-58534. Create a hook to share some logic between navlist and tabbar. Hook will be used inside this one. */\nexport function useNavigationList<K extends string | number>({\n containerRef,\n selection,\n onRemove,\n onSelectionChange,\n children,\n contextMenuConfig\n}: {\n containerRef: MutableRef<HTMLDivElement>;\n selection?: K;\n onRemove?: <K extends string | number>(detail: RemoveDetail<K>) => void;\n onSelectionChange?: <K extends string | number>(detail: SelectionDetail<K>) => void;\n children: ComponentChildren;\n contextMenuConfig?: TabBarContextMenuConfig<K>;\n}) {\n const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n const [currentKey, setCurrentKey] = useState<K | undefined>(selection);\n\n const onCurrentKeyChange = useCallback((detail: CurrentKeyDetail<K | undefined>) => {\n setCurrentKey(detail.value);\n }, []) as NavigationListContextProps<K>['onCurrentKeyChange'];\n\n const { currentKeyProps } = useCurrentKey(\n (element) =>\n onRemove\n ? (extractOnlyItemKey(element, ITEM_SELECTOR, REMOVE_ICON_SELECTOR) as K)\n : keyExtractor(element, ITEM_SELECTOR),\n false,\n false,\n getPrevNextKeyUsingRef(containerRef, currentKey, true, ITEM_SELECTOR),\n getPrevNextKeyUsingRef(containerRef, currentKey, false, ITEM_SELECTOR),\n undefined,\n undefined,\n currentKey,\n onCurrentKeyChange\n );\n\n const [showFocusRing, focusRingProps] = useCollectionFocusRing(containerRef, [\n 'Home',\n 'End',\n 'ArrowUp',\n 'ArrowDown'\n ]);\n\n const onFocus = useCallback(() => {\n if (containerRef.current && currentKey === undefined) {\n const key = getFirstVisibleKey(containerRef.current, ITEM_SELECTOR);\n if (key) {\n setCurrentKey(key as K);\n }\n }\n }, [currentKey, containerRef]);\n\n const onFocusProps = { onFocus };\n const prevNavItems = useRef<K[]>();\n\n useEffect(() => {\n if (containerRef.current) {\n const navListItemKeys = Array.from(\n containerRef.current.querySelectorAll(ITEM_SELECTOR),\n (elem) => getKey(elem as HTMLElement) as K\n );\n if (currentKey != null && navListItemKeys.indexOf(currentKey) !== -1) {\n const navListItem = findElementByKey(\n containerRef.current,\n currentKey,\n ITEM_SELECTOR\n ) as any;\n if (navListItem.scrollIntoViewIfNeeded) {\n // for some browsers, we'll need the non-standard scrollIntoViewIfNeeded\n navListItem.scrollIntoViewIfNeeded();\n } else {\n navListItem.scrollIntoView({ block: 'nearest' });\n }\n } else {\n if (currentKey && navListItemKeys.indexOf(currentKey) === -1) {\n prevNavItems.current\n ? setCurrentKey(findNextCurrentKey(currentKey, navListItemKeys, prevNavItems.current))\n : setCurrentKey(navListItemKeys[0] as K);\n }\n prevNavItems.current = navListItemKeys;\n }\n }\n }, [children, currentKey, containerRef]);\n\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if ((event.key === 'Home' || event.key === 'End') && containerRef.current && currentKey) {\n const navListItemKey = Array.from(\n containerRef.current.querySelectorAll(ITEM_SELECTOR),\n (elem) => getKey(elem as HTMLElement) as K\n );\n onCurrentKeyChange?.({\n value: navListItemKey[event.key === 'Home' ? 0 : navListItemKey.length - 1] as K\n });\n }\n if (currentKey && (event.key === 'Enter' || event.key === ' ')) {\n // Prevent default to avoid page scrolling on Space (and native actions on Enter)\n event.preventDefault();\n onSelectionChange?.({\n value: currentKey as K,\n reason: 'keyboard'\n });\n }\n if (currentKey && event.key === 'Delete') {\n onRemove?.({ value: currentKey as K });\n }\n },\n [currentKey, onSelectionChange, onRemove, onCurrentKeyChange, containerRef]\n );\n\n const [contextMenuContext, setContextMenuContext] = useState<TabBarItemContextMenuContext<K>>();\n\n const [menuProps, setMenuProps] = useState<MenuProps>(initialMenuProps);\n const [accStatusInfo, setAccStatusInfo] = useState<string>();\n\n const { triggerProps } = useContextMenuGesture(\n ({ gesture, anchor, target }) => {\n let anchorBasedOnGesture = anchor;\n let itemKey = currentKey as K;\n if (gesture === 'keyboard') {\n //We find the element where the position of the menu is going to be based of\n const elem = findElementByKey(\n containerRef.current as HTMLElement,\n currentKey as K,\n ITEM_SELECTOR\n );\n //We set the correct anchor\n anchorBasedOnGesture = elem ? elem : anchor;\n } else {\n //We search for the key using the target of the event\n const key = keyExtractor(target as HTMLElement, ITEM_SELECTOR);\n\n //On touch devices, the keyExtractor returns null because target of touch event is the entire tabbar. Hence we make use of currentkey since the context menu is always launched from selected item and its key is currentKey\n itemKey = key != null ? (key as K) : (currentKey as K);\n }\n let isRemovable = false;\n if (containerRef.current) {\n isRemovable = getItemAttribute(itemKey, containerRef.current, REMOVE_ICON_SELECTOR) != null;\n }\n const defaultContext = getDefaultContextMenu<K>({\n // For default menu items the existence of REMOVE_ICON_SELECTOR is the indicator that it is removable because we render the default menu in touch devices not the application.\n // Furthermore in corepack due to delegations onRemove is always defined as it is a even handler hence not a good check for isRemovable.\n isRemovable: isRemovable,\n handleRemove: onRemove,\n handleReorder: undefined,\n itemKey: itemKey,\n tabKeys: undefined,\n // As direction is only needed for reorder to switch the labels\n direction: undefined,\n itemLabels: {\n labelRemove: isRemovable ? translations.tabbar_labelRemove() : undefined\n },\n handleAccStatus: (detail) => {\n const removeItemLabel = getItemLabel(detail.removedKey!, containerRef.current!) as string;\n const removeStatus =\n isRemovable && detail.removedKey ? ` Removed ${removeItemLabel}` : '';\n\n setAccStatusInfo(removeStatus);\n }\n });\n setContextMenuContext(defaultContext);\n\n setMenuProps({\n ...menuPropGestureStates[gesture],\n anchorRef: { current: anchorBasedOnGesture },\n // This is set so that when no contextMenuConfig and when items is not removable we need not open it.\n isOpen: contextMenuConfig != null\n });\n },\n {\n isDisabled: !contextMenuConfig //If there is no a context menu renderer we disable the hook\n }\n );\n\n const handleCloseContextMenu = useCallback<Required<ComponentProps<typeof Menu>>['onClose']>(\n (detail) => {\n //Focus has to be set on the current target that was obtained\n //during context menu gesture when menu is dismissed or item is \"selected\"\n if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {\n setCurrentKey(contextMenuContext?.itemKey);\n containerRef.current?.focus();\n }\n // We close the menu.The only prop that matters here is isOpen\n setMenuProps({ ...initialMenuProps });\n },\n [containerRef, contextMenuContext?.itemKey]\n );\n\n const contextMenuDescriptionId = 'contextMenu_' + useId();\n const contextMenuDescription = translations.tabbar_labelContextMenu();\n\n return {\n showFocusRing,\n currentKey,\n onCurrentKeyChange,\n onKeyDown,\n menuProps: { ...menuProps, onClose: handleCloseContextMenu },\n contextMenuContext,\n contextMenuDescription,\n contextMenuDescriptionId,\n accStatusInfo,\n containerHandlers: mergeProps(focusRingProps, currentKeyProps, onFocusProps, triggerProps)\n };\n}\n// Utility that returns the value for a attribute related to the role=\"tab\" item.\nexport const getItemAttribute = <K extends string | number>(\n itemKey: K,\n root: HTMLElement,\n attribute: string\n) => {\n const navItem = findElementByKey(root, itemKey as K, ITEM_SELECTOR) as HTMLElement;\n if (navItem) {\n const tabBarItemAttribute = navItem.querySelector(attribute);\n return tabBarItemAttribute;\n }\n return;\n};\n\n// Utility that returns the visible inner text inside the role=\"tab\" item.\nconst getItemLabel = <K extends string | number>(itemKey: K, root: HTMLElement) => {\n const tabBarItem = findElementByKey(root, itemKey as K, ITEM_SELECTOR) as HTMLElement;\n if (tabBarItem) {\n return tabBarItem.innerText;\n }\n return;\n};\n\nconst extractOnlyItemKey = (element: HTMLElement, itemSelector: string, itemEliminator: string) => {\n const navigationListItem = element.closest(itemSelector);\n const removeButton = element.closest(itemEliminator);\n return navigationListItem?.contains(removeButton) ? null : keyExtractor(element, itemSelector);\n};\n\nconst findNextCurrentKey = <K>(currentKey: K, currNavs: K[], prevNavs: K[]) => {\n const index = prevNavs.indexOf(currentKey);\n if (index > 0) {\n const nextIndex = index === prevNavs.length - 1 ? index - 1 : index + 1;\n const nextKey = prevNavs[nextIndex];\n if (currNavs.indexOf(nextKey) !== -1) {\n return nextKey;\n }\n }\n // update current key to be the first one if we can't find a suitable next key\n return currNavs[0];\n};\n","import { Ref } from 'preact';\nimport { MutableRef, useMemo, useRef } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { isMobile } from '#utils/UNSAFE_clientUtils';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { navigationListStyles } from './themes/NavigationListStyles.css';\nimport { getItemAttribute, REMOVE_ICON_SELECTOR, useNavigationList } from './useNavigationList';\nimport { forwardRef, useImperativeHandle } from 'preact/compat';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { NavigationListProps, NavigationListContext } from '../UNSAFE_NavigationListCommon';\nimport { TabBarContextMenu } from '../UNSAFE_TabBar/TabBarContextMenu';\nimport type { TabBarContextMenuConfig as NavigationListContextMenuConfig } from '../UNSAFE_TabBarCommon';\nexport {\n RemovableNavigationListItem,\n NavigationListLinkItem\n} from '../UNSAFE_NavigationListCommon';\n\nexport type FocusableHandle = {\n focus: () => void;\n blur: () => void;\n};\n\nexport const NavigationList = forwardRef(\n <K extends string | number>(\n {\n children,\n selection,\n edge = 'start',\n onSelectionChange,\n onRemove,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelLedBy,\n testId,\n display = 'standard'\n }: NavigationListProps<K> & TestIdProps,\n ref?: Ref<FocusableHandle>\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n\n const isMobileDevice = isMobile();\n const defaultContextMenuConfig = useMemo<\n NavigationListContextMenuConfig<string | number> | undefined\n >(() => {\n return isMobileDevice\n ? {\n itemsRenderer: (context) => {\n //Only if context is available, it is a mobile device and it is removable item, we will return remove context menu item\n if (context) {\n const isRemovableItem =\n getItemAttribute(context.itemKey, containerRef.current!, REMOVE_ICON_SELECTOR) !=\n null;\n if (isRemovableItem) {\n const defaultItems = context.defaultMenuItems;\n return <>{defaultItems}</>;\n }\n }\n return null;\n }\n }\n : undefined;\n }, [isMobileDevice]);\n\n const {\n showFocusRing,\n currentKey,\n onCurrentKeyChange,\n containerHandlers,\n onKeyDown,\n contextMenuContext,\n menuProps,\n contextMenuDescription,\n contextMenuDescriptionId,\n accStatusInfo\n } = useNavigationList({\n containerRef: containerRef as MutableRef<HTMLDivElement>,\n selection,\n onRemove,\n onSelectionChange,\n children,\n contextMenuConfig: defaultContextMenuConfig\n });\n\n const eventProps = { onKeyDown };\n const navigationListClass = classNames([navigationListStyles.uListStyle]);\n const navigationListItemPrefix = useId() + '_';\n const testIdProps = useTestId(testId);\n\n //Allows to call focus on rootRef without having to expose it\n useImperativeHandle(ref!, () => ({\n focus: () => {\n if (containerRef.current) {\n containerRef.current.focus();\n }\n },\n blur: () => {\n if (containerRef.current) {\n containerRef.current.focus();\n }\n }\n }));\n\n return (\n <>\n <div\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelLedBy}\n role=\"tablist\"\n ref={containerRef}\n aria-orientation={'vertical'}\n tabIndex={0}\n aria-activedescendant={currentKey ? navigationListItemPrefix + currentKey : ''}\n {...mergeProps(eventProps, containerHandlers)}\n {...testIdProps}\n class={navigationListClass}>\n <NavigationListContext.Provider\n value={{\n selection,\n display,\n onSelectionChange,\n onCurrentKeyChange,\n currentKey,\n showFocusRing,\n navigationListItemPrefix,\n onRemove,\n edge\n }}>\n {children}\n </NavigationListContext.Provider>\n </div>\n {defaultContextMenuConfig && contextMenuDescriptionId && contextMenuDescription && (\n <span id={contextMenuDescriptionId}>\n <HiddenAccessible>{contextMenuDescription}</HiddenAccessible>\n </span>\n )}\n {defaultContextMenuConfig && accStatusInfo && <LiveRegion>{accStatusInfo}</LiveRegion>}\n {defaultContextMenuConfig && (\n <TabBarContextMenu\n {...menuProps}\n contextMenuConfig={defaultContextMenuConfig}\n contextMenuContext={contextMenuContext!}\n />\n )}\n </>\n );\n }\n);\n"],"names":["ITEM_SELECTOR","REMOVE_ICON_SELECTOR","menuPropGestureStates","mouse","initialFocus","placement","offsetValue","keyboard","touch","initialMenuProps","isOpen","anchorRef","current","getItemAttribute","itemKey","root","attribute","navItem","findElementByKey","querySelector","getItemLabel","tabBarItem","innerText","extractOnlyItemKey","element","itemSelector","itemEliminator","navigationListItem","closest","removeButton","contains","keyExtractor","findNextCurrentKey","currentKey","currNavs","prevNavs","index","indexOf","nextKey","length","NavigationList","forwardRef","children","selection","edge","onSelectionChange","onRemove","ariaLabel","ariaLabelLedBy","testId","display","ref","containerRef","useRef","isMobileDevice","isMobile","defaultContextMenuConfig","useMemo","itemsRenderer","context","defaultItems","defaultMenuItems","_jsx","jsx","_Fragment","Fragment","undefined","showFocusRing","onCurrentKeyChange","containerHandlers","onKeyDown","contextMenuContext","menuProps","contextMenuDescription","contextMenuDescriptionId","accStatusInfo","contextMenuConfig","translations","useTranslationBundle","setCurrentKey","useState","useCallback","detail","value","currentKeyProps","useCurrentKey","getPrevNextKeyUsingRef","focusRingProps","useCollectionFocusRing","onFocusProps","onFocus","key","getFirstVisibleKey","prevNavItems","useEffect","navListItemKeys","Array","from","querySelectorAll","elem","getKey","navListItem","scrollIntoViewIfNeeded","scrollIntoView","block","event","navListItemKey","preventDefault","reason","setContextMenuContext","setMenuProps","setAccStatusInfo","triggerProps","useContextMenuGesture","gesture","anchor","target","anchorBasedOnGesture","isRemovable","defaultContext","getDefaultContextMenu","handleRemove","handleReorder","tabKeys","direction","itemLabels","labelRemove","tabbar_labelRemove","handleAccStatus","removeItemLabel","removedKey","removeStatus","isDisabled","handleCloseContextMenu","focus","useId","tabbar_labelContextMenu","onClose","mergeProps","useNavigationList","eventProps","navigationListClass","classNames","navigationListStyles","uListStyle","navigationListItemPrefix","testIdProps","useTestId","useImperativeHandle","blur","_jsxs","role","tabIndex","class","NavigationListContext","Provider","id","HiddenAccessible","LiveRegion","TabBarContextMenu"],"mappings":"+1CAqBA,MAAMA,EAAgB,eACTC,EAAuB,4CAE9BC,EAGF,CACFC,MAAO,CACLC,aAAc,OACdC,UAAW,eACXC,YAAa,GAEfC,SAAU,CACRH,aAAc,YACdC,UAAW,eACXC,YAAa,GAEfE,MAAO,CACLJ,aAAc,OACdC,UAAW,MACXC,YAlBuB,KA0CrBG,EAA8B,CAClCC,QAAQ,EACRN,aAAc,OACdC,UAAW,eACXC,YAAa,EACbK,UAAW,CAAEC,QAAS,OAkNjB,MAAMC,EAAmB,CAC9BC,EACAC,EACAC,KAEA,MAAMC,EAAUC,EAAgBA,iBAACH,EAAMD,EAAcd,GACrD,GAAIiB,EAAS,CAEX,OAD4BA,EAAQE,cAAcH,EAEnD,CACM,EAIHI,EAAe,CAA4BN,EAAYC,KAC3D,MAAMM,EAAaH,EAAgBA,iBAACH,EAAMD,EAAcd,GACxD,GAAIqB,EACF,OAAOA,EAAWC,SAEb,EAGHC,EAAqB,CAACC,EAAsBC,EAAsBC,KACtE,MAAMC,EAAqBH,EAAQI,QAAQH,GACrCI,EAAeL,EAAQI,QAAQF,GACrC,OAAOC,GAAoBG,SAASD,GAAgB,KAAOE,eAAaP,EAASC,EAAa,EAG1FO,EAAqB,CAAIC,EAAeC,EAAeC,KAC3D,MAAMC,EAAQD,EAASE,QAAQJ,GAC/B,GAAIG,EAAQ,EAAG,CACb,MACME,EAAUH,EADEC,IAAUD,EAASI,OAAS,EAAIH,EAAQ,EAAIA,EAAQ,GAEtE,IAAmC,IAA/BF,EAASG,QAAQC,GACnB,OAAOA,CAEV,CAED,OAAOJ,EAAS,EAAE,ECrSPM,EAAiBC,EAAUA,YACtC,EAEIC,WACAC,YACAC,OAAO,QACPC,oBACAC,WACA,aAAcC,EACd,kBAAmBC,EACnBC,SACAC,UAAU,YAEZC,KAEA,MAAMC,EAAeC,SAAuB,MAEtCC,EAAiBC,EAAAA,WACjBC,EAA2BC,EAAAA,SAE/B,IACOH,EACH,CACEI,cAAgBC,IAEd,GAAIA,EAAS,CAIX,GADE,MADA9C,EAAiB8C,EAAQ7C,QAASsC,EAAaxC,QAAUX,GAEtC,CACnB,MAAM2D,EAAeD,EAAQE,iBAC7B,OAAOC,EAAAC,IAAAC,EAAAC,SAAA,CAAAvB,SAAGkB,GACX,CACF,CACD,OAAO,IAAI,QAGfM,GACH,CAACZ,KAEEa,cACJA,EAAalC,WACbA,EAAUmC,mBACVA,EAAkBC,kBAClBA,EAAiBC,UACjBA,EAASC,mBACTA,EAAkBC,UAClBA,EAASC,uBACTA,EAAsBC,yBACtBA,EAAwBC,cACxBA,GDDU,UAA6CvB,aAC3DA,EAAYT,UACZA,EAASG,SACTA,EAAQD,kBACRA,EAAiBH,SACjBA,EAAQkC,kBACRA,IASA,MAAMC,EAAeC,uBAAiC,6BAC/C7C,EAAY8C,GAAiBC,EAAQA,SAAgBrC,GAEtDyB,EAAqBa,eAAaC,IACtCH,EAAcG,EAAOC,MAAM,GAC1B,KAEGC,gBAAEA,GAAoBC,iBACzB7D,GACCsB,EACKvB,EAAmBC,EAASxB,EAAeC,GAC5C8B,eAAaP,EAASxB,KAC5B,GACA,EACAsF,yBAAuBlC,EAAcnB,GAAY,EAAMjC,GACvDsF,yBAAuBlC,EAAcnB,GAAY,EAAOjC,QACxDkE,OACAA,EACAjC,EACAmC,IAGKD,EAAeoB,GAAkBC,EAAAA,uBAAuBpC,EAAc,CAC3E,OACA,MACA,UACA,cAYIqC,EAAe,CAAEC,QATPT,EAAAA,aAAY,KAC1B,GAAI7B,EAAaxC,cAA0BsD,IAAfjC,EAA0B,CACpD,MAAM0D,EAAMC,EAAkBA,mBAACxC,EAAaxC,QAASZ,GACjD2F,GACFZ,EAAcY,EAEjB,IACA,CAAC1D,EAAYmB,KAGVyC,EAAexC,EAAAA,SAErByC,EAAAA,WAAU,KACR,GAAI1C,EAAaxC,QAAS,CACxB,MAAMmF,EAAkBC,MAAMC,KAC5B7C,EAAaxC,QAAQsF,iBAAiBlG,IACrCmG,GAASC,SAAOD,KAEnB,GAAkB,MAAdlE,IAA+D,IAAzC8D,EAAgB1D,QAAQJ,GAAoB,CACpE,MAAMoE,EAAcnF,EAAAA,iBAClBkC,EAAaxC,QACbqB,EACAjC,GAEEqG,EAAYC,uBAEdD,EAAYC,yBAEZD,EAAYE,eAAe,CAAEC,MAAO,WAEvC,MACKvE,IAAuD,IAAzC8D,EAAgB1D,QAAQJ,KACxC4D,EAAajF,QACTmE,EAAc/C,EAAmBC,EAAY8D,EAAiBF,EAAajF,UAC3EmE,EAAcgB,EAAgB,KAEpCF,EAAajF,QAAUmF,CAE1B,IACA,CAACrD,EAAUT,EAAYmB,IAE1B,MAAMkB,EAAYW,eACfwB,IACC,IAAmB,SAAdA,EAAMd,KAAgC,QAAdc,EAAMd,MAAkBvC,EAAaxC,SAAWqB,EAAY,CACvF,MAAMyE,EAAiBV,MAAMC,KAC3B7C,EAAaxC,QAAQsF,iBAAiBlG,IACrCmG,GAASC,SAAOD,KAEnB/B,IAAqB,CACnBe,MAAOuB,EAA6B,SAAdD,EAAMd,IAAiB,EAAIe,EAAenE,OAAS,IAE5E,EACGN,GAA6B,UAAdwE,EAAMd,KAAiC,MAAdc,EAAMd,MAEhDc,EAAME,iBACN9D,IAAoB,CAClBsC,MAAOlD,EACP2E,OAAQ,cAGR3E,GAA4B,WAAdwE,EAAMd,KACtB7C,IAAW,CAAEqC,MAAOlD,GACrB,GAEH,CAACA,EAAYY,EAAmBC,EAAUsB,EAAoBhB,KAGzDmB,EAAoBsC,GAAyB7B,EAAQA,YAErDR,EAAWsC,GAAgB9B,EAAQA,SAAYvE,IAC/CkE,EAAeoC,GAAoB/B,EAAQA,YAE5CgC,aAAEA,GAAiBC,EAAqBA,uBAC5C,EAAGC,UAASC,SAAQC,aAClB,IAAIC,EAAuBF,EACvBrG,EAAUmB,EACd,GAAgB,aAAZiF,EAAwB,CAQ1BG,EANanG,EAAAA,iBACXkC,EAAaxC,QACbqB,EACAjC,IAGmCmH,CACtC,KAAM,CAEL,MAAMxB,EAAM5D,EAAAA,aAAaqF,EAAuBpH,GAGhDc,EAAiB,MAAP6E,EAAeA,EAAa1D,CACvC,CACD,IAAIqF,GAAc,EACdlE,EAAaxC,UACf0G,EAAuF,MAAzEzG,EAAiBC,EAASsC,EAAaxC,QAASX,IAEhE,MAAMsH,EAAiBC,EAAAA,sBAAyB,CAG9CF,YAAaA,EACbG,aAAc3E,EACd4E,mBAAexD,EACfpD,QAASA,EACT6G,aAASzD,EAET0D,eAAW1D,EACX2D,WAAY,CACVC,YAAaR,EAAczC,EAAakD,0BAAuB7D,GAEjE8D,gBAAkB9C,IAChB,MAAM+C,EAAkB7G,EAAa8D,EAAOgD,WAAa9E,EAAaxC,SAChEuH,EACJb,GAAepC,EAAOgD,WAAa,YAAYD,IAAoB,GAErElB,EAAiBoB,EAAa,IAGlCtB,EAAsBU,GAEtBT,EAAa,IACR5G,EAAsBgH,GACzBvG,UAAW,CAAEC,QAASyG,GAEtB3G,OAA6B,MAArBkE,GACR,GAEJ,CACEwD,YAAaxD,IAIXyD,EAAyBpD,eAC5BC,IAGuB,cAAlBA,EAAO0B,QAA4C,eAAlB1B,EAAO0B,SAC1C7B,EAAcR,GAAoBzD,SAClCsC,EAAaxC,SAAS0H,SAGxBxB,EAAa,IAAKrG,GAAmB,GAEvC,CAAC2C,EAAcmB,GAAoBzD,UAG/B4D,EAA2B,eAAiB6D,EAAAA,QAC5C9D,EAAyBI,EAAa2D,0BAE5C,MAAO,CACLrE,gBACAlC,aACAmC,qBACAE,YACAE,UAAW,IAAKA,EAAWiE,QAASJ,GACpC9D,qBACAE,yBACAC,2BACAC,gBACAN,kBAAmBqE,EAAAA,WAAWnD,EAAgBH,EAAiBK,EAAcuB,GAEjF,CC1MQ2B,CAAkB,CACpBvF,aAAcA,EACdT,YACAG,WACAD,oBACAH,WACAkC,kBAAmBpB,IAGfoF,EAAa,CAAEtE,aACfuE,EAAsBC,EAAUA,WAAC,CAACC,EAAAA,qBAAqBC,aACvDC,EAA2BV,UAAU,IACrCW,EAAcC,YAAUlG,GAgB9B,OAbAmG,EAAmBA,oBAACjG,GAAM,KAAO,CAC/BmF,MAAO,KACDlF,EAAaxC,SACfwC,EAAaxC,QAAQ0H,OACtB,EAEHe,KAAM,KACAjG,EAAaxC,SACfwC,EAAaxC,QAAQ0H,OACtB,MAKHgB,EAAAA,KACEtF,EAAAA,SAAA,CAAAtB,SAAA,CAAAoB,MAAA,MAAA,CAAA,aACcf,EAAS,kBACJC,EACjBuG,KAAK,UACLpG,IAAKC,EAAY,mBACC,WAClBoG,SAAU,EACa,wBAAAvH,EAAagH,EAA2BhH,EAAa,MACxEyG,EAAAA,WAAWE,EAAYvE,MACvB6E,EACJO,MAAOZ,EACPnG,SAAAoB,EAAAC,IAAC2F,wBAAsBC,SACrB,CAAAxE,MAAO,CACLxC,YACAO,UACAL,oBACAuB,qBACAnC,aACAkC,gBACA8E,2BACAnG,WACAF,QAEDF,SAAAA,MAGJc,GAA4BkB,GAA4BD,GACvDX,MAAA,OAAA,CAAM8F,GAAIlF,EACRhC,SAAAoB,EAAAC,IAAC8F,EAAgBA,iBAAA,CAAAnH,SAAE+B,MAGtBjB,GAA4BmB,GAAiBb,EAAAC,IAAC+F,aAAU,CAAApH,SAAEiC,IAC1DnB,GACCM,EAAAC,IAACgG,EAAiBA,kBAAA,IACZvF,EACJI,kBAAmBpB,EACnBe,mBAAoBA,MAI1B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', './NavigationListLinkItem-df1826e6'], (function(e,t,i){"use strict";e.NavigationListItem=function({itemKey:e,label:a,badge:n,metadata:s,severity:m,icon:o}){return t.jsx(i.BaseNavigationListItem,{itemKey:e,label:a,badge:n,metadata:s,severity:m,icon:o})}}));
|
|
2
|
+
//# sourceMappingURL=NavigationListItem-10bf6656.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationListItem-10bf6656.js","sources":["../../src/UNSAFE_NavigationList/NavigationListItem.tsx"],"sourcesContent":["import {\n BaseNavigationListItem,\n BaseNavigationListItemProps\n} from '../UNSAFE_NavigationListCommon/BaseNavigationListItem';\n\nexport type NavigationListItemProps<K extends string | number> = Omit<\n BaseNavigationListItemProps<K>,\n 'removeIcon'\n>;\n\nexport function NavigationListItem<K extends string | number>({\n itemKey,\n label,\n badge,\n metadata,\n severity,\n icon\n}: NavigationListItemProps<K>) {\n return (\n <BaseNavigationListItem\n itemKey={itemKey}\n label={label}\n badge={badge}\n metadata={metadata}\n severity={severity}\n icon={icon}\n />\n );\n}\n"],"names":["itemKey","label","badge","metadata","severity","icon","_jsx","BaseNavigationListItem"],"mappings":"+HAUgB,UAA8CA,QAC5DA,EAAOC,MACPA,EAAKC,MACLA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,KACRA,IAEA,OACEC,EAAAA,IAACC,EAAAA,uBAAsB,CACrBP,QAASA,EACTC,MAAOA,EACPC,MAAOA,EACPC,SAAUA,EACVC,SAAUA,EACVC,KAAMA,GAGZ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact/hooks', './Text-31cabc49', './useNavigationListItem-582f5564', './Flex-4b81b412', './Badge-b28ef084', './useComponentTheme-5aa41a8f', './classNames-08d99695', './WarningS-98a81abe', './ErrorS-d91c3db2', './InformationS-53490112', './SuccessS-eb8fd915', './UNSAFE_NavigationListCommon/themes/redwood/NavigationListItemTheme', './useTabBarItemTooltip-a81da662', './mergeProps-bcfa6a92'], (function(e,s,a,n,t,i,r,l,o,c,d,m,h,x,u,g){"use strict";const j=e=>{e.preventDefault()};function v({itemKey:e,label:v,badge:f,metadata:b,severity:p="none",removeIcon:y,icon:I,href:S,"aria-controls":C}){const N=a.useRef(null),{itemId:L,itemHandlers:T,itemClasses:F,isSelected:w,labelContainerClasses:B,labelContainerStyle:k,isIconOnly:E,isEdgeEnd:P,stackedBadgeClasses:R,iconOnlyClasses:z,isCurrent:K,showFocusRing:W}=t.useNavigationListItem({itemKey:e}),D=!("none"===p||void 0===p),H=e=>{switch(e){case"error":return s.jsx(d.SvgErrorS,{color:"danger"});case"warning":return s.jsx(c.SvgWarningS,{color:"warning"});case"info":return s.jsx(m.SvgInformationS,{color:"info"});case"confirmation":return s.jsx(h.SvgSuccessS,{color:"success"});default:return null}},{styles:{iconLabelContainer:O,iconContainer:A,startIconPadding:M,endContentPadding:U,removeIconPaddingWithEndContent:_,navigationItemMetadata:q,navigationListItemLink:G}}=l.useComponentTheme(x.NavigationListItemRedwoodTheme),J=o.classNames([q,U]),Q=o.classNames([G]),V=o.classNames([O,A,U]),X=o.classNames([!E&&O,A,!E&&M,E&&z]),{styles:{navigationlistRemoveIcon:Y}}=l.useComponentTheme(x.NavigationListItemRedwoodTheme),Z=b||D||f,$=o.classNames([Y,Z&&_,!Z&&U]),ee=null!=S,se=v&&!(" "===v&&void 0===v),ae=I&&null!=I&&E,ne=ae,{tooltipContent:te,tooltipEventHandlerProps:ie,onLogicalFocus:re,onLogicalBlur:le}=u.useTabBarItemTooltip({label:v,isDisabled:!ne,position:P?"start":"end"});ne&&(K&&W||w?re(N.current):K&&W||le());const oe=()=>s.jsxs(s.Fragment,{children:[I&&s.jsx(i.Flex,{justify:"start",children:s.jsx("span",{class:X,children:I})}),!E&&se&&s.jsx(i.Flex,{align:"center",justify:"start",flex:"1 1 auto",children:s.jsx("span",{class:B,style:k,children:s.jsx(n.Text,{size:"inherit",weight:"inherit",variant:"inherit",children:v})})}),y&&!ee&&s.jsx("span",{class:$,children:y})]}),ce=()=>s.jsxs(s.Fragment,{children:[ae&&s.jsxs("div",{class:X,children:[I,s.jsx("span",{class:R,children:f?s.jsx(r.Badge,{size:"xs",variant:"neutral",children:f}):null})]}),!E&&I&&s.jsx(i.Flex,{justify:"start",children:s.jsx("span",{class:X,children:I})}),(!E||E&&!ae)&&se&&s.jsx(i.Flex,{align:"center",justify:"start",flex:"1 1 auto",children:s.jsx("span",{class:B,style:k,children:s.jsx(n.Text,{size:"inherit",weight:"inherit",variant:"inherit",children:v})})}),(b||D||f||y)&&s.jsxs(i.Flex,{align:"center",justify:"end",children:[" ",(!E||E&&!ae)&&f&&s.jsx("span",{class:V,children:s.jsx(r.Badge,{size:"md",variant:"neutralSubtle",children:f})}),b&&s.jsx("span",{class:J,children:s.jsx(n.Text,{children:"( "+b+" )"})}),D&&s.jsx("span",{class:V,children:H(p)}),y&&!ee&&s.jsx("span",{class:$,children:y})]})]});return ee?s.jsx("div",{...T,class:F,children:s.jsx("a",{tabindex:-1,role:"tab","data-oj-key":e,id:L,class:Q,"aria-selected":w,"aria-controls":C,href:S,onClick:j,children:Z?ce():oe()})}):s.jsxs("div",{role:"tab",...g.mergeProps(ie,T),"data-oj-key":e,id:L,class:F,"aria-selected":w,ref:N,"aria-controls":C,children:[Z?ce():oe(),E&&te]})}e.BaseNavigationListItem=v,e.NavigationListLinkItem=function({itemKey:e,badge:a,metadata:n,severity:t,href:i,label:r,"aria-controls":l}){return s.jsx(v,{"aria-controls":l,itemKey:e,label:r,badge:a,metadata:n,severity:t,href:i})}}));
|
|
2
|
+
//# sourceMappingURL=NavigationListLinkItem-df1826e6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationListLinkItem-df1826e6.js","sources":["../../src/UNSAFE_NavigationListCommon/BaseNavigationListItem.tsx","../../src/UNSAFE_NavigationListCommon/NavigationListLinkItem.tsx"],"sourcesContent":["import { useRef } from 'preact/hooks';\n\nimport { Text } from '../UNSAFE_Text';\n\nimport { useNavigationListItem } from './useNavigationListItem';\nimport { Flex } from '../UNSAFE_Flex';\nimport { Badge } from '../UNSAFE_Badge';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { WarningS } from '../UNSAFE_RedwoodIcons/WarningS';\nimport { ErrorS } from '../UNSAFE_RedwoodIcons/ErrorS';\nimport { InformationS } from '../UNSAFE_RedwoodIcons/InformationS';\nimport { SuccessS } from '../UNSAFE_RedwoodIcons/SuccessS';\nimport {\n NavigationListItemStyles,\n NavigationListItemVariantOptions\n} from '../UNSAFE_NavigationList/themes/NavigationListItemStyles.css';\nimport { NavigationListItemRedwoodTheme } from './themes/redwood/NavigationListItemTheme';\nimport { ComponentChild, ComponentChildren } from 'preact';\nimport { useTabBarItemTooltip } from '#UNSAFE_TabBarCommon/useTabBarItemTooltip';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\n\ntype Severity = 'warning' | 'info' | 'none' | 'error' | 'confirmation';\ntype AriaProps = {\n /**\n * Accepts the panel element's ID associated with the item\n **/\n 'aria-controls'?: string;\n};\n\nexport type BaseNavigationListItemProps<K extends string | number> = {\n /**\n * Key of the NavigationListItem.\n */\n itemKey: K;\n /**\n * Label of the NavigationListItem.\n */\n label: string;\n /**\n * The content to be rendered inside the Badge component.\n */\n badge?: string;\n /**\n * The content to be rendered inside the Text component as a metadata.\n */\n metadata?: string;\n /**\n * The status icon to be rendered after the label.\n */\n severity?: Severity;\n /**\n * The content to be rendered for remove icon\n */\n removeIcon?: ComponentChildren;\n /**\n * The icon before the label or the stand alone icon\n */\n icon?: ComponentChild;\n /**\n * Sets the URL that the hyperlink points to. If there is no valid URL use \"#\" for href value to navigate to the top of the page.\n */\n href?: string;\n} & AriaProps;\n\nconst onClickLink = (event: MouseEvent) => {\n event.preventDefault();\n};\n/*TODO: JET-58535. Add ripple effect when touching navigationListItem. */\nexport function BaseNavigationListItem<K extends string | number>({\n itemKey,\n label,\n badge,\n metadata,\n severity = 'none',\n removeIcon,\n icon,\n href,\n 'aria-controls': ariaControls\n}: BaseNavigationListItemProps<K>) {\n const itemRef = useRef<HTMLDivElement | null>(null);\n\n //Logic of the component handled here\n const {\n itemId,\n itemHandlers,\n itemClasses,\n isSelected,\n labelContainerClasses,\n labelContainerStyle,\n isIconOnly,\n isEdgeEnd,\n stackedBadgeClasses,\n iconOnlyClasses,\n isCurrent,\n showFocusRing\n } = useNavigationListItem({\n itemKey\n });\n\n const severityRequirement = !(severity === 'none' || severity === undefined);\n\n const IconComponent = (severityValue: Severity) => {\n switch (severityValue) {\n case 'error':\n return <ErrorS color=\"danger\" />;\n case 'warning':\n return <WarningS color=\"warning\" />;\n case 'info':\n return <InformationS color=\"info\" />;\n case 'confirmation':\n return <SuccessS color=\"success\" />;\n default:\n return null;\n }\n };\n\n const {\n styles: {\n iconLabelContainer,\n iconContainer,\n startIconPadding,\n endContentPadding,\n removeIconPaddingWithEndContent,\n navigationItemMetadata,\n navigationListItemLink\n }\n } = useComponentTheme<NavigationListItemVariantOptions, NavigationListItemStyles>(\n NavigationListItemRedwoodTheme\n );\n\n const navigationItemMatadata = classNames([navigationItemMetadata, endContentPadding]);\n const navigationItemLinkClass = classNames([navigationListItemLink]);\n\n const endIconContainerClasses = classNames([\n iconLabelContainer,\n iconContainer,\n endContentPadding\n ]);\n const startIconContainerClasses = classNames([\n !isIconOnly && iconLabelContainer,\n iconContainer,\n //For icon only icon to label padding is not required.\n !isIconOnly && startIconPadding,\n isIconOnly && iconOnlyClasses\n ]);\n const {\n styles: { navigationlistRemoveIcon }\n } = useComponentTheme<NavigationListItemVariantOptions, NavigationListItemStyles>(\n NavigationListItemRedwoodTheme\n );\n\n const isComplexItem = metadata || severityRequirement || badge;\n const removeClass = classNames([\n navigationlistRemoveIcon,\n isComplexItem && removeIconPaddingWithEndContent,\n !isComplexItem && endContentPadding\n ]);\n\n const isLinkItem = href != null;\n const labelRequirement = label && !(label === ' ' && label === undefined);\n const iconOnlyRequirement = icon && icon != null && isIconOnly;\n const showTooltip = iconOnlyRequirement;\n\n const { tooltipContent, tooltipEventHandlerProps, onLogicalFocus, onLogicalBlur } =\n useTabBarItemTooltip({\n label,\n isDisabled: !showTooltip,\n // For edge end the tooltip will appear after icon in the order tooltip, icon, selection when navlist is placed at end of page.\n position: !isEdgeEnd ? 'end' : 'start'\n });\n if (showTooltip) {\n if ((isCurrent && showFocusRing) || isSelected) {\n onLogicalFocus(itemRef.current as HTMLElement);\n } else if (!isCurrent || !showFocusRing) {\n onLogicalBlur();\n }\n }\n\n const labelRenderer = () => {\n return (\n <>\n {icon && (\n <Flex justify=\"start\">\n <span class={startIconContainerClasses}>{icon}</span>\n </Flex>\n )}\n {!isIconOnly && labelRequirement && (\n <Flex align=\"center\" justify=\"start\" flex=\"1 1 auto\">\n <span class={labelContainerClasses} style={labelContainerStyle}>\n <Text size=\"inherit\" weight=\"inherit\" variant=\"inherit\">\n {label}\n </Text>\n </span>\n </Flex>\n )}\n {removeIcon && !isLinkItem && <span class={removeClass}>{removeIcon}</span>}\n </>\n );\n };\n\n const complexItemRenderer = () => {\n return (\n <>\n {iconOnlyRequirement && (\n <div class={startIconContainerClasses}>\n {icon}\n <span class={stackedBadgeClasses}>\n {badge ? (\n <Badge size=\"xs\" variant=\"neutral\">\n {badge}\n </Badge>\n ) : null}\n </span>\n </div>\n )}\n {!isIconOnly && icon && (\n <Flex justify=\"start\">\n <span class={startIconContainerClasses}>{icon}</span>\n </Flex>\n )}\n {(!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&\n labelRequirement && (\n <Flex align=\"center\" justify=\"start\" flex=\"1 1 auto\">\n <span class={labelContainerClasses} style={labelContainerStyle}>\n <Text size=\"inherit\" weight=\"inherit\" variant=\"inherit\">\n {label}\n </Text>\n </span>\n </Flex>\n )}\n {(metadata || severityRequirement || badge || removeIcon) && (\n <Flex align=\"center\" justify=\"end\">\n {' '}\n {(!isIconOnly || /* This covers invalid cases*/ (isIconOnly && !iconOnlyRequirement)) &&\n badge && (\n <span class={endIconContainerClasses}>\n <Badge size=\"md\" variant=\"neutralSubtle\">\n {badge}\n </Badge>\n </span>\n )}\n {metadata && (\n <span class={navigationItemMatadata}>\n <Text>{'( ' + metadata + ' )'}</Text>\n </span>\n )}\n {severityRequirement && (\n <span class={endIconContainerClasses}>{IconComponent(severity)}</span>\n )}\n {removeIcon && !isLinkItem && <span class={removeClass}>{removeIcon}</span>}\n </Flex>\n )}\n </>\n );\n };\n const navlistItemRenderer = () => {\n return (\n <div\n role=\"tab\"\n {...mergeProps(tooltipEventHandlerProps, itemHandlers)}\n data-oj-key={itemKey}\n id={itemId}\n class={itemClasses}\n aria-selected={isSelected}\n ref={itemRef}\n aria-controls={ariaControls}>\n {isComplexItem ? complexItemRenderer() : labelRenderer()}\n {isIconOnly && tooltipContent}\n </div>\n );\n };\n const navlistLinkItemRenderer = () => {\n return (\n <div {...itemHandlers} class={itemClasses}>\n <a\n tabindex={-1}\n role=\"tab\"\n data-oj-key={itemKey}\n id={itemId}\n class={navigationItemLinkClass}\n aria-selected={isSelected}\n aria-controls={ariaControls}\n href={href}\n onClick={onClickLink}>\n {isComplexItem ? complexItemRenderer() : labelRenderer()}\n </a>\n </div>\n );\n };\n return isLinkItem ? navlistLinkItemRenderer() : navlistItemRenderer();\n}\n","import { BaseNavigationListItem, BaseNavigationListItemProps } from './BaseNavigationListItem';\n\ntype Link = {\n /**\n * Sets the URL that the hyperlink points to. If there is no valid URL do not use NavigationListLinkItem, use other types of NavigationListItem instead.\n */\n href: string;\n};\nexport type NavigationListLinkItemProps<K extends string | number> = Link &\n Pick<\n BaseNavigationListItemProps<K>,\n 'label' | 'itemKey' | 'badge' | 'metadata' | 'severity' | 'aria-controls'\n >;\n/**\n * NavigationListLinkItem is used to render links in a NavigationList. It allows to view the browser's built in link context menu to open the link in new browser tab.\n */\nexport function NavigationListLinkItem<K extends string | number>({\n itemKey,\n badge,\n metadata,\n severity,\n href,\n label,\n 'aria-controls': ariaControls\n}: NavigationListLinkItemProps<K>) {\n return (\n <BaseNavigationListItem\n aria-controls={ariaControls}\n itemKey={itemKey}\n label={label}\n badge={badge}\n metadata={metadata}\n severity={severity}\n href={href}></BaseNavigationListItem>\n );\n}\n"],"names":["onClickLink","event","preventDefault","BaseNavigationListItem","itemKey","label","badge","metadata","severity","removeIcon","icon","href","ariaControls","itemRef","useRef","itemId","itemHandlers","itemClasses","isSelected","labelContainerClasses","labelContainerStyle","isIconOnly","isEdgeEnd","stackedBadgeClasses","iconOnlyClasses","isCurrent","showFocusRing","useNavigationListItem","severityRequirement","undefined","IconComponent","severityValue","_jsx","ErrorS","SvgErrorS","color","WarningS","SvgWarningS","InformationS","SvgInformationS","SuccessS","SvgSuccessS","styles","iconLabelContainer","iconContainer","startIconPadding","endContentPadding","removeIconPaddingWithEndContent","navigationItemMetadata","navigationListItemLink","useComponentTheme","NavigationListItemRedwoodTheme","navigationItemMatadata","classNames","navigationItemLinkClass","endIconContainerClasses","startIconContainerClasses","navigationlistRemoveIcon","isComplexItem","removeClass","isLinkItem","labelRequirement","iconOnlyRequirement","showTooltip","tooltipContent","tooltipEventHandlerProps","onLogicalFocus","onLogicalBlur","useTabBarItemTooltip","isDisabled","position","current","labelRenderer","_jsxs","_Fragment","children","Flex","justify","jsx","class","align","flex","style","Text","size","weight","variant","complexItemRenderer","Badge","jsxs","tabindex","role","id","onClick","mergeProps","ref"],"mappings":"2dAiEA,MAAMA,EAAeC,IACnBA,EAAMC,gBAAgB,EAGlB,SAAUC,GAAkDC,QAChEA,EAAOC,MACPA,EAAKC,MACLA,EAAKC,SACLA,EAAQC,SACRA,EAAW,OAAMC,WACjBA,EAAUC,KACVA,EAAIC,KACJA,EACA,gBAAiBC,IAEjB,MAAMC,EAAUC,SAA8B,OAGxCC,OACJA,EAAMC,aACNA,EAAYC,YACZA,EAAWC,WACXA,EAAUC,sBACVA,EAAqBC,oBACrBA,EAAmBC,WACnBA,EAAUC,UACVA,EAASC,oBACTA,EAAmBC,gBACnBA,EAAeC,UACfA,EAASC,cACTA,GACEC,EAAAA,sBAAsB,CACxBvB,YAGIwB,IAAqC,SAAbpB,QAAoCqB,IAAbrB,GAE/CsB,EAAiBC,IACrB,OAAQA,GACN,IAAK,QACH,OAAOC,MAACC,EAAMC,UAAA,CAACC,MAAM,WACvB,IAAK,UACH,OAAOH,MAACI,EAAQC,YAAA,CAACF,MAAM,YACzB,IAAK,OACH,OAAOH,MAACM,EAAYC,gBAAA,CAACJ,MAAM,SAC7B,IAAK,eACH,OAAOH,MAACQ,EAAQC,YAAA,CAACN,MAAM,YACzB,QACE,OAAO,KACV,GAIDO,QAAQC,mBACNA,EAAkBC,cAClBA,EAAaC,iBACbA,EAAgBC,kBAChBA,EAAiBC,gCACjBA,EAA+BC,uBAC/BA,EAAsBC,uBACtBA,IAEAC,EAAiBA,kBACnBC,EAA8BA,gCAG1BC,EAAyBC,EAAUA,WAAC,CAACL,EAAwBF,IAC7DQ,EAA0BD,EAAAA,WAAW,CAACJ,IAEtCM,EAA0BF,EAAAA,WAAW,CACzCV,EACAC,EACAE,IAEIU,EAA4BH,EAAAA,WAAW,EAC1ChC,GAAcsB,EACfC,GAECvB,GAAcwB,EACfxB,GAAcG,KAGdkB,QAAQe,yBAAEA,IACRP,EAAAA,kBACFC,EAAAA,gCAGIO,EAAgBnD,GAAYqB,GAAuBtB,EACnDqD,EAAcN,EAAAA,WAAW,CAC7BI,EACAC,GAAiBX,GAChBW,GAAiBZ,IAGdc,GAAqB,MAARjD,EACbkD,GAAmBxD,KAAqB,MAAVA,QAA2BwB,IAAVxB,GAC/CyD,GAAsBpD,GAAgB,MAARA,GAAgBW,EAC9C0C,GAAcD,IAEdE,eAAEA,GAAcC,yBAAEA,GAAwBC,eAAEA,GAAcC,cAAEA,IAChEC,EAAAA,qBAAqB,CACnB/D,QACAgE,YAAaN,GAEbO,SAAWhD,EAAoB,QAAR,QAEvByC,KACGtC,GAAaC,GAAkBR,EAClCgD,GAAerD,EAAQ0D,SACb9C,GAAcC,GACxByC,MAIJ,MAAMK,GAAgB,IAElBC,EAAAA,KACGC,EAAAA,SAAA,CAAAC,SAAA,CAAAjE,GACCsB,EAAAA,IAAC4C,EAAAA,KAAK,CAAAC,QAAQ,iBACZ7C,EAAM8C,IAAA,OAAA,CAAAC,MAAOvB,EAAyBmB,SAAGjE,OAG3CW,GAAcwC,IACd7B,MAAC4C,EAAIA,KAAA,CAACI,MAAM,SAASH,QAAQ,QAAQI,KAAK,WAAUN,SAClD3C,EAAM8C,IAAA,OAAA,CAAAC,MAAO5D,EAAuB+D,MAAO9D,WACzCY,EAAAA,IAACmD,EAAAA,MAAKC,KAAK,UAAUC,OAAO,UAAUC,QAAQ,UAC3CX,SAAAtE,QAKRI,IAAemD,IAAc5B,EAAM8C,IAAA,OAAA,CAAAC,MAAOpB,EAAWgB,SAAGlE,OAKzD8E,GAAsB,IAExBd,OACGC,EAAAA,SAAA,CAAAC,SAAA,CAAAb,IACCW,cAAKM,MAAOvB,EAAyBmB,SAAA,CAClCjE,EACDsB,MAAA,OAAA,CAAM+C,MAAOxD,EACVoD,SAAArE,EACC0B,EAAAA,IAACwD,EAAKA,MAAA,CAACJ,KAAK,KAAKE,QAAQ,UAASX,SAC/BrE,IAED,WAIRe,GAAcX,GACdsB,EAAA8C,IAACF,EAAIA,KAAC,CAAAC,QAAQ,QAAOF,SACnB3C,cAAM+C,MAAOvB,EAAyBmB,SAAGjE,QAG1CW,GAA8CA,IAAeyC,KAC9DD,IACE7B,EAAA8C,IAACF,OAAI,CAACI,MAAM,SAASH,QAAQ,QAAQI,KAAK,oBACxCjD,EAAM8C,IAAA,OAAA,CAAAC,MAAO5D,EAAuB+D,MAAO9D,EACzCuD,SAAA3C,MAACmD,EAAAA,KAAK,CAAAC,KAAK,UAAUC,OAAO,UAAUC,QAAQ,UAASX,SACpDtE,SAKTE,GAAYqB,GAAuBtB,GAASG,IAC5CgE,EAACgB,KAAAb,QAAKI,MAAM,SAASH,QAAQ,gBAC1B,MACExD,GAA8CA,IAAeyC,KAC9DxD,GACE0B,EAAAA,IAAM,OAAA,CAAA+C,MAAOxB,EAAuBoB,SAClC3C,EAAC8C,IAAAU,EAAKA,OAACJ,KAAK,KAAKE,QAAQ,gBACtBX,SAAArE,MAIRC,GACCyB,EAAA8C,IAAA,OAAA,CAAMC,MAAO3B,EACXuB,SAAA3C,EAAA8C,IAACK,EAAIA,KAAA,CAAAR,SAAE,KAAOpE,EAAW,SAG5BqB,GACCI,EAAM8C,IAAA,OAAA,CAAAC,MAAOxB,EAAuBoB,SAAG7C,EAActB,KAEtDC,IAAemD,IAAc5B,cAAM+C,MAAOpB,EAAWgB,SAAGlE,UAwCnE,OAAOmD,GAhBH5B,EAAAA,IAAS,MAAA,IAAAhB,EAAc+D,MAAO9D,EAAW0D,SACvC3C,EAAAA,IACE,IAAA,CAAA0D,UAAW,EACXC,KAAK,MACQ,cAAAvF,EACbwF,GAAI7E,EACJgE,MAAOzB,kBACQpC,EAAU,gBACVN,EACfD,KAAMA,EACNkF,QAAS7F,EACR2E,SAAAjB,EAAgB6B,KAAwBf,SA3B7CC,cACEkB,KAAK,SACDG,EAAUA,WAAC7B,GAA0BjD,GAC5B,cAAAZ,EACbwF,GAAI7E,EACJgE,MAAO9D,EACQ,gBAAAC,EACf6E,IAAKlF,EACU,gBAAAD,YACd8C,EAAgB6B,KAAwBf,KACxCnD,GAAc2C,KAuBvB,+DCnRkE5D,QAChEA,EAAOE,MACPA,EAAKC,SACLA,EAAQC,SACRA,EAAQG,KACRA,EAAIN,MACJA,EACA,gBAAiBO,IAEjB,OACEoB,EAAAA,IAAC7B,EAAsB,CAAA,gBACNS,EACfR,QAASA,EACTC,MAAOA,EACPC,MAAOA,EACPC,SAAUA,EACVC,SAAUA,EACVG,KAAMA,GAEZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
define(['exports', 'preact/jsx-runtime', 'preact', 'preact/hooks', './classNames-08d99695', './TabBar-
|
|
2
|
-
//# sourceMappingURL=OverflowTabBar-
|
|
1
|
+
define(['exports', 'preact/jsx-runtime', 'preact', 'preact/hooks', './classNames-08d99695', './TabBar-92bac52f', './UNSAFE_OverflowTabBar/themes/OverflowTabBarStyles.css', './useDetectHorizontalOverflow-5882ed4b', './TabBarLinkItem-944b1e8d', './RemovableTabBarItem-9ae273fe', './TabBarItem-a39c5de3', './OverflowTabBarItem-0aa39512'], (function(e,a,t,l,r,s,i,o,n,m,c,d){"use strict";e.OverflowTabBar=function({items:e,layout:b="stretch",display:u="standard",size:y="md",edge:f="top",selection:v,truncation:I,onSelect:g,onRemove:B,"aria-label":K,"aria-labelledby":T,contextMenuConfig:h,testId:x}){const p="stacked"===u?{display:u}:{display:u,size:y},w=l.useRef(null),R=t.createRef(),[O,j]=l.useState(!1),M=l.useRef(!1),k=l.useCallback((e=>{"more"===e.value?M.current?j(!1):j(!0):g?.(e),M.current=!1}),[g]),S=l.useMemo((()=>e.map((e=>e.itemKey))),[e]),{visibleItemKeys:z,overflowItemKeys:C,maxWidths:W}=o.useDetectHorizontalOverflow({rootRef:R,keysArray:S,isTruncationDisabled:!(I&&"progressive"===I)}),A=r.classNames([i.styles.overflowTabBarBase]);return a.jsx("div",{ref:w,class:A,children:a.jsxs(s.TabBar,{ref:R,selection:v,onSelect:k,...p,layout:b,edge:f,onRemove:B,"aria-label":K,"aria-labelledby":T,testId:x,contextMenuConfig:h,children:[null!=z&&z.length>0&&e.filter((e=>z?.includes(e.itemKey))).map((e=>null!=e.href?a.jsx(n.TabBarLinkItem,{href:e.href,itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}):e.isRemovable?a.jsx(m.RemovableTabBarItem,{itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}):a.jsx(c.TabBarItem,{itemKey:e.itemKey,label:e.label,icon:e.icon,badge:e.badge,metadata:e.metadata,severity:e.severity,"aria-controls":e.tabPanelId,labelMaxWidth:W?.get(e.itemKey)}))),null!=C&&C.length>0&&a.jsx(d.OverflowTabBarItem,{isOpen:O,onClose:e=>{R.current&&["itemAction","dismissed"].includes(e.reason)&&R?.current?.focus(),"outsideMousedown"===e.reason&&(M.current=!0),j(!1)},overflowItemKey:"more",overflowItems:e.filter((e=>C?.includes(e.itemKey)))})]})})}}));
|
|
2
|
+
//# sourceMappingURL=OverflowTabBar-f8bf9356.js.map
|