@box/content-field 2.2.64 → 3.0.0

package/dist/chunks/content-field-icon.js

@@ -1 +1 @@
-import{FileDefault,Folder}from"@box/blueprint-web-assets/icons/Fill";import{bpSpace040,bpSpace060}from"@box/blueprint-web-assets/tokens/tokens";import{createElement}from"react";import{FileVariable,FolderVariable}from"@box/blueprint-web-assets/icons/Content";import{jsx}from"react/jsx-runtime";import '../styles/content-field-icon.css';var content_field_module_default={contentFieldWrapper:`_contentFieldWrapper_hg8tt_1`,contentField:`_contentField_hg8tt_1`,inlineError:`_inlineError_hg8tt_64`,contentButton:`_contentButton_hg8tt_68`,error:`_error_hg8tt_82`,hasSelection:`_hasSelection_hg8tt_86`,disabled:`_disabled_hg8tt_99`,labelWrapper:`_labelWrapper_hg8tt_116`,contentLabel:`_contentLabel_hg8tt_122`,variable:`_variable_hg8tt_127`,variableError:`_variableError_hg8tt_131`,circledIconContainer:`_circledIconContainer_hg8tt_135`,clearButton:`_clearButton_hg8tt_146`},ContentFieldIcon=({icon})=>createElement(icon,{role:`presentation`,height:bpSpace060,width:bpSpace060}),ContentFieldCircledIcon=({icon})=>jsx(`div`,{className:content_field_module_default.circledIconContainer,children:createElement(icon,{role:`presentation`,height:bpSpace040,width:bpSpace040})}),ContentFieldFolderIcon=()=>jsx(ContentFieldCircledIcon,{icon:Folder}),ContentFieldFileIcon=()=>jsx(ContentFieldCircledIcon,{icon:FileDefault}),ContentFieldVariableFolderIcon=()=>jsx(ContentFieldIcon,{icon:FolderVariable}),ContentFieldVariableFileIcon=()=>jsx(ContentFieldIcon,{icon:FileVariable});export{ContentFieldVariableFileIcon as a,ContentFieldIcon as i,ContentFieldFileIcon as n,ContentFieldVariableFolderIcon as o,ContentFieldFolderIcon as r,content_field_module_default as s,ContentFieldCircledIcon as t};
+import{FileDefault,Folder}from"@box/blueprint-web-assets/icons/Fill";import{bpSpace040,bpSpace060}from"@box/blueprint-web-assets/tokens/tokens";import{createElement}from"react";import{FileVariable,FolderVariable}from"@box/blueprint-web-assets/icons/Content";import{jsx}from"react/jsx-runtime";import '../styles/content-field-icon.css';var content_field_module_default={contentFieldWrapper:`_contentFieldWrapper_kb5hh_27`,label:`_label_kb5hh_53`,hidden:`_hidden_kb5hh_118`,contentField:`_contentField_kb5hh_27`,inlineError:`_inlineError_kb5hh_131`,contentButton:`_contentButton_kb5hh_135`,error:`_error_kb5hh_149`,hasSelection:`_hasSelection_kb5hh_153`,disabled:`_disabled_kb5hh_166`,labelWrapper:`_labelWrapper_kb5hh_183`,contentLabel:`_contentLabel_kb5hh_189`,variable:`_variable_kb5hh_194`,variableError:`_variableError_kb5hh_198`,circledIconContainer:`_circledIconContainer_kb5hh_202`,clearButton:`_clearButton_kb5hh_213`},ContentFieldIcon=({icon})=>createElement(icon,{role:`presentation`,height:bpSpace060,width:bpSpace060}),ContentFieldCircledIcon=({icon})=>jsx(`div`,{className:content_field_module_default.circledIconContainer,children:createElement(icon,{role:`presentation`,height:bpSpace040,width:bpSpace040})}),ContentFieldFolderIcon=()=>jsx(ContentFieldCircledIcon,{icon:Folder}),ContentFieldFileIcon=()=>jsx(ContentFieldCircledIcon,{icon:FileDefault}),ContentFieldVariableFolderIcon=()=>jsx(ContentFieldIcon,{icon:FolderVariable}),ContentFieldVariableFileIcon=()=>jsx(ContentFieldIcon,{icon:FileVariable});export{ContentFieldVariableFileIcon as a,ContentFieldIcon as i,ContentFieldFileIcon as n,ContentFieldVariableFolderIcon as o,ContentFieldFolderIcon as r,content_field_module_default as s,ContentFieldCircledIcon as t};

package/dist/esm/lib/content-field.js

@@ -1 +1 @@
-import{a as ContentFieldVariableFileIcon,i as ContentFieldIcon,n as ContentFieldFileIcon,o as ContentFieldVariableFolderIcon,r as ContentFieldFolderIcon,s as content_field_module_default}from"../../chunks/content-field-icon.js";import{useContentFieldTooltip}from"./hooks/useContentFieldTooltip.js";import messages_default from"./messages.js";import{Button}from"@ariakit/react";import{InlineError,Text,useUniqueId}from"@box/blueprint-web";import{XMark}from"@box/blueprint-web-assets/icons/Fill";import{bpSpace040}from"@box/blueprint-web-assets/tokens/tokens";import clsx from"clsx";import{forwardRef,useRef}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var isVariable=title=>title?.type===`variable`,ContentIcon=({icon,variant,isVariableWithTitle})=>icon?jsx(ContentFieldIcon,{icon}):jsx(isVariableWithTitle?variant===`file`?ContentFieldVariableFileIcon:ContentFieldVariableFolderIcon:variant===`file`?ContentFieldFileIcon:ContentFieldFolderIcon,{}),ContentField=forwardRef(({icon,placeholder,onClick,onClear,title,error,clearButtonRef,disabled=!1,variant=`folder`,triggerRef,...rest},forwardedRef)=>{let intl=useIntl(),{titleValue}=title??{},labelRef=useRef(null),textValue=titleValue??placeholder,{TooltipComponent,tooltipProps}=useContentFieldTooltip(labelRef,title),handleOnClickClearButton=event=>{labelRef.current?.focus(),onClear(event)},inlineErrorId=useUniqueId(`inline-error-`),isVariableWithTitle=isVariable(title)&&!!titleValue,tooltipVariant=error?`error`:`standard`;return jsxs(`div`,{ref:forwardedRef,className:content_field_module_default.contentFieldWrapper,"data-modern":!0,children:[jsxs(`div`,{className:content_field_module_default.contentField,children:[jsx(TooltipComponent,{...tooltipProps,variant:tooltipVariant,children:jsxs(Button,{ref:triggerRef,"aria-describedby":inlineErrorId,className:clsx(content_field_module_default.contentButton,{[content_field_module_default.hasSelection]:title,[content_field_module_default.error]:!!error,[content_field_module_default.disabled]:disabled}),disabled,onClick,type:`button`,...rest,children:[jsx(ContentIcon,{icon,isVariableWithTitle,variant}),jsx(`div`,{className:content_field_module_default.labelWrapper,children:jsx(Text,{ref:labelRef,as:`span`,className:clsx(content_field_module_default.contentLabel,{[content_field_module_default.variable]:isVariableWithTitle,[content_field_module_default.variableError]:isVariableWithTitle&&error}),variant:isVariableWithTitle?`bodyDefaultBold`:`bodyDefault`,children:textValue})})]})}),titleValue&&jsx(Button,{ref:clearButtonRef,"aria-label":intl.formatMessage(messages_default.clearButtonLabel),className:clsx(content_field_module_default.clearButton,{[content_field_module_default.hasSelection]:titleValue,[content_field_module_default.error]:!!error,[content_field_module_default.disabled]:disabled}),disabled,onClick:handleOnClickClearButton,type:`button`,children:jsx(XMark,{height:bpSpace040,role:`presentation`,width:bpSpace040})})]}),jsx(InlineError,{className:content_field_module_default.inlineError,id:inlineErrorId,children:error})]})});export{ContentField};
+import{a as ContentFieldVariableFileIcon,i as ContentFieldIcon,n as ContentFieldFileIcon,o as ContentFieldVariableFolderIcon,r as ContentFieldFolderIcon,s as content_field_module_default}from"../../chunks/content-field-icon.js";import{useContentFieldTooltip}from"./hooks/useContentFieldTooltip.js";import messages_default from"./messages.js";import{Button}from"@ariakit/react";import{InlineError,Text,useLabelable,useUniqueId}from"@box/blueprint-web";import{XMark}from"@box/blueprint-web-assets/icons/Fill";import{bpSpace040}from"@box/blueprint-web-assets/tokens/tokens";import clsx from"clsx";import{forwardRef,useRef}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var isVariable=title=>title?.type===`variable`,ContentIcon=({icon,variant,isVariableWithTitle})=>icon?jsx(ContentFieldIcon,{icon}):jsx(isVariableWithTitle?variant===`file`?ContentFieldVariableFileIcon:ContentFieldVariableFolderIcon:variant===`file`?ContentFieldFileIcon:ContentFieldFolderIcon,{}),ContentField=forwardRef(({icon,placeholder,onClick,onClear,title,error,clearButtonRef,disabled=!1,variant=`folder`,triggerRef,label,hideLabel,id,...rest},forwardedRef)=>{let intl=useIntl(),{titleValue}=title??{},labelRef=useRef(null),textValue=titleValue??placeholder,{TooltipComponent,tooltipProps}=useContentFieldTooltip(labelRef,title),handleOnClickClearButton=event=>{labelRef.current?.focus(),onClear(event)},uniqueId=useUniqueId(`content-field-`),triggerId=id||uniqueId,Label=useLabelable(label,triggerId),inlineErrorId=useUniqueId(`inline-error-`),isVariableWithTitle=isVariable(title)&&!!titleValue,tooltipVariant=error?`error`:`standard`;return jsxs(`div`,{ref:forwardedRef,className:content_field_module_default.contentFieldWrapper,"data-modern":!0,children:[jsx(Label,{className:clsx(content_field_module_default.label,{[content_field_module_default.hidden]:hideLabel}),hideLabel}),jsxs(`div`,{className:content_field_module_default.contentField,children:[jsx(TooltipComponent,{...tooltipProps,variant:tooltipVariant,children:jsxs(Button,{ref:triggerRef,"aria-describedby":inlineErrorId,className:clsx(content_field_module_default.contentButton,{[content_field_module_default.hasSelection]:title,[content_field_module_default.error]:!!error,[content_field_module_default.disabled]:disabled}),disabled,id:triggerId,onClick,type:`button`,...rest,children:[jsx(ContentIcon,{icon,isVariableWithTitle,variant}),jsx(`div`,{className:content_field_module_default.labelWrapper,children:jsx(Text,{ref:labelRef,as:`span`,className:clsx(content_field_module_default.contentLabel,{[content_field_module_default.variable]:isVariableWithTitle,[content_field_module_default.variableError]:isVariableWithTitle&&error}),variant:isVariableWithTitle?`bodyDefaultBold`:`bodyDefault`,children:textValue})})]})}),titleValue&&jsx(Button,{ref:clearButtonRef,"aria-label":intl.formatMessage(messages_default.clearButtonLabel),className:clsx(content_field_module_default.clearButton,{[content_field_module_default.hasSelection]:titleValue,[content_field_module_default.error]:!!error,[content_field_module_default.disabled]:disabled}),disabled,onClick:handleOnClickClearButton,type:`button`,children:jsx(XMark,{height:bpSpace040,role:`presentation`,width:bpSpace040})})]}),jsx(InlineError,{className:content_field_module_default.inlineError,id:inlineErrorId,children:error})]})});export{ContentField};

package/dist/styles/content-field-icon.css

@@ -1 +1 @@
-._contentFieldWrapper_hg8tt_1[data-modern=false]{--content-field-border-radius:var(--radius-2);--content-field-content-button-padding-x:var(--space-3);--content-field-clear-button-padding-x:var(--space-2);--content-field-anti-border-jitter-padding:var(--border-1);--content-field-inactive-surface-background:var(--surface-cta-surface-secondary);--content-field-inactive-surface-border-width:var(--border-1);--content-field-inactive-surface-border-color:var(--border-cta-border-secondary);--content-field-active-surface-background:var(--surface-cta-surface-secondary-hover);--content-field-font-size:var(--body-default-bold-font-size);--content-field-focus-surface-border-width:var(--border-2);--content-field-focus-surface-border-color:var(--outline-focus-on-light);--content-field-error-border-width:var(--border-2);--content-field-error-border-color:var(--border-dropdown-border-error);--content-field-error-border-hover-background-color:var(--border-cta-border-secondary);--content-field-height:var(--size-10);--content-field-box-shadow:var(--dropshadow-2);--content-field-gap:var(--space-2);--content-field-padding-block:var(--space-2);--content-field-circled-icon-container-size:var(--space-6);--content-field-circled-icon-container-background:var(--surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom:var(--space-1);--content-field-inline-error-margin-block-start:var(--space-2)}._contentFieldWrapper_hg8tt_1[data-modern=true]{--content-field-border-radius:var(--bp-radius-06);--content-field-content-button-padding-x:var(--bp-space-030);--content-field-clear-button-padding-x:var(--bp-space-030);--content-field-anti-border-jitter-padding:var(--bp-border-01);--content-field-inactive-surface-background:var(--bp-surface-cta-surface-secondary);--content-field-inactive-surface-border-width:var(--bp-border-01);--content-field-inactive-surface-border-color:var(--bp-border-cta-border-secondary);--content-field-active-surface-background:var(--bp-surface-cta-surface-secondary-hover);--content-field-font-size:var(--bp-font-size-05);--content-field-focus-surface-border-width:var(--bp-border-02);--content-field-focus-surface-border-color:var(--bp-outline-focus-on-light);--content-field-error-border-width:var(--bp-border-02);--content-field-error-border-color:var(--bp-border-dropdown-border-error);--content-field-error-border-hover-background-color:var(--bp-border-cta-border-secondary);--content-field-height:var(--bp-size-100);--content-field-box-shadow:var(--dropshadow-2);--content-field-gap:var(--bp-space-020);--content-field-padding-block:var(--bp-space-020);--content-field-circled-icon-container-size:var(--bp-space-060);--content-field-circled-icon-container-background:var(--bp-surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom:var(--bp-space-010);--content-field-inline-error-margin-block-start:var(--bp-space-020)}._contentFieldWrapper_hg8tt_1{width:100%}._contentField_hg8tt_1{height:var(--content-field-height);border-radius:var(--content-field-border-radius);box-shadow:var(--content-field-box-shadow);flex-direction:row;justify-content:space-between;display:flex}._inlineError_hg8tt_64{margin-block-start:var(--content-field-inline-error-margin-block-start)}._contentButton_hg8tt_68{all:unset;gap:var(--content-field-gap);font-size:var(--content-field-font-size);min-width:0;padding:var(--content-field-anti-border-jitter-padding) var(--content-field-content-button-padding-x);border-radius:var(--content-field-border-radius);cursor:pointer;background:var(--content-field-inactive-surface-background);border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color);flex:1;align-items:center;display:flex}._contentButton_hg8tt_68._error_hg8tt_82{border:var(--content-field-error-border-width) solid var(--content-field-error-border-color);position:relative}._contentButton_hg8tt_68._error_hg8tt_82._hasSelection_hg8tt_86:hover:after{background-color:var(--content-field-error-border-hover-background-color);content:"";width:1px;height:100%;position:absolute;top:0;right:0}._contentButton_hg8tt_68._hasSelection_hg8tt_86{border-radius:var(--content-field-border-radius) 0 0 var(--content-field-border-radius);border-right:none}._contentButton_hg8tt_68._disabled_hg8tt_99{opacity:.5;border-right:none}._contentButton_hg8tt_68:hover{background:var(--content-field-active-surface-background)}._contentButton_hg8tt_68:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._contentButton_hg8tt_68:focus-visible:not(._error_hg8tt_82){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-content-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._contentButton_hg8tt_68 ._labelWrapper_hg8tt_116{flex-grow:1;align-items:center;min-width:0;display:flex}._contentButton_hg8tt_68 ._labelWrapper_hg8tt_116 span._contentLabel_hg8tt_122{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._contentButton_hg8tt_68 ._labelWrapper_hg8tt_116 span._contentLabel_hg8tt_122._variable_hg8tt_127{color:var(--purple-rain-100);text-decoration:underline}._contentButton_hg8tt_68 ._labelWrapper_hg8tt_116 span._contentLabel_hg8tt_122._variableError_hg8tt_131{color:var(--text-text-error-on-light)}._circledIconContainer_hg8tt_135{width:var(--content-field-circled-icon-container-size);min-width:var(--content-field-circled-icon-container-size);height:var(--content-field-circled-icon-container-size);background:var(--content-field-circled-icon-container-background);border-radius:50%;justify-content:center;align-items:center;display:flex}._clearButton_hg8tt_146{all:unset;background:var(--content-field-inactive-surface-background);border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color);padding:var(--content-field-anti-border-jitter-padding) var(--content-field-clear-button-padding-x);background:var(--content-field-inactive-surface-background);border-radius:0 var(--content-field-border-radius) var(--content-field-border-radius) 0;cursor:pointer;border-left:none;align-items:center;display:flex}._clearButton_hg8tt_146:hover{background:var(--content-field-active-surface-background)}._clearButton_hg8tt_146._error_hg8tt_82{border:var(--content-field-error-border-width) solid var(--content-field-error-border-color);position:relative}._clearButton_hg8tt_146._error_hg8tt_82._hasSelection_hg8tt_86:hover:after{background-color:var(--content-field-error-border-hover-background-color);content:"";width:1px;height:100%;position:absolute;top:0;left:-1px}._clearButton_hg8tt_146._error_hg8tt_82{border-left:none}._clearButton_hg8tt_146:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._clearButton_hg8tt_146:focus-visible:not(._error_hg8tt_82){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-clear-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._clearButton_hg8tt_146._disabled_hg8tt_99{opacity:.5;border-left:none}
+._contentFieldWrapper_kb5hh_27[data-modern=false]{--content-field-border-radius:var(--radius-2);--content-field-content-button-padding-x:var(--space-3);--content-field-clear-button-padding-x:var(--space-2);--content-field-anti-border-jitter-padding:var(--border-1);--content-field-inactive-surface-background:var(--surface-cta-surface-secondary);--content-field-inactive-surface-border-width:var(--border-1);--content-field-inactive-surface-border-color:var(--border-cta-border-secondary);--content-field-active-surface-background:var(--surface-cta-surface-secondary-hover);--content-field-font-size:var(--body-default-bold-font-size);--content-field-focus-surface-border-width:var(--border-2);--content-field-focus-surface-border-color:var(--outline-focus-on-light);--content-field-error-border-width:var(--border-2);--content-field-error-border-color:var(--border-dropdown-border-error);--content-field-error-border-hover-background-color:var(--border-cta-border-secondary);--content-field-height:var(--size-10);--content-field-box-shadow:var(--dropshadow-2);--content-field-gap:var(--space-2);--content-field-padding-block:var(--space-2);--content-field-circled-icon-container-size:var(--space-6);--content-field-circled-icon-container-background:var(--surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom:var(--space-1);--content-field-inline-error-margin-block-start:var(--space-2);--content-field-label-color:var(--text-text-on-light);--content-field-label-gap:var(--space-2)}._contentFieldWrapper_kb5hh_27[data-modern=false] ._label_kb5hh_53{font-weight:var(--body-default-bold-font-weight);font-size:var(--body-default-bold-font-size);font-family:var(--body-default-bold-font-family);line-height:var(--body-default-bold-line-height);letter-spacing:var(--body-default-bold-letter-spacing);text-transform:var(--body-default-bold-text-case);-webkit-text-decoration:var(--body-default-bold-text-decoration);text-decoration:var(--body-default-bold-text-decoration)}._contentFieldWrapper_kb5hh_27[data-modern=true]{--content-field-border-radius:var(--bp-radius-06);--content-field-content-button-padding-x:var(--bp-space-030);--content-field-clear-button-padding-x:var(--bp-space-030);--content-field-anti-border-jitter-padding:var(--bp-border-01);--content-field-inactive-surface-background:var(--bp-surface-cta-surface-secondary);--content-field-inactive-surface-border-width:var(--bp-border-01);--content-field-inactive-surface-border-color:var(--bp-border-cta-border-secondary);--content-field-active-surface-background:var(--bp-surface-cta-surface-secondary-hover);--content-field-font-size:var(--bp-font-size-05);--content-field-focus-surface-border-width:var(--bp-border-02);--content-field-focus-surface-border-color:var(--bp-outline-focus-on-light);--content-field-error-border-width:var(--bp-border-02);--content-field-error-border-color:var(--bp-border-dropdown-border-error);--content-field-error-border-hover-background-color:var(--bp-border-cta-border-secondary);--content-field-height:var(--bp-size-100);--content-field-box-shadow:var(--dropshadow-2);--content-field-gap:var(--bp-space-020);--content-field-padding-block:var(--bp-space-020);--content-field-circled-icon-container-size:var(--bp-space-060);--content-field-circled-icon-container-background:var(--bp-surface-cta-surface-icon-utility);--content-field-variable-icon-margin-bottom:var(--bp-space-010);--content-field-inline-error-margin-block-start:var(--bp-space-020);--content-field-label-color:var(--bp-text-text-on-light);--content-field-label-gap:var(--bp-space-020)}._contentFieldWrapper_kb5hh_27[data-modern=true] ._label_kb5hh_53{font-weight:var(--bp-font-weight-bold);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._contentFieldWrapper_kb5hh_27[data-modern=true] ._label_kb5hh_53{letter-spacing:.00625rem;text-transform:none;font-family:Inter Variable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.375rem;text-decoration:none}._contentFieldWrapper_kb5hh_27{flex-direction:column;width:100%;display:flex}._contentFieldWrapper_kb5hh_27 ._label_kb5hh_53{flex:0 0 fit-content;width:fit-content;color:var(--content-field-label-color)}._contentFieldWrapper_kb5hh_27 ._label_kb5hh_53:not(._hidden_kb5hh_118){margin-block-end:var(--content-field-label-gap)}._contentField_kb5hh_27{height:var(--content-field-height);border-radius:var(--content-field-border-radius);box-shadow:var(--content-field-box-shadow);flex-direction:row;justify-content:space-between;display:flex}._inlineError_kb5hh_131{margin-block-start:var(--content-field-inline-error-margin-block-start)}._contentButton_kb5hh_135{all:unset;gap:var(--content-field-gap);font-size:var(--content-field-font-size);min-width:0;padding:var(--content-field-anti-border-jitter-padding) var(--content-field-content-button-padding-x);border-radius:var(--content-field-border-radius);cursor:pointer;background:var(--content-field-inactive-surface-background);border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color);flex:1;align-items:center;display:flex}._contentButton_kb5hh_135._error_kb5hh_149{border:var(--content-field-error-border-width) solid var(--content-field-error-border-color);position:relative}._contentButton_kb5hh_135._error_kb5hh_149._hasSelection_kb5hh_153:hover:after{background-color:var(--content-field-error-border-hover-background-color);content:"";width:1px;height:100%;position:absolute;top:0;right:0}._contentButton_kb5hh_135._hasSelection_kb5hh_153{border-radius:var(--content-field-border-radius) 0 0 var(--content-field-border-radius);border-right:none}._contentButton_kb5hh_135._disabled_kb5hh_166{opacity:.5;border-right:none}._contentButton_kb5hh_135:hover{background:var(--content-field-active-surface-background)}._contentButton_kb5hh_135:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._contentButton_kb5hh_135:focus-visible:not(._error_kb5hh_149){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-content-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._contentButton_kb5hh_135 ._labelWrapper_kb5hh_183{flex-grow:1;align-items:center;min-width:0;display:flex}._contentButton_kb5hh_135 ._labelWrapper_kb5hh_183 span._contentLabel_kb5hh_189{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._contentButton_kb5hh_135 ._labelWrapper_kb5hh_183 span._contentLabel_kb5hh_189._variable_kb5hh_194{color:var(--purple-rain-100);text-decoration:underline}._contentButton_kb5hh_135 ._labelWrapper_kb5hh_183 span._contentLabel_kb5hh_189._variableError_kb5hh_198{color:var(--text-text-error-on-light)}._circledIconContainer_kb5hh_202{width:var(--content-field-circled-icon-container-size);min-width:var(--content-field-circled-icon-container-size);height:var(--content-field-circled-icon-container-size);background:var(--content-field-circled-icon-container-background);border-radius:50%;justify-content:center;align-items:center;display:flex}._clearButton_kb5hh_213{all:unset;background:var(--content-field-inactive-surface-background);border:var(--content-field-inactive-surface-border-width) solid var(--content-field-inactive-surface-border-color);padding:var(--content-field-anti-border-jitter-padding) var(--content-field-clear-button-padding-x);background:var(--content-field-inactive-surface-background);border-radius:0 var(--content-field-border-radius) var(--content-field-border-radius) 0;cursor:pointer;border-left:none;align-items:center;display:flex}._clearButton_kb5hh_213:hover{background:var(--content-field-active-surface-background)}._clearButton_kb5hh_213._error_kb5hh_149{border:var(--content-field-error-border-width) solid var(--content-field-error-border-color);position:relative}._clearButton_kb5hh_213._error_kb5hh_149._hasSelection_kb5hh_153:hover:after{background-color:var(--content-field-error-border-hover-background-color);content:"";width:1px;height:100%;position:absolute;top:0;left:-1px}._clearButton_kb5hh_213._error_kb5hh_149{border-left:none}._clearButton_kb5hh_213:focus-visible{background:var(--content-field-active-surface-background);border:var(--content-field-focus-surface-border-width) solid var(--content-field-focus-surface-border-color)}._clearButton_kb5hh_213:focus-visible:not(._error_kb5hh_149){padding:calc(var(--content-field-anti-border-jitter-padding) - var(--content-field-anti-border-jitter-padding)) calc(var(--content-field-clear-button-padding-x) - var(--content-field-anti-border-jitter-padding))}._clearButton_kb5hh_213._disabled_kb5hh_166{opacity:.5;border-left:none}

package/dist/types/lib/types.d.ts

@@ -1,4 +1,5 @@
 import { ComponentType, MouseEvent, ReactNode, Ref, SVGProps } from 'react';
+import { Labelable } from '@box/blueprint-web';
 /** Configuration for a content field with a fixed display title */
 export interface ContentFieldConstantTitle {
     /** The text to display as the title */
@@ -18,7 +19,7 @@ export interface ContentFieldVariableTitle {
 export interface ContentFieldIconProps {
     icon: ComponentType<SVGProps<SVGSVGElement>>;
 }
-export interface ContentFieldProps {
+export interface ContentFieldProps extends Labelable {
     placeholder: string;
     title?: ContentFieldConstantTitle | ContentFieldVariableTitle;
     icon?: ContentFieldIconProps['icon'];
@@ -29,4 +30,7 @@ export interface ContentFieldProps {
     disabled?: boolean;
     variant?: 'folder' | 'file';
     triggerRef?: Ref<HTMLButtonElement>;
+    /** When true, label text is visually hidden. */
+    hideLabel?: boolean;
+    id?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/content-field",
-    "version": "2.2.64",
+    "version": "3.0.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@ariakit/react": "^0.4.21",