@kubit-ui-web/react-components 2.0.0-beta.7 → 2.0.0-beta.8

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.
Files changed (36) hide show
  1. package/dist/cjs/components/calendar/list/list.js +1 -1
  2. package/dist/cjs/components/calendar/selector/monthSelector/monthSelector.js +1 -1
  3. package/dist/cjs/components/image/image.css +1 -38
  4. package/dist/cjs/components/listOptions/listOptionsStandAlone.js +1 -1
  5. package/dist/cjs/components/option/optionStandAlone.js +1 -1
  6. package/dist/cjs/components/popover/styles/index.css +1 -10
  7. package/dist/cjs/components/popover/styles/keyframes.css +1 -421
  8. package/dist/cjs/components/popover/styles/popover-arrow.css +1 -42
  9. package/dist/cjs/components/popover/styles/popover.css +1 -189
  10. package/dist/cjs/components/skeleton/skeleton.css +1 -20
  11. package/dist/cjs/components/table/__stories__/css/table.css +1 -7
  12. package/dist/cjs/components/text/text.css +1 -14
  13. package/dist/cjs/components/tooltip/hooks/useTooltip.js +1 -1
  14. package/dist/cjs/components/tooltip/tooltip.css +1 -69
  15. package/dist/cjs/lib/components/customComponent/customComponent.js +1 -1
  16. package/dist/cjs/lib/provider/cssProvider/provider.js +1 -1
  17. package/dist/cjs/lib/provider/cssProvider/stats/stats.js +1 -1641
  18. package/dist/esm/components/calendar/list/list.js +1 -1
  19. package/dist/esm/components/calendar/selector/monthSelector/monthSelector.js +1 -1
  20. package/dist/esm/components/image/image.css +1 -38
  21. package/dist/esm/components/listOptions/listOptionsStandAlone.js +1 -1
  22. package/dist/esm/components/option/optionStandAlone.js +7 -7
  23. package/dist/esm/components/popover/styles/index.css +1 -10
  24. package/dist/esm/components/popover/styles/keyframes.css +1 -421
  25. package/dist/esm/components/popover/styles/popover-arrow.css +1 -42
  26. package/dist/esm/components/popover/styles/popover.css +1 -189
  27. package/dist/esm/components/skeleton/skeleton.css +1 -20
  28. package/dist/esm/components/table/__stories__/css/table.css +1 -7
  29. package/dist/esm/components/text/text.css +1 -14
  30. package/dist/esm/components/tooltip/hooks/useTooltip.js +1 -1
  31. package/dist/esm/components/tooltip/tooltip.css +1 -69
  32. package/dist/esm/lib/components/customComponent/customComponent.js +2 -2
  33. package/dist/esm/lib/provider/cssProvider/provider.js +1 -1
  34. package/dist/esm/lib/provider/cssProvider/stats/stats.js +1 -1641
  35. package/dist/styles/kubit/css/kubit.css +1 -1
  36. package/package.json +5 -1
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../../../lib/components/customComponent/customComponent.js"),a=require("../../../lib/hooks/useRoveFocus/useRoveFocus.js"),r=require("../../../lib/provider/utilsProvider/utilsProvider.js"),n=require("../../../lib/types/states/states.js"),i=require("../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),o=require("../constants/constants.js"),l=require("../utils/getAllDaysInMonth.js"),u=require("../utils/getFirstDayOfMonth.js"),d=require("../utils/getState.js"),y=require("../utils/groupDaysByWeeks.js"),c=require("../utils/handleKeysmoves.js"),D="ddMMyyyy";exports.List=({cssClasses:m,currentDate:g,disabledDates:h=[],hasRange:p,maxDate:E,minDate:S,onDayClick:v,selectedDate:f,setSelectedDate:b,sundayFirst:M,...x})=>{const{dateHelpers:j,formatDate:A,transformDate:k}=r.useUtilsProvider(),K=g.getMonth()+1,q=g.getFullYear(),R=A(new Date,D),w=l.getAllDaysInMonth(K,q),C=u.getFirstDayOfMonth(q,K-1)-(M?0:1),F=[...new Array(C>=0?C:6),...w],T=F.filter(e=>void 0===e),[W,$]=t.useState(0),[P,Y]=t.useState(0),_=x["data-testid"]||"calendar",L={currentDate:g,dayList:F,daysAndEmptyDaysUntilMaxDate:c.getDaysAndEmptyDaysUntilMaxDate(T,E,g),firstEmptyAndDisabledDays:c.getFirstEmptyAndDisabledDays(T,S,g),maxDate:E,minDate:S},U=t.useMemo(()=>({calendarBlankDaysSize:T.length,currentFocusSelected:(f[0]?f[0].getDate():(new Date).getDate())+T.length-1,keyDownMove:c.handleKeyDownMove(L),keyLeftMove:c.handleKeyLeftMove(L),keyPageDownMove:c.handleKeyPageDownMove(L),keyPageUpMove:c.handleKeyPageUpMove(L),keyRightMove:c.handleKeyRightMove(L),keyTabMove:c.handleKeyTabMove,keyUpMove:c.handleKeyUpMove(L),size:F.length}),[T.length,F.length,g,S,E]),[I,B,N]=a.useRoveFocus(U),O=e=>(e&&(I<T.length&&B(T.length),I>F.length&&B(F.length-1)),I===e),z=e=>{if(P){if(P<f[0])return e>P&&e<f[0];if(P>f[0])return e<P&&e>f[0]}else{if(e>f[0])return e<f[1];if(e<f[0])return e>f[1]}return!1},G=e=>{if(!p)return!1;const t=f?.findIndex(t=>t&&e&&A(t,D)===A(e,D));return 0===t&&P?P<e:0===t?e>f[1]:1===t&&e>f[0]},H=e=>{if(!p)return!1;const t=f?.findIndex(t=>t&&e&&A(t,D)===A(e,D));return 0===t&&P?P>e:0===t?e<f[1]:1===t&&e<f[0]};return e.jsxRuntimeExports.jsx("tbody",{ref:N,className:m?.tbody,"data-testid":"tbody-days-list",children:y.groupDaysByWeeks(F).map((t,a)=>e.jsxRuntimeExports.jsx("tr",{className:m?.tablerow,children:t.map((t,r)=>{const l=t||0;let u=!t||j.isBefore(t,S)||j.isAfter(t,k(A(E,D),D));u||(u=h.some(e=>t&&j.isDatesEqual(t,e,!1)));const y=d.getStateDay({dayFormatted:l,formatDate:A,hasRange:p,isGhostSelected:z,isSelectedToLeft:G,isSelectedToRight:H,selectedDate:f,today:R}),c={"data-state":u?n.STATES.DISABLED:y};return t?e.jsxRuntimeExports.jsx("td",{"aria-selected":y===n.STATES.SELECTED||void 0,className:m?.listelementrove,style:{width:`calc(100% / ${o.WEEK_DAYS})`},...i.pickCustomAttributes(c),children:e.jsxRuntimeExports.jsx(s.CustomComponent,{"aria-label":A(t,{day:"numeric",month:"long",weekday:"long",year:"numeric"}),ariaDisabled:u,className:m?.dayslist,component:"button","data-testid":`${_}-${r+o.WEEK_DAYS*a}`,focus:O(r+o.WEEK_DAYS*a),index:r+o.WEEK_DAYS*a,type:"button",onMouseOver:()=>{1===W&&Y(l)},onSelectItem:()=>{u||(e=>{const[t,s]=f;p?t&&s||!t&&!s?(b([e,0]),$(1),e instanceof Date&&v?.(e.getDate().toString())):(b([t,e]),$(0),e instanceof Date&&v?.(e.getDate().toString())):(b([e]),e instanceof Date&&v?.(e.getDate().toString()))})(l)},...i.pickCustomAttributes(c),children:t.getDate()})},`day${r+o.WEEK_DAYS*a}${l}`):e.jsxRuntimeExports.jsx("td",{"aria-hidden":!0,"aria-label":"empty day",className:m?.listelementempty,style:{width:`calc(100% / ${o.WEEK_DAYS})`}},`day${r+o.WEEK_DAYS*a}${l}`)})},`table-row-${a.toString()}`))})};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../../../lib/components/customComponent/customComponent.js"),a=require("../../../lib/hooks/useRoveFocus/useRoveFocus.js"),r=require("../../../lib/provider/utilsProvider/utilsProvider.js"),n=require("../../../lib/types/states/states.js"),i=require("../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),o=require("../constants/constants.js"),l=require("../utils/getAllDaysInMonth.js"),u=require("../utils/getFirstDayOfMonth.js"),d=require("../utils/getState.js"),y=require("../utils/groupDaysByWeeks.js"),c=require("../utils/handleKeysmoves.js"),D="ddMMyyyy";exports.List=({cssClasses:m,currentDate:g,disabledDates:h=[],hasRange:p,maxDate:E,minDate:S,onDayClick:v,selectedDate:f,setSelectedDate:b,sundayFirst:M,...x})=>{const{dateHelpers:j,formatDate:A,transformDate:k}=r.useUtilsProvider(),K=g.getMonth()+1,q=g.getFullYear(),R=A(new Date,D),w=l.getAllDaysInMonth(K,q),C=u.getFirstDayOfMonth(q,K-1)-(M?0:1),F=[...new Array(C>=0?C:6),...w],T=F.filter(e=>void 0===e),[W,$]=t.useState(0),[P,Y]=t.useState(0),_=x["data-testid"]||"calendar",L={currentDate:g,dayList:F,daysAndEmptyDaysUntilMaxDate:c.getDaysAndEmptyDaysUntilMaxDate(T,E,g),firstEmptyAndDisabledDays:c.getFirstEmptyAndDisabledDays(T,S,g),maxDate:E,minDate:S},U=t.useMemo(()=>({calendarBlankDaysSize:T.length,currentFocusSelected:(f[0]?f[0].getDate():(new Date).getDate())+T.length-1,keyDownMove:c.handleKeyDownMove(L),keyLeftMove:c.handleKeyLeftMove(L),keyPageDownMove:c.handleKeyPageDownMove(L),keyPageUpMove:c.handleKeyPageUpMove(L),keyRightMove:c.handleKeyRightMove(L),keyTabMove:c.handleKeyTabMove,keyUpMove:c.handleKeyUpMove(L),size:F.length}),[T.length,F.length,g,S,E]),[I,B,N]=a.useRoveFocus(U),O=e=>(e&&(I<T.length&&B(T.length),I>F.length&&B(F.length-1)),I===e),z=e=>{if(P){if(P<f[0])return e>P&&e<f[0];if(P>f[0])return e<P&&e>f[0]}else{if(e>f[0])return e<f[1];if(e<f[0])return e>f[1]}return!1},G=e=>{if(!p)return!1;const t=f?.findIndex(t=>t&&e&&A(t,D)===A(e,D));return 0===t&&P?P<e:0===t?e>f[1]:1===t&&e>f[0]},H=e=>{if(!p)return!1;const t=f?.findIndex(t=>t&&e&&A(t,D)===A(e,D));return 0===t&&P?P>e:0===t?e<f[1]:1===t&&e<f[0]};return e.jsxRuntimeExports.jsx("tbody",{ref:N,className:m?.tbody,"data-testid":"tbody-days-list",children:y.groupDaysByWeeks(F).map((t,a)=>e.jsxRuntimeExports.jsx("tr",{className:m?.tablerow,children:t.map((t,r)=>{const l=t||0;let u=!t||j.isBefore(t,S)||j.isAfter(t,k(A(E,D),D));u||(u=h.some(e=>t&&j.isDatesEqual(t,e,!1)));const y=d.getStateDay({dayFormatted:l,formatDate:A,hasRange:p,isGhostSelected:z,isSelectedToLeft:G,isSelectedToRight:H,selectedDate:f,today:R}),c={"data-state":u?n.STATES.DISABLED:y};return t?e.jsxRuntimeExports.jsx("td",{"aria-selected":y===n.STATES.SELECTED||void 0,className:m?.listelementrove,style:{width:`calc(100% / ${o.WEEK_DAYS})`},...i.pickCustomAttributes(c),children:e.jsxRuntimeExports.jsx(s.CustomComponent,{"aria-disabled":u,"aria-label":A(t,{day:"numeric",month:"long",weekday:"long",year:"numeric"}),className:m?.dayslist,component:"button","data-testid":`${_}-${r+o.WEEK_DAYS*a}`,focus:O(r+o.WEEK_DAYS*a),index:r+o.WEEK_DAYS*a,type:"button",onMouseOver:()=>{1===W&&Y(l)},onSelectItem:()=>{u||(e=>{const[t,s]=f;p?t&&s||!t&&!s?(b([e,0]),$(1),e instanceof Date&&v?.(e.getDate().toString())):(b([t,e]),$(0),e instanceof Date&&v?.(e.getDate().toString())):(b([e]),e instanceof Date&&v?.(e.getDate().toString()))})(l)},...i.pickCustomAttributes(c),children:t.getDate()})},`day${r+o.WEEK_DAYS*a}${l}`):e.jsxRuntimeExports.jsx("td",{"aria-hidden":!0,"aria-label":"empty day",className:m?.listelementempty,style:{width:`calc(100% / ${o.WEEK_DAYS})`}},`day${r+o.WEEK_DAYS*a}${l}`)})},`table-row-${a.toString()}`))})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../../../text/text.js"),o=require("../../../../lib/components/customComponent/customComponent.js"),r=require("../../../../lib/hooks/useRoveFocus/useRoveFocus.js"),n=require("../../../../lib/provider/utilsProvider/utilsProvider.js"),i=require("../../../../lib/types/states/states.js"),l=require("../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),a=require("../../utils/setMonth.js"),u=require("./utils/monthSelector.utils.js");exports.MonthSelector=({configAccesibility:c,cssClasses:m,currentDate:h,maxDate:p,minDate:d,onMonthClick:M,setCurrentDate:S,today:g,...b})=>{const{dateHelpers:x,transformDate:v}=n.useUtilsProvider(),A=b["data-testid"]||"calendar",D={currentDate:h,maxDate:p,minDate:d},E=t.useMemo(()=>({currentFocusSelected:h?h.getMonth():(new Date).getMonth(),keyDownMove:u.keyDownMove(D),keyLeftMove:u.keyLeftMove(D),keyRightMove:u.keyRightMove(D),keyTabMove:u.keyTabMove,keyUpMove:u.keyUpMove(D),size:x.getAllMonthName("long").length}),[x.getAllMonthName("long").length,h]),[T,,j]=r.useRoveFocus(E),y=e=>{const t=h?.getFullYear();return d?.getFullYear()===t&&d?.getMonth()>e||p?.getFullYear()===t&&p?.getMonth()<e};return e.jsxRuntimeExports.jsx("ul",{ref:j,"aria-label":c?.monthSelectorAriaLabel,className:m?.monthslist,"data-testid":"tbody-months-list",children:x.getAllMonthName("long",b.locale).map((t,r)=>{const n=((e,t,s)=>{let o;return o=e.getMonth()===t?i.STATES.SELECTED:t===g.getMonth()?i.STATES.CURRENT:s?i.STATES.DISABLED:i.STATES.DEFAULT,o})(h,r,y(r)),u={"data-state":y(r)?i.STATES.DISABLED:n};return e.jsxRuntimeExports.jsx("li",{"aria-selected":n===i.STATES.SELECTED||void 0,className:m?.monthlistitem,...l.pickCustomAttributes(u),children:e.jsxRuntimeExports.jsx(o.CustomComponent,{"aria-label":t.charAt(0).toUpperCase()+t.slice(1),ariaDisabled:y(r),className:m?.monthelement,component:"button",focus:T===r,index:r,type:"button",...l.pickCustomAttributes(u),onSelectItem:()=>{const e=new Date(h);S(v(a.setMonth(e,r))),M?.(t)},children:e.jsxRuntimeExports.jsx(s.Text,{component:"span","data-testid":A,children:t.charAt(0).toUpperCase()+t.slice(1)})})},t)})})};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../../../text/text.js"),o=require("../../../../lib/components/customComponent/customComponent.js"),r=require("../../../../lib/hooks/useRoveFocus/useRoveFocus.js"),n=require("../../../../lib/provider/utilsProvider/utilsProvider.js"),i=require("../../../../lib/types/states/states.js"),l=require("../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),a=require("../../utils/setMonth.js"),u=require("./utils/monthSelector.utils.js");exports.MonthSelector=({configAccesibility:c,cssClasses:m,currentDate:h,maxDate:p,minDate:d,onMonthClick:M,setCurrentDate:S,today:g,...b})=>{const{dateHelpers:x,transformDate:v}=n.useUtilsProvider(),A=b["data-testid"]||"calendar",E={currentDate:h,maxDate:p,minDate:d},T=t.useMemo(()=>({currentFocusSelected:h?h.getMonth():(new Date).getMonth(),keyDownMove:u.keyDownMove(E),keyLeftMove:u.keyLeftMove(E),keyRightMove:u.keyRightMove(E),keyTabMove:u.keyTabMove,keyUpMove:u.keyUpMove(E),size:x.getAllMonthName("long").length}),[x.getAllMonthName("long").length,h]),[j,,D]=r.useRoveFocus(T),y=e=>{const t=h?.getFullYear();return d?.getFullYear()===t&&d?.getMonth()>e||p?.getFullYear()===t&&p?.getMonth()<e};return e.jsxRuntimeExports.jsx("ul",{ref:D,"aria-label":c?.monthSelectorAriaLabel,className:m?.monthslist,"data-testid":"tbody-months-list",children:x.getAllMonthName("long",b.locale).map((t,r)=>{const n=((e,t,s)=>{let o;return o=e.getMonth()===t?i.STATES.SELECTED:t===g.getMonth()?i.STATES.CURRENT:s?i.STATES.DISABLED:i.STATES.DEFAULT,o})(h,r,y(r)),u={"data-state":y(r)?i.STATES.DISABLED:n};return e.jsxRuntimeExports.jsx("li",{"aria-selected":n===i.STATES.SELECTED||void 0,className:m?.monthlistitem,...l.pickCustomAttributes(u),children:e.jsxRuntimeExports.jsx(o.CustomComponent,{"aria-disabled":y(r),"aria-label":t.charAt(0).toUpperCase()+t.slice(1),className:m?.monthelement,component:"button",focus:j===r,index:r,type:"button",...l.pickCustomAttributes(u),onSelectItem:()=>{const e=new Date(h);S(v(a.setMonth(e,r))),M?.(t)},children:e.jsxRuntimeExports.jsx(s.Text,{component:"span","data-testid":A,children:t.charAt(0).toUpperCase()+t.slice(1)})})},t)})})};
@@ -1,38 +1 @@
1
- :root {
2
- --border-radius: 0;
3
- --fallback-ratio: 1;
4
- --object-fit: cover;
5
- --ratio: 1;
6
- --width: 100%;
7
- }
8
-
9
- .kbt-picture {
10
- position: relative;
11
- display: inline-block;
12
- overflow: hidden;
13
- max-width: 100%;
14
- max-height: 100%;
15
- width: var(--width);
16
- aspect-ratio: var(--ratio);
17
- }
18
-
19
- @supports not (aspect-ratio: 16 / 9) {
20
- .kbt-picture {
21
- padding-top: var(--fallback-ratio);
22
- }
23
-
24
- .kbt-picture img {
25
- position: absolute;
26
- top: 0;
27
- left: 0;
28
- width: 100%;
29
- height: auto;
30
- }
31
- }
32
-
33
- .kbt-picture img {
34
- max-width: 100%;
35
- border-radius: var(--border-radius);
36
- object-fit: var(--object-fit);
37
- aspect-ratio: var(--ratio);
38
- }
1
+ :root{--border-radius:0;--fallback-ratio:1;--object-fit:cover;--ratio:1;--width:100%}.kbt-picture{aspect-ratio:var(--ratio);display:inline-block;max-height:100%;max-width:100%;overflow:hidden;position:relative;width:var(--width)}@supports not (aspect-ratio:16/9){.kbt-picture{padding-top:var(--fallback-ratio)}.kbt-picture img{height:auto;left:0;position:absolute;top:0;width:100%}}.kbt-picture img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);max-width:100%;object-fit:var(--object-fit)}
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),t=require("react"),i=require("../text/text.js"),o=require("../../lib/hooks/useRoveFocus/useRoveFocus.js"),s=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),n=require("../../lib/utils/process/processText/processText.js"),r=require("../../lib/components/customComponent/customComponent.js"),l=require("../option/option.js"),a=require("./utils/listOptions.utils.js"),c=t.forwardRef(({caseSensitive:c,charsHighlighted:u,checkedIcon:p,content:d,cssClasses:x,highlightedOptionVariant:m,id:v,index:h=0,listComponent:j,multiSelect:g,onOptionClick:b,options:k,optionsContainerArias:C,roveFocus:y,selectedValue:S,title:R,type:q="selection",...M},O)=>{const $=M["data-testid"]??"list-options",F=s.pickCustomAttributes(M),f=t.useMemo(()=>({currentFocusSelected:-1,keyDownMove:a.keyDownMove(k),keyLeftMove:0,keyRightMove:0,keyTabMove:null,keyUpMove:a.keyUpMove,size:k.length}),[k]),[E,T,A]=o.useRoveFocus(y??f),I=t.useId();t.useImperativeHandle(O,()=>A.current,[A]);const V=v??I,w="selection"===q,H="navigation"===q,L=k&&k.length>0;return e.jsxRuntimeExports.jsxs("div",{className:x?.list_options,"data-testid":$,...F,children:[!!R&&k.length>0&&e.jsxRuntimeExports.jsx("div",{className:x?.titlecontainer,children:e.jsxRuntimeExports.jsx(i.Text,{additionalClasses:{text:x?.title},...n.processText(R)})}),d,L&&e.jsxRuntimeExports.jsx(r.CustomComponent,{ref:A,"aria-label":C?.["aria-label"],"aria-labelledby":C?.["aria-labelledby"],className:x?.optionscontainer,component:j??"ul",id:V,role:w?"listbox":void 0,children:k.map((t,i)=>{const o=a.isSelected(t,S,g,c),s=`${$}-section-${h}-option-${i}`,n=e.jsxRuntimeExports.jsx(l.Option,{"aria-current":H?o:void 0,"aria-selected":w?o:void 0,checkedIcon:p,component:H?"div":"li","data-testid":s,focus:E===i,labelCharsHighlighted:u,multiSelect:g,role:w?"option":void 0,selected:o,tabIndex:H?0:-1,variant:a.getOptionVariant(t.highlighted,m,M?.optionVariant),...t,onClick:e=>{T(i),b?.(t.value,e),t.onClick?.(e)},onFocus:e=>{i!==E&&T(i),t.onFocus?.(e)}},`${V}Option-${h.toString()}-${i.toString()}`);return"selection"===q?e.jsxRuntimeExports.jsx("li",{children:n},`${V}LiOption-${h.toString()}-${i.toString()}`):n})})]})});exports.ListOptionsStandAlone=c;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),t=require("react"),i=require("../text/text.js"),o=require("../../lib/hooks/useRoveFocus/useRoveFocus.js"),s=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),n=require("../../lib/utils/process/processText/processText.js"),r=require("../../lib/components/customComponent/customComponent.js"),l=require("../option/option.js"),a=require("./utils/listOptions.utils.js"),c=t.forwardRef(({caseSensitive:c,charsHighlighted:u,checkedIcon:p,content:d,cssClasses:x,highlightedOptionVariant:m,id:v,index:h=0,listComponent:j,multiSelect:g,onOptionClick:b,options:k,optionsContainerArias:C,roveFocus:y,selectedValue:S,title:R,type:q="selection",...M},O)=>{const $=M["data-testid"]??"list-options",F=s.pickCustomAttributes(M),f=t.useMemo(()=>({currentFocusSelected:-1,keyDownMove:a.keyDownMove(k),keyLeftMove:0,keyRightMove:0,keyTabMove:null,keyUpMove:a.keyUpMove,size:k.length}),[k]),[E,T,A]=o.useRoveFocus(y??f),I=t.useId();t.useImperativeHandle(O,()=>A.current,[A]);const V=v??I,w="selection"===q,H="navigation"===q,L=k&&k.length>0;return e.jsxRuntimeExports.jsxs("div",{className:x?.list_options,"data-testid":$,...F,children:[!!R&&k.length>0&&e.jsxRuntimeExports.jsx("div",{className:x?.titlecontainer,children:e.jsxRuntimeExports.jsx(i.Text,{additionalClasses:{text:x?.title},...n.processText(R)})}),d,L&&e.jsxRuntimeExports.jsx(r.CustomComponent,{ref:A,"aria-label":C?.["aria-label"],"aria-labelledby":C?.["aria-labelledby"],className:x?.optionscontainer,component:j??"ul",id:V,role:w?"listbox":void 0,children:k.map((t,i)=>{const o=a.isSelected(t,S,g,c),s=`${$}-section-${h}-option-${i}`,n=w||H?"div":"li",r=e.jsxRuntimeExports.jsx(l.Option,{"aria-current":H?o:void 0,"aria-selected":w?o:void 0,checkedIcon:p,component:n,"data-testid":s,focus:E===i,labelCharsHighlighted:u,multiSelect:g,role:w?"option":void 0,selected:o,tabIndex:H?0:-1,variant:a.getOptionVariant(t.highlighted,m,M?.optionVariant),...t,onClick:e=>{T(i),b?.(t.value,e),t.onClick?.(e)},onFocus:e=>{i!==E&&T(i),t.onFocus?.(e)}},`${V}Option-${h.toString()}-${i.toString()}`);return"selection"===q?e.jsxRuntimeExports.jsx("li",{children:r},`${V}LiOption-${h.toString()}-${i.toString()}`):r})})]})});exports.ListOptionsStandAlone=c;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../text/text.js"),i=require("../../lib/components/elementOrIcon/elementOrIcon.js"),n=require("../../lib/types/states/states.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),l=require("../../lib/utils/process/processText/processText.js"),r=require("../../lib/components/customComponent/customComponent.js"),a=require("../../lib/utils/keyboard/keyboard.js"),c=require("./components.ts/optionLabelSlice.js"),u=require("./utils/option.utils.js"),d=t.forwardRef(({checkedIcon:t,component:d,componentLink:p,cssClasses:x,disabled:m,extraContent:b,focus:h,hover:j,icon:E,label:g,labelCharsHighlighted:S,multiSelect:C,onBlur:T,onClick:A,onFocus:L,onMouseEnter:R,onMouseLeave:k,role:I,selected:y,sublabel:q,tabIndex:O,url:f,...v})=>{const $=!!S&&S?.length>0,M=u.getState(m,h,y,C,j,$),D={"data-state":M},N=M===n.STATES.DISABLED,H=o.pickCustomAttributes({...v,customAttributes:D}),P=o.pickCustomAttributes(D),_=H["data-testid"]||"option",w=[n.STATES.MULTIPLE_SELECTED,n.STATES.MULTIPLE_SELECTED_HOVER,n.STATES.SELECTED].includes(M);let B,F,K;if("string"==typeof g){const{firstHighlightedIndex:e,lastHighlightedIndex:t}=u.getHighlightedIndexes(g,S);B=g.substring(0,e),F=g.substring(e,t),K=g.substring(t)}return e.jsxRuntimeExports.jsxs(r.CustomComponent,{"aria-disabled":N,className:x?.option,...H,component:f?p:d??"div","data-testid":_,role:I,tabIndex:O,url:f,onBlur:T,onClick:e=>{N||A?.(e)},onFocus:L,onKeyDown:e=>{N||!a.isKeyEnterPressed(e.key)&&!a.isKeySpacePressed(e.key)||A?.(e)},onMouseEnter:R,onMouseLeave:k,...P,children:[e.jsxRuntimeExports.jsxs("div",{className:x?.firstrowcontainer,children:[e.jsxRuntimeExports.jsxs("div",{className:x?.labeliconcontainer,...P,children:[e.jsxRuntimeExports.jsx(i.ElementOrIcon,{className:x?.icon,customAttributes:D,...E}),!!l.processText(q).children&&e.jsxRuntimeExports.jsx("div",{className:x?.sublabelcontainer,...P,children:e.jsxRuntimeExports.jsx(s.Text,{additionalClasses:{text:x?.sublabel},component:"span",customAttributes:D,...l.processText(q)})}),e.jsxRuntimeExports.jsx("p",{children:"string"==typeof g?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[" ",e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:x?.label,customAttributes:D,"data-testid":`${_}-first-no-hightlighted-label`,children:B}),e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:`${x?.label} ${x?.labelhighlighted}`,customAttributes:D,"data-testid":`${_}-highlighted-label`,children:F}),e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:`${x?.label} ${x?.labelhighlighted}`,customAttributes:D,"data-testid":`${_}-last-no-hightlighted-label`,children:K})]}):e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:x?.label,customAttributes:D,"data-testid":`${_}-label`,children:g})})]}),w&&e.jsxRuntimeExports.jsx(i.ElementOrIcon,{className:x?.checkedicon,customAttributes:D,...t})]}),!!b&&b]})});exports.OptionStandAlone=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),t=require("react"),s=require("../text/text.js"),i=require("../../lib/components/elementOrIcon/elementOrIcon.js"),n=require("../../lib/types/states/states.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),l=require("../../lib/utils/process/processText/processText.js"),r=require("../../lib/components/customComponent/customComponent.js"),a=require("../../lib/utils/keyboard/keyboard.js"),c=require("./components.ts/optionLabelSlice.js"),u=require("./utils/option.utils.js"),d=t.forwardRef(({checkedIcon:t,component:d,componentLink:p,cssClasses:x,disabled:m,extraContent:b,focus:h,hover:j,icon:E,label:g,labelCharsHighlighted:S,multiSelect:C,onBlur:T,onClick:A,onFocus:L,onMouseEnter:R,onMouseLeave:k,role:I,selected:y,sublabel:f,tabIndex:q,url:O,...v},$)=>{const M=!!S&&S?.length>0,D=u.getState(m,h,y,C,j,M),N={"data-state":D},H=D===n.STATES.DISABLED,P=o.pickCustomAttributes({...v,customAttributes:N}),_=o.pickCustomAttributes(N),w=P["data-testid"]||"option",B=[n.STATES.MULTIPLE_SELECTED,n.STATES.MULTIPLE_SELECTED_HOVER,n.STATES.SELECTED].includes(D);let F,K,U;if("string"==typeof g){const{firstHighlightedIndex:e,lastHighlightedIndex:t}=u.getHighlightedIndexes(g,S);F=g.substring(0,e),K=g.substring(e,t),U=g.substring(t)}return e.jsxRuntimeExports.jsxs(r.CustomComponent,{ref:$,"aria-disabled":H,className:x?.option,...P,component:O?p:d??"div","data-testid":w,role:I,tabIndex:q,url:O,onBlur:T,onClick:e=>{H||A?.(e)},onFocus:L,onKeyDown:e=>{H||!a.isKeyEnterPressed(e.key)&&!a.isKeySpacePressed(e.key)||A?.(e)},onMouseEnter:R,onMouseLeave:k,..._,children:[e.jsxRuntimeExports.jsxs("div",{className:x?.firstrowcontainer,children:[e.jsxRuntimeExports.jsxs("div",{className:x?.labeliconcontainer,..._,children:[e.jsxRuntimeExports.jsx(i.ElementOrIcon,{className:x?.icon,customAttributes:N,...E}),!!l.processText(f).children&&e.jsxRuntimeExports.jsx("div",{className:x?.sublabelcontainer,..._,children:e.jsxRuntimeExports.jsx(s.Text,{additionalClasses:{text:x?.sublabel},component:"span",customAttributes:N,...l.processText(f)})}),e.jsxRuntimeExports.jsx("p",{children:"string"==typeof g?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[" ",e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:x?.label,customAttributes:N,"data-testid":`${w}-first-no-hightlighted-label`,children:F}),e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:`${x?.label} ${x?.labelhighlighted}`,customAttributes:N,"data-testid":`${w}-highlighted-label`,children:K}),e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:`${x?.label} ${x?.labelhighlighted}`,customAttributes:N,"data-testid":`${w}-last-no-hightlighted-label`,children:U})]}):e.jsxRuntimeExports.jsx(c.OptionLabelSlice,{component:"span",cssClasses:x?.label,customAttributes:N,"data-testid":`${w}-label`,children:g})})]}),B&&e.jsxRuntimeExports.jsx(i.ElementOrIcon,{className:x?.checkedicon,customAttributes:N,...t})]}),!!b&&b]})});exports.OptionStandAlone=d;
@@ -1,10 +1 @@
1
- /**
2
- * PopoverV2 Styles Index
3
- * Imports all popover-related CSS files
4
- */
5
-
6
- /* Core popover styles and animations */
7
- @import './popover.css';
8
-
9
- /* Arrow positioning and styling */
10
- @import './popover-arrow.css';
1
+ @import "./popover.css";@import "./popover-arrow.css";
@@ -1,421 +1 @@
1
- /**
2
- * CSS animations for popover positioning
3
- * Each animation corresponds to a specific body position from positionStyles.ts
4
- */
5
-
6
- /* ========================================
7
- CENTER POSITION ANIMATIONS
8
- ======================================== */
9
-
10
- /* Center position - scales from center */
11
- @keyframes popover-enter-center {
12
- from {
13
- opacity: 0;
14
- transform: translate(-50%, -50%) scale(0.8);
15
- }
16
- to {
17
- opacity: 1;
18
- transform: translate(-50%, -50%) scale(1);
19
- }
20
- }
21
-
22
- @keyframes popover-exit-center {
23
- from {
24
- opacity: 1;
25
- transform: translate(-50%, -50%) scale(1);
26
- }
27
- to {
28
- opacity: 0;
29
- transform: translate(-50%, -50%) scale(0.8);
30
- }
31
- }
32
-
33
- /* ========================================
34
- TOP POSITION ANIMATIONS
35
- ======================================== */
36
-
37
- /* Top center - slides down and fades in */
38
- @keyframes popover-enter-top {
39
- from {
40
- opacity: 0;
41
- transform: translateX(-50%) translateY(-20px);
42
- }
43
- to {
44
- opacity: 1;
45
- transform: translateX(-50%) translateY(0);
46
- }
47
- }
48
-
49
- @keyframes popover-exit-top {
50
- from {
51
- opacity: 1;
52
- transform: translateX(-50%) translateY(0);
53
- }
54
- to {
55
- opacity: 0;
56
- transform: translateX(-50%) translateY(-20px);
57
- }
58
- }
59
-
60
- /* Top start (left) - slides down only (same as top) */
61
- @keyframes popover-enter-top-start {
62
- from {
63
- opacity: 0;
64
- transform: translateY(-20px);
65
- }
66
- to {
67
- opacity: 1;
68
- transform: translateY(0);
69
- }
70
- }
71
-
72
- @keyframes popover-exit-top-start {
73
- from {
74
- opacity: 1;
75
- transform: translateY(0);
76
- }
77
- to {
78
- opacity: 0;
79
- transform: translateY(-20px);
80
- }
81
- }
82
-
83
- /* Top end (right) - slides down only (same as top) */
84
- @keyframes popover-enter-top-end {
85
- from {
86
- opacity: 0;
87
- transform: translateY(-20px);
88
- }
89
- to {
90
- opacity: 1;
91
- transform: translateY(0);
92
- }
93
- }
94
-
95
- @keyframes popover-exit-top-end {
96
- from {
97
- opacity: 1;
98
- transform: translateY(0);
99
- }
100
- to {
101
- opacity: 0;
102
- transform: translateY(-20px);
103
- }
104
- }
105
-
106
- /* ========================================
107
- BOTTOM POSITION ANIMATIONS
108
- ======================================== */
109
-
110
- /* Bottom center - slides up and fades in */
111
- @keyframes popover-enter-bottom {
112
- from {
113
- opacity: 0;
114
- transform: translateX(-50%) translateY(20px);
115
- }
116
- to {
117
- opacity: 1;
118
- transform: translateX(-50%) translateY(0);
119
- }
120
- }
121
-
122
- @keyframes popover-exit-bottom {
123
- from {
124
- opacity: 1;
125
- transform: translateX(-50%) translateY(0);
126
- }
127
- to {
128
- opacity: 0;
129
- transform: translateX(-50%) translateY(20px);
130
- }
131
- }
132
-
133
- /* Bottom start (left) - slides up only (same as bottom) */
134
- @keyframes popover-enter-bottom-start {
135
- from {
136
- opacity: 0;
137
- transform: translateY(20px);
138
- }
139
- to {
140
- opacity: 1;
141
- transform: translateY(0);
142
- }
143
- }
144
-
145
- @keyframes popover-exit-bottom-start {
146
- from {
147
- opacity: 1;
148
- transform: translateY(0);
149
- }
150
- to {
151
- opacity: 0;
152
- transform: translateY(20px);
153
- }
154
- }
155
-
156
- /* Bottom end (right) - slides up only (same as bottom) */
157
- @keyframes popover-enter-bottom-end {
158
- from {
159
- opacity: 0;
160
- transform: translateY(20px);
161
- }
162
- to {
163
- opacity: 1;
164
- transform: translateY(0);
165
- }
166
- }
167
-
168
- @keyframes popover-exit-bottom-end {
169
- from {
170
- opacity: 1;
171
- transform: translateY(0);
172
- }
173
- to {
174
- opacity: 0;
175
- transform: translateY(20px);
176
- }
177
- }
178
-
179
- /* ========================================
180
- LEFT POSITION ANIMATIONS
181
- ======================================== */
182
-
183
- /* Left center - slides right and fades in */
184
- @keyframes popover-enter-left {
185
- from {
186
- opacity: 0;
187
- transform: translateY(-50%) translateX(-20px);
188
- }
189
- to {
190
- opacity: 1;
191
- transform: translateY(-50%) translateX(0);
192
- }
193
- }
194
-
195
- @keyframes popover-exit-left {
196
- from {
197
- opacity: 1;
198
- transform: translateY(-50%) translateX(0);
199
- }
200
- to {
201
- opacity: 0;
202
- transform: translateY(-50%) translateX(-20px);
203
- }
204
- }
205
-
206
- /* Left start (top) - slides right only (same as left) */
207
- @keyframes popover-enter-left-start {
208
- from {
209
- opacity: 0;
210
- transform: translateX(-20px);
211
- }
212
- to {
213
- opacity: 1;
214
- transform: translateX(0);
215
- }
216
- }
217
-
218
- @keyframes popover-exit-left-start {
219
- from {
220
- opacity: 1;
221
- transform: translateX(0);
222
- }
223
- to {
224
- opacity: 0;
225
- transform: translateX(-20px);
226
- }
227
- }
228
-
229
- /* Left end (bottom) - slides right only (same as left) */
230
- @keyframes popover-enter-left-end {
231
- from {
232
- opacity: 0;
233
- transform: translateX(-20px);
234
- }
235
- to {
236
- opacity: 1;
237
- transform: translateX(0);
238
- }
239
- }
240
-
241
- @keyframes popover-exit-left-end {
242
- from {
243
- opacity: 1;
244
- transform: translateX(0);
245
- }
246
- to {
247
- opacity: 0;
248
- transform: translateX(-20px);
249
- }
250
- }
251
-
252
- /* ========================================
253
- RIGHT POSITION ANIMATIONS
254
- ======================================== */
255
-
256
- /* Right center - slides left and fades in */
257
- @keyframes popover-enter-right {
258
- from {
259
- opacity: 0;
260
- transform: translateY(-50%) translateX(20px);
261
- }
262
- to {
263
- opacity: 1;
264
- transform: translateY(-50%) translateX(0);
265
- }
266
- }
267
-
268
- @keyframes popover-exit-right {
269
- from {
270
- opacity: 1;
271
- transform: translateY(-50%) translateX(0);
272
- }
273
- to {
274
- opacity: 0;
275
- transform: translateY(-50%) translateX(20px);
276
- }
277
- }
278
-
279
- /* Right start (top) - slides left only (same as right) */
280
- @keyframes popover-enter-right-start {
281
- from {
282
- opacity: 0;
283
- transform: translateX(20px);
284
- }
285
- to {
286
- opacity: 1;
287
- transform: translateX(0);
288
- }
289
- }
290
-
291
- @keyframes popover-exit-right-start {
292
- from {
293
- opacity: 1;
294
- transform: translateX(0);
295
- }
296
- to {
297
- opacity: 0;
298
- transform: translateX(20px);
299
- }
300
- }
301
-
302
- /* Right end (bottom) - slides left only (same as right) */
303
- @keyframes popover-enter-right-end {
304
- from {
305
- opacity: 0;
306
- transform: translateX(20px);
307
- }
308
- to {
309
- opacity: 1;
310
- transform: translateX(0);
311
- }
312
- }
313
-
314
- @keyframes popover-exit-right-end {
315
- from {
316
- opacity: 1;
317
- transform: translateX(0);
318
- }
319
- to {
320
- opacity: 0;
321
- transform: translateX(20px);
322
- }
323
- }
324
-
325
- /* ========================================
326
- NOTE: No default animation needed
327
- ======================================== */
328
- /* When no placement is specified, center animation is used as fallback */
329
-
330
- /* ========================================
331
- UTILITY CLASSES FOR APPLYING ANIMATIONS
332
- ======================================== */
333
-
334
- /* Animation duration and timing */
335
- .popover-animate {
336
- animation-duration: 200ms;
337
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
338
- animation-fill-mode: forwards;
339
- }
340
-
341
- /* Enter animations by position */
342
- .popover-enter-center {
343
- animation-name: popover-enter-center;
344
- }
345
- .popover-enter-top {
346
- animation-name: popover-enter-top;
347
- }
348
- .popover-enter-top-start {
349
- animation-name: popover-enter-top-start;
350
- }
351
- .popover-enter-top-end {
352
- animation-name: popover-enter-top-end;
353
- }
354
- .popover-enter-bottom {
355
- animation-name: popover-enter-bottom;
356
- }
357
- .popover-enter-bottom-start {
358
- animation-name: popover-enter-bottom-start;
359
- }
360
- .popover-enter-bottom-end {
361
- animation-name: popover-enter-bottom-end;
362
- }
363
- .popover-enter-left {
364
- animation-name: popover-enter-left;
365
- }
366
- .popover-enter-left-start {
367
- animation-name: popover-enter-left-start;
368
- }
369
- .popover-enter-left-end {
370
- animation-name: popover-enter-left-end;
371
- }
372
- .popover-enter-right {
373
- animation-name: popover-enter-right;
374
- }
375
- .popover-enter-right-start {
376
- animation-name: popover-enter-right-start;
377
- }
378
- .popover-enter-right-end {
379
- animation-name: popover-enter-right-end;
380
- }
381
-
382
- /* Exit animations by position */
383
- .popover-exit-center {
384
- animation-name: popover-exit-center;
385
- }
386
- .popover-exit-top {
387
- animation-name: popover-exit-top;
388
- }
389
- .popover-exit-top-start {
390
- animation-name: popover-exit-top-start;
391
- }
392
- .popover-exit-top-end {
393
- animation-name: popover-exit-top-end;
394
- }
395
- .popover-exit-bottom {
396
- animation-name: popover-exit-bottom;
397
- }
398
- .popover-exit-bottom-start {
399
- animation-name: popover-exit-bottom-start;
400
- }
401
- .popover-exit-bottom-end {
402
- animation-name: popover-exit-bottom-end;
403
- }
404
- .popover-exit-left {
405
- animation-name: popover-exit-left;
406
- }
407
- .popover-exit-left-start {
408
- animation-name: popover-exit-left-start;
409
- }
410
- .popover-exit-left-end {
411
- animation-name: popover-exit-left-end;
412
- }
413
- .popover-exit-right {
414
- animation-name: popover-exit-right;
415
- }
416
- .popover-exit-right-start {
417
- animation-name: popover-exit-right-start;
418
- }
419
- .popover-exit-right-end {
420
- animation-name: popover-exit-right-end;
421
- }
1
+ @keyframes popover-enter-center{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes popover-exit-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}@keyframes popover-enter-top{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes popover-exit-top{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-20px)}}@keyframes popover-enter-top-start{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-top-end{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-top-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes popover-enter-bottom{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes popover-exit-bottom{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(20px)}}@keyframes popover-enter-bottom-start{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-start{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-bottom-end{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes popover-exit-bottom-end{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes popover-enter-left{0%{opacity:0;transform:translateY(-50%) translateX(-20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes popover-exit-left{0%{opacity:1;transform:translateY(-50%) translateX(0)}to{opacity:0;transform:translateY(-50%) translateX(-20px)}}@keyframes popover-enter-left-start{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-left-start{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}@keyframes popover-enter-left-end{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-left-end{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}@keyframes popover-enter-right{0%{opacity:0;transform:translateY(-50%) translateX(20px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes popover-exit-right{0%{opacity:1;transform:translateY(-50%) translateX(0)}to{opacity:0;transform:translateY(-50%) translateX(20px)}}@keyframes popover-enter-right-start{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-right-start{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}@keyframes popover-enter-right-end{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes popover-exit-right-end{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}.popover-animate{animation-duration:.2s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.16,1,.3,1)}.popover-enter-center{animation-name:popover-enter-center}.popover-enter-top{animation-name:popover-enter-top}.popover-enter-top-start{animation-name:popover-enter-top-start}.popover-enter-top-end{animation-name:popover-enter-top-end}.popover-enter-bottom{animation-name:popover-enter-bottom}.popover-enter-bottom-start{animation-name:popover-enter-bottom-start}.popover-enter-bottom-end{animation-name:popover-enter-bottom-end}.popover-enter-left{animation-name:popover-enter-left}.popover-enter-left-start{animation-name:popover-enter-left-start}.popover-enter-left-end{animation-name:popover-enter-left-end}.popover-enter-right{animation-name:popover-enter-right}.popover-enter-right-start{animation-name:popover-enter-right-start}.popover-enter-right-end{animation-name:popover-enter-right-end}.popover-exit-center{animation-name:popover-exit-center}.popover-exit-top{animation-name:popover-exit-top}.popover-exit-top-start{animation-name:popover-exit-top-start}.popover-exit-top-end{animation-name:popover-exit-top-end}.popover-exit-bottom{animation-name:popover-exit-bottom}.popover-exit-bottom-start{animation-name:popover-exit-bottom-start}.popover-exit-bottom-end{animation-name:popover-exit-bottom-end}.popover-exit-left{animation-name:popover-exit-left}.popover-exit-left-start{animation-name:popover-exit-left-start}.popover-exit-left-end{animation-name:popover-exit-left-end}.popover-exit-right{animation-name:popover-exit-right}.popover-exit-right-start{animation-name:popover-exit-right-start}.popover-exit-right-end{animation-name:popover-exit-right-end}
@@ -1,42 +1 @@
1
- /* ============================================= */
2
- /* PopoverV2 Arrow Styles */
3
- /* ============================================= */
4
-
5
- /* Arrow base styles */
6
- [data-kbt-id='popover-arrow'] {
7
- position: absolute;
8
- transform: rotate(45deg);
9
- z-index: -1;
10
- }
11
-
12
- /* Arrow positioning based on placement */
13
- [data-kbt-id='popover-arrow'][data-kbt-placement^='top'] {
14
- bottom: calc(-1 * var(--arrow-size, 8px) / 2);
15
- left: 50%;
16
- transform: translateX(-50%) rotate(45deg);
17
- }
18
-
19
- [data-kbt-id='popover-arrow'][data-kbt-placement^='bottom'] {
20
- top: calc(-1 * var(--arrow-size, 8px) / 2);
21
- left: 50%;
22
- transform: translateX(-50%) rotate(45deg);
23
- }
24
-
25
- [data-kbt-id='popover-arrow'][data-kbt-placement^='left'] {
26
- right: calc(-1 * var(--arrow-size, 8px) / 2);
27
- top: 50%;
28
- transform: translateY(-50%) rotate(45deg);
29
- }
30
-
31
- [data-kbt-id='popover-arrow'][data-kbt-placement^='right'] {
32
- left: calc(-1 * var(--arrow-size, 8px) / 2);
33
- top: 50%;
34
- transform: translateY(-50%) rotate(45deg);
35
- }
36
-
37
- /* Center placement arrow - default to bottom position */
38
- [data-kbt-id='popover-arrow'][data-kbt-placement='center'] {
39
- top: calc(-1 * var(--arrow-size, 8px) / 2);
40
- left: 50%;
41
- transform: translateX(-50%) rotate(45deg);
42
- }
1
+ [data-kbt-id=popover-arrow]{position:absolute;transform:rotate(45deg);z-index:-1}[data-kbt-id=popover-arrow][data-kbt-placement^=top]{bottom:calc(var(--arrow-size, 8px)*-1/2);left:50%;transform:translateX(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=bottom]{left:50%;top:calc(var(--arrow-size, 8px)*-1/2);transform:translateX(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=left]{right:calc(var(--arrow-size, 8px)*-1/2);top:50%;transform:translateY(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement^=right]{left:calc(var(--arrow-size, 8px)*-1/2);top:50%;transform:translateY(-50%) rotate(45deg)}[data-kbt-id=popover-arrow][data-kbt-placement=center]{left:50%;top:calc(var(--arrow-size, 8px)*-1/2);transform:translateX(-50%) rotate(45deg)}