npm - @televet/kibble-ui - Versions diffs - 5.0.2-beta.1 → 5.0.2-beta.menu.2 - Mend

@televet/kibble-ui 5.0.2-beta.1 → 5.0.2-beta.menu.2

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 (238) hide show

package/dist/chunks/{conversationCard.component-BpaFgj0T.js → conversationCard.component-DXJP2DXs.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-"use strict";const t=require("./jsx-runtime-BjDatQAs.js"),y=require("react"),C=require("./index-BQRnVsAg.js"),z=require("./card.component-BmBiYbMV.js"),$=require("./timestamp.component-BfmZPfy5.js"),H=require("./notificationCounter.component-CBwi5vXa.js"),R=require("./icon.component-B1hr5lLa.js"),B=require("./heading.component-DnoZOXdz.js"),E=require("./text.component-BDDz5KQP.js"),F=require("./avatar.component-Bi0lMCsC.js"),k=require("./tooltip.component-DBw-hAPU.js"),g=require("./flex-BOU6tYUd.js"),j=require("./h-stack-D4MnHHRc.js"),W=require("./v-stack-Bz-79Toq.js"),h=require("./button.component-DjdgBXDC.js"),O=require("./menu.component-DFkV2_Lb.js"),T=require("./tag.component-C98Wf07v.js"),N=require("./wrap-BzPamGsJ.js"),w=({avatars:e,max:n=1,onAvatarGroupClick:a,tooltipLabel:s,["data-testid"]:i="kibble-conversation-card-avatar-group"})=>t.jsxRuntimeExports.jsx(k.Tooltip,{label:s||"",disabled:!s?.length,children:t.jsxRuntimeExports.jsx(g.Flex,{className:"ConversationCard__AvatarGroup","data-testid":i,alignItems:"flex-start",justifyContent:"flex-start",children:n&&e.length>n?t.jsxRuntimeExports.jsx(F.Avatar,{onClick:r=>{r.stopPropagation(),a&&a(r)},cursor:"pointer",name:e.length.toString(),showTooltip:!1}):t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map(r=>r)})})}),D=({avatarGroupProps:e,timestampProps:n,isHoveringCard:a,isCardPinned:s,title:i,showNotificationIndicator:r,subtitle:d,["data-testid"]:o="kibble-conversation-card-header"})=>t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Header","data-testid":o,justify:"space-between",align:"flex-start",children:[t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Header--Left","data-testid":`${o}-left`,cursor:"pointer",children:[e&&t.jsxRuntimeExports.jsx(w,{...e,tooltipLabel:e?.tooltipLabel||i}),t.jsxRuntimeExports.jsxs(W.VStack,{className:"ConversationCard__HeaderText","data-testid":`${o}-text`,justify:"center",align:"left",gap:"0",children:[t.jsxRuntimeExports.jsx(B.WrappedHeading,{className:"ConversationCard__HeaderText--Title","data-testid":`${o}-title`,size:"sm",truncated:!0,children:i}),d&&t.jsxRuntimeExports.jsx(E.WrappedText,{className:"ConversationCard__HeaderText--Subtitle","data-testid":`${o}-subtitle`,size:"sm",variant:"subtle",truncated:!0,children:d})]})]}),t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Header--Right","data-testid":`${o}-right`,visibility:a?"hidden":"visible",align:"center",gap:1,children:[t.jsxRuntimeExports.jsx($.Timestamp,{...n}),r&&t.jsxRuntimeExports.jsx(C.Box,{as:"span",className:"ConversationCard__HeaderNotificationCounter","data-testid":`${o}-unread-indicator`,children:t.jsxRuntimeExports.jsx(H.NotificationCounter,{size:"xs"})}),s&&t.jsxRuntimeExports.jsx(g.Flex,{"data-testid":`${o}-pinned-icon`,children:t.jsxRuntimeExports.jsx(R.Icon,{size:"md",variant:"info",name:"pin"})})]})]}),M=({overlayProps:e,pinProps:n,headerMenuProps:a,isHovering:s,setIsHovering:i,["data-testid"]:r="kibble-conversation-card-buttons"})=>{const{isOpenInOverlay:d,onOpenInOverlay:o,["data-testid"]:u}=e||{},{isPinned:c,onTogglePin:x,["data-testid"]:l}=n||{},{listProps:v,["data-testid"]:m}=a||{},p=c?"pinCancel":"pin";return t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Menu","data-testid":r,gap:1,children:[e&&t.jsxRuntimeExports.jsx(h.Button,{className:"ConversationCard__OverlayButton","data-testid":u||`${r}-overlay-button`,variant:"secondarySubtle",borderRadius:"sm",...d&&{active:!0},onClick:()=>{o&&o(),s&&i(!1)},iconName:"popup",size:"sm"}),n&&t.jsxRuntimeExports.jsx(h.Button,{className:"ConversationCard__PinButton","data-testid":l||`${r}-pin-button`,variant:c?"secondarySubtleDestructive":"secondarySubtle",borderRadius:"sm",onClick:()=>{x&&x(!c),s&&i(!1)},iconName:p,size:"sm"}),a&&t.jsxRuntimeExports.jsx(O.Menu,{buttonProps:a.buttonProps||{variant:"secondarySubtle",size:"sm",borderRadius:"sm",iconName:"dotsVertical",hideCaret:!0,padding:0},closeOnSelect:!1,lazyMount:!0,"data-testid":m||`${r}-menu`,...a,listProps:{...v,menuItems:[...n?[{label:`${c?"Unpin":"Pin"} Conversation`,value:"PinConversation",variant:c?"danger":"default",leftElement:t.jsxRuntimeExports.jsx(R.Icon,{size:"md",variant:c?"danger":"default",name:p}),onSelect:()=>{x&&x(!c)}}]:[],...v?.menuItems||[]]}})]})},A=({tags:e,["data-testid"]:n="kibble-conversation-card-tags"})=>t.jsxRuntimeExports.jsx(C.Box,{className:"ConversationCard__Tags",mt:3,"data-testid":n,children:t.jsxRuntimeExports.jsx(N.Wrap,{gap:2,children:e.map(a=>{const{tooltipContent:s,...i}=a;let r=t.jsxRuntimeExports.jsx(T.Tag,{...i,size:"sm",textTransform:"capitalize"});return s&&(r=t.jsxRuntimeExports.jsx(k.Tooltip,{label:s,placement:"top",children:t.jsxRuntimeExports.jsx(C.Box,{children:r})})),t.jsxRuntimeExports.jsx(N.WrapItem,{children:r},a.label)})})}),L=({iconProps:e,content:n,contentProps:a,["data-testid"]:s="kibble-conversation-card-footer"})=>{const i=typeof n=="string"?t.jsxRuntimeExports.jsx(E.WrappedText,{className:"ConversationCard__FooterMessage","data-testid":`${s}-message`,size:"sm",variant:"subtle",...a,...e&&{ml:1},children:n}):n;return t.jsxRuntimeExports.jsxs(g.Flex,{className:"ConversationCard__Footer","data-testid":s,mt:3,alignItems:"center",children:[e&&t.jsxRuntimeExports.jsx(R.Icon,{size:"sm",variant:"subtle",...e}),i]})},V=({contentMenu:e,content:n,contentProps:a,["data-testid"]:s="kibble-conversation-card-content"})=>{const i=typeof n=="string"?t.jsxRuntimeExports.jsx(E.WrappedText,{className:"ConversationCard__Content","data-testid":`${s}-content`,truncated:!0,size:"sm",...a,children:n}):n;return t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__ContentContainer","data-testid":`${s}-container`,mt:3,justifyContent:"space-between",alignItems:"center",children:[i,e&&t.jsxRuntimeExports.jsx(C.Box,{className:"ConversationCard__ContentMenu","data-testid":`${s}-menu`,ml:"auto",children:e})]})},I=({allowHoverActions:e=!0,avatarGroupProps:n,content:a,contentProps:s,contentMenu:i,footerProps:r,headerMenuProps:d,headerProps:o,active:u,onClick:c,overlayProps:x,pinProps:l,shouldPreservePosition:v=!1,showNotificationIndicator:m,tags:p,["data-testid"]:f="kibble-conversation-card"})=>{const{isPinned:q}=l||{},[b,_]=y.useState(!1);return t.jsxRuntimeExports.jsxs(z.Card,{className:"ConversationCard",id:"conversation-card-item","data-testid":f,interactive:!0,active:u,size:"sm",fullWidth:!0,onClick:()=>{c&&c()},bg:m||u||b?"background.default":"background.subtle",onMouseEnter:()=>{e&&_(!0)},onMouseLeave:()=>_(!1),pos:"relative",css:{overflowAnchor:v?"auto":"none"},children:[b&&t.jsxRuntimeExports.jsx(C.Box,{className:"ConversationCard__Button--Container","data-testid":`${f}-button-container`,pos:"absolute",top:2,zIndex:"banner",right:2,bg:"background",borderRadius:"md",onClick:S=>S.stopPropagation(),children:t.jsxRuntimeExports.jsx(M,{overlayProps:x,pinProps:l,headerMenuProps:d,isHovering:b,setIsHovering:_})}),t.jsxRuntimeExports.jsx(D,{avatarGroupProps:n,isHoveringCard:b,isCardPinned:q,showNotificationIndicator:m,...o}),t.jsxRuntimeExports.jsx(V,{content:a,contentProps:s,contentMenu:i}),!!p?.length&&t.jsxRuntimeExports.jsx(A,{tags:p}),r&&t.jsxRuntimeExports.jsx(L,{...r})]})};exports.ConversationCard=I;
-//# sourceMappingURL=conversationCard.component-BpaFgj0T.js.map
+"use strict";const t=require("./jsx-runtime-BjDatQAs.js"),y=require("react"),C=require("./index-BQRnVsAg.js"),z=require("./card.component-BmBiYbMV.js"),$=require("./timestamp.component-DYZHgaas.js"),H=require("./notificationCounter.component-DJpUXeXm.js"),R=require("./icon.component-B1hr5lLa.js"),B=require("./heading.component-DMAQO_-m.js"),E=require("./text.component-CeioUl0G.js"),F=require("./avatar.component-B1HGlwVW.js"),k=require("./tooltip.component-BkFDi5yK.js"),g=require("./flex-BOU6tYUd.js"),j=require("./h-stack-D4MnHHRc.js"),W=require("./v-stack-Bz-79Toq.js"),h=require("./button.component-DjdgBXDC.js"),O=require("./menu.component-CateT8pX.js"),T=require("./tag.component-C98Wf07v.js"),N=require("./wrap-BzPamGsJ.js"),w=({avatars:e,max:n=1,onAvatarGroupClick:a,tooltipLabel:s,["data-testid"]:i="kibble-conversation-card-avatar-group"})=>t.jsxRuntimeExports.jsx(k.Tooltip,{label:s||"",disabled:!s?.length,children:t.jsxRuntimeExports.jsx(g.Flex,{className:"ConversationCard__AvatarGroup","data-testid":i,alignItems:"flex-start",justifyContent:"flex-start",children:n&&e.length>n?t.jsxRuntimeExports.jsx(F.Avatar,{onClick:r=>{r.stopPropagation(),a&&a(r)},cursor:"pointer",name:e.length.toString(),showTooltip:!1}):t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:e.map(r=>r)})})}),D=({avatarGroupProps:e,timestampProps:n,isHoveringCard:a,isCardPinned:s,title:i,showNotificationIndicator:r,subtitle:d,["data-testid"]:o="kibble-conversation-card-header"})=>t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Header","data-testid":o,justify:"space-between",align:"flex-start",children:[t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Header--Left","data-testid":`${o}-left`,cursor:"pointer",children:[e&&t.jsxRuntimeExports.jsx(w,{...e,tooltipLabel:e?.tooltipLabel||i}),t.jsxRuntimeExports.jsxs(W.VStack,{className:"ConversationCard__HeaderText","data-testid":`${o}-text`,justify:"center",align:"left",gap:"0",children:[t.jsxRuntimeExports.jsx(B.WrappedHeading,{className:"ConversationCard__HeaderText--Title","data-testid":`${o}-title`,size:"sm",truncated:!0,children:i}),d&&t.jsxRuntimeExports.jsx(E.WrappedText,{className:"ConversationCard__HeaderText--Subtitle","data-testid":`${o}-subtitle`,size:"sm",variant:"subtle",truncated:!0,children:d})]})]}),t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Header--Right","data-testid":`${o}-right`,visibility:a?"hidden":"visible",align:"center",gap:1,children:[t.jsxRuntimeExports.jsx($.Timestamp,{...n}),r&&t.jsxRuntimeExports.jsx(C.Box,{as:"span",className:"ConversationCard__HeaderNotificationCounter","data-testid":`${o}-unread-indicator`,children:t.jsxRuntimeExports.jsx(H.NotificationCounter,{size:"xs"})}),s&&t.jsxRuntimeExports.jsx(g.Flex,{"data-testid":`${o}-pinned-icon`,children:t.jsxRuntimeExports.jsx(R.Icon,{size:"md",variant:"info",name:"pin"})})]})]}),M=({overlayProps:e,pinProps:n,headerMenuProps:a,isHovering:s,setIsHovering:i,["data-testid"]:r="kibble-conversation-card-buttons"})=>{const{isOpenInOverlay:d,onOpenInOverlay:o,["data-testid"]:u}=e||{},{isPinned:c,onTogglePin:x,["data-testid"]:l}=n||{},{listProps:v,["data-testid"]:m}=a||{},p=c?"pinCancel":"pin";return t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__Menu","data-testid":r,gap:1,children:[e&&t.jsxRuntimeExports.jsx(h.Button,{className:"ConversationCard__OverlayButton","data-testid":u||`${r}-overlay-button`,variant:"secondarySubtle",borderRadius:"sm",...d&&{active:!0},onClick:()=>{o&&o(),s&&i(!1)},iconName:"popup",size:"sm"}),n&&t.jsxRuntimeExports.jsx(h.Button,{className:"ConversationCard__PinButton","data-testid":l||`${r}-pin-button`,variant:c?"secondarySubtleDestructive":"secondarySubtle",borderRadius:"sm",onClick:()=>{x&&x(!c),s&&i(!1)},iconName:p,size:"sm"}),a&&t.jsxRuntimeExports.jsx(O.Menu,{buttonProps:a.buttonProps||{variant:"secondarySubtle",size:"sm",borderRadius:"sm",iconName:"dotsVertical",hideCaret:!0,padding:0},closeOnSelect:!1,lazyMount:!0,"data-testid":m||`${r}-menu`,...a,listProps:{...v,menuItems:[...n?[{label:`${c?"Unpin":"Pin"} Conversation`,value:"PinConversation",variant:c?"danger":"default",leftElement:t.jsxRuntimeExports.jsx(R.Icon,{size:"md",variant:c?"danger":"default",name:p}),onSelect:()=>{x&&x(!c)}}]:[],...v?.menuItems||[]]}})]})},A=({tags:e,["data-testid"]:n="kibble-conversation-card-tags"})=>t.jsxRuntimeExports.jsx(C.Box,{className:"ConversationCard__Tags",mt:3,"data-testid":n,children:t.jsxRuntimeExports.jsx(N.Wrap,{gap:2,children:e.map(a=>{const{tooltipContent:s,...i}=a;let r=t.jsxRuntimeExports.jsx(T.Tag,{...i,size:"sm",textTransform:"capitalize"});return s&&(r=t.jsxRuntimeExports.jsx(k.Tooltip,{label:s,placement:"top",children:t.jsxRuntimeExports.jsx(C.Box,{children:r})})),t.jsxRuntimeExports.jsx(N.WrapItem,{children:r},a.label)})})}),L=({iconProps:e,content:n,contentProps:a,["data-testid"]:s="kibble-conversation-card-footer"})=>{const i=typeof n=="string"?t.jsxRuntimeExports.jsx(E.WrappedText,{className:"ConversationCard__FooterMessage","data-testid":`${s}-message`,size:"sm",variant:"subtle",...a,...e&&{ml:1},children:n}):n;return t.jsxRuntimeExports.jsxs(g.Flex,{className:"ConversationCard__Footer","data-testid":s,mt:3,alignItems:"center",children:[e&&t.jsxRuntimeExports.jsx(R.Icon,{size:"sm",variant:"subtle",...e}),i]})},V=({contentMenu:e,content:n,contentProps:a,["data-testid"]:s="kibble-conversation-card-content"})=>{const i=typeof n=="string"?t.jsxRuntimeExports.jsx(E.WrappedText,{className:"ConversationCard__Content","data-testid":`${s}-content`,truncated:!0,size:"sm",...a,children:n}):n;return t.jsxRuntimeExports.jsxs(j.HStack,{className:"ConversationCard__ContentContainer","data-testid":`${s}-container`,mt:3,justifyContent:"space-between",alignItems:"center",children:[i,e&&t.jsxRuntimeExports.jsx(C.Box,{className:"ConversationCard__ContentMenu","data-testid":`${s}-menu`,ml:"auto",children:e})]})},I=({allowHoverActions:e=!0,avatarGroupProps:n,content:a,contentProps:s,contentMenu:i,footerProps:r,headerMenuProps:d,headerProps:o,active:u,onClick:c,overlayProps:x,pinProps:l,shouldPreservePosition:v=!1,showNotificationIndicator:m,tags:p,["data-testid"]:f="kibble-conversation-card"})=>{const{isPinned:q}=l||{},[b,_]=y.useState(!1);return t.jsxRuntimeExports.jsxs(z.Card,{className:"ConversationCard",id:"conversation-card-item","data-testid":f,interactive:!0,active:u,size:"sm",fullWidth:!0,onClick:()=>{c&&c()},bg:m||u||b?"background.default":"background.subtle",onMouseEnter:()=>{e&&_(!0)},onMouseLeave:()=>_(!1),pos:"relative",css:{overflowAnchor:v?"auto":"none"},children:[b&&t.jsxRuntimeExports.jsx(C.Box,{className:"ConversationCard__Button--Container","data-testid":`${f}-button-container`,pos:"absolute",top:2,zIndex:"banner",right:2,bg:"background",borderRadius:"md",onClick:S=>S.stopPropagation(),children:t.jsxRuntimeExports.jsx(M,{overlayProps:x,pinProps:l,headerMenuProps:d,isHovering:b,setIsHovering:_})}),t.jsxRuntimeExports.jsx(D,{avatarGroupProps:n,isHoveringCard:b,isCardPinned:q,showNotificationIndicator:m,...o}),t.jsxRuntimeExports.jsx(V,{content:a,contentProps:s,contentMenu:i}),!!p?.length&&t.jsxRuntimeExports.jsx(A,{tags:p}),r&&t.jsxRuntimeExports.jsx(L,{...r})]})};exports.ConversationCard=I;
+//# sourceMappingURL=conversationCard.component-DXJP2DXs.js.map

package/dist/chunks/{conversationCard.component-BpaFgj0T.js.map → conversationCard.component-DXJP2DXs.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversationCard.component-BpaFgj0T.js","sources":["../../src/components/ConversationCard/components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component.tsx","../../src/components/ConversationCard/components/ConversationCardHeader/conversationCardHeader.component.tsx","../../src/components/ConversationCard/components/ConversationCardButtons/conversationCardButtons.component.tsx","../../src/components/ConversationCard/components/ConversationCardTags/conversationCardTags.component.tsx","../../src/components/ConversationCard/components/ConversationCardFooter/conversationCardFooter.component.tsx","../../src/components/ConversationCard/components/ConversationCardContent/conversationCardContent.component.tsx","../../src/components/ConversationCard/conversationCard.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Avatar } from 'components/Avatar/avatar.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport interface ConversationCardAvatarGroupProps {\n /** Avatars to display in the group. /\n avatars: React.ReactNode[];\n /* Maximum number of avatars to display.\n * @default 1\n /\n max?: number;\n /* Callback function to be called when the avatar group is clicked. /\n onAvatarGroupClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n /* Label for the tooltip. /\n tooltipLabel?: string;\n /* Data test id for the avatar group.\n * @default kibble-conversation-card-avatar-group\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardAvatarGroup = ({\n avatars,\n max = 1,\n onAvatarGroupClick,\n tooltipLabel,\n ['data-testid']: dataTestId = 'kibble-conversation-card-avatar-group',\n}: ConversationCardAvatarGroupProps): React.JSX.Element => {\n return (\n <Tooltip label={tooltipLabel \|\| ''} disabled={!tooltipLabel?.length}>\n <Flex\n className=\"ConversationCard__AvatarGroup\"\n data-testid={dataTestId}\n alignItems=\"flex-start\"\n justifyContent=\"flex-start\"\n >\n {max && avatars.length > max ? (\n <Avatar\n onClick={(e): void => {\n e.stopPropagation();\n if (onAvatarGroupClick) {\n onAvatarGroupClick(e);\n }\n }}\n cursor=\"pointer\"\n name={avatars.length.toString()}\n showTooltip={false}\n />\n ) : (\n <>{avatars.map((avatar) => avatar)}</>\n )}\n </Flex>\n </Tooltip>\n );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack, VStack } from '@chakra-ui/react/stack';\nimport { Timestamp, TimestampProps } from 'components/Timestamp/timestamp.component';\nimport { NotificationCounter } from 'components/NotificationCounter/notificationCounter.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Text } from 'components/Text/text.component';\nimport {\n ConversationCardAvatarGroup,\n ConversationCardAvatarGroupProps,\n} from '../ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardHeaderProps {\n /* Props for the avatar group. /\n avatarGroupProps?: ConversationCardAvatarGroupProps;\n /* If true, the notification indicator will be displayed. /\n showNotificationIndicator?: boolean;\n /* Determines if the card is pinned. /\n isCardPinned?: boolean;\n /* Determines if the card is being hovered. /\n isHoveringCard?: boolean;\n /* Subtitle of the card. /\n subtitle?: string;\n /* Props for the timestamp. /\n timestampProps: TimestampProps;\n /* Title of the card. /\n title: string;\n /* Data test id for the header.\n * @default kibble-conversation-card-header\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardHeader = ({\n avatarGroupProps,\n timestampProps,\n isHoveringCard,\n isCardPinned,\n title,\n showNotificationIndicator,\n subtitle,\n ['data-testid']: dataTestId = 'kibble-conversation-card-header',\n}: ConversationCardHeaderProps): React.JSX.Element => {\n return (\n <HStack className=\"ConversationCard__Header\" data-testid={dataTestId} justify=\"space-between\" align=\"flex-start\">\n <HStack className=\"ConversationCard__Header--Left\" data-testid={`${dataTestId}-left`} cursor=\"pointer\">\n {avatarGroupProps && (\n <ConversationCardAvatarGroup {...avatarGroupProps} tooltipLabel={avatarGroupProps?.tooltipLabel \|\| title} />\n )}\n <VStack\n className=\"ConversationCard__HeaderText\"\n data-testid={`${dataTestId}-text`}\n justify=\"center\"\n align=\"left\"\n gap=\"0\"\n >\n <Heading\n className=\"ConversationCard__HeaderText--Title\"\n data-testid={`${dataTestId}-title`}\n size=\"sm\"\n truncated\n >\n {title}\n </Heading>\n {subtitle && (\n <Text\n className=\"ConversationCard__HeaderText--Subtitle\"\n data-testid={`${dataTestId}-subtitle`}\n size=\"sm\"\n variant=\"subtle\"\n truncated\n >\n {subtitle}\n </Text>\n )}\n </VStack>\n </HStack>\n <HStack\n className=\"ConversationCard__Header--Right\"\n data-testid={`${dataTestId}-right`}\n visibility={isHoveringCard ? 'hidden' : 'visible'}\n align=\"center\"\n gap={1}\n >\n <Timestamp {...timestampProps} />\n {showNotificationIndicator && (\n <Box\n as=\"span\"\n className=\"ConversationCard__HeaderNotificationCounter\"\n data-testid={`${dataTestId}-unread-indicator`}\n >\n <NotificationCounter size=\"xs\" />\n </Box>\n )}\n {isCardPinned && (\n <Flex data-testid={`${dataTestId}-pinned-icon`}>\n <Icon size=\"md\" variant=\"info\" name=\"pin\" />\n </Flex>\n )}\n </HStack>\n </HStack>\n );\n};\n","import React from 'react';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Menu, MenuProps, MenuItemProps } from 'components/Menu';\n\nexport interface ConversationCardOverlayProps {\n /* Determines if the conversation is open in an overlay. /\n isOpenInOverlay?: boolean;\n /* Callback function to be called when the conversation is opened in an overlay. /\n onOpenInOverlay: () => void;\n /* Data test id for the overlay button. /\n 'data-testid'?: string;\n}\n\nexport interface ConversationCardPinProps {\n /* Determines if the conversation is pinned. /\n isPinned?: boolean;\n /* Callback function to called when the conversation is pinned. /\n onTogglePin: (isPinned: boolean) => void;\n /* Data test id for the pin button. /\n 'data-testid'?: string;\n}\n\nexport interface ConversationCardButtonsProps {\n /* Props for the overlay button. /\n overlayProps?: ConversationCardOverlayProps;\n /* Props for the pin button. /\n pinProps?: ConversationCardPinProps;\n /* Props for the header Menu. /\n headerMenuProps?: MenuProps;\n /* Data test id for the buttons.\n * @default kibble-conversation-card-buttons\n /\n 'data-testid'?: string;\n}\n\ninterface ConversationCardButtonsComponentProps extends ConversationCardButtonsProps {\n /* Determines if the conversation is being hovered.\n * @internal\n /\n isHovering: boolean;\n /* Callback function to set the hover state.\n * @internal\n /\n setIsHovering: (isHovering: boolean) => void;\n}\n\nexport const ConversationCardButtons = ({\n overlayProps,\n pinProps,\n headerMenuProps,\n isHovering,\n setIsHovering,\n ['data-testid']: dataTestId = 'kibble-conversation-card-buttons',\n}: ConversationCardButtonsComponentProps): React.JSX.Element => {\n const { isOpenInOverlay, onOpenInOverlay, ['data-testid']: overlayDataTestId } = overlayProps \|\| {};\n const { isPinned, onTogglePin, ['data-testid']: pinDataTestId } = pinProps \|\| {};\n const { listProps, ['data-testid']: headerMenuDataTestId } = headerMenuProps \|\| {};\n const pinIconName = isPinned ? 'pinCancel' : 'pin';\n\n return (\n <HStack className=\"ConversationCard__Menu\" data-testid={dataTestId} gap={1}>\n {overlayProps && (\n <Button\n className=\"ConversationCard__OverlayButton\"\n data-testid={overlayDataTestId ? overlayDataTestId : `${dataTestId}-overlay-button`}\n variant=\"secondarySubtle\"\n borderRadius=\"sm\"\n {...(isOpenInOverlay && { active: true })}\n onClick={(): void => {\n if (onOpenInOverlay) {\n onOpenInOverlay();\n }\n\n if (isHovering) {\n setIsHovering(false);\n }\n }}\n iconName=\"popup\"\n size=\"sm\"\n />\n )}\n {pinProps && (\n <Button\n className=\"ConversationCard__PinButton\"\n data-testid={pinDataTestId ? pinDataTestId : `${dataTestId}-pin-button`}\n variant={isPinned ? 'secondarySubtleDestructive' : 'secondarySubtle'}\n borderRadius=\"sm\"\n onClick={(): void => {\n if (onTogglePin) {\n onTogglePin(!isPinned);\n }\n\n if (isHovering) {\n setIsHovering(false);\n }\n }}\n iconName={pinIconName}\n size=\"sm\"\n />\n )}\n {headerMenuProps && (\n <Menu\n buttonProps={\n headerMenuProps.buttonProps \|\| {\n variant: 'secondarySubtle',\n size: 'sm',\n borderRadius: 'sm',\n iconName: 'dotsVertical',\n hideCaret: true,\n padding: 0,\n }\n }\n closeOnSelect={false}\n lazyMount\n data-testid={headerMenuDataTestId ? headerMenuDataTestId : `${dataTestId}-menu`}\n {...headerMenuProps}\n listProps={{\n ...listProps,\n menuItems: [\n ...(pinProps\n ? [\n {\n label: `${isPinned ? 'Unpin' : 'Pin'} Conversation`,\n value: 'PinConversation',\n variant: isPinned ? 'danger' : 'default',\n leftElement: <Icon size=\"md\" variant={isPinned ? 'danger' : 'default'} name={pinIconName} />,\n onSelect: (): void => {\n if (onTogglePin) {\n onTogglePin(!isPinned);\n }\n },\n } as MenuItemProps,\n ]\n : []),\n ...(listProps?.menuItems \|\| []),\n ],\n }}\n />\n )}\n </HStack>\n );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Wrap, WrapItem } from '@chakra-ui/react/wrap';\nimport { Tag, TagProps } from 'components/Tag/tag.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport type ConversationCardTag = TagProps & {\n /* Content to display in the tooltip. /\n tooltipContent?: string;\n};\n\nexport interface ConversationCardTagsProps {\n /* Tags to display in the ConversationCard. /\n tags: ConversationCardTag[];\n /* Data test id for the tags.\n * @default kibble-conversation-card-tags\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardTags = ({\n tags,\n ['data-testid']: dataTestId = 'kibble-conversation-card-tags',\n}: ConversationCardTagsProps): React.JSX.Element => {\n return (\n <Box className=\"ConversationCard__Tags\" mt={3} data-testid={dataTestId}>\n <Wrap gap={2}>\n {tags.map((tag) => {\n const { tooltipContent, ...rest } = tag;\n let tagElement = <Tag {...rest} size=\"sm\" textTransform=\"capitalize\" />;\n\n if (tooltipContent) {\n tagElement = (\n <Tooltip label={tooltipContent} placement=\"top\">\n <Box>{tagElement}</Box>\n </Tooltip>\n );\n }\n\n return <WrapItem key={tag.label}>{tagElement}</WrapItem>;\n })}\n </Wrap>\n </Box>\n );\n};\n","import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Icon, IconProps } from 'components/Icon/icon.component';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardFooterProps {\n /* Props for the Icon component. /\n iconProps?: IconProps;\n /* Content of the footer. /\n content: React.ReactNode;\n /* Props to customize the content styling. /\n contentProps?: Omit<TextProps, 'children'>;\n /* Data test id for the footer.\n * @default kibble-conversation-card-footer\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardFooter = ({\n iconProps,\n content,\n contentProps,\n ['data-testid']: dataTestId = 'kibble-conversation-card-footer',\n}: ConversationCardFooterProps): React.JSX.Element => {\n const _content =\n typeof content === 'string' ? (\n <Text\n className=\"ConversationCard__FooterMessage\"\n data-testid={`${dataTestId}-message`}\n size=\"sm\"\n variant=\"subtle\"\n {...contentProps}\n {...(iconProps && { ml: 1 })}\n >\n {content}\n </Text>\n ) : (\n content\n );\n return (\n <Flex className=\"ConversationCard__Footer\" data-testid={dataTestId} mt={3} alignItems=\"center\">\n {iconProps && <Icon size=\"sm\" variant=\"subtle\" {...iconProps} />}\n {_content}\n </Flex>\n );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardContentProps {\n /* Content of the card. /\n content?: React.ReactNode;\n /* Props to customize the content styling. /\n contentProps?: Omit<TextProps, 'children'>;\n /* Optional Menu for the card. /\n contentMenu?: React.ReactNode;\n /* Data test id for the content.\n * @default kibble-conversation-card-content\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardContent = ({\n contentMenu,\n content,\n contentProps,\n ['data-testid']: dataTestId = 'kibble-conversation-card-content',\n}: ConversationCardContentProps): React.JSX.Element => {\n const _content =\n typeof content === 'string' ? (\n <Text\n className=\"ConversationCard__Content\"\n data-testid={`${dataTestId}-content`}\n truncated\n size=\"sm\"\n {...contentProps}\n >\n {content}\n </Text>\n ) : (\n content\n );\n\n return (\n <HStack\n className=\"ConversationCard__ContentContainer\"\n data-testid={`${dataTestId}-container`}\n mt={3}\n justifyContent=\"space-between\"\n alignItems=\"center\"\n >\n {_content}\n {contentMenu && (\n <Box className=\"ConversationCard__ContentMenu\" data-testid={`${dataTestId}-menu`} ml=\"auto\">\n {contentMenu}\n </Box>\n )}\n </HStack>\n );\n};\n","import React, { useState } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Card } from 'components/Card/card.component';\nimport { MenuProps } from 'components/Menu/menu.component';\nimport {\n ConversationCardHeader,\n ConversationCardHeaderProps,\n} from './components/ConversationCardHeader/conversationCardHeader.component';\nimport {\n ConversationCardButtons,\n ConversationCardOverlayProps,\n ConversationCardPinProps,\n} from './components/ConversationCardButtons/conversationCardButtons.component';\nimport {\n ConversationCardTag,\n ConversationCardTags,\n} from './components/ConversationCardTags/conversationCardTags.component';\nimport {\n ConversationCardFooter,\n ConversationCardFooterProps,\n} from './components/ConversationCardFooter/conversationCardFooter.component';\nimport {\n ConversationCardContent,\n ConversationCardContentProps,\n} from './components/ConversationCardContent/conversationCardContent.component';\nimport { ConversationCardAvatarGroupProps } from './components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardProps extends ConversationCardContentProps {\n /\n Used to enable hover actions on the ConversationCard.\n * @default true\n /\n allowHoverActions?: boolean;\n /* Props for the `AvatarGroup` component. /\n avatarGroupProps?: ConversationCardAvatarGroupProps;\n /* Props for the ConversationCard footer. /\n footerProps?: ConversationCardFooterProps;\n /* Props for the Menu component. See the `Menu` for more details. This component provides a default menu button if none is provided. If menuProps and pinProps are passed together, the component automatically adds a menuItem to control the pinned state. /\n headerMenuProps?: MenuProps;\n /* Props for the ConversationCard header. /\n headerProps: ConversationCardHeaderProps;\n /\n Used to set the active state of the ConversationCard.\n * @default false\n /\n active?: boolean;\n /* Callback function for clicking the ConversationCard. /\n onClick?: () => void;\n /* Props to show and configure the conversation overlay button. If not passed, the overlay button won't be shown. /\n overlayProps?: ConversationCardOverlayProps;\n /* Props for the pin functionality. If not passed, pin functionality won't be shown. /\n pinProps?: ConversationCardPinProps;\n /\n Used to preserve the position of the ConversationCard in a list with infinite scrolling.\n * @default false\n /\n shouldPreservePosition?: boolean;\n /\n Used to show the unread messages indicator.\n * @default false\n /\n showNotificationIndicator?: boolean;\n /* The tags to be displayed in the ConversationCard. See the `Tag` for more information. Additionally, you can pass in a tooltipContent to customize what is shown in the tooltip. /\n tags?: ConversationCardTag[];\n /* Data test id for the conversation card.\n * @default kibble-conversation-card\n */\n 'data-testid'?: string;\n}\n\nexport const ConversationCard = ({\n allowHoverActions = true,\n avatarGroupProps,\n content,\n contentProps,\n contentMenu,\n footerProps,\n headerMenuProps,\n headerProps,\n active,\n onClick,\n overlayProps,\n pinProps,\n shouldPreservePosition = false,\n showNotificationIndicator,\n tags,\n ['data-testid']: dataTestId = 'kibble-conversation-card',\n}: ConversationCardProps): React.JSX.Element => {\n const { isPinned } = pinProps \|\| {};\n const [isHovering, setIsHovering] = useState(false);\n\n return (\n <Card\n className=\"ConversationCard\"\n id=\"conversation-card-item\"\n data-testid={dataTestId}\n interactive\n active={active}\n size=\"sm\"\n fullWidth\n onClick={(): void => {\n if (onClick) {\n onClick();\n }\n }}\n bg={showNotificationIndicator \|\| active \|\| isHovering ? 'background.default' : 'background.subtle'}\n onMouseEnter={(): void => {\n if (allowHoverActions) {\n setIsHovering(true);\n }\n }}\n onMouseLeave={(): void => setIsHovering(false)}\n pos=\"relative\"\n css={{ overflowAnchor: shouldPreservePosition ? 'auto' : 'none' }}\n >\n {isHovering && (\n <Box\n className=\"ConversationCard__Button--Container\"\n data-testid={`${dataTestId}-button-container`}\n pos=\"absolute\"\n top={2}\n zIndex=\"banner\"\n right={2}\n bg=\"background\"\n borderRadius=\"md\"\n onClick={(e): void => e.stopPropagation()}\n >\n <ConversationCardButtons\n overlayProps={overlayProps}\n pinProps={pinProps}\n headerMenuProps={headerMenuProps}\n isHovering={isHovering}\n setIsHovering={setIsHovering}\n />\n </Box>\n )}\n <ConversationCardHeader\n avatarGroupProps={avatarGroupProps}\n isHoveringCard={isHovering}\n isCardPinned={isPinned}\n showNotificationIndicator={showNotificationIndicator}\n {...headerProps}\n />\n <ConversationCardContent content={content} contentProps={contentProps} contentMenu={contentMenu} />\n {!!tags?.length && <ConversationCardTags tags={tags} />}\n {footerProps && <ConversationCardFooter {...footerProps} />}\n </Card>\n );\n};\n"],"names":["ConversationCardAvatarGroup","avatars","max","onAvatarGroupClick","tooltipLabel","dataTestId","jsx","Tooltip","Flex","Avatar","e","Fragment","avatar","ConversationCardHeader","avatarGroupProps","timestampProps","isHoveringCard","isCardPinned","title","showNotificationIndicator","subtitle","jsxs","HStack","VStack","Heading","Text","Timestamp","Box","NotificationCounter","Icon","ConversationCardButtons","overlayProps","pinProps","headerMenuProps","isHovering","setIsHovering","isOpenInOverlay","onOpenInOverlay","overlayDataTestId","isPinned","onTogglePin","pinDataTestId","listProps","headerMenuDataTestId","pinIconName","Button","Menu","ConversationCardTags","tags","Wrap","tag","tooltipContent","rest","tagElement","Tag","WrapItem","ConversationCardFooter","iconProps","content","contentProps","_content","ConversationCardContent","contentMenu","ConversationCard","allowHoverActions","footerProps","headerProps","active","onClick","shouldPreservePosition","useState","Card"],"mappings":"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"}
1	+ {"version":3,"file":"conversationCard.component-DXJP2DXs.js","sources":["../../src/components/ConversationCard/components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component.tsx","../../src/components/ConversationCard/components/ConversationCardHeader/conversationCardHeader.component.tsx","../../src/components/ConversationCard/components/ConversationCardButtons/conversationCardButtons.component.tsx","../../src/components/ConversationCard/components/ConversationCardTags/conversationCardTags.component.tsx","../../src/components/ConversationCard/components/ConversationCardFooter/conversationCardFooter.component.tsx","../../src/components/ConversationCard/components/ConversationCardContent/conversationCardContent.component.tsx","../../src/components/ConversationCard/conversationCard.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Avatar } from 'components/Avatar/avatar.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport interface ConversationCardAvatarGroupProps {\n /** Avatars to display in the group. /\n avatars: React.ReactNode[];\n /* Maximum number of avatars to display.\n * @default 1\n /\n max?: number;\n /* Callback function to be called when the avatar group is clicked. /\n onAvatarGroupClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n /* Label for the tooltip. /\n tooltipLabel?: string;\n /* Data test id for the avatar group.\n * @default kibble-conversation-card-avatar-group\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardAvatarGroup = ({\n avatars,\n max = 1,\n onAvatarGroupClick,\n tooltipLabel,\n ['data-testid']: dataTestId = 'kibble-conversation-card-avatar-group',\n}: ConversationCardAvatarGroupProps): React.JSX.Element => {\n return (\n <Tooltip label={tooltipLabel \|\| ''} disabled={!tooltipLabel?.length}>\n <Flex\n className=\"ConversationCard__AvatarGroup\"\n data-testid={dataTestId}\n alignItems=\"flex-start\"\n justifyContent=\"flex-start\"\n >\n {max && avatars.length > max ? (\n <Avatar\n onClick={(e): void => {\n e.stopPropagation();\n if (onAvatarGroupClick) {\n onAvatarGroupClick(e);\n }\n }}\n cursor=\"pointer\"\n name={avatars.length.toString()}\n showTooltip={false}\n />\n ) : (\n <>{avatars.map((avatar) => avatar)}</>\n )}\n </Flex>\n </Tooltip>\n );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack, VStack } from '@chakra-ui/react/stack';\nimport { Timestamp, TimestampProps } from 'components/Timestamp/timestamp.component';\nimport { NotificationCounter } from 'components/NotificationCounter/notificationCounter.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Text } from 'components/Text/text.component';\nimport {\n ConversationCardAvatarGroup,\n ConversationCardAvatarGroupProps,\n} from '../ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardHeaderProps {\n /* Props for the avatar group. /\n avatarGroupProps?: ConversationCardAvatarGroupProps;\n /* If true, the notification indicator will be displayed. /\n showNotificationIndicator?: boolean;\n /* Determines if the card is pinned. /\n isCardPinned?: boolean;\n /* Determines if the card is being hovered. /\n isHoveringCard?: boolean;\n /* Subtitle of the card. /\n subtitle?: string;\n /* Props for the timestamp. /\n timestampProps: TimestampProps;\n /* Title of the card. /\n title: string;\n /* Data test id for the header.\n * @default kibble-conversation-card-header\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardHeader = ({\n avatarGroupProps,\n timestampProps,\n isHoveringCard,\n isCardPinned,\n title,\n showNotificationIndicator,\n subtitle,\n ['data-testid']: dataTestId = 'kibble-conversation-card-header',\n}: ConversationCardHeaderProps): React.JSX.Element => {\n return (\n <HStack className=\"ConversationCard__Header\" data-testid={dataTestId} justify=\"space-between\" align=\"flex-start\">\n <HStack className=\"ConversationCard__Header--Left\" data-testid={`${dataTestId}-left`} cursor=\"pointer\">\n {avatarGroupProps && (\n <ConversationCardAvatarGroup {...avatarGroupProps} tooltipLabel={avatarGroupProps?.tooltipLabel \|\| title} />\n )}\n <VStack\n className=\"ConversationCard__HeaderText\"\n data-testid={`${dataTestId}-text`}\n justify=\"center\"\n align=\"left\"\n gap=\"0\"\n >\n <Heading\n className=\"ConversationCard__HeaderText--Title\"\n data-testid={`${dataTestId}-title`}\n size=\"sm\"\n truncated\n >\n {title}\n </Heading>\n {subtitle && (\n <Text\n className=\"ConversationCard__HeaderText--Subtitle\"\n data-testid={`${dataTestId}-subtitle`}\n size=\"sm\"\n variant=\"subtle\"\n truncated\n >\n {subtitle}\n </Text>\n )}\n </VStack>\n </HStack>\n <HStack\n className=\"ConversationCard__Header--Right\"\n data-testid={`${dataTestId}-right`}\n visibility={isHoveringCard ? 'hidden' : 'visible'}\n align=\"center\"\n gap={1}\n >\n <Timestamp {...timestampProps} />\n {showNotificationIndicator && (\n <Box\n as=\"span\"\n className=\"ConversationCard__HeaderNotificationCounter\"\n data-testid={`${dataTestId}-unread-indicator`}\n >\n <NotificationCounter size=\"xs\" />\n </Box>\n )}\n {isCardPinned && (\n <Flex data-testid={`${dataTestId}-pinned-icon`}>\n <Icon size=\"md\" variant=\"info\" name=\"pin\" />\n </Flex>\n )}\n </HStack>\n </HStack>\n );\n};\n","import React from 'react';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Menu, MenuProps, MenuItemProps } from 'components/Menu';\n\nexport interface ConversationCardOverlayProps {\n /* Determines if the conversation is open in an overlay. /\n isOpenInOverlay?: boolean;\n /* Callback function to be called when the conversation is opened in an overlay. /\n onOpenInOverlay: () => void;\n /* Data test id for the overlay button. /\n 'data-testid'?: string;\n}\n\nexport interface ConversationCardPinProps {\n /* Determines if the conversation is pinned. /\n isPinned?: boolean;\n /* Callback function to called when the conversation is pinned. /\n onTogglePin: (isPinned: boolean) => void;\n /* Data test id for the pin button. /\n 'data-testid'?: string;\n}\n\nexport interface ConversationCardButtonsProps {\n /* Props for the overlay button. /\n overlayProps?: ConversationCardOverlayProps;\n /* Props for the pin button. /\n pinProps?: ConversationCardPinProps;\n /* Props for the header Menu. /\n headerMenuProps?: MenuProps;\n /* Data test id for the buttons.\n * @default kibble-conversation-card-buttons\n /\n 'data-testid'?: string;\n}\n\ninterface ConversationCardButtonsComponentProps extends ConversationCardButtonsProps {\n /* Determines if the conversation is being hovered.\n * @internal\n /\n isHovering: boolean;\n /* Callback function to set the hover state.\n * @internal\n /\n setIsHovering: (isHovering: boolean) => void;\n}\n\nexport const ConversationCardButtons = ({\n overlayProps,\n pinProps,\n headerMenuProps,\n isHovering,\n setIsHovering,\n ['data-testid']: dataTestId = 'kibble-conversation-card-buttons',\n}: ConversationCardButtonsComponentProps): React.JSX.Element => {\n const { isOpenInOverlay, onOpenInOverlay, ['data-testid']: overlayDataTestId } = overlayProps \|\| {};\n const { isPinned, onTogglePin, ['data-testid']: pinDataTestId } = pinProps \|\| {};\n const { listProps, ['data-testid']: headerMenuDataTestId } = headerMenuProps \|\| {};\n const pinIconName = isPinned ? 'pinCancel' : 'pin';\n\n return (\n <HStack className=\"ConversationCard__Menu\" data-testid={dataTestId} gap={1}>\n {overlayProps && (\n <Button\n className=\"ConversationCard__OverlayButton\"\n data-testid={overlayDataTestId ? overlayDataTestId : `${dataTestId}-overlay-button`}\n variant=\"secondarySubtle\"\n borderRadius=\"sm\"\n {...(isOpenInOverlay && { active: true })}\n onClick={(): void => {\n if (onOpenInOverlay) {\n onOpenInOverlay();\n }\n\n if (isHovering) {\n setIsHovering(false);\n }\n }}\n iconName=\"popup\"\n size=\"sm\"\n />\n )}\n {pinProps && (\n <Button\n className=\"ConversationCard__PinButton\"\n data-testid={pinDataTestId ? pinDataTestId : `${dataTestId}-pin-button`}\n variant={isPinned ? 'secondarySubtleDestructive' : 'secondarySubtle'}\n borderRadius=\"sm\"\n onClick={(): void => {\n if (onTogglePin) {\n onTogglePin(!isPinned);\n }\n\n if (isHovering) {\n setIsHovering(false);\n }\n }}\n iconName={pinIconName}\n size=\"sm\"\n />\n )}\n {headerMenuProps && (\n <Menu\n buttonProps={\n headerMenuProps.buttonProps \|\| {\n variant: 'secondarySubtle',\n size: 'sm',\n borderRadius: 'sm',\n iconName: 'dotsVertical',\n hideCaret: true,\n padding: 0,\n }\n }\n closeOnSelect={false}\n lazyMount\n data-testid={headerMenuDataTestId ? headerMenuDataTestId : `${dataTestId}-menu`}\n {...headerMenuProps}\n listProps={{\n ...listProps,\n menuItems: [\n ...(pinProps\n ? [\n {\n label: `${isPinned ? 'Unpin' : 'Pin'} Conversation`,\n value: 'PinConversation',\n variant: isPinned ? 'danger' : 'default',\n leftElement: <Icon size=\"md\" variant={isPinned ? 'danger' : 'default'} name={pinIconName} />,\n onSelect: (): void => {\n if (onTogglePin) {\n onTogglePin(!isPinned);\n }\n },\n } as MenuItemProps,\n ]\n : []),\n ...(listProps?.menuItems \|\| []),\n ],\n }}\n />\n )}\n </HStack>\n );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Wrap, WrapItem } from '@chakra-ui/react/wrap';\nimport { Tag, TagProps } from 'components/Tag/tag.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport type ConversationCardTag = TagProps & {\n /* Content to display in the tooltip. /\n tooltipContent?: string;\n};\n\nexport interface ConversationCardTagsProps {\n /* Tags to display in the ConversationCard. /\n tags: ConversationCardTag[];\n /* Data test id for the tags.\n * @default kibble-conversation-card-tags\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardTags = ({\n tags,\n ['data-testid']: dataTestId = 'kibble-conversation-card-tags',\n}: ConversationCardTagsProps): React.JSX.Element => {\n return (\n <Box className=\"ConversationCard__Tags\" mt={3} data-testid={dataTestId}>\n <Wrap gap={2}>\n {tags.map((tag) => {\n const { tooltipContent, ...rest } = tag;\n let tagElement = <Tag {...rest} size=\"sm\" textTransform=\"capitalize\" />;\n\n if (tooltipContent) {\n tagElement = (\n <Tooltip label={tooltipContent} placement=\"top\">\n <Box>{tagElement}</Box>\n </Tooltip>\n );\n }\n\n return <WrapItem key={tag.label}>{tagElement}</WrapItem>;\n })}\n </Wrap>\n </Box>\n );\n};\n","import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Icon, IconProps } from 'components/Icon/icon.component';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardFooterProps {\n /* Props for the Icon component. /\n iconProps?: IconProps;\n /* Content of the footer. /\n content: React.ReactNode;\n /* Props to customize the content styling. /\n contentProps?: Omit<TextProps, 'children'>;\n /* Data test id for the footer.\n * @default kibble-conversation-card-footer\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardFooter = ({\n iconProps,\n content,\n contentProps,\n ['data-testid']: dataTestId = 'kibble-conversation-card-footer',\n}: ConversationCardFooterProps): React.JSX.Element => {\n const _content =\n typeof content === 'string' ? (\n <Text\n className=\"ConversationCard__FooterMessage\"\n data-testid={`${dataTestId}-message`}\n size=\"sm\"\n variant=\"subtle\"\n {...contentProps}\n {...(iconProps && { ml: 1 })}\n >\n {content}\n </Text>\n ) : (\n content\n );\n return (\n <Flex className=\"ConversationCard__Footer\" data-testid={dataTestId} mt={3} alignItems=\"center\">\n {iconProps && <Icon size=\"sm\" variant=\"subtle\" {...iconProps} />}\n {_content}\n </Flex>\n );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardContentProps {\n /* Content of the card. /\n content?: React.ReactNode;\n /* Props to customize the content styling. /\n contentProps?: Omit<TextProps, 'children'>;\n /* Optional Menu for the card. /\n contentMenu?: React.ReactNode;\n /* Data test id for the content.\n * @default kibble-conversation-card-content\n /\n 'data-testid'?: string;\n}\n\nexport const ConversationCardContent = ({\n contentMenu,\n content,\n contentProps,\n ['data-testid']: dataTestId = 'kibble-conversation-card-content',\n}: ConversationCardContentProps): React.JSX.Element => {\n const _content =\n typeof content === 'string' ? (\n <Text\n className=\"ConversationCard__Content\"\n data-testid={`${dataTestId}-content`}\n truncated\n size=\"sm\"\n {...contentProps}\n >\n {content}\n </Text>\n ) : (\n content\n );\n\n return (\n <HStack\n className=\"ConversationCard__ContentContainer\"\n data-testid={`${dataTestId}-container`}\n mt={3}\n justifyContent=\"space-between\"\n alignItems=\"center\"\n >\n {_content}\n {contentMenu && (\n <Box className=\"ConversationCard__ContentMenu\" data-testid={`${dataTestId}-menu`} ml=\"auto\">\n {contentMenu}\n </Box>\n )}\n </HStack>\n );\n};\n","import React, { useState } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Card } from 'components/Card/card.component';\nimport { MenuProps } from 'components/Menu/menu.component';\nimport {\n ConversationCardHeader,\n ConversationCardHeaderProps,\n} from './components/ConversationCardHeader/conversationCardHeader.component';\nimport {\n ConversationCardButtons,\n ConversationCardOverlayProps,\n ConversationCardPinProps,\n} from './components/ConversationCardButtons/conversationCardButtons.component';\nimport {\n ConversationCardTag,\n ConversationCardTags,\n} from './components/ConversationCardTags/conversationCardTags.component';\nimport {\n ConversationCardFooter,\n ConversationCardFooterProps,\n} from './components/ConversationCardFooter/conversationCardFooter.component';\nimport {\n ConversationCardContent,\n ConversationCardContentProps,\n} from './components/ConversationCardContent/conversationCardContent.component';\nimport { ConversationCardAvatarGroupProps } from './components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardProps extends ConversationCardContentProps {\n /\n Used to enable hover actions on the ConversationCard.\n * @default true\n /\n allowHoverActions?: boolean;\n /* Props for the `AvatarGroup` component. /\n avatarGroupProps?: ConversationCardAvatarGroupProps;\n /* Props for the ConversationCard footer. /\n footerProps?: ConversationCardFooterProps;\n /* Props for the Menu component. See the `Menu` for more details. This component provides a default menu button if none is provided. If menuProps and pinProps are passed together, the component automatically adds a menuItem to control the pinned state. /\n headerMenuProps?: MenuProps;\n /* Props for the ConversationCard header. /\n headerProps: ConversationCardHeaderProps;\n /\n Used to set the active state of the ConversationCard.\n * @default false\n /\n active?: boolean;\n /* Callback function for clicking the ConversationCard. /\n onClick?: () => void;\n /* Props to show and configure the conversation overlay button. If not passed, the overlay button won't be shown. /\n overlayProps?: ConversationCardOverlayProps;\n /* Props for the pin functionality. If not passed, pin functionality won't be shown. /\n pinProps?: ConversationCardPinProps;\n /\n Used to preserve the position of the ConversationCard in a list with infinite scrolling.\n * @default false\n /\n shouldPreservePosition?: boolean;\n /\n Used to show the unread messages indicator.\n * @default false\n /\n showNotificationIndicator?: boolean;\n /* The tags to be displayed in the ConversationCard. See the `Tag` for more information. Additionally, you can pass in a tooltipContent to customize what is shown in the tooltip. /\n tags?: ConversationCardTag[];\n /* Data test id for the conversation card.\n * @default kibble-conversation-card\n */\n 'data-testid'?: string;\n}\n\nexport const ConversationCard = ({\n allowHoverActions = true,\n avatarGroupProps,\n content,\n contentProps,\n contentMenu,\n footerProps,\n headerMenuProps,\n headerProps,\n active,\n onClick,\n overlayProps,\n pinProps,\n shouldPreservePosition = false,\n showNotificationIndicator,\n tags,\n ['data-testid']: dataTestId = 'kibble-conversation-card',\n}: ConversationCardProps): React.JSX.Element => {\n const { isPinned } = pinProps \|\| {};\n const [isHovering, setIsHovering] = useState(false);\n\n return (\n <Card\n className=\"ConversationCard\"\n id=\"conversation-card-item\"\n data-testid={dataTestId}\n interactive\n active={active}\n size=\"sm\"\n fullWidth\n onClick={(): void => {\n if (onClick) {\n onClick();\n }\n }}\n bg={showNotificationIndicator \|\| active \|\| isHovering ? 'background.default' : 'background.subtle'}\n onMouseEnter={(): void => {\n if (allowHoverActions) {\n setIsHovering(true);\n }\n }}\n onMouseLeave={(): void => setIsHovering(false)}\n pos=\"relative\"\n css={{ overflowAnchor: shouldPreservePosition ? 'auto' : 'none' }}\n >\n {isHovering && (\n <Box\n className=\"ConversationCard__Button--Container\"\n data-testid={`${dataTestId}-button-container`}\n pos=\"absolute\"\n top={2}\n zIndex=\"banner\"\n right={2}\n bg=\"background\"\n borderRadius=\"md\"\n onClick={(e): void => e.stopPropagation()}\n >\n <ConversationCardButtons\n overlayProps={overlayProps}\n pinProps={pinProps}\n headerMenuProps={headerMenuProps}\n isHovering={isHovering}\n setIsHovering={setIsHovering}\n />\n </Box>\n )}\n <ConversationCardHeader\n avatarGroupProps={avatarGroupProps}\n isHoveringCard={isHovering}\n isCardPinned={isPinned}\n showNotificationIndicator={showNotificationIndicator}\n {...headerProps}\n />\n <ConversationCardContent content={content} contentProps={contentProps} contentMenu={contentMenu} />\n {!!tags?.length && <ConversationCardTags tags={tags} />}\n {footerProps && <ConversationCardFooter {...footerProps} />}\n </Card>\n );\n};\n"],"names":["ConversationCardAvatarGroup","avatars","max","onAvatarGroupClick","tooltipLabel","dataTestId","jsx","Tooltip","Flex","Avatar","e","Fragment","avatar","ConversationCardHeader","avatarGroupProps","timestampProps","isHoveringCard","isCardPinned","title","showNotificationIndicator","subtitle","jsxs","HStack","VStack","Heading","Text","Timestamp","Box","NotificationCounter","Icon","ConversationCardButtons","overlayProps","pinProps","headerMenuProps","isHovering","setIsHovering","isOpenInOverlay","onOpenInOverlay","overlayDataTestId","isPinned","onTogglePin","pinDataTestId","listProps","headerMenuDataTestId","pinIconName","Button","Menu","ConversationCardTags","tags","Wrap","tag","tooltipContent","rest","tagElement","Tag","WrapItem","ConversationCardFooter","iconProps","content","contentProps","_content","ConversationCardContent","contentMenu","ConversationCard","allowHoverActions","footerProps","headerProps","active","onClick","shouldPreservePosition","useState","Card"],"mappings":"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"}

package/dist/chunks/{datePicker.component-B61MFSsZ.js → datePicker.component-DN8FZf1_.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),n=require("./datePicker.provider-DvHAC4KM.js"),k=require("./textInput.component-CWbv8giH.js"),g=require("./icon.component-B1hr5lLa.js"),S=require("./text.component-BDDz5KQP.js"),l=require("./format-CK7Imh-5.js"),v=require("./popover-root-provider-CZDbUJ2K.js"),q=require("./h-stack-D4MnHHRc.js"),P=require("./flex-BOU6tYUd.js"),y=require("react"),C=require("./button.component-DjdgBXDC.js"),w=require("./popover.recipe-Czy8Aeft.js"),z=require("./usePortalContentRef-CTrvBQ7I.js"),N=require("./divider.component-BX3zyB7O.js"),T=require("./create-slot-recipe-context-HXE1VazG.js"),B=require("./index-Ts8g8jZd.js"),m=require("./popover-C7aj8Iwj.js");function W(t,r){return+l.toDate(t)<+l.toDate(r)}const A=(t,r)=>r?n.isAfter(t,r):!0,H=(t,r)=>r?W(t,r):!0;function O({inputProps:t,["data-testid"]:r="kibble-datepicker-input"}){const{setFocusedInput:o,startDate:a,endDate:i,focusedInput:c,dateFormat:s,withDateRange:u,minDate:d,maxDate:x,onDateChange:R,onDateSelect:I,onClose:F}=n.useDatePickerContext(),{open:_,setOpen:b}=v.usePopoverContext(),f=t?.size||"md",h=p=>{p.key==="Enter"&&_&&(b(!1),F(),p.preventDefault(),p.stopPropagation())},E=p=>{const D=p.target.value,j=n.xt(D,s,n.today);D.length===s.length&&l.isDate(j)&&A(j,d)&&H(j,x)&&I(j),!D.length&&R&&R({startDate:null,endDate:null})};return e.jsxRuntimeExports.jsxs(q.HStack,{w:"100%",className:"DatePicker__Trigger","data-testid":r,children:[e.jsxRuntimeExports.jsx(k.WrappedTextInput,{className:"DatePicker__Input--Start","data-testid":`${r}-start`,autoComplete:"off",rightElement:e.jsxRuntimeExports.jsx(P.Flex,{...!t?.disabled&&{onClick:()=>o(n.FocusedInput.StartDate)},h:"100%",align:"center",children:e.jsxRuntimeExports.jsx(g.Icon,{name:"calendarDate",size:f})}),value:n.Ue(a,s,""),onChange:E,onKeyDown:h,...!t?.disabled&&{onFocus:()=>{o(n.FocusedInput.StartDate)}},placeholder:l.format(n.today,s).toString(),...c===n.FocusedInput.StartDate&&{"data-focus":!0},...t}),u&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(S.WrappedText,{children:" - "}),e.jsxRuntimeExports.jsx(k.WrappedTextInput,{className:"DatePicker__Input--End","data-testid":`${r}-end`,rightElement:e.jsxRuntimeExports.jsx(P.Flex,{...!t?.disabled&&{onClick:()=>o(n.FocusedInput.StartDate)},h:"100%",align:"center",children:e.jsxRuntimeExports.jsx(g.Icon,{name:"calendarDate",size:f})}),value:n.Ue(i,s,""),onChange:E,...!t?.disabled&&{onFocus:()=>o(n.FocusedInput.EndDate)},onKeyDown:h,placeholder:l.format(n.today,s).toString(),...c===n.FocusedInput.EndDate&&{"data-focus":!0},...t})]})]})}function $({buttonText:t="Apply",onSubmit:r,hideResetButton:o}){const{startDate:a,endDate:i,clearDates:c,standalone:s}=n.useDatePickerContext(),{open:u,setOpen:d}=v.usePopoverContext(),x=y.useCallback(()=>{s||d(!1),r&&r({startDate:a,endDate:i})},[s,d,r,a,i]);return e.jsxRuntimeExports.jsxs(q.HStack,{w:"100%",justify:o?"end":"space-between",align:"center",borderTop:"1px",borderColor:"border.default",px:3,py:2,children:[!o&&e.jsxRuntimeExports.jsx(C.Button,{size:"sm",variant:"ghostNeutral",onClick:()=>c({open:u}),children:"Clear Dates"}),e.jsxRuntimeExports.jsx(C.Button,{size:"sm",onClick:x,children:t})]})}const M=t=>{const{footerProps:r,hideFooter:o=!1,inputProps:a,portalled:i=!0,withDateRange:c=!1,["data-testid"]:s="kibble-datepicker"}=t,{contentRef:u}=z.usePortalContentRef(),x=T.useSlotRecipe({recipe:w.popoverRecipe})();return e.jsxRuntimeExports.jsxs(n.DatePickerProvider,{...t,children:[e.jsxRuntimeExports.jsx(m.PopoverTrigger,{w:"100%",children:e.jsxRuntimeExports.jsx(O,{inputProps:{...a,readOnly:!0}})}),e.jsxRuntimeExports.jsx(B.Portal,{container:u||void 0,disabled:!i,children:e.jsxRuntimeExports.jsx(m.PopoverPositioner,{className:"DatePicker","data-testid":s,children:e.jsxRuntimeExports.jsx(m.PopoverContent,{className:"DatePicker__Content","data-testid":`${s}-content`,css:{...x.content,minW:"340px"},children:e.jsxRuntimeExports.jsxs(m.PopoverBody,{css:{"--popover-padding":0},children:[e.jsxRuntimeExports.jsx(n.DatePickerHeader,{}),e.jsxRuntimeExports.jsx(N.Divider,{}),e.jsxRuntimeExports.jsx(n.DatePickerCalendar,{}),c&&!o&&e.jsxRuntimeExports.jsx($,{...r})]})})})})]})};exports.DatePicker=M;
-//# sourceMappingURL=datePicker.component-B61MFSsZ.js.map
+"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),n=require("./datePicker.provider-ZStG7Yw_.js"),k=require("./textInput.component-C1vwy6pL.js"),g=require("./icon.component-B1hr5lLa.js"),S=require("./text.component-CeioUl0G.js"),l=require("./format-CK7Imh-5.js"),v=require("./popover-root-provider-CZDbUJ2K.js"),q=require("./h-stack-D4MnHHRc.js"),P=require("./flex-BOU6tYUd.js"),y=require("react"),C=require("./button.component-DjdgBXDC.js"),w=require("./popover.recipe-Czy8Aeft.js"),z=require("./usePortalContentRef-CTrvBQ7I.js"),N=require("./divider.component-BX3zyB7O.js"),T=require("./create-slot-recipe-context-HXE1VazG.js"),B=require("./index-Ts8g8jZd.js"),m=require("./popover-C7aj8Iwj.js");function W(t,r){return+l.toDate(t)<+l.toDate(r)}const A=(t,r)=>r?n.isAfter(t,r):!0,H=(t,r)=>r?W(t,r):!0;function O({inputProps:t,["data-testid"]:r="kibble-datepicker-input"}){const{setFocusedInput:o,startDate:a,endDate:i,focusedInput:c,dateFormat:s,withDateRange:u,minDate:d,maxDate:x,onDateChange:R,onDateSelect:I,onClose:F}=n.useDatePickerContext(),{open:_,setOpen:b}=v.usePopoverContext(),f=t?.size||"md",h=p=>{p.key==="Enter"&&_&&(b(!1),F(),p.preventDefault(),p.stopPropagation())},E=p=>{const D=p.target.value,j=n.xt(D,s,n.today);D.length===s.length&&l.isDate(j)&&A(j,d)&&H(j,x)&&I(j),!D.length&&R&&R({startDate:null,endDate:null})};return e.jsxRuntimeExports.jsxs(q.HStack,{w:"100%",className:"DatePicker__Trigger","data-testid":r,children:[e.jsxRuntimeExports.jsx(k.WrappedTextInput,{className:"DatePicker__Input--Start","data-testid":`${r}-start`,autoComplete:"off",rightElement:e.jsxRuntimeExports.jsx(P.Flex,{...!t?.disabled&&{onClick:()=>o(n.FocusedInput.StartDate)},h:"100%",align:"center",children:e.jsxRuntimeExports.jsx(g.Icon,{name:"calendarDate",size:f})}),value:n.Ue(a,s,""),onChange:E,onKeyDown:h,...!t?.disabled&&{onFocus:()=>{o(n.FocusedInput.StartDate)}},placeholder:l.format(n.today,s).toString(),...c===n.FocusedInput.StartDate&&{"data-focus":!0},...t}),u&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(S.WrappedText,{children:" - "}),e.jsxRuntimeExports.jsx(k.WrappedTextInput,{className:"DatePicker__Input--End","data-testid":`${r}-end`,rightElement:e.jsxRuntimeExports.jsx(P.Flex,{...!t?.disabled&&{onClick:()=>o(n.FocusedInput.StartDate)},h:"100%",align:"center",children:e.jsxRuntimeExports.jsx(g.Icon,{name:"calendarDate",size:f})}),value:n.Ue(i,s,""),onChange:E,...!t?.disabled&&{onFocus:()=>o(n.FocusedInput.EndDate)},onKeyDown:h,placeholder:l.format(n.today,s).toString(),...c===n.FocusedInput.EndDate&&{"data-focus":!0},...t})]})]})}function $({buttonText:t="Apply",onSubmit:r,hideResetButton:o}){const{startDate:a,endDate:i,clearDates:c,standalone:s}=n.useDatePickerContext(),{open:u,setOpen:d}=v.usePopoverContext(),x=y.useCallback(()=>{s||d(!1),r&&r({startDate:a,endDate:i})},[s,d,r,a,i]);return e.jsxRuntimeExports.jsxs(q.HStack,{w:"100%",justify:o?"end":"space-between",align:"center",borderTop:"1px",borderColor:"border.default",px:3,py:2,children:[!o&&e.jsxRuntimeExports.jsx(C.Button,{size:"sm",variant:"ghostNeutral",onClick:()=>c({open:u}),children:"Clear Dates"}),e.jsxRuntimeExports.jsx(C.Button,{size:"sm",onClick:x,children:t})]})}const M=t=>{const{footerProps:r,hideFooter:o=!1,inputProps:a,portalled:i=!0,withDateRange:c=!1,["data-testid"]:s="kibble-datepicker"}=t,{contentRef:u}=z.usePortalContentRef(),x=T.useSlotRecipe({recipe:w.popoverRecipe})();return e.jsxRuntimeExports.jsxs(n.DatePickerProvider,{...t,children:[e.jsxRuntimeExports.jsx(m.PopoverTrigger,{w:"100%",children:e.jsxRuntimeExports.jsx(O,{inputProps:{...a,readOnly:!0}})}),e.jsxRuntimeExports.jsx(B.Portal,{container:u||void 0,disabled:!i,children:e.jsxRuntimeExports.jsx(m.PopoverPositioner,{className:"DatePicker","data-testid":s,children:e.jsxRuntimeExports.jsx(m.PopoverContent,{className:"DatePicker__Content","data-testid":`${s}-content`,css:{...x.content,minW:"340px"},children:e.jsxRuntimeExports.jsxs(m.PopoverBody,{css:{"--popover-padding":0},children:[e.jsxRuntimeExports.jsx(n.DatePickerHeader,{}),e.jsxRuntimeExports.jsx(N.Divider,{}),e.jsxRuntimeExports.jsx(n.DatePickerCalendar,{}),c&&!o&&e.jsxRuntimeExports.jsx($,{...r})]})})})})]})};exports.DatePicker=M;
+//# sourceMappingURL=datePicker.component-DN8FZf1_.js.map

package/dist/chunks/{datePicker.component-B61MFSsZ.js.map → datePicker.component-DN8FZf1_.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datePicker.component-B61MFSsZ.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/*\n @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n \n @description\n * Is the first date before the second one?\n \n @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n \n @returns The first date is before the second date\n \n @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n /\nexport function isBefore(date, dateToCompare) {\n return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /* Data test id for the input.\n * @default kibble-datepicker-input\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n inputProps,\n ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n const {\n setFocusedInput,\n startDate,\n endDate,\n focusedInput,\n dateFormat,\n withDateRange,\n minDate,\n maxDate,\n onDateChange,\n onDateSelect,\n onClose,\n } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n const iconSize = inputProps?.size \|\| 'md';\n\n const onKeyDown = (e: React.KeyboardEvent): void => {\n if (e.key === 'Enter' && open) {\n setOpen(false);\n onClose();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n const dateValue = e.target.value;\n const parsedDate = parseDate(dateValue, dateFormat, today);\n\n if (\n dateValue.length === dateFormat.length &&\n isDate(parsedDate) &&\n isDateAfterMin(parsedDate, minDate) &&\n isDateBeforeMax(parsedDate, maxDate)\n ) {\n onDateSelect(parsedDate);\n }\n\n // Trigger change when input is empty\n if (!dateValue.length && onDateChange) {\n onDateChange({ startDate: null, endDate: null });\n }\n };\n\n return (\n <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n <TextInput\n className=\"DatePicker__Input--Start\"\n data-testid={`${dataTestId}-start`}\n autoComplete=\"off\"\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(startDate, dateFormat, '')}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n {...(!inputProps?.disabled && {\n onFocus: (): void => {\n setFocusedInput(FocusedInput.StartDate);\n },\n })}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.StartDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n {withDateRange && (\n <>\n <Text> - </Text>\n <TextInput\n className=\"DatePicker__Input--End\"\n data-testid={`${dataTestId}-end`}\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(endDate, dateFormat, '')}\n onChange={onInputChange}\n {...(!inputProps?.disabled && {\n onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n })}\n onKeyDown={onKeyDown}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.EndDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n </>\n )}\n </HStack>\n );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n /* Text to display in the submit button.\n * @default Apply\n /\n buttonText?: string;\n /* Callback function to be called when the submit button is clicked. /\n onSubmit?: ({ startDate, endDate }: DateRange) => void;\n /* If true, the reset button will be hidden. /\n hideResetButton?: boolean;\n /* Data test id for the footer.\n * @default kibble-datepicker-footer\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n buttonText = 'Apply',\n onSubmit,\n hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n\n const handleSubmit = useCallback((): void => {\n if (!standalone) {\n setOpen(false);\n }\n\n if (onSubmit) {\n onSubmit({ startDate, endDate });\n }\n }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n return (\n <HStack\n w=\"100%\"\n justify={hideResetButton ? 'end' : 'space-between'}\n align=\"center\"\n borderTop=\"1px\"\n borderColor=\"border.default\"\n px={3}\n py={2}\n >\n {!hideResetButton && (\n <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n Clear Dates\n </Button>\n )}\n <Button size=\"sm\" onClick={handleSubmit}>\n {buttonText}\n </Button>\n </HStack>\n );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n /* Props to customize the calendar footer. Only applicable when `withDateRange` is true. /\n footerProps?: DatePickerFooterProps;\n /\n Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n * @default false\n /\n hideFooter?: boolean;\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /\n Placement of the calendar popover\n * @default bottom\n /\n placement?: Placement;\n /\n If true, the date picker will be rendered in a portal.\n * @default true\n /\n portalled?: boolean;\n /\n If true, the date picker will render two input fields that control both the start and end date for a range selection.\n * @default false\n /\n withDateRange?: boolean;\n /* Data test id for the date picker.\n * @default kibble-datepicker\n */\n 'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n const {\n footerProps,\n hideFooter = false,\n inputProps,\n portalled = true,\n withDateRange = false,\n ['data-testid']: dataTestId = 'kibble-datepicker',\n } = props;\n const { contentRef } = usePortalContentRef();\n const recipe = useSlotRecipe({ recipe: popoverRecipe });\n const styles = recipe();\n\n return (\n <DatePickerProvider {...props}>\n <CPopover.Trigger w=\"100%\">\n <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n </CPopover.Trigger>\n <Portal container={contentRef \|\| undefined} disabled={!portalled}>\n <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n <CPopover.Content\n className=\"DatePicker__Content\"\n data-testid={`${dataTestId}-content`}\n css={{ ...styles.content, minW: '340px' }}\n >\n <CPopover.Body css={{ '--popover-padding': 0 }}>\n <DatePickerHeader />\n <Divider />\n <DatePickerCalendar />\n {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n </CPopover.Body>\n </CPopover.Content>\n </CPopover.Positioner>\n </Portal>\n </DatePickerProvider>\n );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"datePicker.component-DN8FZf1_.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/*\n @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n \n @description\n * Is the first date before the second one?\n \n @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n \n @returns The first date is before the second date\n \n @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n /\nexport function isBefore(date, dateToCompare) {\n return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /* Data test id for the input.\n * @default kibble-datepicker-input\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n inputProps,\n ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n const {\n setFocusedInput,\n startDate,\n endDate,\n focusedInput,\n dateFormat,\n withDateRange,\n minDate,\n maxDate,\n onDateChange,\n onDateSelect,\n onClose,\n } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n const iconSize = inputProps?.size \|\| 'md';\n\n const onKeyDown = (e: React.KeyboardEvent): void => {\n if (e.key === 'Enter' && open) {\n setOpen(false);\n onClose();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n const dateValue = e.target.value;\n const parsedDate = parseDate(dateValue, dateFormat, today);\n\n if (\n dateValue.length === dateFormat.length &&\n isDate(parsedDate) &&\n isDateAfterMin(parsedDate, minDate) &&\n isDateBeforeMax(parsedDate, maxDate)\n ) {\n onDateSelect(parsedDate);\n }\n\n // Trigger change when input is empty\n if (!dateValue.length && onDateChange) {\n onDateChange({ startDate: null, endDate: null });\n }\n };\n\n return (\n <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n <TextInput\n className=\"DatePicker__Input--Start\"\n data-testid={`${dataTestId}-start`}\n autoComplete=\"off\"\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(startDate, dateFormat, '')}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n {...(!inputProps?.disabled && {\n onFocus: (): void => {\n setFocusedInput(FocusedInput.StartDate);\n },\n })}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.StartDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n {withDateRange && (\n <>\n <Text> - </Text>\n <TextInput\n className=\"DatePicker__Input--End\"\n data-testid={`${dataTestId}-end`}\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(endDate, dateFormat, '')}\n onChange={onInputChange}\n {...(!inputProps?.disabled && {\n onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n })}\n onKeyDown={onKeyDown}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.EndDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n </>\n )}\n </HStack>\n );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n /* Text to display in the submit button.\n * @default Apply\n /\n buttonText?: string;\n /* Callback function to be called when the submit button is clicked. /\n onSubmit?: ({ startDate, endDate }: DateRange) => void;\n /* If true, the reset button will be hidden. /\n hideResetButton?: boolean;\n /* Data test id for the footer.\n * @default kibble-datepicker-footer\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n buttonText = 'Apply',\n onSubmit,\n hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n\n const handleSubmit = useCallback((): void => {\n if (!standalone) {\n setOpen(false);\n }\n\n if (onSubmit) {\n onSubmit({ startDate, endDate });\n }\n }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n return (\n <HStack\n w=\"100%\"\n justify={hideResetButton ? 'end' : 'space-between'}\n align=\"center\"\n borderTop=\"1px\"\n borderColor=\"border.default\"\n px={3}\n py={2}\n >\n {!hideResetButton && (\n <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n Clear Dates\n </Button>\n )}\n <Button size=\"sm\" onClick={handleSubmit}>\n {buttonText}\n </Button>\n </HStack>\n );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n /* Props to customize the calendar footer. Only applicable when `withDateRange` is true. /\n footerProps?: DatePickerFooterProps;\n /\n Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n * @default false\n /\n hideFooter?: boolean;\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /\n Placement of the calendar popover\n * @default bottom\n /\n placement?: Placement;\n /\n If true, the date picker will be rendered in a portal.\n * @default true\n /\n portalled?: boolean;\n /\n If true, the date picker will render two input fields that control both the start and end date for a range selection.\n * @default false\n /\n withDateRange?: boolean;\n /* Data test id for the date picker.\n * @default kibble-datepicker\n */\n 'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n const {\n footerProps,\n hideFooter = false,\n inputProps,\n portalled = true,\n withDateRange = false,\n ['data-testid']: dataTestId = 'kibble-datepicker',\n } = props;\n const { contentRef } = usePortalContentRef();\n const recipe = useSlotRecipe({ recipe: popoverRecipe });\n const styles = recipe();\n\n return (\n <DatePickerProvider {...props}>\n <CPopover.Trigger w=\"100%\">\n <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n </CPopover.Trigger>\n <Portal container={contentRef \|\| undefined} disabled={!portalled}>\n <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n <CPopover.Content\n className=\"DatePicker__Content\"\n data-testid={`${dataTestId}-content`}\n css={{ ...styles.content, minW: '340px' }}\n >\n <CPopover.Body css={{ '--popover-padding': 0 }}>\n <DatePickerHeader />\n <Divider />\n <DatePickerCalendar />\n {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n </CPopover.Body>\n </CPopover.Content>\n </CPopover.Positioner>\n </Portal>\n </DatePickerProvider>\n );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{datePicker.component--eXoTVQV.js → datePicker.component-cDWhkkZq.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { j as e } from "./jsx-runtime-C5mzlN2N.js";
-import { i as R, u as y, U as k, F as c, x as W, t as D, a as B, b as T, c as A } from "./datePicker.provider-BGWL6djq.js";
-import { W as P } from "./textInput.component-DAOVnBI-.js";
+import { i as R, u as y, U as k, F as c, x as W, t as D, a as B, b as T, c as A } from "./datePicker.provider-BiABe0BU.js";
+import { W as P } from "./textInput.component-BC0Hi8R_.js";
 import { I as C } from "./icon.component-PV_nHBId.js";
-import { W as H } from "./text.component-IjomJyJY.js";
+import { W as H } from "./text.component-CdTyTFds.js";
 import { t as b, f as v, i as O } from "./format-CqTHHSak.js";
 import { u as I } from "./popover-root-provider-DR0Iuda1.js";
 import { H as _ } from "./h-stack-8q5nAOg0.js";
@@ -163,4 +163,4 @@ const ge = (t) => {
 export {
   ge as D
 };
-//# sourceMappingURL=datePicker.component--eXoTVQV.js.map
+//# sourceMappingURL=datePicker.component-cDWhkkZq.js.map

package/dist/chunks/{datePicker.component--eXoTVQV.js.map → datePicker.component-cDWhkkZq.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datePicker.component--eXoTVQV.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/*\n @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n \n @description\n * Is the first date before the second one?\n \n @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n \n @returns The first date is before the second date\n \n @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n /\nexport function isBefore(date, dateToCompare) {\n return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /* Data test id for the input.\n * @default kibble-datepicker-input\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n inputProps,\n ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n const {\n setFocusedInput,\n startDate,\n endDate,\n focusedInput,\n dateFormat,\n withDateRange,\n minDate,\n maxDate,\n onDateChange,\n onDateSelect,\n onClose,\n } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n const iconSize = inputProps?.size \|\| 'md';\n\n const onKeyDown = (e: React.KeyboardEvent): void => {\n if (e.key === 'Enter' && open) {\n setOpen(false);\n onClose();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n const dateValue = e.target.value;\n const parsedDate = parseDate(dateValue, dateFormat, today);\n\n if (\n dateValue.length === dateFormat.length &&\n isDate(parsedDate) &&\n isDateAfterMin(parsedDate, minDate) &&\n isDateBeforeMax(parsedDate, maxDate)\n ) {\n onDateSelect(parsedDate);\n }\n\n // Trigger change when input is empty\n if (!dateValue.length && onDateChange) {\n onDateChange({ startDate: null, endDate: null });\n }\n };\n\n return (\n <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n <TextInput\n className=\"DatePicker__Input--Start\"\n data-testid={`${dataTestId}-start`}\n autoComplete=\"off\"\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(startDate, dateFormat, '')}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n {...(!inputProps?.disabled && {\n onFocus: (): void => {\n setFocusedInput(FocusedInput.StartDate);\n },\n })}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.StartDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n {withDateRange && (\n <>\n <Text> - </Text>\n <TextInput\n className=\"DatePicker__Input--End\"\n data-testid={`${dataTestId}-end`}\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(endDate, dateFormat, '')}\n onChange={onInputChange}\n {...(!inputProps?.disabled && {\n onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n })}\n onKeyDown={onKeyDown}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.EndDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n </>\n )}\n </HStack>\n );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n /* Text to display in the submit button.\n * @default Apply\n /\n buttonText?: string;\n /* Callback function to be called when the submit button is clicked. /\n onSubmit?: ({ startDate, endDate }: DateRange) => void;\n /* If true, the reset button will be hidden. /\n hideResetButton?: boolean;\n /* Data test id for the footer.\n * @default kibble-datepicker-footer\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n buttonText = 'Apply',\n onSubmit,\n hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n\n const handleSubmit = useCallback((): void => {\n if (!standalone) {\n setOpen(false);\n }\n\n if (onSubmit) {\n onSubmit({ startDate, endDate });\n }\n }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n return (\n <HStack\n w=\"100%\"\n justify={hideResetButton ? 'end' : 'space-between'}\n align=\"center\"\n borderTop=\"1px\"\n borderColor=\"border.default\"\n px={3}\n py={2}\n >\n {!hideResetButton && (\n <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n Clear Dates\n </Button>\n )}\n <Button size=\"sm\" onClick={handleSubmit}>\n {buttonText}\n </Button>\n </HStack>\n );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n /* Props to customize the calendar footer. Only applicable when `withDateRange` is true. /\n footerProps?: DatePickerFooterProps;\n /\n Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n * @default false\n /\n hideFooter?: boolean;\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /\n Placement of the calendar popover\n * @default bottom\n /\n placement?: Placement;\n /\n If true, the date picker will be rendered in a portal.\n * @default true\n /\n portalled?: boolean;\n /\n If true, the date picker will render two input fields that control both the start and end date for a range selection.\n * @default false\n /\n withDateRange?: boolean;\n /* Data test id for the date picker.\n * @default kibble-datepicker\n */\n 'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n const {\n footerProps,\n hideFooter = false,\n inputProps,\n portalled = true,\n withDateRange = false,\n ['data-testid']: dataTestId = 'kibble-datepicker',\n } = props;\n const { contentRef } = usePortalContentRef();\n const recipe = useSlotRecipe({ recipe: popoverRecipe });\n const styles = recipe();\n\n return (\n <DatePickerProvider {...props}>\n <CPopover.Trigger w=\"100%\">\n <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n </CPopover.Trigger>\n <Portal container={contentRef \|\| undefined} disabled={!portalled}>\n <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n <CPopover.Content\n className=\"DatePicker__Content\"\n data-testid={`${dataTestId}-content`}\n css={{ ...styles.content, minW: '340px' }}\n >\n <CPopover.Body css={{ '--popover-padding': 0 }}>\n <DatePickerHeader />\n <Divider />\n <DatePickerCalendar />\n {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n </CPopover.Body>\n </CPopover.Content>\n </CPopover.Positioner>\n </Portal>\n </DatePickerProvider>\n );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"datePicker.component-cDWhkkZq.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/*\n @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n \n @description\n * Is the first date before the second one?\n \n @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n \n @returns The first date is before the second date\n \n @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n /\nexport function isBefore(date, dateToCompare) {\n return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /* Data test id for the input.\n * @default kibble-datepicker-input\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n inputProps,\n ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n const {\n setFocusedInput,\n startDate,\n endDate,\n focusedInput,\n dateFormat,\n withDateRange,\n minDate,\n maxDate,\n onDateChange,\n onDateSelect,\n onClose,\n } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n const iconSize = inputProps?.size \|\| 'md';\n\n const onKeyDown = (e: React.KeyboardEvent): void => {\n if (e.key === 'Enter' && open) {\n setOpen(false);\n onClose();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n const dateValue = e.target.value;\n const parsedDate = parseDate(dateValue, dateFormat, today);\n\n if (\n dateValue.length === dateFormat.length &&\n isDate(parsedDate) &&\n isDateAfterMin(parsedDate, minDate) &&\n isDateBeforeMax(parsedDate, maxDate)\n ) {\n onDateSelect(parsedDate);\n }\n\n // Trigger change when input is empty\n if (!dateValue.length && onDateChange) {\n onDateChange({ startDate: null, endDate: null });\n }\n };\n\n return (\n <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n <TextInput\n className=\"DatePicker__Input--Start\"\n data-testid={`${dataTestId}-start`}\n autoComplete=\"off\"\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(startDate, dateFormat, '')}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n {...(!inputProps?.disabled && {\n onFocus: (): void => {\n setFocusedInput(FocusedInput.StartDate);\n },\n })}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.StartDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n {withDateRange && (\n <>\n <Text> - </Text>\n <TextInput\n className=\"DatePicker__Input--End\"\n data-testid={`${dataTestId}-end`}\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(endDate, dateFormat, '')}\n onChange={onInputChange}\n {...(!inputProps?.disabled && {\n onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n })}\n onKeyDown={onKeyDown}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.EndDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n </>\n )}\n </HStack>\n );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n /* Text to display in the submit button.\n * @default Apply\n /\n buttonText?: string;\n /* Callback function to be called when the submit button is clicked. /\n onSubmit?: ({ startDate, endDate }: DateRange) => void;\n /* If true, the reset button will be hidden. /\n hideResetButton?: boolean;\n /* Data test id for the footer.\n * @default kibble-datepicker-footer\n /\n 'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n buttonText = 'Apply',\n onSubmit,\n hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n\n const handleSubmit = useCallback((): void => {\n if (!standalone) {\n setOpen(false);\n }\n\n if (onSubmit) {\n onSubmit({ startDate, endDate });\n }\n }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n return (\n <HStack\n w=\"100%\"\n justify={hideResetButton ? 'end' : 'space-between'}\n align=\"center\"\n borderTop=\"1px\"\n borderColor=\"border.default\"\n px={3}\n py={2}\n >\n {!hideResetButton && (\n <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n Clear Dates\n </Button>\n )}\n <Button size=\"sm\" onClick={handleSubmit}>\n {buttonText}\n </Button>\n </HStack>\n );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n /* Props to customize the calendar footer. Only applicable when `withDateRange` is true. /\n footerProps?: DatePickerFooterProps;\n /\n Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n * @default false\n /\n hideFooter?: boolean;\n /* Props to customize the input field. See `TextInput` for more information. /\n inputProps?: Omit<TextInputProps, 'onChange' \| 'value' \| 'isClearable' \| 'onClear'>;\n /\n Placement of the calendar popover\n * @default bottom\n /\n placement?: Placement;\n /\n If true, the date picker will be rendered in a portal.\n * @default true\n /\n portalled?: boolean;\n /\n If true, the date picker will render two input fields that control both the start and end date for a range selection.\n * @default false\n /\n withDateRange?: boolean;\n /* Data test id for the date picker.\n * @default kibble-datepicker\n */\n 'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n const {\n footerProps,\n hideFooter = false,\n inputProps,\n portalled = true,\n withDateRange = false,\n ['data-testid']: dataTestId = 'kibble-datepicker',\n } = props;\n const { contentRef } = usePortalContentRef();\n const recipe = useSlotRecipe({ recipe: popoverRecipe });\n const styles = recipe();\n\n return (\n <DatePickerProvider {...props}>\n <CPopover.Trigger w=\"100%\">\n <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n </CPopover.Trigger>\n <Portal container={contentRef \|\| undefined} disabled={!portalled}>\n <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n <CPopover.Content\n className=\"DatePicker__Content\"\n data-testid={`${dataTestId}-content`}\n css={{ ...styles.content, minW: '340px' }}\n >\n <CPopover.Body css={{ '--popover-padding': 0 }}>\n <DatePickerHeader />\n <Divider />\n <DatePickerCalendar />\n {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n </CPopover.Body>\n </CPopover.Content>\n </CPopover.Positioner>\n </Portal>\n </DatePickerProvider>\n );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{datePicker.provider-BGWL6djq.js → datePicker.provider-BiABe0BU.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { j as N } from "./jsx-runtime-C5mzlN2N.js";
 import { useState as Pe, useEffect as Ne, useCallback as I, useMemo as $, createContext as Lt, useContext as Ht, useRef as Me } from "react";
-import { W as Ae } from "./text.component-IjomJyJY.js";
+import { W as Ae } from "./text.component-CdTyTFds.js";
 import { B as It } from "./index-9BerxEcw.js";
 import { B as je } from "./button.component-BO6oee_V.js";
 import { d as qt } from "./config-Djkl1N81.js";
@@ -11,7 +11,7 @@ import { G as Ke, a as jt } from "./grid-item-BmCSQ38y.js";
 import { C as vt } from "./center-Dmlzv1BW.js";
 import { u as Gt } from "./popover-root-provider-DR0Iuda1.js";
 import { F as Xt } from "./flex-CX-8gE9T.js";
-import { M as Je } from "./menu.component-TeC2F3rT.js";
+import { M as Je } from "./menu.component-CFt2LRsh.js";
 import { i as Ge, a as _t, b as zt, e as Vt, c as $t } from "./isSymbol-BQN49XhJ.js";
 import { H as Kt } from "./h-stack-8q5nAOg0.js";
 import { m as Jt } from "./popover-pd70xkY_.js";
@@ -3006,4 +3006,4 @@ export {
   we as u,
   ma as x
 };
-//# sourceMappingURL=datePicker.provider-BGWL6djq.js.map
+//# sourceMappingURL=datePicker.provider-BiABe0BU.js.map