@vibe/core 4.6.0-alpha-e982b.0 → 4.6.0-alpha-8cfcb.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/BaseItem/BaseItem.js +1 -1
- package/dist/mocked_classnames/src/components/BaseItem/BaseItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/BaseItem/BaseItem.module.scss.js +1 -1
- package/dist/mocked_classnames/src/components/Chips/Chips.module.scss.js +1 -1
- package/dist/mocked_classnames/src/components/Label/Label.module.scss.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss.js +1 -1
- package/dist/mocked_classnames/src/components/TextField/TextField.module.scss.js +1 -1
- package/dist/mocked_classnames/src/types/Colors.js +1 -1
- package/dist/mocked_classnames/src/types/Colors.js.map +1 -1
- package/dist/src/components/BaseItem/BaseItem.js +1 -1
- package/dist/src/components/BaseItem/BaseItem.js.map +1 -1
- package/dist/src/components/BaseItem/BaseItem.module.scss.js +1 -1
- package/dist/src/components/Chips/Chips.module.scss.js +1 -1
- package/dist/src/components/Label/Label.module.scss.js +1 -1
- package/dist/src/components/Menu/MenuItem/MenuItem.js +1 -1
- package/dist/src/components/Menu/MenuItem/MenuItem.js.map +1 -1
- package/dist/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss.js +1 -1
- package/dist/src/components/TextField/TextField.module.scss.js +1 -1
- package/dist/src/types/Colors.js +1 -1
- package/dist/src/types/Colors.js.map +1 -1
- package/dist/style/dist/index.min.css.js +1 -1
- package/dist/tokens/tokens.css +1 -1
- package/package.json +19 -19
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import
|
|
1
|
+
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as t,useRef as o,useEffect as r,useMemo as l}from"react";import s from"classnames";import{useMergeRef as a,getStyle as m}from"@vibe/shared";import{Text as n}from"@vibe/typography/mockedClassNames";import{useListItemProps as d}from"./hooks/useListItemProps.js";import{Tooltip as c}from"@vibe/tooltip/mockedClassNames";import{Icon as p}from"@vibe/icon/mockedClassNames";import{Check as v}from"@vibe/icons";import{renderSideElement as h}from"./utils.js";import u from"./BaseItem.module.scss.js";var f=t((function(t,f){var g=t.className,b=t.id,y=t.component,E=void 0===y?"li":y,P=t.size,N=void 0===P?"medium":P,j=t.selected,k=void 0!==j&&j,z=t.readOnly,C=void 0!==z&&z,O=t.highlighted,x=void 0!==O&&O,S=t.role,B=t.dir,F=void 0===B?"auto":B,I=t.itemRenderer,_=t.itemProps,w=void 0===_?{}:_,H=t.item,L=void 0===H?{}:H,R=o(null),q=a(f,R),A=d({id:b,component:E,size:N,highlighted:x,role:S,itemProps:w});r((function(){var e;null===(e=A.refCallback)||void 0===e||e.call(A,R.current)}),[A]);var D=L.label,G=void 0===D?"":D,J=L.disabled,K=void 0!==J&&J,M=L.startElement,Q=L.endElement,T=L.tooltipProps,U=void 0===T?{}:T,V=k&&!C,W=l((function(){return s(u.wrapper,e(e(e(e({},u.selected,k),u.disabled,K),u.highlighted,A.highlighted),u.readOnly,C),m(u,A.size),g)}),[k,K,A.highlighted,C,A.size,g]),X="small"===A.size?"text2":"text1",Y=A.component;return i.createElement(c,Object.assign({},U,{content:null==U?void 0:U.content,position:"rtl"===F?"right":"left",containerSelector:"body"}),i.createElement(Y,Object.assign({id:A.id,ref:q,className:W,role:A.role,"aria-selected":k,"aria-disabled":K||void 0},A.itemProps),I?I(L):i.createElement(i.Fragment,null,M&&h(M,K,X),i.createElement(n,{type:X,color:"inherit",tooltipProps:{containerSelector:"body"}},G),(Q||V)&&i.createElement("div",{className:u.endElement},Q&&h(Q,K,X),V&&i.createElement(p,{icon:v,size:20,className:u.selectedCheck,ignoreFocusStyle:!0,"aria-hidden":!0})))))}));export{f as default};
|
|
2
2
|
//# sourceMappingURL=BaseItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseItem.js","sources":["../../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n className,\n id,\n component = \"li\",\n size = \"medium\",\n selected = false,\n readOnly = false,\n highlighted = false,\n role,\n index: _index,\n dir = \"auto\",\n itemRenderer,\n itemProps = {},\n item = {} as BaseItemData<Item>\n }: BaseItemProps<Item>,\n ref: React.Ref<HTMLElement>\n ) => {\n const internalRef = useRef<HTMLElement>(null);\n const mergedRef = useMergeRef(ref, internalRef);\n\n const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n useEffect(() => {\n listItemProps.refCallback?.(internalRef.current);\n }, [listItemProps]);\n\n const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n\n const listItemClassNames = useMemo(\n () =>\n cx(\n styles.wrapper,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.highlighted]: listItemProps.highlighted,\n [styles.readOnly]: readOnly\n },\n getStyle(styles, listItemProps.size),\n className\n ),\n [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n );\n\n const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n const Element = listItemProps.component as React.ElementType;\n\n return (\n <Tooltip\n {...tooltipProps}\n content={tooltipProps?.content}\n position={dir === \"rtl\" ? \"right\" : \"left\"}\n containerSelector=\"body\"\n >\n <Element\n id={listItemProps.id}\n ref={mergedRef}\n className={listItemClassNames}\n role={listItemProps.role}\n aria-selected={selected}\n aria-disabled={disabled || undefined}\n {...listItemProps.itemProps}\n >\n {itemRenderer ? (\n itemRenderer(item)\n ) : (\n <>\n {startElement && renderSideElement(startElement, disabled, textVariant)}\n <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n {label}\n </Text>\n {endElement && (\n <div className={styles.endElement}
|
|
1
|
+
{"version":3,"file":"BaseItem.js","sources":["../../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check } from \"@vibe/icons\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n className,\n id,\n component = \"li\",\n size = \"medium\",\n selected = false,\n readOnly = false,\n highlighted = false,\n role,\n index: _index,\n dir = \"auto\",\n itemRenderer,\n itemProps = {},\n item = {} as BaseItemData<Item>\n }: BaseItemProps<Item>,\n ref: React.Ref<HTMLElement>\n ) => {\n const internalRef = useRef<HTMLElement>(null);\n const mergedRef = useMergeRef(ref, internalRef);\n\n const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n useEffect(() => {\n listItemProps.refCallback?.(internalRef.current);\n }, [listItemProps]);\n\n const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n const showSelectedCheck = selected && !readOnly;\n\n const listItemClassNames = useMemo(\n () =>\n cx(\n styles.wrapper,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.highlighted]: listItemProps.highlighted,\n [styles.readOnly]: readOnly\n },\n getStyle(styles, listItemProps.size),\n className\n ),\n [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n );\n\n const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n const Element = listItemProps.component as React.ElementType;\n\n return (\n <Tooltip\n {...tooltipProps}\n content={tooltipProps?.content}\n position={dir === \"rtl\" ? \"right\" : \"left\"}\n containerSelector=\"body\"\n >\n <Element\n id={listItemProps.id}\n ref={mergedRef}\n className={listItemClassNames}\n role={listItemProps.role}\n aria-selected={selected}\n aria-disabled={disabled || undefined}\n {...listItemProps.itemProps}\n >\n {itemRenderer ? (\n itemRenderer(item)\n ) : (\n <>\n {startElement && renderSideElement(startElement, disabled, textVariant)}\n <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n {label}\n </Text>\n {(endElement || showSelectedCheck) && (\n <div className={styles.endElement}>\n {endElement && renderSideElement(endElement, disabled, textVariant)}\n {showSelectedCheck && (\n <Icon\n icon={Check}\n size={20}\n className={styles.selectedCheck}\n ignoreFocusStyle\n aria-hidden\n />\n )}\n </div>\n )}\n </>\n )}\n </Element>\n </Tooltip>\n );\n }\n);\n\nexport default BaseItem as <Item extends Record<string, unknown>>(\n props: BaseItemProps<Item> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement;\n"],"names":["BaseItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$size","size","_ref$selected","selected","_ref$readOnly","readOnly","_ref$highlighted","highlighted","role","_ref$dir","dir","itemRenderer","_ref$itemProps","itemProps","_ref$item","item","internalRef","useRef","mergedRef","useMergeRef","listItemProps","useListItemProps","useEffect","_a","refCallback","call","current","_item$label","label","_item$disabled","disabled","startElement","endElement","_item$tooltipProps","tooltipProps","showSelectedCheck","listItemClassNames","useMemo","cx","styles","wrapper","_defineProperty","getStyle","textVariant","Element","React","createElement","Tooltip","Object","assign","content","position","containerSelector","undefined","Fragment","renderSideElement","Text","type","color","Icon","icon","Check","selectedCheck","ignoreFocusStyle"],"mappings":"ilBAaMA,IAAAA,EAAWC,GACf,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EAChBO,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAR,EACfS,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAV,EAChBW,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAZ,EAChBa,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAId,EAAJc,KACKC,EAAAf,EACLgB,IAAAA,OAAM,IAAHD,EAAG,OAAMA,EACZE,EAAYjB,EAAZiB,aAAYC,EAAAlB,EACZmB,UAAAA,OAAS,IAAAD,EAAG,CAAA,EAAEA,EAAAE,EAAApB,EACdqB,KAAAA,OAAI,IAAAD,EAAG,CAAwB,EAAAA,EAI3BE,EAAcC,EAAoB,MAClCC,EAAYC,EAAYxB,EAAKqB,GAE7BI,EAAgBC,EAAiB,CAAExB,GAAAA,EAAIE,UAAAA,EAAWE,KAAAA,EAAMM,YAAAA,EAAaC,KAAAA,EAAMK,UAAAA,IAEjFS,GAAU,iBACiB,QAAzBC,EAAAH,EAAcI,mBAAW,IAAAD,GAAAA,EAAAE,KAAAL,EAAGJ,EAAYU,QAC1C,GAAG,CAACN,IAEJ,IAAAO,EAAsFZ,EAA9Ea,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAoEd,EAAlEe,SAAAA,OAAW,IAAHD,GAAQA,EAAEE,EAAgDhB,EAAhDgB,aAAcC,EAAkCjB,EAAlCiB,WAAUC,EAAwBlB,EAAtBmB,aAAAA,OAAY,IAAAD,EAAG,CAAA,EAAEA,EAC3EE,EAAoBhC,IAAaE,EAEjC+B,EAAqBC,GACzB,WAAA,OACEC,EACEC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOpC,SAAWA,GAClBoC,EAAOT,SAAWA,GAClBS,EAAOhC,YAAca,EAAcb,aACnCgC,EAAOlC,SAAWA,GAErBqC,EAASH,EAAQnB,EAAcnB,MAC/BL,EACD,GACH,CAACO,EAAU2B,EAAUV,EAAcb,YAAaF,EAAUe,EAAcnB,KAAML,IAG1E+C,EAA+C,UAAvBvB,EAAcnB,KAAmB,QAAU,QACnE2C,EAAUxB,EAAcrB,UAE9B,OACE8C,EAAAC,cAACC,EAAOC,OAAAC,OAAA,CAAA,EACFf,EACJ,CAAAgB,QAAShB,aAAA,EAAAA,EAAcgB,QACvBC,SAAkB,QAARzC,EAAgB,QAAU,OACpC0C,kBAAkB,SAElBP,EAACC,cAAAF,iBACC/C,GAAIuB,EAAcvB,GAClBF,IAAKuB,EACLtB,UAAWwC,EACX5B,KAAMY,EAAcZ,KAAI,gBACTL,EACA,gBAAA2B,QAAYuB,GACvBjC,EAAcP,WAEjBF,EACCA,EAAaI,GAEb8B,EAAAC,cAAAD,EAAAS,SAAA,KACGvB,GAAgBwB,EAAkBxB,EAAcD,EAAUa,GAC3DE,EAAAC,cAACU,EAAK,CAAAC,KAAMd,EAAae,MAAM,UAAUxB,aAAc,CAAEkB,kBAAmB,SACzExB,IAEDI,GAAcG,IACdU,EAAAC,cAAA,MAAA,CAAKlD,UAAW2C,EAAOP,YACpBA,GAAcuB,EAAkBvB,EAAYF,EAAUa,GACtDR,GACCU,EAACC,cAAAa,EACC,CAAAC,KAAMC,EACN5D,KAAM,GACNL,UAAW2C,EAAOuB,cAClBC,kBAEA,EAAA,eAAA,OASpB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={wrapper:"wrapper","focus-visible":"focus-visible",highlighted:"highlighted",disabled:"disabled",readOnly:"readOnly",
|
|
1
|
+
var e={wrapper:"wrapper","focus-visible":"focus-visible",highlighted:"highlighted",disabled:"disabled",readOnly:"readOnly",small:"small",medium:"medium",large:"large",avatar:"avatar",icon:"icon",indent:"indent",endElement:"endElement",selectedCheck:"selectedCheck"};!function(e){const n="s_id-88c43575e1d9_4_5_3";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable selector-class-pattern */\n.wrapper {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n border-radius: 6px;\n color: var(--primary-text-color);\n cursor: pointer;\n}\n.wrapper:focus-visible, .wrapper.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper:focus:not(.focus-visible) {\n outline: none;\n}\n.wrapper.highlighted, .wrapper:hover:not(.disabled):not(.readOnly) {\n background-color: var(--primary-background-hover-color);\n}\n.wrapper.disabled {\n color: var(--disabled-text-color);\n cursor: not-allowed;\n}\n.wrapper.readOnly {\n cursor: default;\n}\n.wrapper.small {\n padding: 6px var(--space-8);\n}\n.wrapper.medium {\n padding: 9px 12px;\n}\n.wrapper.large {\n padding: 13px 12px;\n}\n.wrapper .avatar,\n.wrapper .icon {\n flex-shrink: 0;\n}\n.wrapper .indent {\n width: 20px;\n}\n.wrapper .endElement {\n padding-inline-start: var(--space-8);\n margin-inline-start: auto;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.wrapper .selectedCheck {\n flex-shrink: 0;\n color: var(--icon-color);\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=BaseItem.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var n={chips:"chips","chips-pop-in-emphasized":"chips-pop-in-emphasized",border:"border",withUserSelect:"withUserSelect",noMargin:"noMargin",withLeftIcon:"withLeftIcon",withRightIcon:"withRightIcon",withClose:"withClose",label:"label",icon:"icon",close:"close",small:"small",avatar:"avatar",customRenderer:"customRenderer",noAnimation:"noAnimation",left:"left",right:"right",disabled:"disabled",defaultCursor:"defaultCursor",readOnly:"readOnly",filterable:"filterable",pressed:"pressed",clickable:"clickable","focus-visible":"focus-visible",disableTextSelection:"disableTextSelection"};!function(n){const e="s_id-
|
|
1
|
+
var n={chips:"chips","chips-pop-in-emphasized":"chips-pop-in-emphasized",border:"border",withUserSelect:"withUserSelect",noMargin:"noMargin",withLeftIcon:"withLeftIcon",withRightIcon:"withRightIcon",withClose:"withClose",label:"label",icon:"icon",close:"close",small:"small",avatar:"avatar",customRenderer:"customRenderer",noAnimation:"noAnimation",left:"left",right:"right",disabled:"disabled",defaultCursor:"defaultCursor",readOnly:"readOnly",filterable:"filterable",pressed:"pressed",clickable:"clickable","focus-visible":"focus-visible",disableTextSelection:"disableTextSelection"};!function(n){const e="s_id-ed3055b733bb_4_5_3";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips {\n display: inline-flex;\n overflow: hidden;\n height: 24px;\n border-radius: var(--border-radius-full);\n padding: 0 8px;\n align-items: center;\n justify-content: center;\n margin: var(--chips-margin, 0 var(--spacing-xs));\n user-select: none;\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n color: var(--primary-text-color);\n animation: chips-pop-in-emphasized var(--motion-productive-medium) var(--motion-timing-emphasize);\n /* Medium: 8px default; 4px on sides that have an icon */\n}\n.chips.border {\n border: 1px solid var(--primary-background-color);\n}\n.chips.withUserSelect {\n user-select: text;\n cursor: text;\n}\n.chips.noMargin {\n margin: 0;\n}\n.chips.withLeftIcon {\n padding-inline-start: 4px;\n}\n.chips.withRightIcon {\n padding-inline-end: 4px;\n}\n.chips.withClose {\n position: relative;\n box-sizing: border-box;\n}\n.chips.withClose .label {\n min-width: 0;\n flex: 1 1 auto;\n}\n.chips.withClose .icon.close {\n position: absolute;\n inset-inline-end: 4px;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n opacity: 0;\n pointer-events: none;\n z-index: 1;\n}\n.chips.withClose:hover, .chips.withClose:focus-within {\n /* Keep overall width stable; carve space for the close control inside the chip */\n padding-inline-end: 26px;\n}\n.chips.withClose:hover .icon.close, .chips.withClose:focus-within .icon.close {\n opacity: 1;\n pointer-events: auto;\n}\n.chips.withClose.small:hover, .chips.withClose.small:focus-within {\n padding-inline-end: 22px;\n}\n.chips.small {\n height: 20px;\n /* Small: 4px default; 2px on sides that have an icon */\n padding: 0 4px;\n}\n.chips.small.withLeftIcon {\n padding-inline-start: 2px;\n}\n.chips.small.withRightIcon {\n padding-inline-end: 2px;\n}\n.chips.small .icon,\n.chips.small .avatar,\n.chips.small .customRenderer {\n min-width: 14px;\n}\n.chips .label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.chips.noAnimation {\n animation: none;\n}\n.chips .icon,\n.chips .avatar,\n.chips .customRenderer {\n min-width: 18px;\n}\n.chips .icon.left,\n.chips .avatar.left,\n.chips .customRenderer.left {\n margin-right: var(--spacing-xs);\n}\n.chips .icon.right,\n.chips .avatar.right,\n.chips .customRenderer.right {\n margin-left: var(--spacing-xs);\n}\n.chips .icon.close,\n.chips .avatar.close,\n.chips .customRenderer.close {\n margin-left: var(--spacing-xs);\n color: var(--primary-text-color);\n}\n.chips .icon {\n color: currentColor;\n}\n.chips.disabled .icon {\n color: var(--disabled-text-color);\n}\n.chips.disabled .label {\n color: var(--disabled-text-color);\n}\n.chips.defaultCursor {\n cursor: default;\n}\n.chips.readOnly {\n cursor: default;\n}\n.chips.filterable {\n background-color: var(--ui-background-color);\n color: var(--primary-text-color);\n cursor: pointer;\n}\n.chips.filterable .icon,\n.chips.filterable .label {\n color: currentColor;\n}\n.chips.filterable:hover:not(.disabled):not(.pressed), .chips.filterable:active:not(.disabled):not(.pressed) {\n background-color: var(--ui-background-hover-color);\n color: var(--primary-text-color);\n}\n.chips.filterable.pressed:not(.disabled) {\n background-color: var(--primary-color);\n color: var(--text-color-on-inverted);\n}\n.chips.filterable.pressed:not(.disabled) .icon,\n.chips.filterable.pressed:not(.disabled) .label,\n.chips.filterable.pressed:not(.disabled) .close {\n color: currentColor;\n}\n.chips.filterable.disabled {\n background-color: var(--disabled-background-color);\n cursor: not-allowed;\n}\n.chips.clickable {\n cursor: pointer;\n}\n.chips.clickable:focus-visible, .chips.clickable.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips.clickable:focus:not(.focus-visible) {\n outline: none;\n}\n.chips.clickable.disabled {\n cursor: default;\n}\n.chips.clickable.disableTextSelection {\n -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n\n@keyframes chips-pop-in-emphasized {\n 0% {\n transform: scale(0.3);\n opacity: 0;\n }\n 70% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n}");export{n as default};
|
|
2
2
|
//# sourceMappingURL=Chips.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var n={clickableWrapper:"clickableWrapper","focus-visible":"focus-visible",label:"label",small:"small",withLeg:"withLeg",legWrapper:"legWrapper",kindFill:"kindFill",colorPrimary:"colorPrimary",clickable:"clickable",colorDark:"colorDark",colorNegative:"colorNegative",colorPositive:"colorPositive",smallText:"smallText",kindLine:"kindLine"};!function(n){const
|
|
1
|
+
var n={clickableWrapper:"clickableWrapper","focus-visible":"focus-visible",label:"label",small:"small",withLeg:"withLeg",legWrapper:"legWrapper",kindFill:"kindFill",colorPrimary:"colorPrimary",clickable:"clickable",colorDark:"colorDark",colorNegative:"colorNegative",colorPositive:"colorPositive",smallText:"smallText",kindLine:"kindLine"};!function(n){const o="s_id-2606416fffd1_4_5_3";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+o))return;const l=document.createElement("style");l.id=o,i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.clickableWrapper {\n cursor: pointer;\n}\n.clickableWrapper:focus-visible, .clickableWrapper.focus-visible {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickableWrapper:focus:not(.focus-visible) {\n outline: none;\n}\n.clickableWrapper:active {\n transform: scale(0.95) translate3d(0, 0, 0);\n transition: var(--motion-productive-short) transform;\n}\n\n.label {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n padding: 2px var(--spacing-small);\n position: relative;\n}\n.label.small {\n padding: 2px var(--spacing-xs);\n border-radius: 4px;\n}\n\n.withLeg {\n border-radius: 4px 4px 4px 0;\n}\n\n.legWrapper {\n position: absolute;\n height: 8px;\n top: 100%;\n left: 0;\n display: inline-flex;\n}\n\n.kindFill {\n border: none;\n background-color: transparent;\n padding: 2px var(--spacing-small);\n}\n.kindFill.small {\n padding: 2px var(--spacing-xs);\n}\n.kindFill.colorPrimary {\n background-color: var(--surface-primary-color);\n color: var(--primary-color);\n}\n.kindFill.colorPrimary svg path {\n fill: var(--surface-primary-color);\n}\n.kindFill.colorPrimary.clickable:hover, .kindFill.colorPrimary.clickable:active {\n background-color: var(--surface-primary-color);\n}\n.kindFill.colorDark {\n background-color: var(--ui-background-color);\n color: var(--primary-text-color);\n}\n.kindFill.colorDark svg path {\n fill: var(--ui-background-color);\n}\n.kindFill.colorDark.clickable:hover, .kindFill.colorDark.clickable:active {\n background-color: var(--ui-background-color);\n}\n.kindFill.colorNegative {\n background-color: var(--surface-negative-color);\n color: var(--negative-color);\n}\n.kindFill.colorNegative svg path {\n fill: var(--surface-negative-color);\n}\n.kindFill.colorNegative.clickable:hover, .kindFill.colorNegative.clickable:active {\n background-color: var(--surface-negative-color);\n}\n.kindFill.colorPositive {\n background-color: var(--surface-positive-color);\n color: var(--positive-color);\n}\n.kindFill.colorPositive svg path {\n fill: var(--surface-positive-color);\n}\n.kindFill.colorPositive.clickable:hover, .kindFill.colorPositive.clickable:active {\n background-color: var(--surface-positive-color);\n}\n.kindFill .smallText {\n line-height: 14px;\n}\n\n.kindLine {\n border: 1px solid currentColor;\n padding: 1px var(--spacing-small);\n}\n.kindLine.small {\n padding: 0 var(--spacing-xs);\n}\n.kindLine .legWrapper {\n left: -1px;\n top: calc(100% + 1px);\n}\n.kindLine.colorPrimary {\n color: var(--primary-color);\n}\n.kindLine.colorPrimary svg path {\n fill: var(--primary-color);\n}\n.kindLine.colorPrimary.clickable:hover, .kindLine.colorPrimary.clickable:active {\n background-color: var(--primary-background-hover-color);\n}\n.kindLine.colorDark {\n color: var(--primary-text-color);\n}\n.kindLine.colorDark svg path {\n fill: var(--primary-text-color);\n}\n.kindLine.colorDark.clickable:hover, .kindLine.colorDark.clickable:active {\n background-color: var(--primary-background-hover-color);\n}\n.kindLine.colorNegative {\n color: var(--negative-color);\n}\n.kindLine.colorNegative svg path {\n fill: var(--negative-color);\n}\n.kindLine.colorNegative.clickable:hover, .kindLine.colorNegative.clickable:active {\n background-color: var(--negative-color-selected);\n}\n.kindLine.colorPositive {\n color: var(--positive-color);\n}\n.kindLine.colorPositive svg path {\n fill: var(--positive-color);\n}\n.kindLine.colorPositive.clickable:hover, .kindLine.colorPositive.clickable:active {\n background-color: var(--positive-color-selected);\n}\n.kindLine .smallText {\n line-height: 14px;\n}");export{n as default};
|
|
2
2
|
//# sourceMappingURL=Label.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e}from"../../../../_virtual/_tslib.js";import o,{forwardRef as t,useRef as i,useMemo as r}from"react";import{Tooltip as s}from"@vibe/tooltip/mockedClassNames";import{useIsOverflowing as a}from"@vibe/hooks";import l from"../../Label/Label.js";import n from"./MenuItem.module.scss.js";import c from"./components/BaseMenuItem/BaseMenuItem.js";import m from"./components/MenuItemIcon/MenuItemIcon.js";import{Flex as p}from"@vibe/layout/mockedClassNames";var d=t((function(t,d){var u=t.className,b=t.iconWrapperClassName,g=t.rightIconWrapperClassName,f=t.title,h=void 0===f?"":f,C=t.label,v=void 0===C?"":C,I=t.icon,y=void 0===I?"":I,k=t.rightIcon,N=void 0===k?"":k,j=t.rightIconType,E=t.rightIconBackgroundColor,M=t.iconType,B=t.iconBackgroundColor,w=t.disabled,P=void 0!==w&&w,T=t.disableReason,W=t.selected,x=void 0!==W&&W,D=t.key,O=t.children,R=t.tooltipContent,S=t.tooltipPosition,L=void 0===S?"right":S,_=t.tooltipShowDelay,z=void 0===_?300:_,V=t.tooltipProps,q=e(t,["className","iconWrapperClassName","rightIconWrapperClassName","title","label","icon","rightIcon","rightIconType","rightIconBackgroundColor","iconType","iconBackgroundColor","disabled","disableReason","selected","key","children","tooltipContent","tooltipPosition","tooltipShowDelay","tooltipProps"]),A=i(),F=a({ref:A})||P||R,G=r((function(){return P?T:R||h}),[T,P,h,R]),H=r((function(){if(v)return"string"==typeof v?o.createElement(l,{
|
|
1
|
+
import{__rest as e}from"../../../../_virtual/_tslib.js";import o,{forwardRef as t,useRef as i,useMemo as r}from"react";import{Tooltip as s}from"@vibe/tooltip/mockedClassNames";import{useIsOverflowing as a}from"@vibe/hooks";import l from"../../Label/Label.js";import n from"./MenuItem.module.scss.js";import c from"./components/BaseMenuItem/BaseMenuItem.js";import m from"./components/MenuItemIcon/MenuItemIcon.js";import{Flex as p}from"@vibe/layout/mockedClassNames";var d=t((function(t,d){var u=t.className,b=t.iconWrapperClassName,g=t.rightIconWrapperClassName,f=t.title,h=void 0===f?"":f,C=t.label,v=void 0===C?"":C,I=t.icon,y=void 0===I?"":I,k=t.rightIcon,N=void 0===k?"":k,j=t.rightIconType,E=t.rightIconBackgroundColor,M=t.iconType,B=t.iconBackgroundColor,w=t.disabled,P=void 0!==w&&w,T=t.disableReason,W=t.selected,x=void 0!==W&&W,D=t.key,O=t.children,R=t.tooltipContent,S=t.tooltipPosition,L=void 0===S?"right":S,_=t.tooltipShowDelay,z=void 0===_?300:_,V=t.tooltipProps,q=e(t,["className","iconWrapperClassName","rightIconWrapperClassName","title","label","icon","rightIcon","rightIconType","rightIconBackgroundColor","iconType","iconBackgroundColor","disabled","disableReason","selected","key","children","tooltipContent","tooltipPosition","tooltipShowDelay","tooltipProps"]),A=i(),F=a({ref:A})||P||R,G=r((function(){return P?T:R||h}),[T,P,h,R]),H=r((function(){if(v)return"string"==typeof v?o.createElement(l,{text:v,size:"small"}):o.isValidElement(v)&&v.type===l?v:void 0}),[v]);return o.createElement(s,Object.assign({content:F?G:null,position:L,showDelay:z},V),o.createElement(c,Object.assign({key:D,ref:d,subMenu:O,className:u,disabled:P,selected:x},q),!!y&&o.createElement(m,{icon:y,type:M,disabled:P,selected:x,backgroundColor:B,wrapperClassName:b}),o.createElement("div",{ref:A,className:n.title},h),o.createElement(p,{gap:"xs"},!!N&&!O&&o.createElement(m,{icon:N,type:j,disabled:P,selected:x,backgroundColor:E,isRightIcon:!0,wrapperClassName:g}),H)))}));Object.assign(d,{isSelectable:!0,isMenuChild:!0});export{d as default};
|
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type IconType, type SubIcon } from \"@vibe/icon\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type CloseMenuOption, type MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\nimport { Flex } from \"@vibe/layout\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * Class name applied to the icon wrapper.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu, if applicable. Must be a single `Menu` element.\n */\n children?: MenuChild;\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\n */\n autoAdjustOnSubMenuContentResize?: boolean;\n}\n\nexport interface MenuItemTitleComponentProps extends Omit<MenuItemProps, \"title\"> {\n title: ReactElement;\n \"aria-label\": NonNullable<AriaAttributes[\"aria-label\"]>;\n}\n\nconst MenuItem = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n rightIconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n iconType,\n iconBackgroundColor,\n disabled = false,\n disableReason,\n selected = false,\n key,\n children,\n tooltipContent,\n tooltipPosition = \"right\",\n tooltipShowDelay = 300,\n tooltipProps,\n ...baseMenuProps\n }: MenuItemProps | MenuItemTitleComponentProps,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const titleRef = useRef();\n\n const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });\n const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;\n\n const finalTooltipContent = useMemo(() => {\n if (disabled) return disableReason;\n if (tooltipContent) return tooltipContent;\n return title;\n }, [disableReason, disabled, title, tooltipContent]);\n\n const renderLabel = useMemo(() => {\n if (!label) return;\n if (typeof label === \"string\") {\n return <Label kind=\"line\" text={label} size=\"small\" />;\n }\n if (React.isValidElement(label) && label.type === Label) {\n return label;\n }\n }, [label]);\n\n return (\n <Tooltip\n content={shouldShowTooltip ? finalTooltipContent : null}\n position={tooltipPosition}\n showDelay={tooltipShowDelay}\n {...tooltipProps}\n >\n <BaseMenuItem\n key={key}\n ref={ref}\n subMenu={children}\n className={className}\n disabled={disabled}\n selected={selected}\n {...baseMenuProps}\n >\n {Boolean(icon) && (\n <MenuItemIcon\n icon={icon}\n type={iconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={iconBackgroundColor}\n wrapperClassName={iconWrapperClassName}\n />\n )}\n <div ref={titleRef} className={styles.title}>\n {title}\n </div>\n <Flex gap=\"xs\">\n {Boolean(rightIcon) && !children && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n isRightIcon={true}\n wrapperClassName={rightIconWrapperClassName}\n />\n )}\n {renderLabel}\n </Flex>\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","_a","ref","className","iconWrapperClassName","rightIconWrapperClassName","_a$title","title","_a$label","label","_a$icon","icon","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","iconType","iconBackgroundColor","_a$disabled","disabled","disableReason","_a$selected","selected","key","children","tooltipContent","_a$tooltipPosition","tooltipPosition","_a$tooltipShowDelay","tooltipShowDelay","tooltipProps","baseMenuProps","__rest","titleRef","useRef","shouldShowTooltip","useIsOverflowing","finalTooltipContent","useMemo","renderLabel","React","createElement","Label","kind","text","size","isValidElement","type","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","Flex","gap","isRightIcon","isSelectable","isMenuChild"],"mappings":"mdA+KMA,IAAAA,EAAWC,GACf,SACEC,EAuBAC,GAvBA,IACEC,EAmBYF,EAnBZE,UACAC,EAkBYH,EAlBZG,qBACAC,EAiBYJ,EAjBZI,0BAAyBC,EAiBbL,EAhBZM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAgBEP,EAfZQ,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAeET,EAdZU,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAcGX,EAbZY,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAYYb,EAZZa,cACAC,EAWYd,EAXZc,yBACAC,EAUYf,EAVZe,SACAC,EASYhB,EATZgB,oBAAmBC,EASPjB,EARZkB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAOYnB,EAPZmB,cAAaC,EAODpB,EANZqB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAKYtB,EALZsB,IACAC,EAIYvB,EAJZuB,SACAC,EAGYxB,EAHZwB,eAAcC,EAGFzB,EAFZ0B,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAEb3B,EADZ4B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAAY7B,EAAZ6B,aACGC,EArBLC,EAAA/B,EAAA,CAAA,YAAA,uBAAA,4BAAA,QAAA,QAAA,OAAA,YAAA,gBAAA,2BAAA,WAAA,sBAAA,WAAA,gBAAA,WAAA,MAAA,WAAA,iBAAA,kBAAA,mBAAA,iBAyBMgC,EAAWC,IAGXC,EAD+BC,EAAiB,CAAElC,IAAK+B,KACHd,GAAYM,EAEhEY,EAAsBC,GAAQ,WAClC,OAAInB,EAAiBC,EACjBK,GACGlB,CACR,GAAE,CAACa,EAAeD,EAAUZ,EAAOkB,IAE9Bc,EAAcD,GAAQ,WAC1B,GAAK7B,EACL,MAAqB,iBAAVA,EACF+B,EAACC,cAAAC,EAAM,CAAAC,KAAK,OAAOC,KAAMnC,EAAOoC,KAAK,UAE1CL,EAAMM,eAAerC,IAAUA,EAAMsC,OAASL,EACzCjC,OADT,CAGF,GAAG,CAACA,IAEJ,OACE+B,EAACC,cAAAO,EACCC,OAAAC,OAAA,CAAAC,QAAShB,EAAoBE,EAAsB,KACnDe,SAAUzB,EACV0B,UAAWxB,GACPC,GAEJU,EAACC,cAAAa,EACCL,OAAAC,OAAA,CAAA3B,IAAKA,EACLrB,IAAKA,EACLqD,QAAS/B,EACTrB,UAAWA,EACXgB,SAAUA,EACVG,SAAUA,GACNS,KAEKpB,GACP6B,EAACC,cAAAe,EACC,CAAA7C,KAAMA,EACNoC,KAAM/B,EACNG,SAAUA,EACVG,SAAUA,EACVmC,gBAAiBxC,EACjByC,iBAAkBtD,IAGtBoC,EAAKC,cAAA,MAAA,CAAAvC,IAAK+B,EAAU9B,UAAWwD,EAAOpD,OACnCA,GAEHiC,EAAAC,cAACmB,EAAI,CAACC,IAAI,QACChD,IAAeW,GACtBgB,EAACC,cAAAe,GACC7C,KAAME,EACNkC,KAAMjC,EACNK,SAAUA,EACVG,SAAUA,EACVmC,gBAAiB1C,EACjB+C,aAAa,EACbJ,iBAAkBrD,IAGrBkC,IAKX,IAGFU,OAAOC,OAAOnD,EAAU,CACtBgE,cAAc,EACdC,aAAa"}
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type IconType, type SubIcon } from \"@vibe/icon\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type CloseMenuOption, type MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\nimport { Flex } from \"@vibe/layout\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * Class name applied to the icon wrapper.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu, if applicable. Must be a single `Menu` element.\n */\n children?: MenuChild;\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\n */\n autoAdjustOnSubMenuContentResize?: boolean;\n}\n\nexport interface MenuItemTitleComponentProps extends Omit<MenuItemProps, \"title\"> {\n title: ReactElement;\n \"aria-label\": NonNullable<AriaAttributes[\"aria-label\"]>;\n}\n\nconst MenuItem = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n rightIconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n iconType,\n iconBackgroundColor,\n disabled = false,\n disableReason,\n selected = false,\n key,\n children,\n tooltipContent,\n tooltipPosition = \"right\",\n tooltipShowDelay = 300,\n tooltipProps,\n ...baseMenuProps\n }: MenuItemProps | MenuItemTitleComponentProps,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const titleRef = useRef();\n\n const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });\n const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;\n\n const finalTooltipContent = useMemo(() => {\n if (disabled) return disableReason;\n if (tooltipContent) return tooltipContent;\n return title;\n }, [disableReason, disabled, title, tooltipContent]);\n\n const renderLabel = useMemo(() => {\n if (!label) return;\n if (typeof label === \"string\") {\n return <Label text={label} size=\"small\" />;\n }\n if (React.isValidElement(label) && label.type === Label) {\n return label;\n }\n }, [label]);\n\n return (\n <Tooltip\n content={shouldShowTooltip ? finalTooltipContent : null}\n position={tooltipPosition}\n showDelay={tooltipShowDelay}\n {...tooltipProps}\n >\n <BaseMenuItem\n key={key}\n ref={ref}\n subMenu={children}\n className={className}\n disabled={disabled}\n selected={selected}\n {...baseMenuProps}\n >\n {Boolean(icon) && (\n <MenuItemIcon\n icon={icon}\n type={iconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={iconBackgroundColor}\n wrapperClassName={iconWrapperClassName}\n />\n )}\n <div ref={titleRef} className={styles.title}>\n {title}\n </div>\n <Flex gap=\"xs\">\n {Boolean(rightIcon) && !children && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n isRightIcon={true}\n wrapperClassName={rightIconWrapperClassName}\n />\n )}\n {renderLabel}\n </Flex>\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","_a","ref","className","iconWrapperClassName","rightIconWrapperClassName","_a$title","title","_a$label","label","_a$icon","icon","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","iconType","iconBackgroundColor","_a$disabled","disabled","disableReason","_a$selected","selected","key","children","tooltipContent","_a$tooltipPosition","tooltipPosition","_a$tooltipShowDelay","tooltipShowDelay","tooltipProps","baseMenuProps","__rest","titleRef","useRef","shouldShowTooltip","useIsOverflowing","finalTooltipContent","useMemo","renderLabel","React","createElement","Label","text","size","isValidElement","type","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","Flex","gap","isRightIcon","isSelectable","isMenuChild"],"mappings":"mdA+KMA,IAAAA,EAAWC,GACf,SACEC,EAuBAC,GAvBA,IACEC,EAmBYF,EAnBZE,UACAC,EAkBYH,EAlBZG,qBACAC,EAiBYJ,EAjBZI,0BAAyBC,EAiBbL,EAhBZM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAgBEP,EAfZQ,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAeET,EAdZU,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAcGX,EAbZY,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAYYb,EAZZa,cACAC,EAWYd,EAXZc,yBACAC,EAUYf,EAVZe,SACAC,EASYhB,EATZgB,oBAAmBC,EASPjB,EARZkB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAOYnB,EAPZmB,cAAaC,EAODpB,EANZqB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAKYtB,EALZsB,IACAC,EAIYvB,EAJZuB,SACAC,EAGYxB,EAHZwB,eAAcC,EAGFzB,EAFZ0B,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAEb3B,EADZ4B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAAY7B,EAAZ6B,aACGC,EArBLC,EAAA/B,EAAA,CAAA,YAAA,uBAAA,4BAAA,QAAA,QAAA,OAAA,YAAA,gBAAA,2BAAA,WAAA,sBAAA,WAAA,gBAAA,WAAA,MAAA,WAAA,iBAAA,kBAAA,mBAAA,iBAyBMgC,EAAWC,IAGXC,EAD+BC,EAAiB,CAAElC,IAAK+B,KACHd,GAAYM,EAEhEY,EAAsBC,GAAQ,WAClC,OAAInB,EAAiBC,EACjBK,GACGlB,CACR,GAAE,CAACa,EAAeD,EAAUZ,EAAOkB,IAE9Bc,EAAcD,GAAQ,WAC1B,GAAK7B,EACL,MAAqB,iBAAVA,EACF+B,EAAAC,cAACC,EAAK,CAACC,KAAMlC,EAAOmC,KAAK,UAE9BJ,EAAMK,eAAepC,IAAUA,EAAMqC,OAASJ,EACzCjC,OADT,CAGF,GAAG,CAACA,IAEJ,OACE+B,EAACC,cAAAM,EACCC,OAAAC,OAAA,CAAAC,QAASf,EAAoBE,EAAsB,KACnDc,SAAUxB,EACVyB,UAAWvB,GACPC,GAEJU,EAACC,cAAAY,EACCL,OAAAC,OAAA,CAAA1B,IAAKA,EACLrB,IAAKA,EACLoD,QAAS9B,EACTrB,UAAWA,EACXgB,SAAUA,EACVG,SAAUA,GACNS,KAEKpB,GACP6B,EAACC,cAAAc,EACC,CAAA5C,KAAMA,EACNmC,KAAM9B,EACNG,SAAUA,EACVG,SAAUA,EACVkC,gBAAiBvC,EACjBwC,iBAAkBrD,IAGtBoC,EAAKC,cAAA,MAAA,CAAAvC,IAAK+B,EAAU9B,UAAWuD,EAAOnD,OACnCA,GAEHiC,EAAAC,cAACkB,EAAI,CAACC,IAAI,QACC/C,IAAeW,GACtBgB,EAACC,cAAAc,GACC5C,KAAME,EACNiC,KAAMhC,EACNK,SAAUA,EACVG,SAAUA,EACVkC,gBAAiBzC,EACjB8C,aAAa,EACbJ,iBAAkBpD,IAGrBkC,IAKX,IAGFS,OAAOC,OAAOlD,EAAU,CACtB+D,cAAc,EACdC,aAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={item:"item",splitMenuItem:"splitMenuItem",disabled:"disabled",focused:"focused",initialSelected:"initialSelected",selected:"selected"};!function(e){const n="s_id-
|
|
1
|
+
var e={item:"item",splitMenuItem:"splitMenuItem",disabled:"disabled",focused:"focused",initialSelected:"initialSelected",selected:"selected"};!function(e){const n="s_id-8562a1149ca1_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.item {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n margin: unset;\n display: flex;\n flex-direction: row;\n width: 100%;\n box-sizing: border-box;\n padding: var(--space-4) var(--space-8);\n cursor: pointer;\n user-select: none;\n align-items: center;\n overflow: visible;\n border: 1px solid transparent;\n border-radius: 8px;\n outline: none;\n}\n.item.splitMenuItem {\n padding: 0 0 0 var(--space-8);\n}\n.item.disabled {\n cursor: not-allowed;\n color: var(--disabled-text-color);\n}\n.item.focused:not(.disabled) {\n background-color: var(--primary-background-hover-color);\n}\n.item.focused:not(.disabled):not(:hover):not(.initialSelected) {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.item:hover:not(.disabled) {\n background-color: var(--primary-background-hover-color);\n}\n.item.selected:not(.disabled) {\n background-color: var(--primary-background-hover-color);\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=BaseMenuItem.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var n={textField:"textField",labelWrapper:"labelWrapper",subTextContainer:"subTextContainer",counter:"counter",disabled:"disabled",icon:"icon",inputWrapper:"inputWrapper",input:"input",iconContainer:"iconContainer",iconContainerHasIcon:"iconContainerHasIcon",readOnly:"readOnly",inputHover:"inputHover",inputActive:"inputActive",inputHasIcon:"inputHasIcon",round:"round",square:"square",onlyUnderline:"onlyUnderline",tooltipContainer:"tooltipContainer",wrapperSizeMedium:"wrapperSizeMedium",wrapperSizeLarge:"wrapperSizeLarge",iconContainerLeft:"iconContainerLeft",inputWrapperIconLeft:"inputWrapperIconLeft",iconContainerActive:"iconContainerActive",iconContainerClickable:"iconContainerClickable",inputErrorValidation:"inputErrorValidation",subTextContainerStatus:"subTextContainerStatus",inputSuccessValidation:"inputSuccessValidation",wrapperSizeSmall:"wrapperSizeSmall",inputWrapperSizeSmall:"inputWrapperSizeSmall",loaderContainer:"loaderContainer",loaderContainerHasIcon:"loaderContainerHasIcon",loader:"loader",loaderSvg:"loaderSvg"};!function(n){const e="s_id-bb02dd435862_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField {\n position: relative;\n box-sizing: border-box;\n font: var(--font-text2-normal);\n width: 100%;\n}\n\n.textField * {\n box-sizing: border-box;\n}\n\n.textField .labelWrapper {\n width: 100%;\n}\n\n.textField .subTextContainer {\n display: flex;\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n padding-block: 1px;\n}\n\n.textField .subTextContainer .counter {\n margin-inline-start: auto;\n}\n\n.textField.disabled .icon {\n cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper {\n cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input {\n user-select: none;\n border: none;\n pointer-events: none;\n background-color: var(--disabled-background-color);\n cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input::placeholder {\n color: var(--disabled-text-color);\n}\n\n.textField.disabled .inputWrapper .iconContainer.iconContainerHasIcon:hover {\n background-color: transparent;\n}\n\n.textField .inputWrapper {\n width: 100%;\n position: relative;\n}\n\n.textField .inputWrapper .input {\n width: 100%;\n height: 100%;\n outline: 0;\n background-color: var(--secondary-background-color);\n border: 1px solid;\n border-color: var(--ui-border-color);\n border-radius: var(--border-radius-small);\n transition: border-color var(--motion-productive-medium) ease-in;\n padding: var(--space-8) var(--space-4) var(--space-8) var(--space-12);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--primary-text-color);\n}\n.textField .inputWrapper .input.readOnly {\n background-color: var(--allgrey-background-color);\n border: none;\n}\n\n.textField .inputWrapper .input.inputHover {\n border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input:focus,\n.textField .inputWrapper .input:active,\n.textField .inputWrapper .input.inputActive {\n border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input::placeholder {\n color: var(--placeholder-color);\n font-weight: 400;\n}\n\n.textField .inputWrapper .input.inputHasIcon {\n padding: var(--space-8) var(--space-24) var(--space-8) var(--space-8);\n}\n\n.textField .inputWrapper .input.round {\n border-radius: 50px;\n}\n\n.textField .inputWrapper .input.square {\n border-radius: 0;\n}\n\n.textField .inputWrapper .input.onlyUnderline {\n border-inline: none;\n border-top: none;\n padding: var(--space-8) var(--space-24) var(--space-8) var(--space-4);\n border-radius: 0 !important;\n}\n\n.textField .inputWrapper .tooltipContainer {\n position: absolute;\n top: 50%;\n inset-inline-end: 0;\n width: 32px;\n height: 20px;\n transform: translateY(-50%);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .tooltipContainer {\n width: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .tooltipContainer {\n width: 46px;\n}\n\n.textField .inputWrapper .iconContainer {\n position: absolute;\n top: 50%;\n inset-inline-end: 4px;\n width: 24px;\n height: 24px;\n transform: translateY(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-small);\n opacity: 0;\n pointer-events: none;\n -webkit-appearance: none;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerLeft {\n left: 8px;\n right: auto;\n opacity: 1;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerLeft .icon {\n opacity: 1;\n transform: none;\n}\n\n.textField .inputWrapper.inputWrapperIconLeft .input {\n padding-left: 36px;\n}\n\n.textField .inputWrapper.inputWrapperIconLeft .input.inputHasIcon {\n padding-left: 36px;\n padding-right: var(--spacing-medium);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon.iconContainerClickable {\n pointer-events: all;\n cursor: pointer;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon:not(.iconContainerClickable) {\n pointer-events: none;\n cursor: default;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive {\n opacity: 1;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive .icon {\n opacity: 1;\n pointer-events: all;\n transform: rotate(0) scale(1);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:hover {\n background-color: var(--primary-background-hover-color);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:active {\n transform: translateY(-50%) scale(0.9);\n}\n\n.textField .inputWrapper .iconContainer .icon {\n transform: rotate(90deg) scale(0.8);\n color: var(--icon-color);\n will-change: transform;\n pointer-events: none;\n transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n font-size: 14px;\n font-family: var(--font-family);\n}\n\n.textField .inputWrapper.inputErrorValidation:hover .input {\n border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input {\n border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input:focus,\n.textField .inputWrapper.inputErrorValidation .input:active {\n border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon {\n color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon:hover {\n color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .subTextContainerStatus,\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .counter {\n color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation:hover .input {\n border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input {\n border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input:focus,\n.textField .inputWrapper.inputSuccessValidation .input:active {\n border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon {\n color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon:hover {\n color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation + .subTextContainer .subTextContainerStatus {\n color: var(--positive-color);\n}\n\n.textField .inputWrapper.wrapperSizeSmall {\n height: 32px;\n}\n\n.textField .inputWrapper.wrapperSizeSmall .input {\n padding-inline-start: var(--space-8);\n font: var(--font-text2-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {\n padding-inline-start: var(--space-4);\n}\n\n.textField .inputWrapper.wrapperSizeMedium {\n height: 36px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input {\n font: var(--font-text2-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {\n padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {\n padding-inline-start: 4px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer {\n pointer-events: none;\n height: 32px;\n width: 32px;\n outline: none;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer:hover + .iconContainer + .input {\n border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeLarge {\n height: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input {\n font: var(--font-text1-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {\n padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {\n padding-inline-start: var(--space-4);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer {\n height: 40px;\n width: 40px;\n}\n\n.textField .inputWrapper:hover .input {\n border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .loaderContainer {\n position: absolute;\n top: 50%;\n inset-inline-end: 4px;\n width: 24px;\n height: 24px;\n transform: translateY(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.textField .inputWrapper .loaderContainer.loaderContainerHasIcon {\n inset-inline-end: 32px;\n}\n\n.textField .inputWrapper .loaderContainer .loader {\n width: 16px;\n height: 16px;\n}\n\n.textField .inputWrapper .loaderContainer .loader .loaderSvg {\n color: var(--secondary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer .icon {\n font-size: 16px;\n font-family: var(--font-family);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer .icon {\n font-size: 16px;\n font-family: var(--font-family);\n}\n\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n filter: invert(1);\n}");export{n as default};
|
|
1
|
+
var n={textField:"textField",labelWrapper:"labelWrapper",subTextContainer:"subTextContainer",counter:"counter",disabled:"disabled",icon:"icon",inputWrapper:"inputWrapper",input:"input",iconContainer:"iconContainer",iconContainerHasIcon:"iconContainerHasIcon",readOnly:"readOnly",inputHover:"inputHover",inputActive:"inputActive",inputHasIcon:"inputHasIcon",round:"round",square:"square",onlyUnderline:"onlyUnderline",tooltipContainer:"tooltipContainer",wrapperSizeMedium:"wrapperSizeMedium",wrapperSizeLarge:"wrapperSizeLarge",iconContainerLeft:"iconContainerLeft",inputWrapperIconLeft:"inputWrapperIconLeft",iconContainerActive:"iconContainerActive",iconContainerClickable:"iconContainerClickable",inputErrorValidation:"inputErrorValidation",subTextContainerStatus:"subTextContainerStatus",inputSuccessValidation:"inputSuccessValidation",wrapperSizeSmall:"wrapperSizeSmall",inputWrapperSizeSmall:"inputWrapperSizeSmall",loaderContainer:"loaderContainer",loaderContainerHasIcon:"loaderContainerHasIcon",loader:"loader",loaderSvg:"loaderSvg"};!function(n){const e="s_id-136cfc3f09f2_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField {\n position: relative;\n box-sizing: border-box;\n font: var(--font-text2-normal);\n width: 100%;\n}\n\n.textField * {\n box-sizing: border-box;\n}\n\n.textField .labelWrapper {\n width: 100%;\n}\n\n.textField .subTextContainer {\n display: flex;\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n padding-block: 1px;\n}\n\n.textField .subTextContainer .counter {\n margin-inline-start: auto;\n}\n\n.textField.disabled .icon {\n cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper {\n cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input {\n user-select: none;\n border: none;\n pointer-events: none;\n background-color: var(--disabled-background-color);\n cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input::placeholder {\n color: var(--disabled-text-color);\n}\n\n.textField.disabled .inputWrapper .iconContainer.iconContainerHasIcon:hover {\n background-color: transparent;\n}\n\n.textField .inputWrapper {\n width: 100%;\n position: relative;\n}\n\n.textField .inputWrapper .input {\n width: 100%;\n height: 100%;\n outline: 0;\n background-color: var(--secondary-background-color);\n border: 1px solid;\n border-color: var(--ui-border-color);\n border-radius: 8px; /* facelift: 8px input radius */\n transition: border-color var(--motion-productive-medium) ease-in;\n padding: var(--space-8) var(--space-4) var(--space-8) var(--space-12);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--primary-text-color);\n}\n.textField .inputWrapper .input.readOnly {\n background-color: var(--allgrey-background-color);\n border: none;\n}\n\n.textField .inputWrapper .input.inputHover {\n border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input:focus,\n.textField .inputWrapper .input:active,\n.textField .inputWrapper .input.inputActive {\n border-color: var(--primary-color);\n}\n\n.textField .inputWrapper .input::placeholder {\n color: var(--placeholder-color);\n font-weight: 400;\n}\n\n.textField .inputWrapper .input.inputHasIcon {\n padding: var(--space-8) var(--space-24) var(--space-8) var(--space-8);\n}\n\n.textField .inputWrapper .input.round {\n border-radius: 50px;\n}\n\n.textField .inputWrapper .input.square {\n border-radius: 0;\n}\n\n.textField .inputWrapper .input.onlyUnderline {\n border-inline: none;\n border-top: none;\n padding: var(--space-8) var(--space-24) var(--space-8) var(--space-4);\n border-radius: 0 !important;\n}\n\n.textField .inputWrapper .tooltipContainer {\n position: absolute;\n top: 50%;\n inset-inline-end: 0;\n width: 32px;\n height: 20px;\n transform: translateY(-50%);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .tooltipContainer {\n width: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .tooltipContainer {\n width: 46px;\n}\n\n.textField .inputWrapper .iconContainer {\n position: absolute;\n top: 50%;\n inset-inline-end: 4px;\n width: 24px;\n height: 24px;\n transform: translateY(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--border-radius-small);\n opacity: 0;\n pointer-events: none;\n -webkit-appearance: none;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerLeft {\n left: 8px;\n right: auto;\n opacity: 1;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerLeft .icon {\n opacity: 1;\n transform: none;\n}\n\n.textField .inputWrapper.inputWrapperIconLeft .input {\n padding-left: 36px;\n}\n\n.textField .inputWrapper.inputWrapperIconLeft .input.inputHasIcon {\n padding-left: 36px;\n padding-right: var(--spacing-medium);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon.iconContainerClickable {\n pointer-events: all;\n cursor: pointer;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon:not(.iconContainerClickable) {\n pointer-events: none;\n cursor: default;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive {\n opacity: 1;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive .icon {\n opacity: 1;\n pointer-events: all;\n transform: rotate(0) scale(1);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:hover {\n background-color: var(--primary-background-hover-color);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:active {\n transform: translateY(-50%) scale(0.9);\n}\n\n.textField .inputWrapper .iconContainer .icon {\n transform: rotate(90deg) scale(0.8);\n color: var(--icon-color);\n will-change: transform;\n pointer-events: none;\n transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n font-size: 14px;\n font-family: var(--font-family);\n}\n\n.textField .inputWrapper.inputErrorValidation:hover .input {\n border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input {\n border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input:focus,\n.textField .inputWrapper.inputErrorValidation .input:active {\n border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon {\n color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon:hover {\n color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .subTextContainerStatus,\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .counter {\n color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation:hover .input {\n border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input {\n border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input:focus,\n.textField .inputWrapper.inputSuccessValidation .input:active {\n border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon {\n color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon:hover {\n color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation + .subTextContainer .subTextContainerStatus {\n color: var(--positive-color);\n}\n\n.textField .inputWrapper.wrapperSizeSmall {\n height: 32px;\n}\n\n.textField .inputWrapper.wrapperSizeSmall .input {\n padding-inline-start: var(--space-8);\n font: var(--font-text2-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {\n padding-inline-start: var(--space-4);\n}\n\n.textField .inputWrapper.wrapperSizeMedium {\n height: 36px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input {\n font: var(--font-text2-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {\n padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {\n padding-inline-start: 4px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer {\n pointer-events: none;\n height: 32px;\n width: 32px;\n outline: none;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer:hover + .iconContainer + .input {\n border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeLarge {\n height: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input {\n font: var(--font-text1-normal);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {\n padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {\n padding-inline-start: var(--space-4);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer {\n height: 40px;\n width: 40px;\n}\n\n.textField .inputWrapper:hover .input {\n border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .loaderContainer {\n position: absolute;\n top: 50%;\n inset-inline-end: 4px;\n width: 24px;\n height: 24px;\n transform: translateY(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.textField .inputWrapper .loaderContainer.loaderContainerHasIcon {\n inset-inline-end: 32px;\n}\n\n.textField .inputWrapper .loaderContainer .loader {\n width: 16px;\n height: 16px;\n}\n\n.textField .inputWrapper .loaderContainer .loader .loaderSvg {\n color: var(--secondary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer .icon {\n font-size: 16px;\n font-family: var(--font-family);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer .icon {\n font-size: 16px;\n font-family: var(--font-family);\n}\n\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n filter: invert(1);\n}");export{n as default};
|
|
2
2
|
//# sourceMappingURL=TextField.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{contentColors as e}from"../utils/colors-vars-map.js";var o={positive:"--positive-color
|
|
1
|
+
import{contentColors as e}from"../utils/colors-vars-map.js";var o={positive:"--surface-positive-color",negative:"--surface-negative-color",primary:"--ui-background-color",warning:"--surface-warning-color",info:"--surface-primary-color",neutral:"--surface-primary-color"},r={positive:"--positive-color-selected-hover",negative:"--negative-color-selected-hover",primary:"--ui-background-hover-color",warning:"--warning-color-selected-hover",info:"--info-color-selected-hover",neutral:"--info-color-selected-hover"};function c(c){var i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return e.includes(c)?"var(--color-".concat(c).concat(i?"-selected":"",")"):Object.keys(r).includes(c)&&a?"var(".concat(r[c],")"):Object.keys(o).includes(c)&&i?"var(".concat(o[c],")"):c}export{c as getElementColor};
|
|
2
2
|
//# sourceMappingURL=Colors.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Colors.js","sources":["../../../../src/types/Colors.ts"],"sourcesContent":["import { contentColors } from \"../utils/colors-vars-map\";\n\nconst MapStateSelectedColor = {\n positive: \"--positive-color
|
|
1
|
+
{"version":3,"file":"Colors.js","sources":["../../../../src/types/Colors.ts"],"sourcesContent":["import { contentColors } from \"../utils/colors-vars-map\";\n\nconst MapStateSelectedColor = {\n positive: \"--surface-positive-color\",\n negative: \"--surface-negative-color\",\n primary: \"--ui-background-color\",\n warning: \"--surface-warning-color\",\n info: \"--surface-primary-color\",\n /** @deprecated Use `info` instead */\n neutral: \"--surface-primary-color\"\n};\n\nconst MapStateSelectedHoverColor = {\n positive: \"--positive-color-selected-hover\",\n negative: \"--negative-color-selected-hover\",\n primary: \"--ui-background-hover-color\",\n warning: \"--warning-color-selected-hover\",\n info: \"--info-color-selected-hover\",\n /** @deprecated Use `info` instead */\n neutral: \"--info-color-selected-hover\"\n};\n\ntype ContentColor = (typeof contentColors)[number];\ntype StateSelectedColorKeys = keyof typeof MapStateSelectedColor;\ntype StateSelectedHoverColorKeys = keyof typeof MapStateSelectedHoverColor;\n\nexport type ElementAllowedColor =\n | ContentColor\n | \"positive\"\n | \"negative\"\n | \"primary\"\n | \"warning\"\n | \"info\"\n | \"neutral\";\n\nexport function getElementColor(\n colorValue: ContentColor | StateSelectedColorKeys | StateSelectedHoverColorKeys,\n isSelectedPalette = false,\n isSelectedHoverPalette = false\n): string {\n if (contentColors.includes(colorValue as ContentColor)) {\n return `var(--color-${colorValue}${isSelectedPalette ? \"-selected\" : \"\"})`;\n }\n if (\n Object.keys(MapStateSelectedHoverColor).includes(colorValue as StateSelectedHoverColorKeys) &&\n isSelectedHoverPalette\n ) {\n return `var(${MapStateSelectedHoverColor[colorValue as StateSelectedHoverColorKeys]})`;\n }\n if (Object.keys(MapStateSelectedColor).includes(colorValue as StateSelectedColorKeys) && isSelectedPalette) {\n return `var(${MapStateSelectedColor[colorValue as StateSelectedColorKeys]})`;\n }\n return colorValue;\n}\n\nexport type ColorStyle = \"regular\" | \"hover\" | \"selected\";\n"],"names":["MapStateSelectedColor","positive","negative","primary","warning","info","neutral","MapStateSelectedHoverColor","getElementColor","colorValue","isSelectedPalette","arguments","length","undefined","isSelectedHoverPalette","contentColors","includes","concat","Object","keys"],"mappings":"4DAEA,IAAMA,EAAwB,CAC5BC,SAAU,2BACVC,SAAU,2BACVC,QAAS,wBACTC,QAAS,0BACTC,KAAM,0BAENC,QAAS,2BAGLC,EAA6B,CACjCN,SAAU,kCACVC,SAAU,kCACVC,QAAS,8BACTC,QAAS,iCACTC,KAAM,8BAENC,QAAS,+BAgBL,SAAUE,EACdC,GAE8B,IAD9BC,EAAiBC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,IAAAA,UAAA,GACjBG,EAAsBH,UAAAC,OAAA,QAAAC,IAAAF,UAAA,IAAAA,UAAA,GAEtB,OAAII,EAAcC,SAASP,GACzBQ,eAAAA,OAAsBR,GAAUQ,OAAGP,EAAoB,YAAc,GAAE,KAGvEQ,OAAOC,KAAKZ,GAA4BS,SAASP,IACjDK,EAEA,OAAAG,OAAcV,EAA2BE,GAA0C,KAEjFS,OAAOC,KAAKnB,GAAuBgB,SAASP,IAAyCC,EACvF,OAAAO,OAAcjB,EAAsBS,GAAqC,KAEpEA,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useRef as i,useEffect as r,useMemo as
|
|
1
|
+
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t,{forwardRef as o,useRef as i,useEffect as r,useMemo as s}from"react";import l from"classnames";import{useListItemProps as n}from"./hooks/useListItemProps.js";import{renderSideElement as d}from"./utils.js";import m from"./BaseItem.module.scss.js";import a from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import c from"../../../components/typography/dist/Text/Text.js";import p from"../../../components/icon/dist/Icon/Icon.js";import h from"../../../icons/dist/react/Check.js";import{useMergeRef as u}from"../../../shared/dist/hooks/useMergeRef.js";import{getStyle as f}from"../../../shared/dist/utils/typesciptCssModulesHelper.js";var v=o((function(o,v){var g=o.className,j=o.id,b=o.component,y=void 0===b?"li":b,E=o.size,P=void 0===E?"medium":E,z=o.selected,k=void 0!==z&&z,x=o.readOnly,C=void 0!==x&&x,I=o.highlighted,N=void 0!==I&&I,O=o.role,T=o.dir,S=void 0===T?"auto":T,B=o.itemRenderer,F=o.itemProps,H=void 0===F?{}:F,M=o.item,R=void 0===M?{}:M,_=i(null),w=u(v,_),L=n({id:j,component:y,size:P,highlighted:N,role:O,itemProps:H});r((function(){var e;null===(e=L.refCallback)||void 0===e||e.call(L,_.current)}),[L]);var q=R.label,A=void 0===q?"":q,D=R.disabled,G=void 0!==D&&D,J=R.startElement,K=R.endElement,Q=R.tooltipProps,U=void 0===Q?{}:Q,V=k&&!C,W=s((function(){return l(m.wrapper,e(e(e(e({},m.selected,k),m.disabled,G),m.highlighted,L.highlighted),m.readOnly,C),f(m,L.size),g)}),[k,G,L.highlighted,C,L.size,g]),X="small"===L.size?"text2":"text1",Y=L.component;return t.createElement(a,Object.assign({},U,{content:null==U?void 0:U.content,position:"rtl"===S?"right":"left",containerSelector:"body"}),t.createElement(Y,Object.assign({id:L.id,ref:w,className:W,role:L.role,"aria-selected":k,"aria-disabled":G||void 0},L.itemProps),B?B(R):t.createElement(t.Fragment,null,J&&d(J,G,X),t.createElement(c,{type:X,color:"inherit",tooltipProps:{containerSelector:"body"}},A),(K||V)&&t.createElement("div",{className:m.endElement},K&&d(K,G,X),V&&t.createElement(p,{icon:h,size:20,className:m.selectedCheck,ignoreFocusStyle:!0,"aria-hidden":!0})))))}));export{v as default};
|
|
2
2
|
//# sourceMappingURL=BaseItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseItem.js","sources":["../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n className,\n id,\n component = \"li\",\n size = \"medium\",\n selected = false,\n readOnly = false,\n highlighted = false,\n role,\n index: _index,\n dir = \"auto\",\n itemRenderer,\n itemProps = {},\n item = {} as BaseItemData<Item>\n }: BaseItemProps<Item>,\n ref: React.Ref<HTMLElement>\n ) => {\n const internalRef = useRef<HTMLElement>(null);\n const mergedRef = useMergeRef(ref, internalRef);\n\n const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n useEffect(() => {\n listItemProps.refCallback?.(internalRef.current);\n }, [listItemProps]);\n\n const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n\n const listItemClassNames = useMemo(\n () =>\n cx(\n styles.wrapper,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.highlighted]: listItemProps.highlighted,\n [styles.readOnly]: readOnly\n },\n getStyle(styles, listItemProps.size),\n className\n ),\n [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n );\n\n const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n const Element = listItemProps.component as React.ElementType;\n\n return (\n <Tooltip\n {...tooltipProps}\n content={tooltipProps?.content}\n position={dir === \"rtl\" ? \"right\" : \"left\"}\n containerSelector=\"body\"\n >\n <Element\n id={listItemProps.id}\n ref={mergedRef}\n className={listItemClassNames}\n role={listItemProps.role}\n aria-selected={selected}\n aria-disabled={disabled || undefined}\n {...listItemProps.itemProps}\n >\n {itemRenderer ? (\n itemRenderer(item)\n ) : (\n <>\n {startElement && renderSideElement(startElement, disabled, textVariant)}\n <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n {label}\n </Text>\n {endElement && (\n <div className={styles.endElement}
|
|
1
|
+
{"version":3,"file":"BaseItem.js","sources":["../../../../src/components/BaseItem/BaseItem.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { useMergeRef, getStyle } from \"@vibe/shared\";\n\nimport { Text, type TextType } from \"@vibe/typography\";\nimport { type BaseItemData, type BaseItemProps } from \"./BaseItem.types\";\nimport { useListItemProps } from \"./hooks/useListItemProps\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { Icon } from \"@vibe/icon\";\nimport { Check } from \"@vibe/icons\";\nimport { renderSideElement } from \"./utils\";\nimport styles from \"./BaseItem.module.scss\";\n\nconst BaseItem = forwardRef(\n <Item extends Record<string, unknown>>(\n {\n className,\n id,\n component = \"li\",\n size = \"medium\",\n selected = false,\n readOnly = false,\n highlighted = false,\n role,\n index: _index,\n dir = \"auto\",\n itemRenderer,\n itemProps = {},\n item = {} as BaseItemData<Item>\n }: BaseItemProps<Item>,\n ref: React.Ref<HTMLElement>\n ) => {\n const internalRef = useRef<HTMLElement>(null);\n const mergedRef = useMergeRef(ref, internalRef);\n\n const listItemProps = useListItemProps({ id, component, size, highlighted, role, itemProps });\n\n useEffect(() => {\n listItemProps.refCallback?.(internalRef.current);\n }, [listItemProps]);\n\n const { label = \"\", disabled = false, startElement, endElement, tooltipProps = {} } = item;\n const showSelectedCheck = selected && !readOnly;\n\n const listItemClassNames = useMemo(\n () =>\n cx(\n styles.wrapper,\n {\n [styles.selected]: selected,\n [styles.disabled]: disabled,\n [styles.highlighted]: listItemProps.highlighted,\n [styles.readOnly]: readOnly\n },\n getStyle(styles, listItemProps.size),\n className\n ),\n [selected, disabled, listItemProps.highlighted, readOnly, listItemProps.size, className]\n );\n\n const textVariant: TextType = listItemProps.size === \"small\" ? \"text2\" : \"text1\";\n const Element = listItemProps.component as React.ElementType;\n\n return (\n <Tooltip\n {...tooltipProps}\n content={tooltipProps?.content}\n position={dir === \"rtl\" ? \"right\" : \"left\"}\n containerSelector=\"body\"\n >\n <Element\n id={listItemProps.id}\n ref={mergedRef}\n className={listItemClassNames}\n role={listItemProps.role}\n aria-selected={selected}\n aria-disabled={disabled || undefined}\n {...listItemProps.itemProps}\n >\n {itemRenderer ? (\n itemRenderer(item)\n ) : (\n <>\n {startElement && renderSideElement(startElement, disabled, textVariant)}\n <Text type={textVariant} color=\"inherit\" tooltipProps={{ containerSelector: \"body\" }}>\n {label}\n </Text>\n {(endElement || showSelectedCheck) && (\n <div className={styles.endElement}>\n {endElement && renderSideElement(endElement, disabled, textVariant)}\n {showSelectedCheck && (\n <Icon\n icon={Check}\n size={20}\n className={styles.selectedCheck}\n ignoreFocusStyle\n aria-hidden\n />\n )}\n </div>\n )}\n </>\n )}\n </Element>\n </Tooltip>\n );\n }\n);\n\nexport default BaseItem as <Item extends Record<string, unknown>>(\n props: BaseItemProps<Item> & { ref?: React.Ref<HTMLElement> }\n) => React.ReactElement;\n"],"names":["BaseItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$size","size","_ref$selected","selected","_ref$readOnly","readOnly","_ref$highlighted","highlighted","role","_ref$dir","dir","itemRenderer","_ref$itemProps","itemProps","_ref$item","item","internalRef","useRef","mergedRef","useMergeRef","listItemProps","useListItemProps","useEffect","_a","refCallback","call","current","_item$label","label","_item$disabled","disabled","startElement","endElement","_item$tooltipProps","tooltipProps","showSelectedCheck","listItemClassNames","useMemo","cx","styles","wrapper","_defineProperty","getStyle","textVariant","Element","React","createElement","Tooltip","Object","assign","content","position","containerSelector","undefined","Fragment","renderSideElement","Text","type","color","Icon","icon","Check","selectedCheck","ignoreFocusStyle"],"mappings":"ytBAaMA,IAAAA,EAAWC,GACf,SAAAC,EAgBEC,GACE,IAfAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EAChBO,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EAAAE,EAAAR,EACfS,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAV,EAChBW,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAZ,EAChBa,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAId,EAAJc,KACKC,EAAAf,EACLgB,IAAAA,OAAM,IAAHD,EAAG,OAAMA,EACZE,EAAYjB,EAAZiB,aAAYC,EAAAlB,EACZmB,UAAAA,OAAS,IAAAD,EAAG,CAAA,EAAEA,EAAAE,EAAApB,EACdqB,KAAAA,OAAI,IAAAD,EAAG,CAAwB,EAAAA,EAI3BE,EAAcC,EAAoB,MAClCC,EAAYC,EAAYxB,EAAKqB,GAE7BI,EAAgBC,EAAiB,CAAExB,GAAAA,EAAIE,UAAAA,EAAWE,KAAAA,EAAMM,YAAAA,EAAaC,KAAAA,EAAMK,UAAAA,IAEjFS,GAAU,iBACiB,QAAzBC,EAAAH,EAAcI,mBAAW,IAAAD,GAAAA,EAAAE,KAAAL,EAAGJ,EAAYU,QAC1C,GAAG,CAACN,IAEJ,IAAAO,EAAsFZ,EAA9Ea,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAAoEd,EAAlEe,SAAAA,OAAW,IAAHD,GAAQA,EAAEE,EAAgDhB,EAAhDgB,aAAcC,EAAkCjB,EAAlCiB,WAAUC,EAAwBlB,EAAtBmB,aAAAA,OAAY,IAAAD,EAAG,CAAA,EAAEA,EAC3EE,EAAoBhC,IAAaE,EAEjC+B,EAAqBC,GACzB,WAAA,OACEC,EACEC,EAAOC,QAAOC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAEXF,EAAOpC,SAAWA,GAClBoC,EAAOT,SAAWA,GAClBS,EAAOhC,YAAca,EAAcb,aACnCgC,EAAOlC,SAAWA,GAErBqC,EAASH,EAAQnB,EAAcnB,MAC/BL,EACD,GACH,CAACO,EAAU2B,EAAUV,EAAcb,YAAaF,EAAUe,EAAcnB,KAAML,IAG1E+C,EAA+C,UAAvBvB,EAAcnB,KAAmB,QAAU,QACnE2C,EAAUxB,EAAcrB,UAE9B,OACE8C,EAAAC,cAACC,EAAOC,OAAAC,OAAA,CAAA,EACFf,EACJ,CAAAgB,QAAShB,aAAA,EAAAA,EAAcgB,QACvBC,SAAkB,QAARzC,EAAgB,QAAU,OACpC0C,kBAAkB,SAElBP,EAACC,cAAAF,iBACC/C,GAAIuB,EAAcvB,GAClBF,IAAKuB,EACLtB,UAAWwC,EACX5B,KAAMY,EAAcZ,KAAI,gBACTL,EACA,gBAAA2B,QAAYuB,GACvBjC,EAAcP,WAEjBF,EACCA,EAAaI,GAEb8B,EAAAC,cAAAD,EAAAS,SAAA,KACGvB,GAAgBwB,EAAkBxB,EAAcD,EAAUa,GAC3DE,EAAAC,cAACU,EAAK,CAAAC,KAAMd,EAAae,MAAM,UAAUxB,aAAc,CAAEkB,kBAAmB,SACzExB,IAEDI,GAAcG,IACdU,EAAAC,cAAA,MAAA,CAAKlD,UAAW2C,EAAOP,YACpBA,GAAcuB,EAAkBvB,EAAYF,EAAUa,GACtDR,GACCU,EAACC,cAAAa,EACC,CAAAC,KAAMC,EACN5D,KAAM,GACNL,UAAW2C,EAAOuB,cAClBC,kBAEA,EAAA,eAAA,OASpB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={wrapper:"
|
|
1
|
+
var e={wrapper:"wrapper_7a69216620","focus-visible":"focus-visible_0a8515e1cb",highlighted:"highlighted_658a5463cc",disabled:"disabled_53d10acbd6",readOnly:"readOnly_f20ed790fe",small:"small_1532409aef",medium:"medium_9ab9dc23db",large:"large_381e8ebf23",avatar:"avatar_2d78901bf7",icon:"icon_e5467b6885",indent:"indent_6d8a42323f",endElement:"endElement_d1cd4475a8",selectedCheck:"selectedCheck_5583f08fb0"};!function(e){const a="s_id-88c43575e1d9_4_5_3";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const r=document.createElement("style");r.id=a,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable selector-class-pattern */\n.wrapper_7a69216620 {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n border-radius: 6px;\n color: var(--primary-text-color);\n cursor: pointer;\n}\n.wrapper_7a69216620:focus-visible, .wrapper_7a69216620.focus-visible_0a8515e1cb {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n}\n.wrapper_7a69216620:focus:not(.focus-visible_0a8515e1cb) {\n outline: none;\n}\n.wrapper_7a69216620.highlighted_658a5463cc, .wrapper_7a69216620:hover:not(.disabled_53d10acbd6):not(.readOnly_f20ed790fe) {\n background-color: var(--primary-background-hover-color);\n}\n.wrapper_7a69216620.disabled_53d10acbd6 {\n color: var(--disabled-text-color);\n cursor: not-allowed;\n}\n.wrapper_7a69216620.readOnly_f20ed790fe {\n cursor: default;\n}\n.wrapper_7a69216620.small_1532409aef {\n padding: 6px var(--space-8);\n}\n.wrapper_7a69216620.medium_9ab9dc23db {\n padding: 9px 12px;\n}\n.wrapper_7a69216620.large_381e8ebf23 {\n padding: 13px 12px;\n}\n.wrapper_7a69216620 .avatar_2d78901bf7,\n.wrapper_7a69216620 .icon_e5467b6885 {\n flex-shrink: 0;\n}\n.wrapper_7a69216620 .indent_6d8a42323f {\n width: 20px;\n}\n.wrapper_7a69216620 .endElement_d1cd4475a8 {\n padding-inline-start: var(--space-8);\n margin-inline-start: auto;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n.wrapper_7a69216620 .selectedCheck_5583f08fb0 {\n flex-shrink: 0;\n color: var(--icon-color);\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=BaseItem.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={chips:"chips_825313ca3a","chips-pop-in-emphasized":"chips-pop-in-emphasized_e853b9934e",border:"border_b908e95ff1",withUserSelect:"withUserSelect_0af3b7ae4d",noMargin:"noMargin_fd075fcbaa",withLeftIcon:"withLeftIcon_70af1a1387",withRightIcon:"withRightIcon_ded966e439",withClose:"withClose_7a5f6ba056",label:"label_f6e5fd112a",icon:"icon_328c61467a",close:"close_626b1ed7f5",small:"small_915cd933b2",avatar:"avatar_6ef6c3588b",customRenderer:"customRenderer_30c7078826",noAnimation:"noAnimation_85d24c78bc",left:"left_5fcfde8a16",right:"right_0b6c685ca9",disabled:"disabled_29bae129ef",defaultCursor:"defaultCursor_f20ed790fe",readOnly:"readOnly_f20ed790fe",filterable:"
|
|
1
|
+
var e={chips:"chips_825313ca3a","chips-pop-in-emphasized":"chips-pop-in-emphasized_e853b9934e",border:"border_b908e95ff1",withUserSelect:"withUserSelect_0af3b7ae4d",noMargin:"noMargin_fd075fcbaa",withLeftIcon:"withLeftIcon_70af1a1387",withRightIcon:"withRightIcon_ded966e439",withClose:"withClose_7a5f6ba056",label:"label_f6e5fd112a",icon:"icon_328c61467a",close:"close_626b1ed7f5",small:"small_915cd933b2",avatar:"avatar_6ef6c3588b",customRenderer:"customRenderer_30c7078826",noAnimation:"noAnimation_85d24c78bc",left:"left_5fcfde8a16",right:"right_0b6c685ca9",disabled:"disabled_29bae129ef",defaultCursor:"defaultCursor_f20ed790fe",readOnly:"readOnly_f20ed790fe",filterable:"filterable_5083bfd6ef",pressed:"pressed_2952d6cc4b",clickable:"clickable_796f490116","focus-visible":"focus-visible_93d0f127c5",disableTextSelection:"disableTextSelection_90b627c8cd"};!function(e){const a="s_id-ed3055b733bb_4_5_3";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const c=document.createElement("style");c.id=a,n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.chips_825313ca3a {\n display: inline-flex;\n overflow: hidden;\n height: 24px;\n border-radius: var(--border-radius-full);\n padding: 0 8px;\n align-items: center;\n justify-content: center;\n margin: var(--chips-margin, 0 var(--spacing-xs));\n user-select: none;\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n color: var(--primary-text-color);\n animation: chips-pop-in-emphasized_e853b9934e var(--motion-productive-medium) var(--motion-timing-emphasize);\n /* Medium: 8px default; 4px on sides that have an icon */\n}\n.chips_825313ca3a.border_b908e95ff1 {\n border: 1px solid var(--primary-background-color);\n}\n.chips_825313ca3a.withUserSelect_0af3b7ae4d {\n user-select: text;\n cursor: text;\n}\n.chips_825313ca3a.noMargin_fd075fcbaa {\n margin: 0;\n}\n.chips_825313ca3a.withLeftIcon_70af1a1387 {\n padding-inline-start: 4px;\n}\n.chips_825313ca3a.withRightIcon_ded966e439 {\n padding-inline-end: 4px;\n}\n.chips_825313ca3a.withClose_7a5f6ba056 {\n position: relative;\n box-sizing: border-box;\n}\n.chips_825313ca3a.withClose_7a5f6ba056 .label_f6e5fd112a {\n min-width: 0;\n flex: 1 1 auto;\n}\n.chips_825313ca3a.withClose_7a5f6ba056 .icon_328c61467a.close_626b1ed7f5 {\n position: absolute;\n inset-inline-end: 4px;\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n opacity: 0;\n pointer-events: none;\n z-index: 1;\n}\n.chips_825313ca3a.withClose_7a5f6ba056:hover, .chips_825313ca3a.withClose_7a5f6ba056:focus-within {\n /* Keep overall width stable; carve space for the close control inside the chip */\n padding-inline-end: 26px;\n}\n.chips_825313ca3a.withClose_7a5f6ba056:hover .icon_328c61467a.close_626b1ed7f5, .chips_825313ca3a.withClose_7a5f6ba056:focus-within .icon_328c61467a.close_626b1ed7f5 {\n opacity: 1;\n pointer-events: auto;\n}\n.chips_825313ca3a.withClose_7a5f6ba056.small_915cd933b2:hover, .chips_825313ca3a.withClose_7a5f6ba056.small_915cd933b2:focus-within {\n padding-inline-end: 22px;\n}\n.chips_825313ca3a.small_915cd933b2 {\n height: 20px;\n /* Small: 4px default; 2px on sides that have an icon */\n padding: 0 4px;\n}\n.chips_825313ca3a.small_915cd933b2.withLeftIcon_70af1a1387 {\n padding-inline-start: 2px;\n}\n.chips_825313ca3a.small_915cd933b2.withRightIcon_ded966e439 {\n padding-inline-end: 2px;\n}\n.chips_825313ca3a.small_915cd933b2 .icon_328c61467a,\n.chips_825313ca3a.small_915cd933b2 .avatar_6ef6c3588b,\n.chips_825313ca3a.small_915cd933b2 .customRenderer_30c7078826 {\n min-width: 14px;\n}\n.chips_825313ca3a .label_f6e5fd112a {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.chips_825313ca3a.noAnimation_85d24c78bc {\n animation: none;\n}\n.chips_825313ca3a .icon_328c61467a,\n.chips_825313ca3a .avatar_6ef6c3588b,\n.chips_825313ca3a .customRenderer_30c7078826 {\n min-width: 18px;\n}\n.chips_825313ca3a .icon_328c61467a.left_5fcfde8a16,\n.chips_825313ca3a .avatar_6ef6c3588b.left_5fcfde8a16,\n.chips_825313ca3a .customRenderer_30c7078826.left_5fcfde8a16 {\n margin-right: var(--spacing-xs);\n}\n.chips_825313ca3a .icon_328c61467a.right_0b6c685ca9,\n.chips_825313ca3a .avatar_6ef6c3588b.right_0b6c685ca9,\n.chips_825313ca3a .customRenderer_30c7078826.right_0b6c685ca9 {\n margin-left: var(--spacing-xs);\n}\n.chips_825313ca3a .icon_328c61467a.close_626b1ed7f5,\n.chips_825313ca3a .avatar_6ef6c3588b.close_626b1ed7f5,\n.chips_825313ca3a .customRenderer_30c7078826.close_626b1ed7f5 {\n margin-left: var(--spacing-xs);\n color: var(--primary-text-color);\n}\n.chips_825313ca3a .icon_328c61467a {\n color: currentColor;\n}\n.chips_825313ca3a.disabled_29bae129ef .icon_328c61467a {\n color: var(--disabled-text-color);\n}\n.chips_825313ca3a.disabled_29bae129ef .label_f6e5fd112a {\n color: var(--disabled-text-color);\n}\n.chips_825313ca3a.defaultCursor_f20ed790fe {\n cursor: default;\n}\n.chips_825313ca3a.readOnly_f20ed790fe {\n cursor: default;\n}\n.chips_825313ca3a.filterable_5083bfd6ef {\n background-color: var(--ui-background-color);\n color: var(--primary-text-color);\n cursor: pointer;\n}\n.chips_825313ca3a.filterable_5083bfd6ef .icon_328c61467a,\n.chips_825313ca3a.filterable_5083bfd6ef .label_f6e5fd112a {\n color: currentColor;\n}\n.chips_825313ca3a.filterable_5083bfd6ef:hover:not(.disabled_29bae129ef):not(.pressed_2952d6cc4b), .chips_825313ca3a.filterable_5083bfd6ef:active:not(.disabled_29bae129ef):not(.pressed_2952d6cc4b) {\n background-color: var(--ui-background-hover-color);\n color: var(--primary-text-color);\n}\n.chips_825313ca3a.filterable_5083bfd6ef.pressed_2952d6cc4b:not(.disabled_29bae129ef) {\n background-color: var(--primary-color);\n color: var(--text-color-on-inverted);\n}\n.chips_825313ca3a.filterable_5083bfd6ef.pressed_2952d6cc4b:not(.disabled_29bae129ef) .icon_328c61467a,\n.chips_825313ca3a.filterable_5083bfd6ef.pressed_2952d6cc4b:not(.disabled_29bae129ef) .label_f6e5fd112a,\n.chips_825313ca3a.filterable_5083bfd6ef.pressed_2952d6cc4b:not(.disabled_29bae129ef) .close_626b1ed7f5 {\n color: currentColor;\n}\n.chips_825313ca3a.filterable_5083bfd6ef.disabled_29bae129ef {\n background-color: var(--disabled-background-color);\n cursor: not-allowed;\n}\n.chips_825313ca3a.clickable_796f490116 {\n cursor: pointer;\n}\n.chips_825313ca3a.clickable_796f490116:focus-visible, .chips_825313ca3a.clickable_796f490116.focus-visible_93d0f127c5 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.chips_825313ca3a.clickable_796f490116:focus:not(.focus-visible_93d0f127c5) {\n outline: none;\n}\n.chips_825313ca3a.clickable_796f490116.disabled_29bae129ef {\n cursor: default;\n}\n.chips_825313ca3a.clickable_796f490116.disableTextSelection_90b627c8cd {\n -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */\n}\n\n@keyframes chips-pop-in-emphasized_e853b9934e {\n 0% {\n transform: scale(0.3);\n opacity: 0;\n }\n 70% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=Chips.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var n={clickableWrapper:"clickableWrapper_796f490116","focus-visible":"focus-visible_93d0f127c5",label:"label_32ec64cdef",small:"small_f629e47bce",withLeg:"withLeg_634b0f93a3",legWrapper:"legWrapper_22da106062",kindFill:"kindFill_72261d45db",colorPrimary:"
|
|
1
|
+
var n={clickableWrapper:"clickableWrapper_796f490116","focus-visible":"focus-visible_93d0f127c5",label:"label_32ec64cdef",small:"small_f629e47bce",withLeg:"withLeg_634b0f93a3",legWrapper:"legWrapper_22da106062",kindFill:"kindFill_72261d45db",colorPrimary:"colorPrimary_98fa9b1fab",clickable:"clickable_3884d03f49",colorDark:"colorDark_5b8f716114",colorNegative:"colorNegative_95c0b30913",colorPositive:"colorPositive_4cf2bb0ae8",smallText:"smallText_41453f2d42",kindLine:"kindLine_f8c869a3e3"};!function(n){const e="s_id-2606416fffd1_4_5_3";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.clickableWrapper_796f490116 {\n cursor: pointer;\n}\n.clickableWrapper_796f490116:focus-visible, .clickableWrapper_796f490116.focus-visible_93d0f127c5 {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.clickableWrapper_796f490116:focus:not(.focus-visible_93d0f127c5) {\n outline: none;\n}\n.clickableWrapper_796f490116:active {\n transform: scale(0.95) translate3d(0, 0, 0);\n transition: var(--motion-productive-short) transform;\n}\n\n.label_32ec64cdef {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n padding: 2px var(--spacing-small);\n position: relative;\n}\n.label_32ec64cdef.small_f629e47bce {\n padding: 2px var(--spacing-xs);\n border-radius: 4px;\n}\n\n.withLeg_634b0f93a3 {\n border-radius: 4px 4px 4px 0;\n}\n\n.legWrapper_22da106062 {\n position: absolute;\n height: 8px;\n top: 100%;\n left: 0;\n display: inline-flex;\n}\n\n.kindFill_72261d45db {\n border: none;\n background-color: transparent;\n padding: 2px var(--spacing-small);\n}\n.kindFill_72261d45db.small_f629e47bce {\n padding: 2px var(--spacing-xs);\n}\n.kindFill_72261d45db.colorPrimary_98fa9b1fab {\n background-color: var(--surface-primary-color);\n color: var(--primary-color);\n}\n.kindFill_72261d45db.colorPrimary_98fa9b1fab svg path {\n fill: var(--surface-primary-color);\n}\n.kindFill_72261d45db.colorPrimary_98fa9b1fab.clickable_3884d03f49:hover, .kindFill_72261d45db.colorPrimary_98fa9b1fab.clickable_3884d03f49:active {\n background-color: var(--surface-primary-color);\n}\n.kindFill_72261d45db.colorDark_5b8f716114 {\n background-color: var(--ui-background-color);\n color: var(--primary-text-color);\n}\n.kindFill_72261d45db.colorDark_5b8f716114 svg path {\n fill: var(--ui-background-color);\n}\n.kindFill_72261d45db.colorDark_5b8f716114.clickable_3884d03f49:hover, .kindFill_72261d45db.colorDark_5b8f716114.clickable_3884d03f49:active {\n background-color: var(--ui-background-color);\n}\n.kindFill_72261d45db.colorNegative_95c0b30913 {\n background-color: var(--surface-negative-color);\n color: var(--negative-color);\n}\n.kindFill_72261d45db.colorNegative_95c0b30913 svg path {\n fill: var(--surface-negative-color);\n}\n.kindFill_72261d45db.colorNegative_95c0b30913.clickable_3884d03f49:hover, .kindFill_72261d45db.colorNegative_95c0b30913.clickable_3884d03f49:active {\n background-color: var(--surface-negative-color);\n}\n.kindFill_72261d45db.colorPositive_4cf2bb0ae8 {\n background-color: var(--surface-positive-color);\n color: var(--positive-color);\n}\n.kindFill_72261d45db.colorPositive_4cf2bb0ae8 svg path {\n fill: var(--surface-positive-color);\n}\n.kindFill_72261d45db.colorPositive_4cf2bb0ae8.clickable_3884d03f49:hover, .kindFill_72261d45db.colorPositive_4cf2bb0ae8.clickable_3884d03f49:active {\n background-color: var(--surface-positive-color);\n}\n.kindFill_72261d45db .smallText_41453f2d42 {\n line-height: 14px;\n}\n\n.kindLine_f8c869a3e3 {\n border: 1px solid currentColor;\n padding: 1px var(--spacing-small);\n}\n.kindLine_f8c869a3e3.small_f629e47bce {\n padding: 0 var(--spacing-xs);\n}\n.kindLine_f8c869a3e3 .legWrapper_22da106062 {\n left: -1px;\n top: calc(100% + 1px);\n}\n.kindLine_f8c869a3e3.colorPrimary_98fa9b1fab {\n color: var(--primary-color);\n}\n.kindLine_f8c869a3e3.colorPrimary_98fa9b1fab svg path {\n fill: var(--primary-color);\n}\n.kindLine_f8c869a3e3.colorPrimary_98fa9b1fab.clickable_3884d03f49:hover, .kindLine_f8c869a3e3.colorPrimary_98fa9b1fab.clickable_3884d03f49:active {\n background-color: var(--primary-background-hover-color);\n}\n.kindLine_f8c869a3e3.colorDark_5b8f716114 {\n color: var(--primary-text-color);\n}\n.kindLine_f8c869a3e3.colorDark_5b8f716114 svg path {\n fill: var(--primary-text-color);\n}\n.kindLine_f8c869a3e3.colorDark_5b8f716114.clickable_3884d03f49:hover, .kindLine_f8c869a3e3.colorDark_5b8f716114.clickable_3884d03f49:active {\n background-color: var(--primary-background-hover-color);\n}\n.kindLine_f8c869a3e3.colorNegative_95c0b30913 {\n color: var(--negative-color);\n}\n.kindLine_f8c869a3e3.colorNegative_95c0b30913 svg path {\n fill: var(--negative-color);\n}\n.kindLine_f8c869a3e3.colorNegative_95c0b30913.clickable_3884d03f49:hover, .kindLine_f8c869a3e3.colorNegative_95c0b30913.clickable_3884d03f49:active {\n background-color: var(--negative-color-selected);\n}\n.kindLine_f8c869a3e3.colorPositive_4cf2bb0ae8 {\n color: var(--positive-color);\n}\n.kindLine_f8c869a3e3.colorPositive_4cf2bb0ae8 svg path {\n fill: var(--positive-color);\n}\n.kindLine_f8c869a3e3.colorPositive_4cf2bb0ae8.clickable_3884d03f49:hover, .kindLine_f8c869a3e3.colorPositive_4cf2bb0ae8.clickable_3884d03f49:active {\n background-color: var(--positive-color-selected);\n}\n.kindLine_f8c869a3e3 .smallText_41453f2d42 {\n line-height: 14px;\n}");export{n as default};
|
|
2
2
|
//# sourceMappingURL=Label.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e}from"../../../../_virtual/_tslib.js";import o,{forwardRef as t,useRef as i,useMemo as
|
|
1
|
+
import{__rest as e}from"../../../../_virtual/_tslib.js";import o,{forwardRef as t,useRef as i,useMemo as s}from"react";import n from"../../Label/Label.js";import r from"./MenuItem.module.scss.js";import l from"./components/BaseMenuItem/BaseMenuItem.js";import a from"./components/MenuItemIcon/MenuItemIcon.js";import c from"../../../../hooks/dist/useIsOverflowing/index.js";import p from"../../../../components/tooltip/dist/Tooltip/Tooltip.js";import m from"../../../../components/layout/dist/Flex/Flex.js";var d=t((function(t,d){var u=t.className,g=t.iconWrapperClassName,b=t.rightIconWrapperClassName,f=t.title,h=void 0===f?"":f,I=t.label,y=void 0===I?"":I,C=t.icon,v=void 0===C?"":C,j=t.rightIcon,k=void 0===j?"":j,N=t.rightIconType,E=t.rightIconBackgroundColor,M=t.iconType,w=t.iconBackgroundColor,x=t.disabled,B=void 0!==x&&x,T=t.disableReason,O=t.selected,P=void 0!==O&&O,W=t.key,D=t.children,R=t.tooltipContent,S=t.tooltipPosition,F=void 0===S?"right":S,L=t.tooltipShowDelay,_=void 0===L?300:L,z=t.tooltipProps,V=e(t,["className","iconWrapperClassName","rightIconWrapperClassName","title","label","icon","rightIcon","rightIconType","rightIconBackgroundColor","iconType","iconBackgroundColor","disabled","disableReason","selected","key","children","tooltipContent","tooltipPosition","tooltipShowDelay","tooltipProps"]),q=i(),A=c({ref:q})||B||R,G=s((function(){return B?T:R||h}),[T,B,h,R]),H=s((function(){if(y)return"string"==typeof y?o.createElement(n,{text:y,size:"small"}):o.isValidElement(y)&&y.type===n?y:void 0}),[y]);return o.createElement(p,Object.assign({content:A?G:null,position:F,showDelay:_},z),o.createElement(l,Object.assign({key:W,ref:d,subMenu:D,className:u,disabled:B,selected:P},V),!!v&&o.createElement(a,{icon:v,type:M,disabled:B,selected:P,backgroundColor:w,wrapperClassName:g}),o.createElement("div",{ref:q,className:r.title},h),o.createElement(m,{gap:"xs"},!!k&&!D&&o.createElement(a,{icon:k,type:N,disabled:B,selected:P,backgroundColor:E,isRightIcon:!0,wrapperClassName:b}),H)))}));Object.assign(d,{isSelectable:!0,isMenuChild:!0});export{d as default};
|
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type IconType, type SubIcon } from \"@vibe/icon\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type CloseMenuOption, type MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\nimport { Flex } from \"@vibe/layout\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * Class name applied to the icon wrapper.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu, if applicable. Must be a single `Menu` element.\n */\n children?: MenuChild;\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\n */\n autoAdjustOnSubMenuContentResize?: boolean;\n}\n\nexport interface MenuItemTitleComponentProps extends Omit<MenuItemProps, \"title\"> {\n title: ReactElement;\n \"aria-label\": NonNullable<AriaAttributes[\"aria-label\"]>;\n}\n\nconst MenuItem = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n rightIconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n iconType,\n iconBackgroundColor,\n disabled = false,\n disableReason,\n selected = false,\n key,\n children,\n tooltipContent,\n tooltipPosition = \"right\",\n tooltipShowDelay = 300,\n tooltipProps,\n ...baseMenuProps\n }: MenuItemProps | MenuItemTitleComponentProps,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const titleRef = useRef();\n\n const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });\n const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;\n\n const finalTooltipContent = useMemo(() => {\n if (disabled) return disableReason;\n if (tooltipContent) return tooltipContent;\n return title;\n }, [disableReason, disabled, title, tooltipContent]);\n\n const renderLabel = useMemo(() => {\n if (!label) return;\n if (typeof label === \"string\") {\n return <Label kind=\"line\" text={label} size=\"small\" />;\n }\n if (React.isValidElement(label) && label.type === Label) {\n return label;\n }\n }, [label]);\n\n return (\n <Tooltip\n content={shouldShowTooltip ? finalTooltipContent : null}\n position={tooltipPosition}\n showDelay={tooltipShowDelay}\n {...tooltipProps}\n >\n <BaseMenuItem\n key={key}\n ref={ref}\n subMenu={children}\n className={className}\n disabled={disabled}\n selected={selected}\n {...baseMenuProps}\n >\n {Boolean(icon) && (\n <MenuItemIcon\n icon={icon}\n type={iconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={iconBackgroundColor}\n wrapperClassName={iconWrapperClassName}\n />\n )}\n <div ref={titleRef} className={styles.title}>\n {title}\n </div>\n <Flex gap=\"xs\">\n {Boolean(rightIcon) && !children && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n isRightIcon={true}\n wrapperClassName={rightIconWrapperClassName}\n />\n )}\n {renderLabel}\n </Flex>\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","_a","ref","className","iconWrapperClassName","rightIconWrapperClassName","_a$title","title","_a$label","label","_a$icon","icon","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","iconType","iconBackgroundColor","_a$disabled","disabled","disableReason","_a$selected","selected","key","children","tooltipContent","_a$tooltipPosition","tooltipPosition","_a$tooltipShowDelay","tooltipShowDelay","tooltipProps","baseMenuProps","__rest","titleRef","useRef","shouldShowTooltip","useIsOverflowing","finalTooltipContent","useMemo","renderLabel","React","createElement","Label","kind","text","size","isValidElement","type","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","Flex","gap","isRightIcon","isSelectable","isMenuChild"],"mappings":"2fA+KMA,IAAAA,EAAWC,GACf,SACEC,EAuBAC,GAvBA,IACEC,EAmBYF,EAnBZE,UACAC,EAkBYH,EAlBZG,qBACAC,EAiBYJ,EAjBZI,0BAAyBC,EAiBbL,EAhBZM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAgBEP,EAfZQ,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAeET,EAdZU,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAcGX,EAbZY,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAYYb,EAZZa,cACAC,EAWYd,EAXZc,yBACAC,EAUYf,EAVZe,SACAC,EASYhB,EATZgB,oBAAmBC,EASPjB,EARZkB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAOYnB,EAPZmB,cAAaC,EAODpB,EANZqB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAKYtB,EALZsB,IACAC,EAIYvB,EAJZuB,SACAC,EAGYxB,EAHZwB,eAAcC,EAGFzB,EAFZ0B,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAEb3B,EADZ4B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAAY7B,EAAZ6B,aACGC,EArBLC,EAAA/B,EAAA,CAAA,YAAA,uBAAA,4BAAA,QAAA,QAAA,OAAA,YAAA,gBAAA,2BAAA,WAAA,sBAAA,WAAA,gBAAA,WAAA,MAAA,WAAA,iBAAA,kBAAA,mBAAA,iBAyBMgC,EAAWC,IAGXC,EAD+BC,EAAiB,CAAElC,IAAK+B,KACHd,GAAYM,EAEhEY,EAAsBC,GAAQ,WAClC,OAAInB,EAAiBC,EACjBK,GACGlB,CACR,GAAE,CAACa,EAAeD,EAAUZ,EAAOkB,IAE9Bc,EAAcD,GAAQ,WAC1B,GAAK7B,EACL,MAAqB,iBAAVA,EACF+B,EAACC,cAAAC,EAAM,CAAAC,KAAK,OAAOC,KAAMnC,EAAOoC,KAAK,UAE1CL,EAAMM,eAAerC,IAAUA,EAAMsC,OAASL,EACzCjC,OADT,CAGF,GAAG,CAACA,IAEJ,OACE+B,EAACC,cAAAO,EACCC,OAAAC,OAAA,CAAAC,QAAShB,EAAoBE,EAAsB,KACnDe,SAAUzB,EACV0B,UAAWxB,GACPC,GAEJU,EAACC,cAAAa,EACCL,OAAAC,OAAA,CAAA3B,IAAKA,EACLrB,IAAKA,EACLqD,QAAS/B,EACTrB,UAAWA,EACXgB,SAAUA,EACVG,SAAUA,GACNS,KAEKpB,GACP6B,EAACC,cAAAe,EACC,CAAA7C,KAAMA,EACNoC,KAAM/B,EACNG,SAAUA,EACVG,SAAUA,EACVmC,gBAAiBxC,EACjByC,iBAAkBtD,IAGtBoC,EAAKC,cAAA,MAAA,CAAAvC,IAAK+B,EAAU9B,UAAWwD,EAAOpD,OACnCA,GAEHiC,EAAAC,cAACmB,EAAI,CAACC,IAAI,QACChD,IAAeW,GACtBgB,EAACC,cAAAe,GACC7C,KAAME,EACNkC,KAAMjC,EACNK,SAAUA,EACVG,SAAUA,EACVmC,gBAAiB1C,EACjB+C,aAAa,EACbJ,iBAAkBrD,IAGrBkC,IAKX,IAGFU,OAAOC,OAAOnD,EAAU,CACtBgE,cAAc,EACdC,aAAa"}
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { type AriaAttributes, type ForwardedRef, type ReactElement, forwardRef, useMemo, useRef } from \"react\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { type IconType, type SubIcon } from \"@vibe/icon\";\nimport { useIsOverflowing } from \"@vibe/hooks\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport { type CloseMenuOption, type MenuChild } from \"../Menu/MenuConstants\";\nimport Label from \"../../Label/Label\";\nimport styles from \"./MenuItem.module.scss\";\nimport BaseMenuItem from \"./components/BaseMenuItem/BaseMenuItem\";\nimport MenuItemIcon from \"./components/MenuItemIcon/MenuItemIcon\";\nimport { type TooltipPositions } from \"@vibe/tooltip\";\nimport { type SubmenuPosition } from \"./MenuItem.types\";\nimport { Flex } from \"@vibe/layout\";\n\nexport interface MenuItemProps extends VibeComponentProps {\n /**\n * The title of the menu item.\n */\n title?: string;\n /**\n * The label displayed alongside the title.\n */\n label?: string | React.ReactElement<typeof Label>;\n /**\n * The icon displayed in the menu item.\n */\n icon?: SubIcon;\n /**\n * The type of icon.\n */\n iconType?: IconType;\n /**\n * The background color of the icon.\n */\n iconBackgroundColor?: string;\n /**\n * The right icon to be displayed.\n */\n rightIcon?: SubIcon;\n /**\n * The type of right icon.\n */\n rightIconType?: IconType;\n /**\n * The background color of the right icon.\n */\n rightIconBackgroundColor?: string;\n /**\n * Class name applied to the icon wrapper.\n */\n rightIconWrapperClassName?: string;\n /**\n * If true, the menu item is disabled.\n */\n disabled?: boolean;\n /**\n * The reason for disabling the item, shown in a tooltip.\n */\n disableReason?: string;\n /**\n * If true, the menu item is selected.\n */\n selected?: boolean;\n /**\n * Callback fired when the menu item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n /**\n * The active item index in the menu.\n */\n activeItemIndex?: number;\n /**\n * Callback to set the active item index.\n */\n setActiveItemIndex?: (index: number) => void;\n /**\n * The index of the menu item.\n */\n index?: number;\n /**\n * The key of the menu item.\n */\n key?: string;\n /**\n * If true, the parent menu is visible.\n */\n isParentMenuVisible?: boolean;\n /**\n * Callback to reset the open submenu index.\n */\n resetOpenSubMenuIndex?: () => void;\n /**\n * If true, a submenu is open.\n */\n hasOpenSubMenu?: boolean;\n /**\n * Callback to open or close a submenu by index.\n */\n setSubMenuIsOpenByIndex?: (index: number, isOpen: boolean) => void;\n /**\n * If true, document event listeners are used for handling interactions.\n */\n useDocumentEventListeners?: boolean;\n /**\n * The tooltip content for the menu item.\n */\n tooltipContent?: string;\n /**\n * The position of the tooltip.\n */\n tooltipPosition?: TooltipPositions;\n /**\n * The delay in milliseconds before the tooltip shows.\n */\n tooltipShowDelay?: number;\n /**\n * Additional props for customizing the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Callback fired when the mouse leaves the item.\n */\n onMouseLeave?: (event: React.MouseEvent) => void;\n /**\n * Callback fired when the mouse enters the item.\n */\n onMouseEnter?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the icon wrapper.\n */\n iconWrapperClassName?: string;\n /**\n * If true, the menu item starts as selected.\n */\n isInitialSelectedState?: boolean;\n /**\n * If true, the menu scrolls to ensure visibility.\n */\n shouldScrollMenu?: boolean;\n /**\n * Function to close the menu with a given option.\n */\n closeMenu?: (option: CloseMenuOption) => void;\n /**\n * Reference to the menu container.\n */\n menuRef?: React.RefObject<HTMLElement>;\n /**\n * The submenu, if applicable. Must be a single `Menu` element.\n */\n children?: MenuChild;\n /**\n * If true, enables a split menu item interaction where the main area triggers an action,\n * while the icon button opens the submenu.\n */\n splitMenuItem?: boolean;\n /**\n * The label of the menu item for accessibility.\n */\n \"aria-label\"?: AriaAttributes[\"aria-label\"];\n /**\n * The position of a submenu relative to the menu item.\n */\n submenuPosition?: SubmenuPosition;\n /**\n * If true, automatically repositions the submenu when its content changes.\n */\n autoAdjustOnSubMenuContentResize?: boolean;\n}\n\nexport interface MenuItemTitleComponentProps extends Omit<MenuItemProps, \"title\"> {\n title: ReactElement;\n \"aria-label\": NonNullable<AriaAttributes[\"aria-label\"]>;\n}\n\nconst MenuItem = forwardRef(\n (\n {\n className,\n iconWrapperClassName,\n rightIconWrapperClassName,\n title = \"\",\n label = \"\",\n icon = \"\",\n rightIcon = \"\",\n rightIconType,\n rightIconBackgroundColor,\n iconType,\n iconBackgroundColor,\n disabled = false,\n disableReason,\n selected = false,\n key,\n children,\n tooltipContent,\n tooltipPosition = \"right\",\n tooltipShowDelay = 300,\n tooltipProps,\n ...baseMenuProps\n }: MenuItemProps | MenuItemTitleComponentProps,\n ref: ForwardedRef<HTMLElement>\n ) => {\n const titleRef = useRef();\n\n const isTitleHoveredAndOverflowing = useIsOverflowing({ ref: titleRef });\n const shouldShowTooltip = isTitleHoveredAndOverflowing || disabled || tooltipContent;\n\n const finalTooltipContent = useMemo(() => {\n if (disabled) return disableReason;\n if (tooltipContent) return tooltipContent;\n return title;\n }, [disableReason, disabled, title, tooltipContent]);\n\n const renderLabel = useMemo(() => {\n if (!label) return;\n if (typeof label === \"string\") {\n return <Label text={label} size=\"small\" />;\n }\n if (React.isValidElement(label) && label.type === Label) {\n return label;\n }\n }, [label]);\n\n return (\n <Tooltip\n content={shouldShowTooltip ? finalTooltipContent : null}\n position={tooltipPosition}\n showDelay={tooltipShowDelay}\n {...tooltipProps}\n >\n <BaseMenuItem\n key={key}\n ref={ref}\n subMenu={children}\n className={className}\n disabled={disabled}\n selected={selected}\n {...baseMenuProps}\n >\n {Boolean(icon) && (\n <MenuItemIcon\n icon={icon}\n type={iconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={iconBackgroundColor}\n wrapperClassName={iconWrapperClassName}\n />\n )}\n <div ref={titleRef} className={styles.title}>\n {title}\n </div>\n <Flex gap=\"xs\">\n {Boolean(rightIcon) && !children && (\n <MenuItemIcon\n icon={rightIcon}\n type={rightIconType}\n disabled={disabled}\n selected={selected}\n backgroundColor={rightIconBackgroundColor}\n isRightIcon={true}\n wrapperClassName={rightIconWrapperClassName}\n />\n )}\n {renderLabel}\n </Flex>\n </BaseMenuItem>\n </Tooltip>\n );\n }\n);\n\nObject.assign(MenuItem, {\n isSelectable: true,\n isMenuChild: true\n});\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","_a","ref","className","iconWrapperClassName","rightIconWrapperClassName","_a$title","title","_a$label","label","_a$icon","icon","_a$rightIcon","rightIcon","rightIconType","rightIconBackgroundColor","iconType","iconBackgroundColor","_a$disabled","disabled","disableReason","_a$selected","selected","key","children","tooltipContent","_a$tooltipPosition","tooltipPosition","_a$tooltipShowDelay","tooltipShowDelay","tooltipProps","baseMenuProps","__rest","titleRef","useRef","shouldShowTooltip","useIsOverflowing","finalTooltipContent","useMemo","renderLabel","React","createElement","Label","text","size","isValidElement","type","Tooltip","Object","assign","content","position","showDelay","BaseMenuItem","subMenu","MenuItemIcon","backgroundColor","wrapperClassName","styles","Flex","gap","isRightIcon","isSelectable","isMenuChild"],"mappings":"2fA+KMA,IAAAA,EAAWC,GACf,SACEC,EAuBAC,GAvBA,IACEC,EAmBYF,EAnBZE,UACAC,EAkBYH,EAlBZG,qBACAC,EAiBYJ,EAjBZI,0BAAyBC,EAiBbL,EAhBZM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAgBEP,EAfZQ,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EAAAE,EAeET,EAdZU,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAcGX,EAbZY,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EACdE,EAYYb,EAZZa,cACAC,EAWYd,EAXZc,yBACAC,EAUYf,EAVZe,SACAC,EASYhB,EATZgB,oBAAmBC,EASPjB,EARZkB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAOYnB,EAPZmB,cAAaC,EAODpB,EANZqB,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAKYtB,EALZsB,IACAC,EAIYvB,EAJZuB,SACAC,EAGYxB,EAHZwB,eAAcC,EAGFzB,EAFZ0B,gBAAAA,OAAkB,IAAHD,EAAG,QAAOA,EAAAE,EAEb3B,EADZ4B,iBAAAA,OAAmB,IAAHD,EAAG,IAAGA,EACtBE,EAAY7B,EAAZ6B,aACGC,EArBLC,EAAA/B,EAAA,CAAA,YAAA,uBAAA,4BAAA,QAAA,QAAA,OAAA,YAAA,gBAAA,2BAAA,WAAA,sBAAA,WAAA,gBAAA,WAAA,MAAA,WAAA,iBAAA,kBAAA,mBAAA,iBAyBMgC,EAAWC,IAGXC,EAD+BC,EAAiB,CAAElC,IAAK+B,KACHd,GAAYM,EAEhEY,EAAsBC,GAAQ,WAClC,OAAInB,EAAiBC,EACjBK,GACGlB,CACR,GAAE,CAACa,EAAeD,EAAUZ,EAAOkB,IAE9Bc,EAAcD,GAAQ,WAC1B,GAAK7B,EACL,MAAqB,iBAAVA,EACF+B,EAAAC,cAACC,EAAK,CAACC,KAAMlC,EAAOmC,KAAK,UAE9BJ,EAAMK,eAAepC,IAAUA,EAAMqC,OAASJ,EACzCjC,OADT,CAGF,GAAG,CAACA,IAEJ,OACE+B,EAACC,cAAAM,EACCC,OAAAC,OAAA,CAAAC,QAASf,EAAoBE,EAAsB,KACnDc,SAAUxB,EACVyB,UAAWvB,GACPC,GAEJU,EAACC,cAAAY,EACCL,OAAAC,OAAA,CAAA1B,IAAKA,EACLrB,IAAKA,EACLoD,QAAS9B,EACTrB,UAAWA,EACXgB,SAAUA,EACVG,SAAUA,GACNS,KAEKpB,GACP6B,EAACC,cAAAc,EACC,CAAA5C,KAAMA,EACNmC,KAAM9B,EACNG,SAAUA,EACVG,SAAUA,EACVkC,gBAAiBvC,EACjBwC,iBAAkBrD,IAGtBoC,EAAKC,cAAA,MAAA,CAAAvC,IAAK+B,EAAU9B,UAAWuD,EAAOnD,OACnCA,GAEHiC,EAAAC,cAACkB,EAAI,CAACC,IAAI,QACC/C,IAAeW,GACtBgB,EAACC,cAAAc,GACC5C,KAAME,EACNiC,KAAMhC,EACNK,SAAUA,EACVG,SAAUA,EACVkC,gBAAiBzC,EACjB8C,aAAa,EACbJ,iBAAkBpD,IAGrBkC,IAKX,IAGFS,OAAOC,OAAOlD,EAAU,CACtB+D,cAAc,EACdC,aAAa"}
|
package/dist/src/components/Menu/MenuItem/components/BaseMenuItem/BaseMenuItem.module.scss.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={item:"item_074c3642fa",splitMenuItem:"splitMenuItem_576c3efc64",disabled:"disabled_e79daaf941",focused:"focused_55bdc74136",initialSelected:"initialSelected_d2566d548e",selected:"selected_33b0d6101e"};!function(e){const n="s_id-
|
|
1
|
+
var e={item:"item_074c3642fa",splitMenuItem:"splitMenuItem_576c3efc64",disabled:"disabled_e79daaf941",focused:"focused_55bdc74136",initialSelected:"initialSelected_d2566d548e",selected:"selected_33b0d6101e"};!function(e){const n="s_id-8562a1149ca1_4_5_3";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const o=document.createElement("style");o.id=n,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n.item_074c3642fa {\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n margin: unset;\n display: flex;\n flex-direction: row;\n width: 100%;\n box-sizing: border-box;\n padding: var(--space-4) var(--space-8);\n cursor: pointer;\n user-select: none;\n align-items: center;\n overflow: visible;\n border: 1px solid transparent;\n border-radius: 8px;\n outline: none;\n}\n.item_074c3642fa.splitMenuItem_576c3efc64 {\n padding: 0 0 0 var(--space-8);\n}\n.item_074c3642fa.disabled_e79daaf941 {\n cursor: not-allowed;\n color: var(--disabled-text-color);\n}\n.item_074c3642fa.focused_55bdc74136:not(.disabled_e79daaf941) {\n background-color: var(--primary-background-hover-color);\n}\n.item_074c3642fa.focused_55bdc74136:not(.disabled_e79daaf941):not(:hover):not(.initialSelected_d2566d548e) {\n outline: none;\n z-index: 11;\n border-radius: 4px;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.item_074c3642fa:hover:not(.disabled_e79daaf941) {\n background-color: var(--primary-background-hover-color);\n}\n.item_074c3642fa.selected_33b0d6101e:not(.disabled_e79daaf941) {\n background-color: var(--primary-background-hover-color);\n}");export{e as default};
|
|
2
2
|
//# sourceMappingURL=BaseMenuItem.module.scss.js.map
|