@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.
- package/dist/cjs/components/calendar/list/list.js +1 -1
- package/dist/cjs/components/calendar/selector/monthSelector/monthSelector.js +1 -1
- package/dist/cjs/components/image/image.css +1 -38
- package/dist/cjs/components/listOptions/listOptionsStandAlone.js +1 -1
- package/dist/cjs/components/option/optionStandAlone.js +1 -1
- package/dist/cjs/components/popover/styles/index.css +1 -10
- package/dist/cjs/components/popover/styles/keyframes.css +1 -421
- package/dist/cjs/components/popover/styles/popover-arrow.css +1 -42
- package/dist/cjs/components/popover/styles/popover.css +1 -189
- package/dist/cjs/components/skeleton/skeleton.css +1 -20
- package/dist/cjs/components/table/__stories__/css/table.css +1 -7
- package/dist/cjs/components/text/text.css +1 -14
- package/dist/cjs/components/tooltip/hooks/useTooltip.js +1 -1
- package/dist/cjs/components/tooltip/tooltip.css +1 -69
- package/dist/cjs/lib/components/customComponent/customComponent.js +1 -1
- package/dist/cjs/lib/provider/cssProvider/provider.js +1 -1
- package/dist/cjs/lib/provider/cssProvider/stats/stats.js +1 -1641
- package/dist/esm/components/calendar/list/list.js +1 -1
- package/dist/esm/components/calendar/selector/monthSelector/monthSelector.js +1 -1
- package/dist/esm/components/image/image.css +1 -38
- package/dist/esm/components/listOptions/listOptionsStandAlone.js +1 -1
- package/dist/esm/components/option/optionStandAlone.js +7 -7
- package/dist/esm/components/popover/styles/index.css +1 -10
- package/dist/esm/components/popover/styles/keyframes.css +1 -421
- package/dist/esm/components/popover/styles/popover-arrow.css +1 -42
- package/dist/esm/components/popover/styles/popover.css +1 -189
- package/dist/esm/components/skeleton/skeleton.css +1 -20
- package/dist/esm/components/table/__stories__/css/table.css +1 -7
- package/dist/esm/components/text/text.css +1 -14
- package/dist/esm/components/tooltip/hooks/useTooltip.js +1 -1
- package/dist/esm/components/tooltip/tooltip.css +1 -69
- package/dist/esm/lib/components/customComponent/customComponent.js +2 -2
- package/dist/esm/lib/provider/cssProvider/provider.js +1 -1
- package/dist/esm/lib/provider/cssProvider/stats/stats.js +1 -1641
- package/dist/styles/kubit/css/kubit.css +1 -1
- 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"}),
|
|
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",
|
|
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:
|
|
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:
|
|
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)}
|