@vibe/core 3.81.2-alpha-7c563.0 → 3.81.2-alpha-ea565.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mocked_classnames/src/components/NumberField/NumberField.js +1 -1
- package/dist/mocked_classnames/src/components/NumberField/NumberField.js.map +1 -1
- package/dist/mocked_classnames/src/components/Search/Search.js +1 -1
- package/dist/mocked_classnames/src/components/Search/Search.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js.map +1 -1
- package/package.json +14 -14
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as t,useRef as n,useMemo as r}from"react";import i from"classnames";import o from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import{BaseInput as s}from"@vibe/base";import m from"../FieldLabel/FieldLabel.js";import d from"../InfoText/InfoText.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import c from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import f from"./NumberField.module.scss.js";import{Flex as b}from"@vibe/layout/mockedClassNames";import p from"../../hooks/useMergeRef.js";import{ComponentVibeId as v}from"../../tests/constants.js";var h=t((function(t,h){var x=t.className,y=t.value,O=t.onChange,g=t.label,N=t.required,C=t.placeholder,j=t.infoText,F=t.error,I=t.success,B=t.disabled,E=t.readOnly,w=t.min,M=t.max,k=t.step,D=void 0===k?1:k,R=t.size,T=void 0===R?"medium":R,V=t.leftIcon,q=t["aria-label"],z=t.id,A=t["data-testid"],L=t.allowOutOfBounds,S=t.onValidityChange,_=e(t,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=n(null),H=p(h,K),U=o({value:y,onChange:O,min:w,max:M,step:D,disabled:B,readOnly:E,allowOutOfBounds:L,onValidityChange:S}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:O,value:J,step:D,min:w,max:M,allowOutOfBounds:L,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=r((function(){return V?a.createElement(u,{icon:V,className:f.leftIcon}):null}),[V]),ae=r((function(){return a.createElement(c,{inputId:z,onIncrement:Z,onDecrement:$,disabled:B||E,size:T,isAtMin:W,isAtMax:X})}),[z,Z,$,B,E,T,W,X]),te=r((function(){return j&&z?"".concat(z,"-info-text"):void 0}),[j,z]),ne=r((function(){return g&&z?"".concat(z,"-label"):void 0}),[g,z]);return a.createElement(b,{direction:"column",align:"stretch",gap:"xs",className:i(f.numberField,x),"data-vibe":v.NUMBER_FIELD},a.createElement(m,{id:ne,className:f.label,labelText:g,required:N,labelFor:z}),a.createElement(s,Object.assign({},_,{"data-testid":A,ref:H,id:z,value:G,onChange:P,onKeyDown:Q,placeholder:C,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":N,"aria-label":q||g,"aria-labelledby":ne,"aria-describedby":te,disabled:B,readOnly:E,size:T,error:F,success:I,renderLeft:ee,renderRight:ae})),a.createElement(d,{id:te,text:j,error:F,success:I,disabled:B,readOnly:E}))}));export{h as default};
|
|
1
|
+
import{__rest as e}from"../../../_virtual/_tslib.js";import a,{forwardRef as t,useRef as n,useMemo as r}from"react";import i from"classnames";import o from"./hooks/useNumberFieldState.js";import l from"./hooks/useSpinButtonHandlers.js";import{BaseInput as s}from"@vibe/base/mockedClassNames";import m from"../FieldLabel/FieldLabel.js";import d from"../InfoText/InfoText.js";import{Icon as u}from"@vibe/icon/mockedClassNames";import c from"./components/NumberFieldSpinButton/NumberFieldSpinButton.js";import f from"./NumberField.module.scss.js";import{Flex as b}from"@vibe/layout/mockedClassNames";import p from"../../hooks/useMergeRef.js";import{ComponentVibeId as v}from"../../tests/constants.js";var h=t((function(t,h){var x=t.className,y=t.value,O=t.onChange,g=t.label,N=t.required,C=t.placeholder,j=t.infoText,F=t.error,I=t.success,B=t.disabled,E=t.readOnly,w=t.min,M=t.max,k=t.step,D=void 0===k?1:k,R=t.size,T=void 0===R?"medium":R,V=t.leftIcon,q=t["aria-label"],z=t.id,A=t["data-testid"],L=t.allowOutOfBounds,S=t.onValidityChange,_=e(t,["className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","step","size","leftIcon","aria-label","id","data-testid","allowOutOfBounds","onValidityChange"]),K=n(null),H=p(h,K),U=o({value:y,onChange:O,min:w,max:M,step:D,disabled:B,readOnly:E,allowOutOfBounds:L,onValidityChange:S}),G=U.inputValue,J=U.numericValue,P=U.onChange,Q=U.onKeyDown,W=U.isAtMin,X=U.isAtMax,Y=l({onChange:O,value:J,step:D,min:w,max:M,allowOutOfBounds:L,readOnly:E,inputRef:K}),Z=Y.onIncrement,$=Y.onDecrement,ee=r((function(){return V?a.createElement(u,{icon:V,className:f.leftIcon}):null}),[V]),ae=r((function(){return a.createElement(c,{inputId:z,onIncrement:Z,onDecrement:$,disabled:B||E,size:T,isAtMin:W,isAtMax:X})}),[z,Z,$,B,E,T,W,X]),te=r((function(){return j&&z?"".concat(z,"-info-text"):void 0}),[j,z]),ne=r((function(){return g&&z?"".concat(z,"-label"):void 0}),[g,z]);return a.createElement(b,{direction:"column",align:"stretch",gap:"xs",className:i(f.numberField,x),"data-vibe":v.NUMBER_FIELD},a.createElement(m,{id:ne,className:f.label,labelText:g,required:N,labelFor:z}),a.createElement(s,Object.assign({},_,{"data-testid":A,ref:H,id:z,value:G,onChange:P,onKeyDown:Q,placeholder:C,type:"text",inputMode:"numeric",inputRole:"spinbutton","aria-valuenow":J,"aria-valuemin":w,"aria-valuemax":M,"aria-required":N,"aria-label":q||g,"aria-labelledby":ne,"aria-describedby":te,disabled:B,readOnly:E,size:T,error:F,success:I,renderLeft:ee,renderRight:ae})),a.createElement(d,{id:te,text:j,error:F,success:I,disabled:B,readOnly:E}))}));export{h as default};
|
|
2
2
|
//# sourceMappingURL=NumberField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.js","sources":["../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport { BaseInput } from \"@vibe/base\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport { Flex } from \"@vibe/layout\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n (\n {\n className,\n value,\n onChange,\n label,\n required,\n placeholder,\n infoText,\n error,\n success,\n disabled,\n readOnly,\n min,\n max,\n step = 1,\n size = \"medium\",\n leftIcon,\n \"aria-label\": ariaLabel,\n id,\n \"data-testid\": dataTestId,\n allowOutOfBounds,\n onValidityChange,\n ...inputProps\n }: NumberFieldProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n const {\n inputValue,\n numericValue,\n onChange: handleChange,\n onKeyDown,\n isAtMin,\n isAtMax\n } = useNumberFieldState({\n value,\n onChange,\n min,\n max,\n step,\n disabled,\n readOnly,\n allowOutOfBounds,\n onValidityChange\n });\n\n const { onIncrement, onDecrement } = useSpinButtonHandlers({\n onChange,\n value: numericValue,\n step,\n min,\n max,\n allowOutOfBounds,\n readOnly,\n inputRef\n });\n\n const renderedLeftIcon = useMemo(() => {\n if (!leftIcon) return null;\n return <Icon icon={leftIcon} className={styles.leftIcon} />;\n }, [leftIcon]);\n\n const renderedRightIcon = useMemo(() => {\n return (\n <NumberFieldSpinButton\n inputId={id}\n onIncrement={onIncrement}\n onDecrement={onDecrement}\n disabled={disabled || readOnly}\n size={size}\n isAtMin={isAtMin}\n isAtMax={isAtMax}\n />\n );\n }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n const infoTextId = useMemo(() => {\n return infoText && id ? `${id}-info-text` : undefined;\n }, [infoText, id]);\n\n const labelId = useMemo(() => {\n return label && id ? `${id}-label` : undefined;\n }, [label, id]);\n\n return (\n <Flex\n direction=\"column\"\n align=\"stretch\"\n gap=\"xs\"\n className={cx(styles.numberField, className)}\n data-vibe={ComponentVibeId.NUMBER_FIELD}\n >\n <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n <BaseInput\n {...inputProps}\n data-testid={dataTestId}\n ref={mergedRef}\n id={id}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n type=\"text\"\n inputMode=\"numeric\"\n inputRole=\"spinbutton\"\n aria-valuenow={numericValue}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-required={required}\n aria-label={ariaLabel || label}\n aria-labelledby={labelId}\n aria-describedby={infoTextId}\n disabled={disabled}\n readOnly={readOnly}\n size={size}\n error={error}\n success={success}\n renderLeft={renderedLeftIcon}\n renderRight={renderedRightIcon}\n />\n <InfoText\n id={infoTextId}\n text={infoText}\n error={error}\n success={success}\n disabled={disabled}\n readOnly={readOnly}\n />\n </Flex>\n );\n }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"
|
|
1
|
+
{"version":3,"file":"NumberField.js","sources":["../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { type NumberFieldProps } from \"./NumberField.types\";\nimport useNumberFieldState from \"./hooks/useNumberFieldState\";\nimport useSpinButtonHandlers from \"./hooks/useSpinButtonHandlers\";\nimport { BaseInput } from \"@vibe/base\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport InfoText from \"../InfoText/InfoText\";\nimport { Icon } from \"@vibe/icon\";\nimport NumberFieldSpinButton from \"./components/NumberFieldSpinButton/NumberFieldSpinButton\";\nimport styles from \"./NumberField.module.scss\";\nimport { Flex } from \"@vibe/layout\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst NumberField = forwardRef(\n (\n {\n className,\n value,\n onChange,\n label,\n required,\n placeholder,\n infoText,\n error,\n success,\n disabled,\n readOnly,\n min,\n max,\n step = 1,\n size = \"medium\",\n leftIcon,\n \"aria-label\": ariaLabel,\n id,\n \"data-testid\": dataTestId,\n allowOutOfBounds,\n onValidityChange,\n ...inputProps\n }: NumberFieldProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const mergedRef = useMergeRef<HTMLInputElement>(ref, inputRef);\n\n const {\n inputValue,\n numericValue,\n onChange: handleChange,\n onKeyDown,\n isAtMin,\n isAtMax\n } = useNumberFieldState({\n value,\n onChange,\n min,\n max,\n step,\n disabled,\n readOnly,\n allowOutOfBounds,\n onValidityChange\n });\n\n const { onIncrement, onDecrement } = useSpinButtonHandlers({\n onChange,\n value: numericValue,\n step,\n min,\n max,\n allowOutOfBounds,\n readOnly,\n inputRef\n });\n\n const renderedLeftIcon = useMemo(() => {\n if (!leftIcon) return null;\n return <Icon icon={leftIcon} className={styles.leftIcon} />;\n }, [leftIcon]);\n\n const renderedRightIcon = useMemo(() => {\n return (\n <NumberFieldSpinButton\n inputId={id}\n onIncrement={onIncrement}\n onDecrement={onDecrement}\n disabled={disabled || readOnly}\n size={size}\n isAtMin={isAtMin}\n isAtMax={isAtMax}\n />\n );\n }, [id, onIncrement, onDecrement, disabled, readOnly, size, isAtMin, isAtMax]);\n\n const infoTextId = useMemo(() => {\n return infoText && id ? `${id}-info-text` : undefined;\n }, [infoText, id]);\n\n const labelId = useMemo(() => {\n return label && id ? `${id}-label` : undefined;\n }, [label, id]);\n\n return (\n <Flex\n direction=\"column\"\n align=\"stretch\"\n gap=\"xs\"\n className={cx(styles.numberField, className)}\n data-vibe={ComponentVibeId.NUMBER_FIELD}\n >\n <FieldLabel id={labelId} className={styles.label} labelText={label} required={required} labelFor={id} />\n <BaseInput\n {...inputProps}\n data-testid={dataTestId}\n ref={mergedRef}\n id={id}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n type=\"text\"\n inputMode=\"numeric\"\n inputRole=\"spinbutton\"\n aria-valuenow={numericValue}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-required={required}\n aria-label={ariaLabel || label}\n aria-labelledby={labelId}\n aria-describedby={infoTextId}\n disabled={disabled}\n readOnly={readOnly}\n size={size}\n error={error}\n success={success}\n renderLeft={renderedLeftIcon}\n renderRight={renderedRightIcon}\n />\n <InfoText\n id={infoTextId}\n text={infoText}\n error={error}\n success={success}\n disabled={disabled}\n readOnly={readOnly}\n />\n </Flex>\n );\n }\n);\n\nexport default NumberField;\n"],"names":["NumberField","forwardRef","_a","ref","className","value","onChange","label","required","placeholder","infoText","error","success","disabled","readOnly","min","max","_a$step","step","_a$size","size","leftIcon","ariaLabel","id","dataTestId","allowOutOfBounds","onValidityChange","inputProps","__rest","inputRef","useRef","mergedRef","useMergeRef","_useNumberFieldState","useNumberFieldState","inputValue","numericValue","handleChange","onKeyDown","isAtMin","isAtMax","_useSpinButtonHandler","useSpinButtonHandlers","onIncrement","onDecrement","renderedLeftIcon","useMemo","React","createElement","Icon","icon","styles","renderedRightIcon","NumberFieldSpinButton","inputId","infoTextId","concat","undefined","labelId","Flex","direction","align","gap","cx","numberField","ComponentVibeId","NUMBER_FIELD","FieldLabel","labelText","labelFor","BaseInput","Object","assign","type","inputMode","inputRole","renderLeft","renderRight","InfoText","text"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a from"classnames";import o,{forwardRef as r,useRef as
|
|
1
|
+
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a from"classnames";import o,{forwardRef as r,useRef as s,useCallback as t}from"react";import n from"../../hooks/useMergeRef.js";import{CloseSmall as i,Search as l}from"@vibe/icons";import{getTestId as c,ComponentDefaultTestId as m}from"../../tests/testIds.js";import d from"./Search.module.scss.js";import{BaseInput as u}from"@vibe/base/mockedClassNames";import p from"../../hooks/useDebounceEvent/index.js";import v from"../IconButton/IconButton.js";import{Icon as f}from"@vibe/icon/mockedClassNames";import{Loader as h}from"@vibe/loader/mockedClassNames";import{ComponentVibeId as C}from"../../tests/constants.js";var b=r((function(r,b){var N,E,R,I,g,x,y,A,j,S,k=r.searchIconName,B=void 0===k?l:k,w=r.clearIconName,z=void 0===w?i:w,F=r.clearIconLabel,H=void 0===F?"Clear":F,L=r.renderAction,_=r.hideRenderActionOnInput,D=r.value,P=r.placeholder,T=r.size,V=void 0===T?"medium":T,K=r.disabled,O=r.loading,M=r.autoFocus,U=r.autoComplete,W=void 0===U?"off":U,q=r.inputAriaLabel,G=r.debounceRate,J=void 0===G?400:G,Q=r.searchResultsContainerId,X=r.currentAriaResultId,Y=r.onChange,Z=r.onFocus,$=r.onBlur,ee=r.onClear,ae=r.onKeyDown,oe=r.className,re=r.ariaExpanded,se=r.ariaHasPopup,te=r.showClearIcon,ne=void 0===te||te,ie=r.id,le=r["data-testid"];return N=s(null),E=n(b,N),R=p({delay:J,onChange:Y,initialStateValue:D}),I=R.inputValue,g=R.onEventChanged,y=t((function(){var e,a;K||(null===(a=null===(e=N.current)||void 0===e?void 0:e.focus)||void 0===a||a.call(e),x(),null==ee||ee())}),[K,x=R.clearValue,ee]),A=o.createElement(f,{icon:B,className:d.icon,iconType:"font",iconSize:"small"===V?"16px":"20px"}),j=o.createElement(v,{className:a(d.icon,e({},d.empty,!I)),icon:z,ariaLabel:H,onClick:y,size:"small"===V?"xs":"small","data-testid":c(m.CLEAN_SEARCH_BUTTON,ie)}),S=o.createElement(o.Fragment,null,O&&o.createElement(h,{size:"small"===V?"xs":20,color:"secondary",wrapperClassName:a(e({},d.loader,!I&&!L))}),ne&&I&&!K&&j,!(_&&I)&&L),o.createElement(u,{ref:E,id:ie,type:"search","data-testid":le||c(m.SEARCH,ie),"data-vibe":C.SEARCH,className:a(d.searchWrapper,oe),inputClassName:d.search,value:I,renderLeft:A,renderRight:S,autoFocus:M,placeholder:P,disabled:K,onChange:g,onBlur:$,onFocus:Z,onKeyDown:ae,autoComplete:W,size:V,wrapperRole:"search",inputRole:Q?"combobox":void 0,"aria-label":q,"aria-busy":O,"aria-controls":re?Q:void 0,"aria-activedescendant":X,"aria-haspopup":se,"aria-expanded":re})}));export{b as default};
|
|
2
2
|
//# sourceMappingURL=Search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sources":["../../../../../src/components/Search/Search.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall as CloseSmallIcon, Search as SearchIcon } from \"@vibe/icons\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./Search.module.scss\";\nimport { BaseInput } from \"@vibe/base\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { Icon } from \"@vibe/icon\";\nimport { type SearchProps } from \"./Search.types\";\nimport { Loader } from \"@vibe/loader\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst Search = forwardRef(\n (\n {\n searchIconName = SearchIcon,\n clearIconName = CloseSmallIcon,\n clearIconLabel = \"Clear\",\n renderAction: RenderAction,\n hideRenderActionOnInput,\n value,\n placeholder,\n size = \"medium\",\n disabled,\n loading,\n autoFocus,\n autoComplete = \"off\",\n inputAriaLabel,\n debounceRate = 400,\n searchResultsContainerId,\n currentAriaResultId,\n onChange,\n onFocus,\n onBlur,\n onClear,\n onKeyDown,\n className,\n ariaExpanded,\n ariaHasPopup,\n showClearIcon = true,\n id,\n \"data-testid\": dataTestId\n }: SearchProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n const inputRef = useRef(null);\n const mergedRef = useMergeRef(ref, inputRef);\n\n const { inputValue, onEventChanged, clearValue } = useDebounceEvent({\n delay: debounceRate,\n onChange,\n initialStateValue: value\n });\n\n const onClearButtonClick = useCallback(() => {\n if (disabled) return;\n inputRef.current?.focus?.();\n clearValue();\n onClear?.();\n }, [disabled, clearValue, onClear]);\n\n const SearchIcon = (\n <Icon\n icon={searchIconName}\n className={styles.icon}\n iconType=\"font\"\n iconSize={size === \"small\" ? \"16px\" : \"20px\"}\n />\n );\n\n const ClearIcon = (\n <IconButton\n className={cx(styles.icon, { [styles.empty]: !inputValue })}\n icon={clearIconName}\n ariaLabel={clearIconLabel}\n onClick={onClearButtonClick}\n size={size === \"small\" ? \"xs\" : \"small\"}\n data-testid={getTestId(ComponentDefaultTestId.CLEAN_SEARCH_BUTTON, id)}\n />\n );\n\n const RenderRight = (\n <>\n {loading && (\n <Loader\n size={size === \"small\" ? \"xs\" : 20}\n color=\"secondary\"\n wrapperClassName={cx({ [styles.loader]: !inputValue && !RenderAction })}\n />\n )}\n {showClearIcon && inputValue && !disabled && ClearIcon}\n {!(hideRenderActionOnInput && inputValue) && RenderAction}\n </>\n );\n\n return (\n <BaseInput\n ref={mergedRef}\n id={id}\n type={\"search\"}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.SEARCH, id)}\n data-vibe={ComponentVibeId.SEARCH}\n className={cx(styles.searchWrapper, className)}\n inputClassName={styles.search}\n value={inputValue}\n renderLeft={SearchIcon}\n renderRight={RenderRight}\n autoFocus={autoFocus}\n placeholder={placeholder}\n disabled={disabled}\n onChange={onEventChanged}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n autoComplete={autoComplete}\n size={size}\n wrapperRole=\"search\"\n inputRole={searchResultsContainerId ? \"combobox\" : undefined}\n aria-label={inputAriaLabel}\n aria-busy={loading}\n aria-controls={ariaExpanded ? searchResultsContainerId : undefined}\n aria-activedescendant={currentAriaResultId}\n aria-haspopup={ariaHasPopup}\n aria-expanded={ariaExpanded}\n />\n );\n }\n);\n\nexport default Search;\n"],"names":["Search","forwardRef","_ref","ref","inputRef","mergedRef","_useDebounceEvent","inputValue","onEventChanged","clearValue","onClearButtonClick","SearchIcon","ClearIcon","RenderRight","_ref$searchIconName","searchIconName","_ref$clearIconName","clearIconName","CloseSmallIcon","_ref$clearIconLabel","clearIconLabel","RenderAction","renderAction","hideRenderActionOnInput","value","placeholder","_ref$size","size","disabled","loading","autoFocus","_ref$autoComplete","autoComplete","inputAriaLabel","_ref$debounceRate","debounceRate","searchResultsContainerId","currentAriaResultId","onChange","onFocus","onBlur","onClear","onKeyDown","className","ariaExpanded","ariaHasPopup","_ref$showClearIcon","showClearIcon","id","dataTestId","useRef","useMergeRef","useDebounceEvent","delay","initialStateValue","useCallback","_b","current","_a","focus","React","createElement","Icon","icon","styles","iconType","iconSize","IconButton","cx","_defineProperty","empty","ariaLabel","onClick","getTestId","ComponentDefaultTestId","CLEAN_SEARCH_BUTTON","Fragment","Loader","color","wrapperClassName","loader","BaseInput","type","SEARCH","ComponentVibeId","searchWrapper","inputClassName","search","renderLeft","renderRight","wrapperRole","inputRole","undefined"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../../../../src/components/Search/Search.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useCallback, useRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { CloseSmall as CloseSmallIcon, Search as SearchIcon } from \"@vibe/icons\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./Search.module.scss\";\nimport { BaseInput } from \"@vibe/base\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { Icon } from \"@vibe/icon\";\nimport { type SearchProps } from \"./Search.types\";\nimport { Loader } from \"@vibe/loader\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst Search = forwardRef(\n (\n {\n searchIconName = SearchIcon,\n clearIconName = CloseSmallIcon,\n clearIconLabel = \"Clear\",\n renderAction: RenderAction,\n hideRenderActionOnInput,\n value,\n placeholder,\n size = \"medium\",\n disabled,\n loading,\n autoFocus,\n autoComplete = \"off\",\n inputAriaLabel,\n debounceRate = 400,\n searchResultsContainerId,\n currentAriaResultId,\n onChange,\n onFocus,\n onBlur,\n onClear,\n onKeyDown,\n className,\n ariaExpanded,\n ariaHasPopup,\n showClearIcon = true,\n id,\n \"data-testid\": dataTestId\n }: SearchProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n const inputRef = useRef(null);\n const mergedRef = useMergeRef(ref, inputRef);\n\n const { inputValue, onEventChanged, clearValue } = useDebounceEvent({\n delay: debounceRate,\n onChange,\n initialStateValue: value\n });\n\n const onClearButtonClick = useCallback(() => {\n if (disabled) return;\n inputRef.current?.focus?.();\n clearValue();\n onClear?.();\n }, [disabled, clearValue, onClear]);\n\n const SearchIcon = (\n <Icon\n icon={searchIconName}\n className={styles.icon}\n iconType=\"font\"\n iconSize={size === \"small\" ? \"16px\" : \"20px\"}\n />\n );\n\n const ClearIcon = (\n <IconButton\n className={cx(styles.icon, { [styles.empty]: !inputValue })}\n icon={clearIconName}\n ariaLabel={clearIconLabel}\n onClick={onClearButtonClick}\n size={size === \"small\" ? \"xs\" : \"small\"}\n data-testid={getTestId(ComponentDefaultTestId.CLEAN_SEARCH_BUTTON, id)}\n />\n );\n\n const RenderRight = (\n <>\n {loading && (\n <Loader\n size={size === \"small\" ? \"xs\" : 20}\n color=\"secondary\"\n wrapperClassName={cx({ [styles.loader]: !inputValue && !RenderAction })}\n />\n )}\n {showClearIcon && inputValue && !disabled && ClearIcon}\n {!(hideRenderActionOnInput && inputValue) && RenderAction}\n </>\n );\n\n return (\n <BaseInput\n ref={mergedRef}\n id={id}\n type={\"search\"}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.SEARCH, id)}\n data-vibe={ComponentVibeId.SEARCH}\n className={cx(styles.searchWrapper, className)}\n inputClassName={styles.search}\n value={inputValue}\n renderLeft={SearchIcon}\n renderRight={RenderRight}\n autoFocus={autoFocus}\n placeholder={placeholder}\n disabled={disabled}\n onChange={onEventChanged}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n autoComplete={autoComplete}\n size={size}\n wrapperRole=\"search\"\n inputRole={searchResultsContainerId ? \"combobox\" : undefined}\n aria-label={inputAriaLabel}\n aria-busy={loading}\n aria-controls={ariaExpanded ? searchResultsContainerId : undefined}\n aria-activedescendant={currentAriaResultId}\n aria-haspopup={ariaHasPopup}\n aria-expanded={ariaExpanded}\n />\n );\n }\n);\n\nexport default Search;\n"],"names":["Search","forwardRef","_ref","ref","inputRef","mergedRef","_useDebounceEvent","inputValue","onEventChanged","clearValue","onClearButtonClick","SearchIcon","ClearIcon","RenderRight","_ref$searchIconName","searchIconName","_ref$clearIconName","clearIconName","CloseSmallIcon","_ref$clearIconLabel","clearIconLabel","RenderAction","renderAction","hideRenderActionOnInput","value","placeholder","_ref$size","size","disabled","loading","autoFocus","_ref$autoComplete","autoComplete","inputAriaLabel","_ref$debounceRate","debounceRate","searchResultsContainerId","currentAriaResultId","onChange","onFocus","onBlur","onClear","onKeyDown","className","ariaExpanded","ariaHasPopup","_ref$showClearIcon","showClearIcon","id","dataTestId","useRef","useMergeRef","useDebounceEvent","delay","initialStateValue","useCallback","_b","current","_a","focus","React","createElement","Icon","icon","styles","iconType","iconSize","IconButton","cx","_defineProperty","empty","ariaLabel","onClick","getTestId","ComponentDefaultTestId","CLEAN_SEARCH_BUTTON","Fragment","Loader","color","wrapperClassName","loader","BaseInput","type","SEARCH","ComponentVibeId","searchWrapper","inputClassName","search","renderLeft","renderRight","wrapperRole","inputRole","undefined"],"mappings":"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"}
|
package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import l,{useRef as t}from"react";import a from"classnames";import{BaseInput as r}from"@vibe/base";import o from"./Trigger.module.scss.js";import{useDropdownContext as s}from"../../context/DropdownContext.js";import i from"../../../../Text/Text.js";var
|
|
1
|
+
import{defineProperty as e}from"../../../../../../_virtual/_rollupPluginBabelHelpers.js";import l,{useRef as t}from"react";import a from"classnames";import{BaseInput as r}from"@vibe/base/mockedClassNames";import o from"./Trigger.module.scss.js";import{useDropdownContext as s}from"../../context/DropdownContext.js";import i from"../../../../Text/Text.js";var m=function(m){var n,p=m.inputSize,d=s(),c=d.inputValue,u=d.autoFocus,b=d.disabled,f=d.readOnly,g=d.placeholder,v=d.multi,x=d.selectedItem,y=d.selectedItems,h=void 0===y?[]:y,j=d.inputAriaLabel,O=d.searchable,P=d.size,E=d.label,F=d.isOpen,T=d.getDropdownProps,z=d.getLabelProps,I=d.getInputProps,N=t(null),S=v?h.length>0:!!x,w=T?T({preventKeyAction:F}):{};return l.createElement(l.Fragment,null,O?l.createElement(r,Object.assign({},I(Object.assign({"aria-labelledby":E?z().id:void 0,"aria-label":j||(E||null===(n=z())||void 0===n?void 0:n.id),placeholder:S?"":g,ref:N},w)),{inputRole:"combobox",value:c||"",autoFocus:u,size:p||P,className:a(o.inputWrapper,e(e(e(e({},o.hasSelected,!v&&x&&!c),o.small,"small"===p),o.multi,v&&S),o.multiSelected,v&&S&&"small"===p)),disabled:b,readOnly:f})):l.createElement(l.Fragment,null,!S&&g&&l.createElement(i,{color:"secondary",className:a(o.placeholderText,e({},o.disabled,!!b)),type:"small"===P?"text2":"text1"},g)))};export{m as default};
|
|
2
2
|
//# sourceMappingURL=DropdownInput.js.map
|
package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownInput.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/DropdownInput.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport cx from \"classnames\";\nimport { BaseInput } from \"@vibe/base\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseListItemData } from \"../../../../BaseListItem\";\nimport { Text } from \"../../../../Text\";\n\nconst DropdownInput = ({ inputSize }: { inputSize?: \"small\" | \"medium\" | \"large\" }) => {\n const {\n inputValue,\n autoFocus,\n disabled,\n readOnly,\n placeholder,\n multi,\n selectedItem,\n selectedItems = [],\n inputAriaLabel,\n searchable,\n size,\n label,\n isOpen,\n getDropdownProps,\n getLabelProps,\n getInputProps\n } = useDropdownContext<BaseListItemData>();\n\n const inputRef = useRef<HTMLInputElement>(null);\n const hasSelection = multi ? selectedItems.length > 0 : !!selectedItem;\n const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction: isOpen }) : {};\n\n return (\n <>\n {searchable ? (\n <BaseInput\n {...getInputProps({\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": inputAriaLabel || (label ? undefined : getLabelProps()?.id),\n placeholder: hasSelection ? \"\" : placeholder,\n ref: inputRef,\n ...multipleSelectionDropdownProps\n })}\n inputRole=\"combobox\"\n value={inputValue || \"\"}\n autoFocus={autoFocus}\n size={inputSize || size}\n className={cx(styles.inputWrapper, {\n [styles.hasSelected]: !multi && selectedItem && !inputValue,\n [styles.small]: inputSize === \"small\",\n [styles.multi]: multi && hasSelection,\n [styles.multiSelected]: multi && hasSelection && inputSize === \"small\"\n })}\n disabled={disabled}\n readOnly={readOnly}\n />\n ) : (\n <>\n {!hasSelection && placeholder && (\n <Text\n color=\"secondary\"\n className={cx(styles.placeholderText, {\n [styles.disabled]: !!disabled\n })}\n type={size === \"small\" ? \"text2\" : \"text1\"}\n >\n {placeholder}\n </Text>\n )}\n </>\n )}\n </>\n );\n};\n\nexport default DropdownInput;\n"],"names":["DropdownInput","_ref","inputSize","_useDropdownContext","useDropdownContext","inputValue","autoFocus","disabled","readOnly","placeholder","multi","selectedItem","_useDropdownContext$s","selectedItems","inputAriaLabel","searchable","size","label","isOpen","getDropdownProps","getLabelProps","getInputProps","inputRef","useRef","hasSelection","length","multipleSelectionDropdownProps","preventKeyAction","React","BaseInput","Object","assign","id","undefined","ref","inputRole","value","className","cx","styles","inputWrapper","_defineProperty","hasSelected","small","multiSelected","createElement","Text","color","placeholderText","type"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownInput.js","sources":["../../../../../../../../src/components/next/Dropdown/components/Trigger/DropdownInput.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport cx from \"classnames\";\nimport { BaseInput } from \"@vibe/base\";\nimport styles from \"./Trigger.module.scss\";\nimport { useDropdownContext } from \"../../context/DropdownContext\";\nimport { type BaseListItemData } from \"../../../../BaseListItem\";\nimport { Text } from \"../../../../Text\";\n\nconst DropdownInput = ({ inputSize }: { inputSize?: \"small\" | \"medium\" | \"large\" }) => {\n const {\n inputValue,\n autoFocus,\n disabled,\n readOnly,\n placeholder,\n multi,\n selectedItem,\n selectedItems = [],\n inputAriaLabel,\n searchable,\n size,\n label,\n isOpen,\n getDropdownProps,\n getLabelProps,\n getInputProps\n } = useDropdownContext<BaseListItemData>();\n\n const inputRef = useRef<HTMLInputElement>(null);\n const hasSelection = multi ? selectedItems.length > 0 : !!selectedItem;\n const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction: isOpen }) : {};\n\n return (\n <>\n {searchable ? (\n <BaseInput\n {...getInputProps({\n \"aria-labelledby\": label ? getLabelProps().id : undefined,\n \"aria-label\": inputAriaLabel || (label ? undefined : getLabelProps()?.id),\n placeholder: hasSelection ? \"\" : placeholder,\n ref: inputRef,\n ...multipleSelectionDropdownProps\n })}\n inputRole=\"combobox\"\n value={inputValue || \"\"}\n autoFocus={autoFocus}\n size={inputSize || size}\n className={cx(styles.inputWrapper, {\n [styles.hasSelected]: !multi && selectedItem && !inputValue,\n [styles.small]: inputSize === \"small\",\n [styles.multi]: multi && hasSelection,\n [styles.multiSelected]: multi && hasSelection && inputSize === \"small\"\n })}\n disabled={disabled}\n readOnly={readOnly}\n />\n ) : (\n <>\n {!hasSelection && placeholder && (\n <Text\n color=\"secondary\"\n className={cx(styles.placeholderText, {\n [styles.disabled]: !!disabled\n })}\n type={size === \"small\" ? \"text2\" : \"text1\"}\n >\n {placeholder}\n </Text>\n )}\n </>\n )}\n </>\n );\n};\n\nexport default DropdownInput;\n"],"names":["DropdownInput","_ref","inputSize","_useDropdownContext","useDropdownContext","inputValue","autoFocus","disabled","readOnly","placeholder","multi","selectedItem","_useDropdownContext$s","selectedItems","inputAriaLabel","searchable","size","label","isOpen","getDropdownProps","getLabelProps","getInputProps","inputRef","useRef","hasSelection","length","multipleSelectionDropdownProps","preventKeyAction","React","BaseInput","Object","assign","id","undefined","ref","inputRole","value","className","cx","styles","inputWrapper","_defineProperty","hasSelected","small","multiSelected","createElement","Text","color","placeholderText","type"],"mappings":"mWAQA,IAAMA,EAAgB,SAAHC,GAAmE,MAA7DC,EAASD,EAATC,UACvBC,EAiBIC,IAhBFC,EAAUF,EAAVE,WACAC,EAASH,EAATG,UACAC,EAAQJ,EAARI,SACAC,EAAQL,EAARK,SACAC,EAAWN,EAAXM,YACAC,EAAKP,EAALO,MACAC,EAAYR,EAAZQ,aAAYC,EAAAT,EACZU,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAcX,EAAdW,eACAC,EAAUZ,EAAVY,WACAC,EAAIb,EAAJa,KACAC,EAAKd,EAALc,MACAC,EAAMf,EAANe,OACAC,EAAgBhB,EAAhBgB,iBACAC,EAAajB,EAAbiB,cACAC,EAAalB,EAAbkB,cAGIC,EAAWC,EAAyB,MACpCC,EAAed,EAAQG,EAAcY,OAAS,IAAMd,EACpDe,EAAiCP,EAAmBA,EAAiB,CAAEQ,iBAAkBT,IAAY,CAAA,EAE3G,OACEU,gCACGb,EACCa,gBAACC,EAASC,OAAAC,OAAA,CAAA,EACJV,EACFS,OAAAC,OAAA,CAAA,kBAAmBd,EAAQG,IAAgBY,QAAKC,EAChD,aAAcnB,IAAmBG,aAAoBG,sBAAZa,IAA6BD,IACtEvB,YAAae,EAAe,GAAKf,EACjCyB,IAAKZ,GACFI,IAEL,CAAAS,UAAU,WACVC,MAAO/B,GAAc,GACrBC,UAAWA,EACXU,KAAMd,GAAac,EACnBqB,UAAWC,EAAGC,EAAOC,aAAYC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAC9BF,EAAOG,aAAehC,GAASC,IAAiBN,GAChDkC,EAAOI,MAAsB,UAAdzC,GACfqC,EAAO7B,MAAQA,GAASc,GACxBe,EAAOK,cAAgBlC,GAASc,GAA8B,UAAdtB,IAEnDK,SAAUA,EACVC,SAAUA,KAGZoB,iCACIJ,GAAgBf,GAChBmB,EAAAiB,cAACC,EAAI,CACHC,MAAM,YACNV,UAAWC,EAAGC,EAAOS,gBAAeP,EACjCF,GAAAA,EAAOhC,WAAaA,IAEvB0C,KAAe,UAATjC,EAAmB,QAAU,SAElCP,IAOf"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibe/core",
|
|
3
|
-
"version": "3.81.2-alpha-
|
|
3
|
+
"version": "3.81.2-alpha-ea565.0",
|
|
4
4
|
"description": "Official monday.com UI resources for application development in React.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -90,17 +90,17 @@
|
|
|
90
90
|
},
|
|
91
91
|
"dependencies": {
|
|
92
92
|
"@popperjs/core": "2.11.6",
|
|
93
|
-
"@vibe/base": "3.0.4-alpha-
|
|
94
|
-
"@vibe/button": "3.0.9-alpha-
|
|
95
|
-
"@vibe/clickable": "3.0.2-alpha-
|
|
96
|
-
"@vibe/dialog": "3.0.4-alpha-
|
|
97
|
-
"@vibe/hooks": "3.0.3-alpha-
|
|
98
|
-
"@vibe/icon": "3.0.9-alpha-
|
|
99
|
-
"@vibe/icons": "1.11.3-alpha-
|
|
100
|
-
"@vibe/layer": "3.0.4-alpha-
|
|
101
|
-
"@vibe/layout": "3.0.2-alpha-
|
|
102
|
-
"@vibe/loader": "3.0.9-alpha-
|
|
103
|
-
"@vibe/shared": "3.0.9-alpha-
|
|
93
|
+
"@vibe/base": "3.0.4-alpha-ea565.0",
|
|
94
|
+
"@vibe/button": "3.0.9-alpha-ea565.0",
|
|
95
|
+
"@vibe/clickable": "3.0.2-alpha-ea565.0",
|
|
96
|
+
"@vibe/dialog": "3.0.4-alpha-ea565.0",
|
|
97
|
+
"@vibe/hooks": "3.0.3-alpha-ea565.0",
|
|
98
|
+
"@vibe/icon": "3.0.9-alpha-ea565.0",
|
|
99
|
+
"@vibe/icons": "1.11.3-alpha-ea565.0",
|
|
100
|
+
"@vibe/layer": "3.0.4-alpha-ea565.0",
|
|
101
|
+
"@vibe/layout": "3.0.2-alpha-ea565.0",
|
|
102
|
+
"@vibe/loader": "3.0.9-alpha-ea565.0",
|
|
103
|
+
"@vibe/shared": "3.0.9-alpha-ea565.0",
|
|
104
104
|
"a11y-dialog": "^7.5.2",
|
|
105
105
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
106
106
|
"browserslist-config-monday": "1.0.6",
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
"downshift": "^9.0.8",
|
|
109
109
|
"es-toolkit": "^1.39.10",
|
|
110
110
|
"framer-motion": "^6.5.1",
|
|
111
|
-
"monday-ui-style": "0.26.3-alpha-
|
|
111
|
+
"monday-ui-style": "0.26.3-alpha-ea565.0",
|
|
112
112
|
"react-dates": "21.8.0",
|
|
113
113
|
"react-focus-lock": "^2.13.2",
|
|
114
114
|
"react-inlinesvg": "^4.1.3",
|
|
@@ -279,5 +279,5 @@
|
|
|
279
279
|
"browserslist": [
|
|
280
280
|
"extends browserslist-config-monday"
|
|
281
281
|
],
|
|
282
|
-
"gitHead": "
|
|
282
|
+
"gitHead": "99516622bcc8efdccecfa882e2319a9e8b583f45"
|
|
283
283
|
}
|