@box/metadata-template-browser 2.3.3 → 2.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/browser-row.js +1 -1
- package/dist/chunks/metadata-template-browser-container.js +1 -1
- package/dist/esm/lib/components/search-list/search-list.js +1 -1
- package/dist/styles/browser-row.css +1 -1
- package/dist/types/lib/components/browser-row/browser-row.d.ts +3 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useConsumerState}from"../esm/lib/contexts/hooks.js";import{
|
|
1
|
+
import{useConsumerState}from"../esm/lib/contexts/hooks.js";import{Text,Tooltip,useFullTextTooltip}from"@box/blueprint-web";import classNames from"clsx";import{useRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{GridListItem}from"react-aria-components";import '../styles/browser-row.css';var browser_row_module_default={row:`_row_10rt4_2`,leadingIcon:`_leadingIcon_10rt4_15`,content:`_content_10rt4_27`,title:`_title_10rt4_34`,trailingSlotHoverOnly:`_trailingSlotHoverOnly_10rt4_44`,item:`_item_10rt4_48`,disabled:`_disabled_10rt4_69`,applied:`_applied_10rt4_76`,trailingSlot:`_trailingSlot_10rt4_44`,subtitle:`_subtitle_10rt4_105`};function BrowserRow({id,leadingIcon,title,subtitle,trailingSlot,isTrailingSlotHoverOnly,isApplied,tooltipContent}){let{isDisabled}=useConsumerState(),titleRef=useRef(null),{Wrapper:TitleTooltipWrapper,wrapperProps:titleTooltipWrapperProps}=useFullTextTooltip({ref:titleRef,textValue:title,skipOverflowCheck:tooltipContent!==void 0}),trailingSlotClassName=classNames(browser_row_module_default.trailingSlot,{[browser_row_module_default.trailingSlotHoverOnly]:isTrailingSlotHoverOnly}),rowContent=jsxs(`div`,{className:browser_row_module_default.row,children:[leadingIcon!==void 0&&jsx(`div`,{"aria-hidden":`true`,className:browser_row_module_default.leadingIcon,"data-testid":`leading-icon`,children:leadingIcon}),jsxs(`div`,{className:browser_row_module_default.content,children:[jsx(TitleTooltipWrapper,{...titleTooltipWrapperProps,content:title,children:jsx(Text,{ref:titleRef,as:`span`,className:browser_row_module_default.title,variant:`bodyDefault`,children:title})}),subtitle&&jsx(`div`,{className:browser_row_module_default.subtitle,children:subtitle})]}),trailingSlot!==void 0&&jsx(`div`,{className:trailingSlotClassName,children:trailingSlot})]}),textValue=typeof tooltipContent==`string`&&tooltipContent!==title?`${title}. ${tooltipContent}`:title,item=jsx(GridListItem,{"aria-disabled":isApplied&&!isDisabled?!0:void 0,className:classNames(browser_row_module_default.item,{[browser_row_module_default.disabled]:isDisabled,[browser_row_module_default.applied]:isApplied&&!isDisabled}),id,isDisabled,textValue,children:rowContent});return tooltipContent===void 0?item:jsx(Tooltip,{content:tooltipContent,children:item})}export{BrowserRow as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useBrowseNode,useBrowseState,useBrowserActions,useConsumerState,useNavigationState,useSearchState}from"../esm/lib/contexts/hooks.js";import{t as BreadcrumbNavigation}from"./breadcrumb-navigation.js";import{messages}from"../esm/lib/components/messages.js";import{useIsInitialBrowseLoading}from"../esm/lib/hooks/use-is-initial-browse-loading.js";import{t as MetadataTemplateBrowserListBox}from"./metadata-template-browser-list-box.js";import{Button,SearchInput}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{Plus}from"@box/blueprint-web-assets/icons/
|
|
1
|
+
import{useBrowseNode,useBrowseState,useBrowserActions,useConsumerState,useNavigationState,useSearchState}from"../esm/lib/contexts/hooks.js";import{t as BreadcrumbNavigation}from"./breadcrumb-navigation.js";import{messages}from"../esm/lib/components/messages.js";import{useIsInitialBrowseLoading}from"../esm/lib/hooks/use-is-initial-browse-loading.js";import{t as MetadataTemplateBrowserListBox}from"./metadata-template-browser-list-box.js";import{Button,SearchInput}from"@box/blueprint-web";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{Plus}from"@box/blueprint-web-assets/icons/Medium";import '../styles/metadata-template-browser-container.css';var metadata_template_browser_container_module_default={container:`_container_1dqk1_1`,searchInput:`_searchInput_1dqk1_9`,createTemplateButton:`_createTemplateButton_1dqk1_13`};function MetadataTemplateBrowserContainer(){let{formatMessage}=useIntl(),{isDisabled}=useConsumerState(),{setSearchValue,createTemplate}=useBrowserActions(),{namespaceFQN,canCreateInCurrentNamespace}=useNavigationState(),{searchValue}=useSearchState(),{namespaces,templates,isNamespacesExhausted}=useBrowseNode(),{isFetching}=useBrowseState(),isInitialBrowseLoading=useIsInitialBrowseLoading(),isBrowseListEmpty=!isFetching&&isNamespacesExhausted&&namespaces.length===0&&templates.length===0,showCreateButton=canCreateInCurrentNamespace&&!isInitialBrowseLoading&&!isFetching&&!isBrowseListEmpty&&searchValue.length===0;return jsxs(`div`,{className:metadata_template_browser_container_module_default.container,children:[jsx(SearchInput,{className:metadata_template_browser_container_module_default.searchInput,disabled:isDisabled||isInitialBrowseLoading,onChange:setSearchValue,placeholder:formatMessage(messages.searchInputPlaceholder),searchInputAriaLabel:formatMessage(messages.searchInputAriaLabel),searchInputClearAriaLabel:formatMessage(messages.searchInputClearAriaLabel)}),!isInitialBrowseLoading&&jsx(BreadcrumbNavigation,{}),showCreateButton&&jsx(Button,{className:metadata_template_browser_container_module_default.createTemplateButton,disabled:isDisabled,startIcon:Plus,onClick:()=>createTemplate(namespaceFQN),variant:`tertiary`,size:`large`,children:formatMessage(messages.createTemplateButtonLabel)}),jsx(MetadataTemplateBrowserListBox,{})]})}export{MetadataTemplateBrowserContainer as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useBrowseState,useBrowserActions,useSearchState}from"../../contexts/hooks.js";import{t as TemplateRowVariant}from"../../../../chunks/types.js";import{ErrorState}from"../error-state/error-state.js";import{t as LoaderSkeleton}from"../../../../chunks/loader-skeleton.js";import{TemplateRow}from"../template-row/template-row.js";import{t as VirtualizedGridList}from"../../../../chunks/virtualized-grid-list.js";import{messages}from"./messages.js";import{EmptyState,Text}from"@box/blueprint-web";import{useIntl}from"react-intl";import{useCallback}from"react";import{jsx}from"react/jsx-runtime";import{CustomTemplate}from"@box/blueprint-web-assets/illustrations/Small";function SearchList({onAction,selectedKeys}){let{formatMessage}=useIntl(),{searchResults,searchNextMarker,isFetchingSearch,searchError}=useSearchState(),{isFetchingMore,loadMoreError}=useBrowseState(),{loadMore,retry,editTemplate}=useBrowserActions(),hasMoreSearchItems=searchNextMarker!==void 0,renderItem=useCallback(item=>jsx(TemplateRow,{onEdit:editTemplate,template:item.template,variant:
|
|
1
|
+
import{useBrowseState,useBrowserActions,useSearchState}from"../../contexts/hooks.js";import{t as TemplateRowVariant}from"../../../../chunks/types.js";import{ErrorState}from"../error-state/error-state.js";import{t as LoaderSkeleton}from"../../../../chunks/loader-skeleton.js";import{TemplateRow}from"../template-row/template-row.js";import{t as VirtualizedGridList}from"../../../../chunks/virtualized-grid-list.js";import{messages}from"./messages.js";import{EmptyState,Text}from"@box/blueprint-web";import{useIntl}from"react-intl";import{useCallback,useMemo}from"react";import{jsx}from"react/jsx-runtime";import{CustomTemplate}from"@box/blueprint-web-assets/illustrations/Small";var hasAncestorPath=template=>Array.isArray(template.ancestors)&&template.ancestors.length>0;function SearchList({onAction,selectedKeys}){let{formatMessage}=useIntl(),{searchResults,searchNextMarker,isFetchingSearch,searchError}=useSearchState(),{isFetchingMore,loadMoreError}=useBrowseState(),{loadMore,retry,editTemplate}=useBrowserActions(),hasMoreSearchItems=searchNextMarker!==void 0,rowVariant=useMemo(()=>searchResults.some(hasAncestorPath)?TemplateRowVariant.Search:TemplateRowVariant.Browse,[searchResults]),renderItem=useCallback(item=>jsx(TemplateRow,{onEdit:editTemplate,template:item.template,variant:rowVariant}),[editTemplate,rowVariant]);if(isFetchingSearch)return jsx(LoaderSkeleton,{});if(searchError!==null)return jsx(ErrorState,{body:formatMessage(messages.searchErrorBody),onRetry:retry});if(searchResults.length===0)return jsx(EmptyState,{body:jsx(Text,{as:`p`,children:formatMessage(messages.emptyStateBody)}),heading:jsx(Text,{as:`p`,children:formatMessage(messages.emptyStateHeading)}),illustration:CustomTemplate,size:`small`});let items=searchResults.map(template=>({id:template.id,template}));return jsx(VirtualizedGridList,{ariaLabel:formatMessage(messages.listAriaLabel),isFetchingMore,items,listType:rowVariant,loadMoreError,onAction,hasMoreItems:hasMoreSearchItems,onLoadMore:loadMore,onRetry:loadMore,selectedKeys,children:renderItem})}export{SearchList};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._row_10rt4_2{border-radius:var(--bp-radius-06);box-sizing:border-box;cursor:pointer;align-items:center;gap:var(--bp-space-020,8px);outline-offset:-2px;padding:var(--bp-space-020,8px) var(--bp-space-030,12px);flex:1;width:100%;display:flex}._leadingIcon_10rt4_15{flex-shrink:0;align-items:center;display:flex}._leadingIcon_10rt4_15>svg{height:var(--bp-size-050);width:var(--bp-size-050)}._content_10rt4_27{flex:1;min-width:0}._title_10rt4_34{overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;display:block;overflow:hidden}._trailingSlotHoverOnly_10rt4_44{opacity:0}._item_10rt4_48{outline:none;min-height:40px;display:flex}._item_10rt4_48:hover ._row_10rt4_2{background-color:var(--bp-surface-surface-hover)}._item_10rt4_48[data-selected] ._row_10rt4_2{background-color:var(--bp-surface-item-small-surface-selected);outline:var(--bp-border-02) solid var(--bp-border-list-item-border-selected)}._item_10rt4_48[data-focus-visible] ._row_10rt4_2{outline:2px solid var(--bp-outline-focus-on-light)}._item_10rt4_48._disabled_10rt4_69 ._row_10rt4_2{cursor:default;opacity:.3}._item_10rt4_48._applied_10rt4_76 ._row_10rt4_2{cursor:default}._item_10rt4_48._applied_10rt4_76 ._content_10rt4_27,._item_10rt4_48._applied_10rt4_76 ._leadingIcon_10rt4_15{opacity:.3}._item_10rt4_48._disabled_10rt4_69[data-focus-visible] ._row_10rt4_2{opacity:1}._item_10rt4_48:is(._disabled_10rt4_69,._applied_10rt4_76):hover:not([data-selected]) ._row_10rt4_2,._item_10rt4_48:is(._disabled_10rt4_69,._applied_10rt4_76)[data-hovered]:not([data-selected]) ._row_10rt4_2{background-color:#0000}._item_10rt4_48:hover ._trailingSlotHoverOnly_10rt4_44,._item_10rt4_48[data-hovered] ._trailingSlotHoverOnly_10rt4_44,._item_10rt4_48:focus-within ._trailingSlotHoverOnly_10rt4_44{opacity:1}._trailingSlot_10rt4_44{flex-shrink:0}._subtitle_10rt4_105{overflow-wrap:break-word;display:block}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
interface BrowserRowProps {
|
|
2
2
|
/** react-aria requires a unique string key for each item in the list */
|
|
3
3
|
readonly id: string;
|
|
4
|
-
/**
|
|
4
|
+
/** 20px icon on the left. Omit to render no icon. */
|
|
5
5
|
readonly leadingIcon?: React.ReactNode;
|
|
6
|
-
/** Primary display text —
|
|
6
|
+
/** Primary display text — CSS-truncated with a row-level tooltip when ellipsized. */
|
|
7
7
|
readonly title: string;
|
|
8
8
|
/** Optional second line below the title. Used by SearchTemplateRow for breadcrumb path. */
|
|
9
9
|
readonly subtitle?: React.ReactNode;
|
|
@@ -26,6 +26,7 @@ interface BrowserRowProps {
|
|
|
26
26
|
/**
|
|
27
27
|
* When provided, a tooltip with this content is shown on hover over the row.
|
|
28
28
|
* Typically used together with `isApplied` to explain why the row is disabled.
|
|
29
|
+
* Takes precedence over the auto tooltip for an ellipsized title.
|
|
29
30
|
*/
|
|
30
31
|
readonly tooltipContent?: React.ReactNode;
|
|
31
32
|
}
|