@televet/kibble-ui 2.1.15 → 2.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/checkboxGroup.component-af84b411.js +2 -0
- package/build/checkboxGroup.component-af84b411.js.map +1 -0
- package/build/components/CheckboxGroup/index.js +1 -1
- package/build/components/DatePicker/index.js +1 -1
- package/build/components/Menu/components/MenuList/index.js +1 -1
- package/build/components/Menu/index.js +1 -1
- package/build/components/Radio/index.js +1 -1
- package/build/components/RadioGroup/index.js +1 -1
- package/build/components/Select/index.js +1 -1
- package/build/components/TextInput/index.js +1 -1
- package/build/components/TimePicker/index.js +1 -1
- package/build/components/TimeRange/index.js +1 -1
- package/build/components/index.js +1 -1
- package/build/{datepicker.component-24220e45.js → datepicker.component-e34bb912.js} +3 -3
- package/build/{datepicker.component-24220e45.js.map → datepicker.component-e34bb912.js.map} +1 -1
- package/build/index.js +1 -1
- package/build/{menu.component-b67a2ed4.js → menu.component-ada58aff.js} +2 -2
- package/build/{menu.component-b67a2ed4.js.map → menu.component-ada58aff.js.map} +1 -1
- package/build/{menuList.component-5a00cb30.js → menuList.component-34a5c82e.js} +2 -2
- package/build/{menuList.component-5a00cb30.js.map → menuList.component-34a5c82e.js.map} +1 -1
- package/build/radio.component-2502a55b.js +2 -0
- package/build/radio.component-2502a55b.js.map +1 -0
- package/build/radioGroup.component-a794a9c9.js +2 -0
- package/build/radioGroup.component-a794a9c9.js.map +1 -0
- package/build/select.component-b0b801a2.js +2 -0
- package/build/select.component-b0b801a2.js.map +1 -0
- package/build/{textInput.component-049317fb.js → textInput.component-85dce08f.js} +2 -2
- package/build/textInput.component-85dce08f.js.map +1 -0
- package/build/{timePicker.component-7fb45602.js → timePicker.component-3249b590.js} +2 -2
- package/build/{timePicker.component-7fb45602.js.map → timePicker.component-3249b590.js.map} +1 -1
- package/build/{timeRange.component-5499603c.js → timeRange.component-1b54aa9e.js} +2 -2
- package/build/{timeRange.component-5499603c.js.map → timeRange.component-1b54aa9e.js.map} +1 -1
- package/package.json +1 -1
- package/build/checkboxGroup.component-3abc29c8.js +0 -2
- package/build/checkboxGroup.component-3abc29c8.js.map +0 -1
- package/build/radio.component-1ebba5e1.js +0 -2
- package/build/radio.component-1ebba5e1.js.map +0 -1
- package/build/radioGroup.component-f08f38ce.js +0 -2
- package/build/radioGroup.component-f08f38ce.js.map +0 -1
- package/build/select.component-b1c077a2.js +0 -2
- package/build/select.component-b1c077a2.js.map +0 -1
- package/build/textInput.component-049317fb.js.map +0 -1
package/build/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./alert.component-1e5e1e1b.js"),r=require("./avatar.component-0d100e3f.js"),o=require("./avatar.types-a87ebfb5.js"),t=require("./avatarGroup.component-2b8c0ab4.js"),s=require("./button.component-d4c1718b.js"),a=require("./button.types-f42b599b.js"),p=require("./card.component-de5d4b2a.js"),i=require("./checkbox.component-eec36cbb.js"),n=require("./checkboxGroup.component-3abc29c8.js"),u=require("./datepicker.component-24220e45.js"),c=require("./heading.component-e55f8364.js"),x=require("./heading.types-b6ca7d59.js"),d=require("./icon.component-100b924b.js"),l=require("./link.component-d28bdaea.js"),m=require("./logo.component-cea68030.js"),b=require("./menuButton.component-bc14c030.js"),q=require("./menuContainer.component-3e1e324b.js"),j=require("./menuItem.component-88d5a4b5.js"),C=require("./menuList.component-5a00cb30.js"),h=require("./menu.component-b67a2ed4.js"),v=require("./modalBody.component-345aaa1b.js"),k=require("./modalCloseButton.component-415049d6.js"),M=require("./modalFooter.component-1c9fcc61.js"),T=require("./modalFooterButtons.component-c34c567e.js"),f=require("./modalHeader.component-204451e0.js"),g=require("./modal.component-0d68beaa.js"),I=require("./notificationCounter.component-24f3f4ab.js"),S=require("./picture.component-19489bee.js"),P=require("./popoverFooter.component-7e0b193f.js"),y=require("./popoverHeader.component-c6812c03.js"),B=require("./popover.component-0c3ec017.js"),D=require("./popover.types-bc105ea7.js"),L=require("./radio.component-1ebba5e1.js"),F=require("./radioGroup.component-f08f38ce.js"),A=require("./ratingDot.component-01592415.js"),G=require("./ratingDots.component-f7677abd.js"),H=require("./select.component-b1c077a2.js"),w=require("./dragHandle.component-d95bb9e4.js"),O=require("./sortableItem.component-3bdead95.js"),z=require("./sortableOverlay.component-39d84330.js"),R=require("./sortableList.component-2c36f685.js"),N=require("./spinner.component-39040867.js"),W=require("./switch.component-753b45d3.js"),V=require("./tab.component-9395a9e2.js"),E=require("./tabs.component-f7a37a9b.js"),K=require("./tabsLayout.component-9b90c425.js"),Q=require("./tag.types-f979ec63.js"),U=require("./text.component-057889c3.js"),_=require("./text.types-fef8ead3.js"),$=require("./textarea.component-3365d082.js"),J=require("./textInput.component-049317fb.js"),X=require("./timePicker.component-7fb45602.js"),Y=require("./timeRange.component-5499603c.js"),Z=require("./useToast-433a0f38.js"),ee=require("./tooltip.component-197bff7c.js"),re=require("./withTheme-e33ed8bc.js"),oe=require("./useTheme-8873c39f.js"),te=require("./theme.provider-e1100d0a.js"),se=require("./chakra-ui-skeleton.esm-739cf3ea.js"),ae=require("./chakra-ui-modal.esm-a00f2bce.js"),pe=require("./chakra-ui-layout.esm-6ee578f7.js"),ie=require("./chakra-ui-button.esm-bd065780.js"),ne=require("./chakra-ui-alert.esm-17eebb99.js"),ue=require("./chakra-ui-avatar.esm-eee70d3a.js"),ce=require("./chakra-ui-checkbox.esm-4cded6a7.js"),xe=require("./chakra-ui-input.esm-5fd07056.js"),de=require("./chakra-ui-menu.esm-1ed98193.js"),le=require("./chakra-ui-popover.esm-1e836c11.js"),me=require("./chakra-ui-radio.esm-f310d451.js"),be=require("./chakra-ui-select.esm-793cf4de.js"),qe=require("./chakra-ui-tabs.esm-e6372403.js"),je=require("./chakra-ui-textarea.esm-23fad4cd.js"),Ce=require("./chakra-ui-form-control.esm-6d25b1a4.js"),he=require("./chakra-ui-media-query.esm-6217de7e.js"),ve=require("./chakra-ui-image.esm-66324087.js"),ke=require("./chakra-ui-system.esm-c70df670.js"),Me=require("./chakra-ui-portal.esm-bbcb5d1d.js"),Te=require("./chakra-ui-hooks.esm-21b313f3.js");require("./tslib.es6-d6f17add.js"),require("react"),require("./avatar.config-e43cfce7.js"),require("./withFormControl-28664983.js"),require("./index-c90ed78a.js"),require("./withTruncation-60a6b552.js"),require("./icons/index.js"),require("./useIconTextSizeMap-301c4f35.js"),require("./menu.context-22d23674.js"),require("./menu.config-14739188.js"),require("./sortableItem.context-5bba7c97.js"),require("./core.esm-3a85aed4.js"),require("react-dom"),require("./chakra-ui-icon.esm-9c49b31b.js"),require("./chakra-ui-theme.esm-d6d72df5.js"),require("./index-8fecff45.js"),require("./index-5a9be08d.js"),require("./motion-7de675ca.js"),require("./chakra-ui-popper.esm-c15ff4a5.js"),require("./chakra-ui-visually-hidden.esm-b758df74.js"),require("./use-animation-state-5054a9f7.esm-c89cafc4.js"),require("./chakra-ui-react.esm-f4206977.js"),require("./zIndeces-10b89ae1.js"),require("./borders.config-90d19902.js"),require("./color.record-134d7650.js"),require("./shadows.config-9e24e611.js"),require("./inheritsLoose-490721fe.js"),require("./chakra-ui-clickable.esm-4394877f.js"),exports.Alert=e.Alert,exports.Avatar=r.Avatar,exports.avatarBadePositions=o.avatarBadePositions,exports.avatarSizes=o.avatarSizes,exports.avatarTypes=o.avatarTypes,exports.avatarVariants=o.avatarVariants,exports.AvatarGroup=t.AvatarGroup,exports.Button=s.Button,exports.buttonSizes=a.buttonSizes,exports.buttonVariants=a.buttonVariants,exports.Card=p.Card,exports.CardPaddingMap=p.CardPaddingMap,exports.cardSizes=p.cardSizes,exports.Checkbox=i.WrappedCheckbox,exports.CheckboxGroup=n.WrappedCheckboxGroup,Object.defineProperty(exports,"DateFormats",{enumerable:!0,get:function(){return u.DateFormats}}),exports.DatePicker=u.DatePicker,exports.Heading=c.WrappedHeading,exports.headingSizes=x.headingSizes,exports.Icon=d.Icon,exports.IconSizeMap=d.IconSizeMap,exports.iconSizes=d.iconSizes,exports.Link=l.Link,exports.Logo=m.Logo,exports.MenuButton=b.MenuButton,exports.MenuContainer=q.MenuContainer,exports.MenuItem=j.MenuItem,exports.MenuList=C.MenuList,exports.Menu=h.Menu,exports.ModalBody=v.ModalBody,exports.ModalCloseButton=k.ModalCloseButton,exports.ModalFooter=M.ModalFooter,exports.ModalFooterButtons=T.ModalFooterButtons,exports.ModalHeader=f.ModalHeader,exports.Modal=g.Modal,exports.NotificationCounter=I.NotificationCounter,Object.defineProperty(exports,"NotificationCounterVariant",{enumerable:!0,get:function(){return I.NotificationCounterVariant}}),exports.Picture=S.Picture,exports.PopoverFooter=P.PopoverFooter,exports.PopoverHeader=y.PopoverHeader,exports.Popover=B.Popover,exports.popoverPlacements=D.popoverPlacements,exports.popoverSizes=D.popoverSizes,exports.popoverTriggerTypes=D.popoverTriggerTypes,exports.popoverVariants=D.popoverVariants,exports.Radio=L.Radio,exports.RadioGroup=F.WrappedRadioGroup,exports.RatingDot=A.RatingDot,exports.RatingDots=G.RatingDots,exports.Select=H.WrappedSelect,exports.DragHandle=w.DragHandle,exports.SortableItem=O.SortableItem,exports.SortableOverlay=z.SortableOverlay,exports.SortableList=R.SortableList,exports.Spinner=N.Spinner,exports.Switch=W.WrappedSwitch,exports.Tab=V.Tab,exports.Tabs=E.Tabs,exports.TabsLayout=K.TabsLayout,exports.Tag=Q.Tag,exports.closeButtonDisplays=Q.closeButtonDisplays,exports.tagSizes=Q.tagSizes,exports.Text=U.WrappedText,exports.textSizes=_.textSizes,exports.Textarea=$.WrappedTextArea,exports.TextInput=J.WrappedTextInput,Object.defineProperty(exports,"Meridiem",{enumerable:!0,get:function(){return X.Meridiem}}),exports.TimePicker=X.TimePicker,exports.TimeRange=Y.TimeRange,exports.useToast=Z.useToast,exports.Tooltip=ee.Tooltip,exports.withDarkMode=re.withDarkMode,exports.withTheme=re.withTheme,exports.useTheme=oe.useTheme,exports.KibbleThemeProvider=te.KibbleThemeProvider,exports.theme=te.theme,exports.Accordion=se.Accordion,exports.AccordionButton=se.AccordionButton,exports.AccordionIcon=se.AccordionIcon,exports.AccordionItem=se.AccordionItem,exports.AccordionPanel=se.AccordionPanel,exports.NumberDecrementStepper=se.NumberDecrementStepper,exports.NumberIncrementStepper=se.NumberIncrementStepper,exports.NumberInput=se.NumberInput,exports.NumberInputField=se.NumberInputField,exports.NumberInputStepper=se.NumberInputStepper,exports.PinInput=se.PinInput,exports.PinInputField=se.PinInputField,exports.Progress=se.Progress,exports.Skeleton=se.Skeleton,exports.SkeletonText=se.SkeletonText,exports.Table=se.Table,exports.TableCaption=se.TableCaption,exports.TableContainer=se.TableContainer,exports.Tbody=se.Tbody,exports.Td=se.Td,exports.Tfoot=se.Tfoot,exports.Th=se.Th,exports.Thead=se.Thead,exports.Tr=se.Tr,exports.AlertDialog=ae.AlertDialog,exports.AlertDialogBody=ae.ModalBody,exports.AlertDialogContent=ae.AlertDialogContent,exports.AlertDialogFooter=ae.ModalFooter,exports.AlertDialogHeader=ae.ModalHeader,exports.AlertDialogOverlay=ae.ModalOverlay,exports.CModal=ae.Modal,exports.CModalBody=ae.ModalBody,exports.CModalCloseButton=ae.ModalCloseButton,exports.CModalFooter=ae.ModalFooter,exports.CModalHeader=ae.ModalHeader,exports.Collapse=ae.Collapse,exports.Drawer=ae.Drawer,exports.DrawerBody=ae.ModalBody,exports.DrawerCloseButton=ae.ModalCloseButton,exports.DrawerContent=ae.DrawerContent,exports.DrawerFooter=ae.ModalFooter,exports.DrawerHeader=ae.ModalHeader,exports.DrawerOverlay=ae.ModalOverlay,exports.ModalContent=ae.ModalContent,exports.ModalOverlay=ae.ModalOverlay,exports.Badge=pe.Badge,exports.Box=pe.Box,exports.Center=pe.Center,exports.Circle=pe.Circle,exports.Code=pe.Code,exports.Container=pe.Container,exports.Divider=pe.Divider,exports.Flex=pe.Flex,exports.Grid=pe.Grid,exports.GridItem=pe.GridItem,exports.HStack=pe.HStack,exports.LinkBox=pe.LinkBox,exports.LinkOverlay=pe.LinkOverlay,exports.List=pe.List,exports.ListItem=pe.ListItem,exports.OrderedList=pe.OrderedList,exports.SimpleGrid=pe.SimpleGrid,exports.Spacer=pe.Spacer,exports.Square=pe.Square,exports.Stack=pe.Stack,exports.UnorderedList=pe.UnorderedList,exports.VStack=pe.VStack,exports.Wrap=pe.Wrap,exports.WrapItem=pe.WrapItem,exports.ButtonGroup=ie.ButtonGroup,exports.CButton=ie.Button,exports.IconButton=ie.IconButton,exports.CAlert=ne.Alert,exports.CAvatar=ue.Avatar,exports.CCheckboxGroup=ce.CheckboxGroup,exports.useCheckbox=ce.useCheckbox,exports.useCheckboxGroup=ce.useCheckboxGroup,exports.CInput=xe.Input,exports.InputGroup=xe.InputGroup,exports.InputLeftAddon=xe.InputLeftAddon,exports.InputLeftElement=xe.InputLeftElement,exports.InputRightElement=xe.InputRightElement,exports.CMenu=de.Menu,exports.CMenuButton=de.MenuButton,exports.CMenuItem=de.MenuItem,exports.CMenuList=de.MenuList,exports.MenuDivider=de.MenuDivider,exports.MenuGroup=de.MenuGroup,exports.MenuItemOption=de.MenuItemOption,exports.CPopover=le.Popover,exports.CPopoverBody=le.PopoverBody,exports.CPopoverFooter=le.PopoverFooter,exports.CPopoverHeader=le.PopoverHeader,exports.PopoverArrow=le.PopoverArrow,exports.PopoverContent=le.PopoverContent,exports.PopoverTrigger=le.PopoverTrigger,exports.usePopoverContext=le.usePopoverContext,exports.CRadioGroup=me.RadioGroup,exports.useRadio=me.useRadio,exports.useRadioGroup=me.useRadioGroup,exports.CSelect=be.Select,exports.CTab=qe.Tab,exports.CTabs=qe.Tabs,exports.TabList=qe.TabList,exports.TabPanel=qe.TabPanel,exports.TabPanels=qe.TabPanels,exports.CTextarea=je.Textarea,exports.FormControl=Ce.FormControl,exports.FormErrorMessage=Ce.FormErrorMessage,exports.FormHelperText=Ce.FormHelperText,exports.FormLabel=Ce.FormLabel,exports.Hide=he.Hide,exports.Show=he.Show,exports.useBreakpoint=he.useBreakpoint,exports.useBreakpointValue=he.useBreakpointValue,exports.useMediaQuery=he.useMediaQuery,exports.Image=ve.Image$1,exports.keyframes=ke.keyframes,exports.useColorMode=ke.useColorMode,exports.Portal=Me.Portal,exports.useConst=Te.useConst,exports.useDisclosure=Te.useDisclosure,exports.useInterval=Te.useInterval,exports.useOutsideClick=Te.useOutsideClick;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./alert.component-1e5e1e1b.js"),r=require("./avatar.component-0d100e3f.js"),o=require("./avatar.types-a87ebfb5.js"),t=require("./avatarGroup.component-2b8c0ab4.js"),s=require("./button.component-d4c1718b.js"),a=require("./button.types-f42b599b.js"),p=require("./card.component-de5d4b2a.js"),i=require("./checkbox.component-eec36cbb.js"),n=require("./checkboxGroup.component-af84b411.js"),u=require("./datepicker.component-e34bb912.js"),x=require("./heading.component-e55f8364.js"),c=require("./heading.types-b6ca7d59.js"),d=require("./icon.component-100b924b.js"),l=require("./link.component-d28bdaea.js"),m=require("./logo.component-cea68030.js"),b=require("./menuButton.component-bc14c030.js"),q=require("./menuContainer.component-3e1e324b.js"),j=require("./menuItem.component-88d5a4b5.js"),C=require("./menuList.component-34a5c82e.js"),h=require("./menu.component-ada58aff.js"),v=require("./modalBody.component-345aaa1b.js"),k=require("./modalCloseButton.component-415049d6.js"),M=require("./modalFooter.component-1c9fcc61.js"),T=require("./modalFooterButtons.component-c34c567e.js"),f=require("./modalHeader.component-204451e0.js"),g=require("./modal.component-0d68beaa.js"),I=require("./notificationCounter.component-24f3f4ab.js"),S=require("./picture.component-19489bee.js"),P=require("./popoverFooter.component-7e0b193f.js"),y=require("./popoverHeader.component-c6812c03.js"),B=require("./popover.component-0c3ec017.js"),D=require("./popover.types-bc105ea7.js"),L=require("./radio.component-2502a55b.js"),F=require("./radioGroup.component-a794a9c9.js"),A=require("./ratingDot.component-01592415.js"),G=require("./ratingDots.component-f7677abd.js"),H=require("./select.component-b0b801a2.js"),w=require("./dragHandle.component-d95bb9e4.js"),O=require("./sortableItem.component-3bdead95.js"),z=require("./sortableOverlay.component-39d84330.js"),R=require("./sortableList.component-2c36f685.js"),N=require("./spinner.component-39040867.js"),W=require("./switch.component-753b45d3.js"),V=require("./tab.component-9395a9e2.js"),E=require("./tabs.component-f7a37a9b.js"),K=require("./tabsLayout.component-9b90c425.js"),Q=require("./tag.types-f979ec63.js"),U=require("./text.component-057889c3.js"),_=require("./text.types-fef8ead3.js"),$=require("./textarea.component-3365d082.js"),J=require("./textInput.component-85dce08f.js"),X=require("./timePicker.component-3249b590.js"),Y=require("./timeRange.component-1b54aa9e.js"),Z=require("./useToast-433a0f38.js"),ee=require("./tooltip.component-197bff7c.js"),re=require("./withTheme-e33ed8bc.js"),oe=require("./useTheme-8873c39f.js"),te=require("./theme.provider-e1100d0a.js"),se=require("./chakra-ui-skeleton.esm-739cf3ea.js"),ae=require("./chakra-ui-modal.esm-a00f2bce.js"),pe=require("./chakra-ui-layout.esm-6ee578f7.js"),ie=require("./chakra-ui-button.esm-bd065780.js"),ne=require("./chakra-ui-alert.esm-17eebb99.js"),ue=require("./chakra-ui-avatar.esm-eee70d3a.js"),xe=require("./chakra-ui-checkbox.esm-4cded6a7.js"),ce=require("./chakra-ui-input.esm-5fd07056.js"),de=require("./chakra-ui-menu.esm-1ed98193.js"),le=require("./chakra-ui-popover.esm-1e836c11.js"),me=require("./chakra-ui-radio.esm-f310d451.js"),be=require("./chakra-ui-select.esm-793cf4de.js"),qe=require("./chakra-ui-tabs.esm-e6372403.js"),je=require("./chakra-ui-textarea.esm-23fad4cd.js"),Ce=require("./chakra-ui-form-control.esm-6d25b1a4.js"),he=require("./chakra-ui-media-query.esm-6217de7e.js"),ve=require("./chakra-ui-image.esm-66324087.js"),ke=require("./chakra-ui-system.esm-c70df670.js"),Me=require("./chakra-ui-portal.esm-bbcb5d1d.js"),Te=require("./chakra-ui-hooks.esm-21b313f3.js");require("./tslib.es6-d6f17add.js"),require("react"),require("./avatar.config-e43cfce7.js"),require("./withFormControl-28664983.js"),require("./index-c90ed78a.js"),require("./withTruncation-60a6b552.js"),require("./icons/index.js"),require("./useIconTextSizeMap-301c4f35.js"),require("./menu.context-22d23674.js"),require("./menu.config-14739188.js"),require("./sortableItem.context-5bba7c97.js"),require("./core.esm-3a85aed4.js"),require("react-dom"),require("./chakra-ui-icon.esm-9c49b31b.js"),require("./chakra-ui-theme.esm-d6d72df5.js"),require("./index-8fecff45.js"),require("./index-5a9be08d.js"),require("./motion-7de675ca.js"),require("./chakra-ui-popper.esm-c15ff4a5.js"),require("./chakra-ui-visually-hidden.esm-b758df74.js"),require("./use-animation-state-5054a9f7.esm-c89cafc4.js"),require("./chakra-ui-react.esm-f4206977.js"),require("./zIndeces-10b89ae1.js"),require("./borders.config-90d19902.js"),require("./color.record-134d7650.js"),require("./shadows.config-9e24e611.js"),require("./inheritsLoose-490721fe.js"),require("./chakra-ui-clickable.esm-4394877f.js"),exports.Alert=e.Alert,exports.Avatar=r.Avatar,exports.avatarBadePositions=o.avatarBadePositions,exports.avatarSizes=o.avatarSizes,exports.avatarTypes=o.avatarTypes,exports.avatarVariants=o.avatarVariants,exports.AvatarGroup=t.AvatarGroup,exports.Button=s.Button,exports.buttonSizes=a.buttonSizes,exports.buttonVariants=a.buttonVariants,exports.Card=p.Card,exports.CardPaddingMap=p.CardPaddingMap,exports.cardSizes=p.cardSizes,exports.Checkbox=i.WrappedCheckbox,exports.CheckboxGroup=n.WrappedCheckboxGroup,Object.defineProperty(exports,"DateFormats",{enumerable:!0,get:function(){return u.DateFormats}}),exports.DatePicker=u.DatePicker,exports.Heading=x.WrappedHeading,exports.headingSizes=c.headingSizes,exports.Icon=d.Icon,exports.IconSizeMap=d.IconSizeMap,exports.iconSizes=d.iconSizes,exports.Link=l.Link,exports.Logo=m.Logo,exports.MenuButton=b.MenuButton,exports.MenuContainer=q.MenuContainer,exports.MenuItem=j.MenuItem,exports.MenuList=C.MenuList,exports.Menu=h.Menu,exports.ModalBody=v.ModalBody,exports.ModalCloseButton=k.ModalCloseButton,exports.ModalFooter=M.ModalFooter,exports.ModalFooterButtons=T.ModalFooterButtons,exports.ModalHeader=f.ModalHeader,exports.Modal=g.Modal,exports.NotificationCounter=I.NotificationCounter,Object.defineProperty(exports,"NotificationCounterVariant",{enumerable:!0,get:function(){return I.NotificationCounterVariant}}),exports.Picture=S.Picture,exports.PopoverFooter=P.PopoverFooter,exports.PopoverHeader=y.PopoverHeader,exports.Popover=B.Popover,exports.popoverPlacements=D.popoverPlacements,exports.popoverSizes=D.popoverSizes,exports.popoverTriggerTypes=D.popoverTriggerTypes,exports.popoverVariants=D.popoverVariants,exports.Radio=L.Radio,exports.RadioGroup=F.WrappedRadioGroup,exports.RatingDot=A.RatingDot,exports.RatingDots=G.RatingDots,exports.Select=H.WrappedSelect,exports.DragHandle=w.DragHandle,exports.SortableItem=O.SortableItem,exports.SortableOverlay=z.SortableOverlay,exports.SortableList=R.SortableList,exports.Spinner=N.Spinner,exports.Switch=W.WrappedSwitch,exports.Tab=V.Tab,exports.Tabs=E.Tabs,exports.TabsLayout=K.TabsLayout,exports.Tag=Q.Tag,exports.closeButtonDisplays=Q.closeButtonDisplays,exports.tagSizes=Q.tagSizes,exports.Text=U.WrappedText,exports.textSizes=_.textSizes,exports.Textarea=$.WrappedTextArea,exports.TextInput=J.WrappedTextInput,Object.defineProperty(exports,"Meridiem",{enumerable:!0,get:function(){return X.Meridiem}}),exports.TimePicker=X.TimePicker,exports.TimeRange=Y.TimeRange,exports.useToast=Z.useToast,exports.Tooltip=ee.Tooltip,exports.withDarkMode=re.withDarkMode,exports.withTheme=re.withTheme,exports.useTheme=oe.useTheme,exports.KibbleThemeProvider=te.KibbleThemeProvider,exports.theme=te.theme,exports.Accordion=se.Accordion,exports.AccordionButton=se.AccordionButton,exports.AccordionIcon=se.AccordionIcon,exports.AccordionItem=se.AccordionItem,exports.AccordionPanel=se.AccordionPanel,exports.NumberDecrementStepper=se.NumberDecrementStepper,exports.NumberIncrementStepper=se.NumberIncrementStepper,exports.NumberInput=se.NumberInput,exports.NumberInputField=se.NumberInputField,exports.NumberInputStepper=se.NumberInputStepper,exports.PinInput=se.PinInput,exports.PinInputField=se.PinInputField,exports.Progress=se.Progress,exports.Skeleton=se.Skeleton,exports.SkeletonText=se.SkeletonText,exports.Table=se.Table,exports.TableCaption=se.TableCaption,exports.TableContainer=se.TableContainer,exports.Tbody=se.Tbody,exports.Td=se.Td,exports.Tfoot=se.Tfoot,exports.Th=se.Th,exports.Thead=se.Thead,exports.Tr=se.Tr,exports.AlertDialog=ae.AlertDialog,exports.AlertDialogBody=ae.ModalBody,exports.AlertDialogContent=ae.AlertDialogContent,exports.AlertDialogFooter=ae.ModalFooter,exports.AlertDialogHeader=ae.ModalHeader,exports.AlertDialogOverlay=ae.ModalOverlay,exports.CModal=ae.Modal,exports.CModalBody=ae.ModalBody,exports.CModalCloseButton=ae.ModalCloseButton,exports.CModalFooter=ae.ModalFooter,exports.CModalHeader=ae.ModalHeader,exports.Collapse=ae.Collapse,exports.Drawer=ae.Drawer,exports.DrawerBody=ae.ModalBody,exports.DrawerCloseButton=ae.ModalCloseButton,exports.DrawerContent=ae.DrawerContent,exports.DrawerFooter=ae.ModalFooter,exports.DrawerHeader=ae.ModalHeader,exports.DrawerOverlay=ae.ModalOverlay,exports.ModalContent=ae.ModalContent,exports.ModalOverlay=ae.ModalOverlay,exports.Badge=pe.Badge,exports.Box=pe.Box,exports.Center=pe.Center,exports.Circle=pe.Circle,exports.Code=pe.Code,exports.Container=pe.Container,exports.Divider=pe.Divider,exports.Flex=pe.Flex,exports.Grid=pe.Grid,exports.GridItem=pe.GridItem,exports.HStack=pe.HStack,exports.LinkBox=pe.LinkBox,exports.LinkOverlay=pe.LinkOverlay,exports.List=pe.List,exports.ListItem=pe.ListItem,exports.OrderedList=pe.OrderedList,exports.SimpleGrid=pe.SimpleGrid,exports.Spacer=pe.Spacer,exports.Square=pe.Square,exports.Stack=pe.Stack,exports.UnorderedList=pe.UnorderedList,exports.VStack=pe.VStack,exports.Wrap=pe.Wrap,exports.WrapItem=pe.WrapItem,exports.ButtonGroup=ie.ButtonGroup,exports.CButton=ie.Button,exports.IconButton=ie.IconButton,exports.CAlert=ne.Alert,exports.CAvatar=ue.Avatar,exports.CCheckboxGroup=xe.CheckboxGroup,exports.useCheckbox=xe.useCheckbox,exports.useCheckboxGroup=xe.useCheckboxGroup,exports.CInput=ce.Input,exports.InputGroup=ce.InputGroup,exports.InputLeftAddon=ce.InputLeftAddon,exports.InputLeftElement=ce.InputLeftElement,exports.InputRightElement=ce.InputRightElement,exports.CMenu=de.Menu,exports.CMenuButton=de.MenuButton,exports.CMenuItem=de.MenuItem,exports.CMenuList=de.MenuList,exports.MenuDivider=de.MenuDivider,exports.MenuGroup=de.MenuGroup,exports.MenuItemOption=de.MenuItemOption,exports.CPopover=le.Popover,exports.CPopoverBody=le.PopoverBody,exports.CPopoverFooter=le.PopoverFooter,exports.CPopoverHeader=le.PopoverHeader,exports.PopoverArrow=le.PopoverArrow,exports.PopoverContent=le.PopoverContent,exports.PopoverTrigger=le.PopoverTrigger,exports.usePopoverContext=le.usePopoverContext,exports.CRadioGroup=me.RadioGroup,exports.useRadio=me.useRadio,exports.useRadioGroup=me.useRadioGroup,exports.CSelect=be.Select,exports.CTab=qe.Tab,exports.CTabs=qe.Tabs,exports.TabList=qe.TabList,exports.TabPanel=qe.TabPanel,exports.TabPanels=qe.TabPanels,exports.CTextarea=je.Textarea,exports.FormControl=Ce.FormControl,exports.FormErrorMessage=Ce.FormErrorMessage,exports.FormHelperText=Ce.FormHelperText,exports.FormLabel=Ce.FormLabel,exports.Hide=he.Hide,exports.Show=he.Show,exports.useBreakpoint=he.useBreakpoint,exports.useBreakpointValue=he.useBreakpointValue,exports.useMediaQuery=he.useMediaQuery,exports.Image=ve.Image$1,exports.keyframes=ke.keyframes,exports.useColorMode=ke.useColorMode,exports.Portal=Me.Portal,exports.useConst=Te.useConst,exports.useDisclosure=Te.useDisclosure,exports.useInterval=Te.useInterval,exports.useOutsideClick=Te.useOutsideClick;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),n=require("./menuContainer.component-3e1e324b.js"),r=require("./menuButton.component-bc14c030.js"),u=require("./menuList.component-
|
|
2
|
-
//# sourceMappingURL=menu.component-
|
|
1
|
+
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),n=require("./menuContainer.component-3e1e324b.js"),r=require("./menuButton.component-bc14c030.js"),u=require("./menuList.component-34a5c82e.js"),l=require("./menu.context-22d23674.js"),s=require("./chakra-ui-portal.esm-bbcb5d1d.js"),a=require("./chakra-ui-menu.esm-1ed98193.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(t);exports.Menu=t=>{var{buttonProps:i,customTriggerElement:c,listProps:m,containerProps:d}=t,f=e.__rest(t,["buttonProps","customTriggerElement","listProps","containerProps"]);return o.default.createElement(l.MenuProvider,{menuItems:null==m?void 0:m.menuItems,isMultiSelect:null==m?void 0:m.isMultiSelect,onClose:null==d?void 0:d.onClose},o.default.createElement(n.MenuContainer,Object.assign({isLazy:(null==d?void 0:d.isLazy)||!0},d,f),c?o.default.createElement("customTriggerElement",{as:a.MenuButton}):o.default.createElement(r.MenuButton,Object.assign({},i)),o.default.createElement((({children:e})=>(null==m?void 0:m.shouldUsePortal)?o.default.createElement(s.Portal,null,e):o.default.createElement(o.default.Fragment,null,e)),null,o.default.createElement(u.MenuList,Object.assign({},m,{isMatchWidthSet:f.matchWidth,menuItems:null==m?void 0:m.menuItems})))))};
|
|
2
|
+
//# sourceMappingURL=menu.component-ada58aff.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.component-
|
|
1
|
+
{"version":3,"file":"menu.component-ada58aff.js","sources":["../src/components/Menu/menu.component.tsx"],"sourcesContent":["import React, { FunctionComponent, ReactNode } from 'react';\nimport { MenuProps as CMenuProps, MenuButton as CMenuButton, Portal as CPortal } from '@chakra-ui/react';\nimport { MenuContainer, MenuContainerProps } from './components/MenuContainer/menuContainer.component';\nimport { MenuButton, MenuButtonProps } from './components/MenuButton/menuButton.component';\nimport { MenuList, MenuListProps } from './components/MenuList/menuList.component';\nimport { MenuProvider } from './context/menu.context';\n\nexport interface KMenuProps {\n buttonProps?: MenuButtonProps;\n customTriggerElement?: FunctionComponent;\n listProps?: MenuListProps;\n containerProps?: MenuContainerProps;\n}\n\nexport type MenuProps = KMenuProps & Omit<CMenuProps, 'onClose' | 'children'>;\n\nexport const Menu = ({\n buttonProps,\n customTriggerElement,\n listProps,\n containerProps,\n ...props\n}: MenuProps): JSX.Element => {\n const MenuListContainer = ({ children }: { children: ReactNode }): JSX.Element => {\n return listProps?.shouldUsePortal ? <CPortal>{children}</CPortal> : <>{children}</>;\n };\n\n return (\n <MenuProvider\n menuItems={listProps?.menuItems}\n isMultiSelect={listProps?.isMultiSelect}\n onClose={containerProps?.onClose}\n >\n <MenuContainer isLazy={containerProps?.isLazy || true} {...containerProps} {...props}>\n {customTriggerElement ? (\n // @ts-ignore\n <customTriggerElement as={CMenuButton} />\n ) : (\n <MenuButton {...buttonProps} />\n )}\n <MenuListContainer>\n <MenuList {...listProps} isMatchWidthSet={props.matchWidth} menuItems={listProps?.menuItems} />\n </MenuListContainer>\n </MenuContainer>\n </MenuProvider>\n );\n};\n"],"names":["_a","buttonProps","customTriggerElement","listProps","containerProps","props","__rest","React","createElement","MenuProvider","menuItems","isMultiSelect","onClose","MenuContainer","Object","assign","isLazy","as","CMenuButton","MenuButton","children","shouldUsePortal","CPortal","Fragment","MenuList","isMatchWidthSet","matchWidth"],"mappings":"gcAgBqBA,IAAA,IAAAC,YACnBA,EAAWC,qBACXA,EAAoBC,UACpBA,EAASC,eACTA,GAAcJ,EACXK,EALgBC,EAAAA,OAAAN,EAAA,CAAA,cAAA,uBAAA,YAAA,mBAWnB,OACEO,EAAAA,QAAAC,cAACC,EAAAA,aAAY,CACXC,UAAWP,MAAAA,OAAA,EAAAA,EAAWO,UACtBC,cAAeR,MAAAA,OAAS,EAATA,EAAWQ,cAC1BC,QAASR,MAAAA,OAAA,EAAAA,EAAgBQ,SAEzBL,UAAAC,cAACK,EAAAA,cAAcC,OAAAC,OAAA,CAAAC,QAAQZ,MAAAA,OAAA,EAAAA,EAAgBY,UAAU,GAAUZ,EAAoBC,GAC5EH,EAECK,EAAA,QAAAC,cAAA,uBAAA,CAAsBS,GAAIC,EAAAA,aAE1BX,EAAAA,QAACC,cAAAW,EAAAA,WAAeL,OAAAC,OAAA,GAAAd,IAElBM,UAAAC,eAjBoB,EAAGY,SAAAA,MACpBjB,MAAAA,SAAAA,EAAWkB,iBAAkBd,wBAACe,SAAO,KAAEF,GAAsBb,EAAA,QAAAC,cAAAD,EAAAA,QAAAgB,SAAA,KAAGH,IAgBjD,KAChBb,EAAAA,QAACC,cAAAgB,WAAaV,OAAAC,OAAA,GAAAZ,EAAW,CAAAsB,gBAAiBpB,EAAMqB,WAAYhB,UAAWP,MAAAA,OAAA,EAAAA,EAAWO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),l=require("./heading.component-e55f8364.js"),a=require("./text.component-057889c3.js"),n=require("./menuItem.component-88d5a4b5.js"),r=require("./textInput.component-
|
|
2
|
-
//# sourceMappingURL=menuList.component-
|
|
1
|
+
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),l=require("./heading.component-e55f8364.js"),a=require("./text.component-057889c3.js"),n=require("./menuItem.component-88d5a4b5.js"),r=require("./textInput.component-85dce08f.js"),s=require("./chakra-ui-menu.esm-1ed98193.js"),u=require("./button.component-d4c1718b.js"),o=require("./chakra-ui-layout.esm-6ee578f7.js"),i=require("./menu.context-22d23674.js"),c=require("./spinner.component-39040867.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(t);const f=({handleKeyboardNavigation:e,menuItems:l,onSearchCallback:a,searchInputRef:n,setFilteredMenuItems:u,placeholder:o="Search..."})=>{const{isOpen:i}=s.useMenuState(),c=t.useCallback((e=>{const t=e.target.value;if(""!==t&&t){const e=l.filter((e=>{var l;const a="string"==typeof e.label?e.label:null===(l=e.label)||void 0===l?void 0:l.key;return null==a?void 0:a.toLowerCase().includes(t.toLowerCase())}));u(e)}else u(l);a&&a(e)}),[l,a,u]);return t.useEffect((()=>{let e;return i&&(e=setTimeout((()=>{var e;null===(e=null==n?void 0:n.current)||void 0===e||e.focus()}),200)),()=>clearTimeout(e)}),[n,i]),m.default.createElement(r.WrappedTextInput,{className:"MenuList__SearchBar",placeholder:o,onChange:c,mt:1,onKeyDown:t=>e(t,!0),size:"sm",ref:n})},p=({groupName:e,handleToggleAllItems:t,hasSelectedItems:l,isGrouped:a})=>a?m.default.createElement(o.Box,{textAlign:"right",w:"50%",className:"MenuListItem__SelectAllButton"},l?m.default.createElement(u.Button,{variant:"ghostNeutral",iconName:"arrowCircle",size:"xs",onClick:()=>t({groupName:e,clear:!0}),isDisabled:!l},"Clear all"):m.default.createElement(u.Button,{variant:"ghost",size:"xs",onClick:()=>t({groupName:e,clear:!1})},"Select all")):m.default.createElement(o.Box,{mt:"8px",className:"MenuList__SelectAllButtons"},m.default.createElement(o.Flex,{justifyContent:"space-between"},m.default.createElement(u.Button,{variant:"ghost",size:"xs",onClick:()=>t({clear:!1})},"Select all"),m.default.createElement(u.Button,{variant:"ghostNeutral",iconName:"arrowCircle",size:"xs",onClick:()=>t({clear:!0}),isDisabled:!l},"Clear all")));exports.MenuList=r=>{var{canSelectAll:u=!1,canSelectGroups:d=!1,children:h,isGrouped:v=!1,isMatchWidthSet:g,isMultiSelect:S=!1,isSearchable:x=!1,isLoading:b=!1,menuItems:E,onSelect:I,onSelectAll:k,searchPlaceholder:M,shouldRetainSelection:y=!1,shouldTruncateText:C=!0,minW:N="240px",maxW:w,maxH:A="480px",shouldUsePortal:B=!1,emptyStateText:L="No results found"}=r,j=e.__rest(r,["canSelectAll","canSelectGroups","children","isGrouped","isMatchWidthSet","isMultiSelect","isSearchable","isLoading","menuItems","onSelect","onSelectAll","searchPlaceholder","shouldRetainSelection","shouldTruncateText","minW","maxW","maxH","shouldUsePortal","emptyStateText"]);const{filteredMenuItems:T,setFilteredMenuItems:_,allMenuItems:q,groups:G,setGroups:W,focusedItemIndex:F,setFocusedItemIndex:R,searchInputRef:z,menuItemRefs:D}=i.useMenuContext(),H=t.useCallback((e=>{var t,l;if(!(null==D?void 0:D.current))return;const a=0===F,n=F===(null==D?void 0:D.current.length)-1;let r=-1;if("ArrowDown"===e)if(n){if(x)return null===(t=null==z?void 0:z.current)||void 0===t||t.focus(),void R(-1);r=0}else r=F+1;else if("ArrowUp"===e)if(a){if(x)return null===(l=null==z?void 0:z.current)||void 0===l||l.focus(),void R(-1);r=D.current.length-1}else r=F-1;const s=null==D?void 0:D.current[r];s?(null==s||s.focus(),R(r)):R(-1)}),[F,x,D,z,R]),P=t.useCallback(((e,t)=>{e.persist(),(null==D?void 0:D.current)&&("ArrowDown"!==e.key&&"Tab"!==e.key||H("ArrowDown"),"ArrowUp"===e.key&&H("ArrowUp"),"Enter"===e.key&&(e.preventDefault(),e.target.click()))}),[H,D]),U=t.useCallback(((e,t)=>{if(T&&q){const l=[...T],a=l.find((t=>t.value===e.value));S&&a&&(a.isSelected=!a.isSelected),_(l);const n=q.filter((e=>e.isSelected));I&&a&&I(a,n),t&&a&&t(a,n)}}),[q,T,S,I,_]),K=t.useCallback((({groupName:e,clear:t=!1})=>{if(T&&q){const l=[...T],a=[];l.forEach((l=>{e?e===l.groupLabel&&(l.isSelected=!t,l.value&&l.isSelected&&a.push(l.value)):(l.isSelected=!t,l.value&&l.isSelected&&a.push(l.value))})),_(l),k&&k(q.filter((e=>e.isSelected)))}}),[T,q,k,_]);t.useEffect((()=>{if(v){const e=[...new Set(null==T?void 0:T.map((e=>e.groupLabel)))];e.length&&W(e)}}),[T,v,W]);const O=t.useCallback(((e,t)=>e.isPlaceholder?m.default.createElement(m.default.Fragment,{key:e.value}):m.default.createElement(n.MenuItem,Object.assign({},e,{key:`${e.value}${t}`,canSelectAll:u,handleKeyboardNavigation:P,isMultiSelect:S,itemIndex:t.toString(),menuItemRefs:D,onSelect:t=>U(t,e.onSelect),shouldRetainSelection:y,shouldTruncateText:C}))),[P,U,S,D,y,C,u]);if(g||(w="320px"),h)return m.default.createElement(s.MenuList,Object.assign({},j),h);const $=!(null==T?void 0:T.length)||1===(null==T?void 0:T.length)&&!0===T[0].isPlaceholder;return m.default.createElement(s.MenuList,Object.assign({className:"MeuList"},j,{maxW:w||"unset",maxH:A,minW:N,overflow:"hidden auto"}),(x||u&&S)&&m.default.createElement(o.Box,{className:"MenuList__Header",m:"0 12px 8px"},x&&m.default.createElement(f,{handleKeyboardNavigation:P,menuItems:E||[],searchInputRef:z,setFilteredMenuItems:_,placeholder:M}),u&&S&&m.default.createElement(p,{handleToggleAllItems:K,hasSelectedItems:Boolean(null==T?void 0:T.find((e=>e.isSelected))),isGrouped:!1})),m.default.createElement(o.Box,{className:"MenuList__Body",position:"relative"},$?m.default.createElement(o.Box,{textAlign:"center",display:"block",p:3},m.default.createElement(a.WrappedText,{size:"sm",variant:"subtle"},L)):v?null==G?void 0:G.map(((e,t)=>{const a=null==T?void 0:T.filter((t=>t.groupLabel===e));return m.default.createElement(o.Box,{className:"MenuList__Group",key:`${e||"noGroup"}-${t}`},e&&m.default.createElement(o.Flex,{minH:8,pt:2,pr:3,pb:1,pl:5,justify:"space-between",align:"center"},m.default.createElement(o.Box,{textAlign:"left",className:"MenuList__GroupTitle"},m.default.createElement(l.WrappedHeading,{size:"xs"},e)),S&&d&&m.default.createElement(p,{handleToggleAllItems:K,hasSelectedItems:Boolean(null==a?void 0:a.find((e=>e.isSelected))),isGrouped:!0,groupName:e})),null==a?void 0:a.map(((e,t)=>O(e,t))))})):null==T?void 0:T.map(((e,t)=>O(e,t))),b&&m.default.createElement(o.Box,{position:"absolute",w:"100%",h:"100%",top:"0",left:"0",bg:"background.alphaContrast.pressed"},m.default.createElement(o.Flex,{h:"100%",align:"center",justify:"center"},m.default.createElement(c.Spinner,null)))))};
|
|
2
|
+
//# sourceMappingURL=menuList.component-34a5c82e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuList.component-5a00cb30.js","sources":["../src/components/Menu/components/MenuSearchBar/menuSearchBar.component.tsx","../src/components/Menu/components/MenuSelectAllButtons/menuSelectAllButtons.component.tsx","../src/components/Menu/components/MenuList/menuList.component.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n Dispatch,\n SetStateAction,\n useCallback,\n KeyboardEvent,\n MutableRefObject,\n useEffect,\n} from 'react';\nimport { TextInput } from '../../../TextInput/textInput.component';\nimport { MenuItemProps } from '../MenuItem/menuItem.component';\nimport { useMenuState } from '@chakra-ui/react';\n\nexport interface MenuSearchBarProps {\n handleKeyboardNavigation: (e: KeyboardEvent<HTMLInputElement>, elementIsInputField: boolean) => void;\n menuItems: MenuItemProps[];\n onSearchCallback?: (e: ChangeEventHandler) => void;\n searchInputRef?: MutableRefObject<HTMLInputElement | null>;\n setFilteredMenuItems: Dispatch<SetStateAction<MenuItemProps[]>>;\n placeholder?: string;\n}\n\nexport const MenuSearchBar = ({\n handleKeyboardNavigation,\n menuItems,\n onSearchCallback,\n searchInputRef,\n setFilteredMenuItems,\n placeholder = 'Search...',\n}: MenuSearchBarProps): JSX.Element => {\n const { isOpen } = useMenuState();\n\n const handleSearch = useCallback(\n (e) => {\n const searchInput = e.target.value;\n\n if (searchInput === '' || !searchInput) {\n setFilteredMenuItems(menuItems);\n } else {\n const filterdItems = menuItems.filter((item) => {\n const labelText = typeof item.label === 'string' ? item.label : (item.label?.key as string);\n\n return labelText?.toLowerCase().includes(searchInput.toLowerCase());\n });\n setFilteredMenuItems(filterdItems);\n }\n\n if (onSearchCallback) {\n onSearchCallback(e);\n }\n },\n [menuItems, onSearchCallback, setFilteredMenuItems],\n );\n\n useEffect(() => {\n let focusTimeout: NodeJS.Timeout;\n\n if (isOpen) {\n focusTimeout = setTimeout(() => {\n searchInputRef?.current?.focus();\n }, 200);\n }\n\n return (): void => clearTimeout(focusTimeout);\n }, [searchInputRef, isOpen]);\n\n return (\n <TextInput\n className=\"MenuList__SearchBar\"\n placeholder={placeholder}\n onChange={handleSearch}\n mt={1}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => handleKeyboardNavigation(e, true)}\n size=\"sm\"\n ref={searchInputRef}\n />\n );\n};\n","import React from 'react';\nimport { Box, Flex } from '@chakra-ui/react';\nimport { Button } from '../../../Button/button.component';\n\nexport interface MenuSelectAllButtonsProps {\n groupName?: string;\n handleToggleAllItems: ({ groupName, clear }: { groupName?: string; clear?: boolean }) => void;\n hasSelectedItems: boolean;\n isGrouped: boolean;\n}\n\nexport const MenuSelectAllButtons = ({\n groupName,\n handleToggleAllItems,\n hasSelectedItems,\n isGrouped,\n}: MenuSelectAllButtonsProps): JSX.Element => {\n if (isGrouped) {\n return (\n <Box textAlign=\"right\" w=\"50%\" className=\"MenuListItem__SelectAllButton\">\n {hasSelectedItems ? (\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ groupName, clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n ) : (\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ groupName, clear: false })}>\n Select all\n </Button>\n )}\n </Box>\n );\n }\n\n return (\n <Box mt=\"8px\" className=\"MenuList__SelectAllButtons\">\n <Flex justifyContent=\"space-between\">\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ clear: false })}>\n Select all\n </Button>\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n </Flex>\n </Box>\n );\n};\n","import React, { useCallback, KeyboardEvent, useEffect } from 'react';\nimport { MenuList as CMenuList, MenuListProps as CMenuListProps, Box, Flex } from '@chakra-ui/react';\nimport { Heading } from '../../../Heading/heading.component';\nimport { Text } from '../../../Text/text.component';\nimport { MenuItem, MenuItemProps } from '../MenuItem/menuItem.component';\nimport { MenuSearchBar } from '../MenuSearchBar/menuSearchBar.component';\nimport { MenuSelectAllButtons } from '../MenuSelectAllButtons/menuSelectAllButtons.component';\nimport { useMenuContext } from '../../context/menu.context';\nimport { Spinner } from 'components/Spinner';\n\nexport interface KMenuListProps {\n canSelectAll?: boolean;\n canSelectGroups?: boolean;\n isGrouped?: boolean;\n isLoading?: boolean;\n isMatchWidthSet?: boolean;\n isMultiSelect?: boolean;\n isSearchable?: boolean;\n menuItems?: MenuItemProps[];\n onSelect?:\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => void)\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => Promise<void>);\n onSelectAll?: ((selectedItems: MenuItemProps[]) => void) | ((selectedItems: MenuItemProps[]) => Promise<void>);\n searchPlaceholder?: string;\n shouldRetainSelection?: boolean;\n shouldTruncateText?: boolean;\n shouldUsePortal?: boolean;\n emptyStateText?: string;\n}\n\nexport type MenuListProps = KMenuListProps & Omit<CMenuListProps, 'onSelect'>;\n\nexport const MenuList = ({\n canSelectAll = false,\n canSelectGroups = false,\n children,\n isGrouped = false,\n isMatchWidthSet,\n isMultiSelect = false,\n isSearchable = false,\n isLoading = false,\n menuItems,\n onSelect,\n onSelectAll,\n searchPlaceholder,\n shouldRetainSelection = false,\n shouldTruncateText = true,\n minW = '240px',\n maxW,\n maxH = '480px',\n shouldUsePortal = false,\n emptyStateText = 'No results found',\n ...rest\n}: MenuListProps): JSX.Element => {\n const {\n filteredMenuItems,\n setFilteredMenuItems,\n allMenuItems,\n groups,\n setGroups,\n focusedItemIndex,\n setFocusedItemIndex,\n searchInputRef,\n menuItemRefs,\n } = useMenuContext();\n\n const focusNextListItem = useCallback(\n (direction) => {\n if (!menuItemRefs?.current) return;\n\n const isFirstOption = focusedItemIndex === 0;\n const isLastOption = focusedItemIndex === menuItemRefs?.current.length - 1;\n let newIndex = -1;\n\n if (direction === 'ArrowDown') {\n if (isLastOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = 0;\n } else {\n newIndex = focusedItemIndex + 1;\n }\n } else if (direction === 'ArrowUp') {\n if (isFirstOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = menuItemRefs.current.length - 1;\n } else {\n newIndex = focusedItemIndex - 1;\n }\n }\n\n const nextListItem = menuItemRefs?.current[newIndex];\n\n if (nextListItem) {\n nextListItem?.focus();\n setFocusedItemIndex(newIndex);\n } else {\n setFocusedItemIndex(-1);\n }\n },\n [focusedItemIndex, isSearchable, menuItemRefs, searchInputRef, setFocusedItemIndex],\n );\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLInputElement | HTMLDivElement>, elementIsInputField): void => {\n e.persist();\n\n if (!menuItemRefs?.current) return;\n\n if (e.key === 'ArrowDown' || e.key === 'Tab') {\n focusNextListItem('ArrowDown');\n }\n\n if (e.key === 'ArrowUp') {\n focusNextListItem('ArrowUp');\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n (e.target as HTMLElement).click();\n }\n },\n [focusNextListItem, menuItemRefs],\n );\n\n const handleToggleSingleItem = useCallback(\n (selectedValue: MenuItemProps, itemOnSelect) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const selectedItem = _filteredMenuItemsCopy.find((item) => item.value === selectedValue.value);\n\n if (isMultiSelect && selectedItem) {\n selectedItem.isSelected = !selectedItem.isSelected;\n }\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n const allSelectedItems = allMenuItems.filter((item) => item.isSelected);\n\n if (onSelect && selectedItem) {\n onSelect(selectedItem, allSelectedItems);\n }\n\n if (itemOnSelect && selectedItem) {\n itemOnSelect(selectedItem, allSelectedItems);\n }\n }\n },\n [allMenuItems, filteredMenuItems, isMultiSelect, onSelect, setFilteredMenuItems],\n );\n\n const handleToggleAllItems = useCallback(\n ({ groupName, clear = false }: { groupName?: string; clear?: boolean }) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const value: string[] = [];\n\n _filteredMenuItemsCopy.forEach((item) => {\n if (groupName) {\n if (groupName === item.groupLabel) {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n } else {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n });\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n if (onSelectAll) {\n onSelectAll(allMenuItems.filter((item) => item.isSelected));\n }\n }\n },\n [filteredMenuItems, allMenuItems, onSelectAll, setFilteredMenuItems],\n );\n\n useEffect(() => {\n if (isGrouped) {\n const groupNames = [...new Set(filteredMenuItems?.map((item) => item.groupLabel))];\n if (groupNames.length) {\n setGroups(groupNames);\n }\n }\n }, [filteredMenuItems, isGrouped, setGroups]);\n\n const getMenuItem = useCallback(\n (item: MenuItemProps, index: number) => {\n if (item.isPlaceholder) return <React.Fragment key={item.value}></React.Fragment>;\n\n return (\n <MenuItem\n {...item}\n key={`${item.value}${index}`}\n canSelectAll={canSelectAll}\n handleKeyboardNavigation={handleKeyboardNavigation}\n isMultiSelect={isMultiSelect}\n itemIndex={index.toString()}\n menuItemRefs={menuItemRefs}\n onSelect={(selectedItem: MenuItemProps): void => handleToggleSingleItem(selectedItem, item.onSelect)}\n shouldRetainSelection={shouldRetainSelection}\n shouldTruncateText={shouldTruncateText}\n />\n );\n },\n [\n handleKeyboardNavigation,\n handleToggleSingleItem,\n isMultiSelect,\n menuItemRefs,\n shouldRetainSelection,\n shouldTruncateText,\n canSelectAll,\n ],\n );\n\n if (!isMatchWidthSet) {\n maxW = '320px';\n }\n\n // Return default Chakra menu if user passes in custom child elements\n if (children) {\n return <CMenuList {...rest}>{children}</CMenuList>;\n }\n\n const shouldShowEmptyState =\n !filteredMenuItems?.length || (filteredMenuItems?.length === 1 && filteredMenuItems[0].isPlaceholder === true);\n\n return (\n <CMenuList className=\"MeuList\" {...rest} maxW={maxW || 'unset'} maxH={maxH} minW={minW} overflow=\"hidden auto\">\n {(isSearchable || (canSelectAll && isMultiSelect)) && (\n <Box className=\"MenuList__Header\" m=\"0 12px 8px\">\n {isSearchable && (\n <MenuSearchBar\n handleKeyboardNavigation={handleKeyboardNavigation}\n menuItems={menuItems || []}\n searchInputRef={searchInputRef}\n setFilteredMenuItems={setFilteredMenuItems}\n placeholder={searchPlaceholder}\n />\n )}\n {canSelectAll && isMultiSelect && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(filteredMenuItems?.find((item) => item.isSelected))}\n isGrouped={false}\n />\n )}\n </Box>\n )}\n <Box className=\"MenuList__Body\" position=\"relative\">\n {shouldShowEmptyState ? (\n <Box textAlign=\"center\" display=\"block\" p={3}>\n <Text size=\"sm\" variant=\"subtle\">\n {emptyStateText}\n </Text>\n </Box>\n ) : isGrouped ? (\n groups?.map((groupName, index) => {\n const menuItems = filteredMenuItems?.filter((item) => item.groupLabel === groupName);\n return (\n <Box className=\"MenuList__Group\" key={`${groupName || 'noGroup'}-${index}`}>\n {groupName && (\n <Flex minH={8} pt={2} pr={3} pb={1} pl={5} justify=\"space-between\" align=\"center\">\n <Box textAlign=\"left\" className=\"MenuList__GroupTitle\">\n <Heading size=\"xs\">{groupName}</Heading>\n </Box>\n {isMultiSelect && canSelectGroups && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(menuItems?.find((item) => item.isSelected))}\n isGrouped={true}\n groupName={groupName}\n />\n )}\n </Flex>\n )}\n {menuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })}\n </Box>\n );\n })\n ) : (\n filteredMenuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })\n )}\n {isLoading && (\n <Box position=\"absolute\" w=\"100%\" h=\"100%\" top=\"0\" left=\"0\" bg=\"background.alphaContrast.pressed\">\n <Flex h=\"100%\" align=\"center\" justify=\"center\">\n <Spinner />\n </Flex>\n </Box>\n )}\n </Box>\n </CMenuList>\n );\n};\n"],"names":["MenuSearchBar","handleKeyboardNavigation","menuItems","onSearchCallback","searchInputRef","setFilteredMenuItems","placeholder","isOpen","useMenuState","handleSearch","useCallback","e","searchInput","target","value","filterdItems","filter","item","labelText","label","_a","key","toLowerCase","includes","useEffect","focusTimeout","setTimeout","current","focus","clearTimeout","React","createElement","TextInput","WrappedTextInput","className","onChange","mt","onKeyDown","size","ref","MenuSelectAllButtons","groupName","handleToggleAllItems","hasSelectedItems","isGrouped","Box","textAlign","w","Button","variant","iconName","onClick","clear","isDisabled","Flex","justifyContent","canSelectAll","canSelectGroups","children","isMatchWidthSet","isMultiSelect","isSearchable","isLoading","onSelect","onSelectAll","searchPlaceholder","shouldRetainSelection","shouldTruncateText","minW","maxW","maxH","shouldUsePortal","emptyStateText","rest","__rest","filteredMenuItems","allMenuItems","groups","setGroups","focusedItemIndex","setFocusedItemIndex","menuItemRefs","useMenuContext","focusNextListItem","direction","isFirstOption","isLastOption","length","newIndex","_b","nextListItem","elementIsInputField","persist","preventDefault","click","handleToggleSingleItem","selectedValue","itemOnSelect","_filteredMenuItemsCopy","selectedItem","find","isSelected","allSelectedItems","forEach","groupLabel","push","groupNames","Set","map","getMenuItem","index","isPlaceholder","Fragment","MenuItem","Object","assign","itemIndex","toString","CMenuList","shouldShowEmptyState","overflow","m","Boolean","position","display","p","Text","WrappedText","minH","pt","pr","pb","pl","justify","align","Heading","h","top","left","bg","Spinner"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menuList.component-34a5c82e.js","sources":["../src/components/Menu/components/MenuSearchBar/menuSearchBar.component.tsx","../src/components/Menu/components/MenuSelectAllButtons/menuSelectAllButtons.component.tsx","../src/components/Menu/components/MenuList/menuList.component.tsx"],"sourcesContent":["import React, {\n ChangeEventHandler,\n Dispatch,\n SetStateAction,\n useCallback,\n KeyboardEvent,\n MutableRefObject,\n useEffect,\n} from 'react';\nimport { TextInput } from '../../../TextInput/textInput.component';\nimport { MenuItemProps } from '../MenuItem/menuItem.component';\nimport { useMenuState } from '@chakra-ui/react';\n\nexport interface MenuSearchBarProps {\n handleKeyboardNavigation: (e: KeyboardEvent<HTMLInputElement>, elementIsInputField: boolean) => void;\n menuItems: MenuItemProps[];\n onSearchCallback?: (e: ChangeEventHandler) => void;\n searchInputRef?: MutableRefObject<HTMLInputElement | null>;\n setFilteredMenuItems: Dispatch<SetStateAction<MenuItemProps[]>>;\n placeholder?: string;\n}\n\nexport const MenuSearchBar = ({\n handleKeyboardNavigation,\n menuItems,\n onSearchCallback,\n searchInputRef,\n setFilteredMenuItems,\n placeholder = 'Search...',\n}: MenuSearchBarProps): JSX.Element => {\n const { isOpen } = useMenuState();\n\n const handleSearch = useCallback(\n (e) => {\n const searchInput = e.target.value;\n\n if (searchInput === '' || !searchInput) {\n setFilteredMenuItems(menuItems);\n } else {\n const filterdItems = menuItems.filter((item) => {\n const labelText = typeof item.label === 'string' ? item.label : (item.label?.key as string);\n\n return labelText?.toLowerCase().includes(searchInput.toLowerCase());\n });\n setFilteredMenuItems(filterdItems);\n }\n\n if (onSearchCallback) {\n onSearchCallback(e);\n }\n },\n [menuItems, onSearchCallback, setFilteredMenuItems],\n );\n\n useEffect(() => {\n let focusTimeout: NodeJS.Timeout;\n\n if (isOpen) {\n focusTimeout = setTimeout(() => {\n searchInputRef?.current?.focus();\n }, 200);\n }\n\n return (): void => clearTimeout(focusTimeout);\n }, [searchInputRef, isOpen]);\n\n return (\n <TextInput\n className=\"MenuList__SearchBar\"\n placeholder={placeholder}\n onChange={handleSearch}\n mt={1}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => handleKeyboardNavigation(e, true)}\n size=\"sm\"\n ref={searchInputRef}\n />\n );\n};\n","import React from 'react';\nimport { Box, Flex } from '@chakra-ui/react';\nimport { Button } from '../../../Button/button.component';\n\nexport interface MenuSelectAllButtonsProps {\n groupName?: string;\n handleToggleAllItems: ({ groupName, clear }: { groupName?: string; clear?: boolean }) => void;\n hasSelectedItems: boolean;\n isGrouped: boolean;\n}\n\nexport const MenuSelectAllButtons = ({\n groupName,\n handleToggleAllItems,\n hasSelectedItems,\n isGrouped,\n}: MenuSelectAllButtonsProps): JSX.Element => {\n if (isGrouped) {\n return (\n <Box textAlign=\"right\" w=\"50%\" className=\"MenuListItem__SelectAllButton\">\n {hasSelectedItems ? (\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ groupName, clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n ) : (\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ groupName, clear: false })}>\n Select all\n </Button>\n )}\n </Box>\n );\n }\n\n return (\n <Box mt=\"8px\" className=\"MenuList__SelectAllButtons\">\n <Flex justifyContent=\"space-between\">\n <Button variant=\"ghost\" size=\"xs\" onClick={(): void => handleToggleAllItems({ clear: false })}>\n Select all\n </Button>\n <Button\n variant=\"ghostNeutral\"\n iconName=\"arrowCircle\"\n size=\"xs\"\n onClick={(): void => handleToggleAllItems({ clear: true })}\n isDisabled={!hasSelectedItems}\n >\n Clear all\n </Button>\n </Flex>\n </Box>\n );\n};\n","import React, { useCallback, KeyboardEvent, useEffect } from 'react';\nimport { MenuList as CMenuList, MenuListProps as CMenuListProps, Box, Flex } from '@chakra-ui/react';\nimport { Heading } from '../../../Heading/heading.component';\nimport { Text } from '../../../Text/text.component';\nimport { MenuItem, MenuItemProps } from '../MenuItem/menuItem.component';\nimport { MenuSearchBar } from '../MenuSearchBar/menuSearchBar.component';\nimport { MenuSelectAllButtons } from '../MenuSelectAllButtons/menuSelectAllButtons.component';\nimport { useMenuContext } from '../../context/menu.context';\nimport { Spinner } from 'components/Spinner';\n\nexport interface KMenuListProps {\n canSelectAll?: boolean;\n canSelectGroups?: boolean;\n isGrouped?: boolean;\n isLoading?: boolean;\n isMatchWidthSet?: boolean;\n isMultiSelect?: boolean;\n isSearchable?: boolean;\n menuItems?: MenuItemProps[];\n onSelect?:\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => void)\n | ((selectedItem: MenuItemProps, allSelectedItems?: MenuItemProps[]) => Promise<void>);\n onSelectAll?: ((selectedItems: MenuItemProps[]) => void) | ((selectedItems: MenuItemProps[]) => Promise<void>);\n searchPlaceholder?: string;\n shouldRetainSelection?: boolean;\n shouldTruncateText?: boolean;\n shouldUsePortal?: boolean;\n emptyStateText?: string;\n}\n\nexport type MenuListProps = KMenuListProps & Omit<CMenuListProps, 'onSelect'>;\n\nexport const MenuList = ({\n canSelectAll = false,\n canSelectGroups = false,\n children,\n isGrouped = false,\n isMatchWidthSet,\n isMultiSelect = false,\n isSearchable = false,\n isLoading = false,\n menuItems,\n onSelect,\n onSelectAll,\n searchPlaceholder,\n shouldRetainSelection = false,\n shouldTruncateText = true,\n minW = '240px',\n maxW,\n maxH = '480px',\n shouldUsePortal = false,\n emptyStateText = 'No results found',\n ...rest\n}: MenuListProps): JSX.Element => {\n const {\n filteredMenuItems,\n setFilteredMenuItems,\n allMenuItems,\n groups,\n setGroups,\n focusedItemIndex,\n setFocusedItemIndex,\n searchInputRef,\n menuItemRefs,\n } = useMenuContext();\n\n const focusNextListItem = useCallback(\n (direction) => {\n if (!menuItemRefs?.current) return;\n\n const isFirstOption = focusedItemIndex === 0;\n const isLastOption = focusedItemIndex === menuItemRefs?.current.length - 1;\n let newIndex = -1;\n\n if (direction === 'ArrowDown') {\n if (isLastOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = 0;\n } else {\n newIndex = focusedItemIndex + 1;\n }\n } else if (direction === 'ArrowUp') {\n if (isFirstOption) {\n if (isSearchable) {\n searchInputRef?.current?.focus();\n setFocusedItemIndex(-1);\n return;\n }\n\n newIndex = menuItemRefs.current.length - 1;\n } else {\n newIndex = focusedItemIndex - 1;\n }\n }\n\n const nextListItem = menuItemRefs?.current[newIndex];\n\n if (nextListItem) {\n nextListItem?.focus();\n setFocusedItemIndex(newIndex);\n } else {\n setFocusedItemIndex(-1);\n }\n },\n [focusedItemIndex, isSearchable, menuItemRefs, searchInputRef, setFocusedItemIndex],\n );\n\n const handleKeyboardNavigation = useCallback(\n (e: KeyboardEvent<HTMLInputElement | HTMLDivElement>, elementIsInputField): void => {\n e.persist();\n\n if (!menuItemRefs?.current) return;\n\n if (e.key === 'ArrowDown' || e.key === 'Tab') {\n focusNextListItem('ArrowDown');\n }\n\n if (e.key === 'ArrowUp') {\n focusNextListItem('ArrowUp');\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n (e.target as HTMLElement).click();\n }\n },\n [focusNextListItem, menuItemRefs],\n );\n\n const handleToggleSingleItem = useCallback(\n (selectedValue: MenuItemProps, itemOnSelect) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const selectedItem = _filteredMenuItemsCopy.find((item) => item.value === selectedValue.value);\n\n if (isMultiSelect && selectedItem) {\n selectedItem.isSelected = !selectedItem.isSelected;\n }\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n const allSelectedItems = allMenuItems.filter((item) => item.isSelected);\n\n if (onSelect && selectedItem) {\n onSelect(selectedItem, allSelectedItems);\n }\n\n if (itemOnSelect && selectedItem) {\n itemOnSelect(selectedItem, allSelectedItems);\n }\n }\n },\n [allMenuItems, filteredMenuItems, isMultiSelect, onSelect, setFilteredMenuItems],\n );\n\n const handleToggleAllItems = useCallback(\n ({ groupName, clear = false }: { groupName?: string; clear?: boolean }) => {\n if (filteredMenuItems && allMenuItems) {\n const _filteredMenuItemsCopy = [...filteredMenuItems];\n const value: string[] = [];\n\n _filteredMenuItemsCopy.forEach((item) => {\n if (groupName) {\n if (groupName === item.groupLabel) {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n } else {\n item.isSelected = !clear;\n\n if (item.value && item.isSelected) {\n value.push(item.value);\n }\n }\n });\n\n setFilteredMenuItems(_filteredMenuItemsCopy);\n\n if (onSelectAll) {\n onSelectAll(allMenuItems.filter((item) => item.isSelected));\n }\n }\n },\n [filteredMenuItems, allMenuItems, onSelectAll, setFilteredMenuItems],\n );\n\n useEffect(() => {\n if (isGrouped) {\n const groupNames = [...new Set(filteredMenuItems?.map((item) => item.groupLabel))];\n if (groupNames.length) {\n setGroups(groupNames);\n }\n }\n }, [filteredMenuItems, isGrouped, setGroups]);\n\n const getMenuItem = useCallback(\n (item: MenuItemProps, index: number) => {\n if (item.isPlaceholder) return <React.Fragment key={item.value}></React.Fragment>;\n\n return (\n <MenuItem\n {...item}\n key={`${item.value}${index}`}\n canSelectAll={canSelectAll}\n handleKeyboardNavigation={handleKeyboardNavigation}\n isMultiSelect={isMultiSelect}\n itemIndex={index.toString()}\n menuItemRefs={menuItemRefs}\n onSelect={(selectedItem: MenuItemProps): void => handleToggleSingleItem(selectedItem, item.onSelect)}\n shouldRetainSelection={shouldRetainSelection}\n shouldTruncateText={shouldTruncateText}\n />\n );\n },\n [\n handleKeyboardNavigation,\n handleToggleSingleItem,\n isMultiSelect,\n menuItemRefs,\n shouldRetainSelection,\n shouldTruncateText,\n canSelectAll,\n ],\n );\n\n if (!isMatchWidthSet) {\n maxW = '320px';\n }\n\n // Return default Chakra menu if user passes in custom child elements\n if (children) {\n return <CMenuList {...rest}>{children}</CMenuList>;\n }\n\n const shouldShowEmptyState =\n !filteredMenuItems?.length || (filteredMenuItems?.length === 1 && filteredMenuItems[0].isPlaceholder === true);\n\n return (\n <CMenuList className=\"MeuList\" {...rest} maxW={maxW || 'unset'} maxH={maxH} minW={minW} overflow=\"hidden auto\">\n {(isSearchable || (canSelectAll && isMultiSelect)) && (\n <Box className=\"MenuList__Header\" m=\"0 12px 8px\">\n {isSearchable && (\n <MenuSearchBar\n handleKeyboardNavigation={handleKeyboardNavigation}\n menuItems={menuItems || []}\n searchInputRef={searchInputRef}\n setFilteredMenuItems={setFilteredMenuItems}\n placeholder={searchPlaceholder}\n />\n )}\n {canSelectAll && isMultiSelect && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(filteredMenuItems?.find((item) => item.isSelected))}\n isGrouped={false}\n />\n )}\n </Box>\n )}\n <Box className=\"MenuList__Body\" position=\"relative\">\n {shouldShowEmptyState ? (\n <Box textAlign=\"center\" display=\"block\" p={3}>\n <Text size=\"sm\" variant=\"subtle\">\n {emptyStateText}\n </Text>\n </Box>\n ) : isGrouped ? (\n groups?.map((groupName, index) => {\n const menuItems = filteredMenuItems?.filter((item) => item.groupLabel === groupName);\n return (\n <Box className=\"MenuList__Group\" key={`${groupName || 'noGroup'}-${index}`}>\n {groupName && (\n <Flex minH={8} pt={2} pr={3} pb={1} pl={5} justify=\"space-between\" align=\"center\">\n <Box textAlign=\"left\" className=\"MenuList__GroupTitle\">\n <Heading size=\"xs\">{groupName}</Heading>\n </Box>\n {isMultiSelect && canSelectGroups && (\n <MenuSelectAllButtons\n handleToggleAllItems={handleToggleAllItems}\n hasSelectedItems={Boolean(menuItems?.find((item) => item.isSelected))}\n isGrouped={true}\n groupName={groupName}\n />\n )}\n </Flex>\n )}\n {menuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })}\n </Box>\n );\n })\n ) : (\n filteredMenuItems?.map((item: MenuItemProps, index: number) => {\n return getMenuItem(item, index);\n })\n )}\n {isLoading && (\n <Box position=\"absolute\" w=\"100%\" h=\"100%\" top=\"0\" left=\"0\" bg=\"background.alphaContrast.pressed\">\n <Flex h=\"100%\" align=\"center\" justify=\"center\">\n <Spinner />\n </Flex>\n </Box>\n )}\n </Box>\n </CMenuList>\n );\n};\n"],"names":["MenuSearchBar","handleKeyboardNavigation","menuItems","onSearchCallback","searchInputRef","setFilteredMenuItems","placeholder","isOpen","useMenuState","handleSearch","useCallback","e","searchInput","target","value","filterdItems","filter","item","labelText","label","_a","key","toLowerCase","includes","useEffect","focusTimeout","setTimeout","current","focus","clearTimeout","React","createElement","TextInput","WrappedTextInput","className","onChange","mt","onKeyDown","size","ref","MenuSelectAllButtons","groupName","handleToggleAllItems","hasSelectedItems","isGrouped","Box","textAlign","w","Button","variant","iconName","onClick","clear","isDisabled","Flex","justifyContent","canSelectAll","canSelectGroups","children","isMatchWidthSet","isMultiSelect","isSearchable","isLoading","onSelect","onSelectAll","searchPlaceholder","shouldRetainSelection","shouldTruncateText","minW","maxW","maxH","shouldUsePortal","emptyStateText","rest","__rest","filteredMenuItems","allMenuItems","groups","setGroups","focusedItemIndex","setFocusedItemIndex","menuItemRefs","useMenuContext","focusNextListItem","direction","isFirstOption","isLastOption","length","newIndex","_b","nextListItem","elementIsInputField","persist","preventDefault","click","handleToggleSingleItem","selectedValue","itemOnSelect","_filteredMenuItemsCopy","selectedItem","find","isSelected","allSelectedItems","forEach","groupLabel","push","groupNames","Set","map","getMenuItem","index","isPlaceholder","Fragment","MenuItem","Object","assign","itemIndex","toString","CMenuList","shouldShowEmptyState","overflow","m","Boolean","position","display","p","Text","WrappedText","minH","pt","pr","pb","pl","justify","align","Heading","h","top","left","bg","Spinner"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),r=require("./chakra-ui-radio.esm-f310d451.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(t);exports.Radio=t=>{var{children:a,size:s="md",isOnContrast:n}=t,d=e.__rest(t,["children","size","isOnContrast"]);const o=n?"onContrast":"default";return i.default.createElement(r.Radio,Object.assign({"data-testid":"radio-options-container",variant:o},d,{size:s,alignItems:"flex-start"}),a)};
|
|
2
|
+
//# sourceMappingURL=radio.component-2502a55b.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.component-2502a55b.js","sources":["../src/components/Radio/radio.component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Radio as CRadio, RadioProps as CRadioProps } from '@chakra-ui/react';\nimport { RadioSize } from './radio.types';\n\nexport interface KRadioProps {\n children?: ReactNode;\n isChecked?: boolean;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isOnContrast?: boolean;\n size?: RadioSize;\n value?: string | number;\n}\n\nexport type RadioProps = KRadioProps & CRadioProps;\n\nexport const Radio = ({ children, size = 'md', isOnContrast, ...rest }: RadioProps): JSX.Element => {\n const _computedVariant = isOnContrast ? 'onContrast' : 'default';\n return (\n <CRadio data-testid=\"radio-options-container\" variant={_computedVariant} {...rest} size={size} alignItems=\"flex-start\">\n {children}\n </CRadio>\n );\n};\n"],"names":["_a","children","size","isOnContrast","rest","__rest","_computedVariant","React","CRadio","Object","assign","variant","alignItems"],"mappings":"yNAgBsBA,IAAA,IAAAC,SAAEA,EAAQC,KAAEA,EAAO,KAAIC,aAAEA,GAAYH,EAAKI,EAA1CC,EAAAA,OAAAL,EAAA,CAAA,WAAA,OAAA,iBACpB,MAAMM,EAAmBH,EAAe,aAAe,UACvD,OACEI,wBAACC,QAAMC,OAAAC,OAAA,CAAA,cAAa,0BAA0BC,QAASL,GAAsBF,GAAMF,KAAMA,EAAMU,WAAW,eACvGX"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-d6f17add.js"),r=require("react"),i=require("./withFormControl-28664983.js"),t=require("./radio.component-2502a55b.js"),a=require("./chakra-ui-radio.esm-f310d451.js"),o=require("./chakra-ui-layout.esm-6ee578f7.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=s(r);const d=r=>{var{radios:i,size:s="md",direction:d="row",spacing:c,isFieldInline:u,isOnContrast:l}=r,m=e.__rest(r,["radios","size","direction","spacing","isFieldInline","isOnContrast"]);return n.default.createElement(a.RadioGroup,Object.assign({"data-testid":"radio-group-container"},m),n.default.createElement(o.Stack,{direction:d,spacing:c,maxW:m.maxW||"max-content"},i.map(((e,r)=>n.default.createElement(t.Radio,Object.assign({isOnContrast:l,key:r},e,{size:s}))))))};d.displayName="RadioGroup";const c=i.withFormControl(d);exports.WrappedRadioGroup=c;
|
|
2
|
+
//# sourceMappingURL=radioGroup.component-a794a9c9.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radioGroup.component-a794a9c9.js","sources":["../src/components/RadioGroup/radioGroup.component.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioGroup as CRadioGroup, RadioGroupProps as CRadioGroupProps, Stack, SystemProps } from '@chakra-ui/react';\nimport { withFormControl, WithFormControlProps } from 'shared/hocs/FormControl/withFormControl';\nimport { FlexDirection } from 'shared/types/alignment';\nimport { Radio, RadioProps } from '../Radio/radio.component';\nimport { RadioSize } from '../Radio/radio.types';\n\nexport interface KRadioGroupProps extends WithFormControlProps {\n size?: RadioSize;\n radios: RadioProps[];\n direction?: FlexDirection;\n spacing?: SystemProps['margin'];\n isOnContrast?: boolean;\n name?: string;\n value?: string | number;\n onChange?: (value: string) => void;\n}\n\nexport type RadioGroupProps = KRadioGroupProps & Omit<CRadioGroupProps, 'children'>;\n\nconst RadioGroup = ({\n radios,\n size = 'md',\n direction = 'row',\n spacing,\n isFieldInline,\n isOnContrast,\n ...rest\n}: RadioGroupProps): JSX.Element => {\n return (\n <CRadioGroup data-testid=\"radio-group-container\" {...rest}>\n <Stack direction={direction} spacing={spacing} maxW={rest.maxW || 'max-content'}>\n {radios.map((radio, index) => (\n <Radio isOnContrast={isOnContrast} key={index} {...radio} size={size} />\n ))}\n </Stack>\n </CRadioGroup>\n );\n};\n\nRadioGroup.displayName = 'RadioGroup';\n\nconst WrappedRadioGroup = withFormControl(RadioGroup);\n\nexport { WrappedRadioGroup as RadioGroup };\n"],"names":["RadioGroup","_a","radios","size","direction","spacing","isFieldInline","isOnContrast","rest","__rest","React","createElement","CRadioGroup","Object","assign","Stack","maxW","map","radio","index","Radio","key","displayName","WrappedRadioGroup","withFormControl"],"mappings":"iVAoBA,MAAMA,EAAcC,QAAAC,OAClBA,EAAMC,KACNA,EAAO,KAAIC,UACXA,EAAY,MAAKC,QACjBA,EAAOC,cACPA,EAAaC,aACbA,GAAYN,EACTO,EAAIC,EAAAA,OAAAR,EAPW,wEASlB,OACES,EAAC,QAAAC,cAAAC,EAAAA,WAAwBC,OAAAC,OAAA,CAAA,cAAA,yBAA4BN,GACnDE,EAAC,QAAAC,cAAAI,EAAKA,MAAC,CAAAX,UAAWA,EAAWC,QAASA,EAASW,KAAMR,EAAKQ,MAAQ,eAC/Dd,EAAOe,KAAI,CAACC,EAAOC,IAClBT,EAAA,QAAAC,cAACS,EAAKA,MAAAP,OAAAC,OAAA,CAACP,aAAcA,EAAcc,IAAKF,GAAWD,EAAK,CAAEf,KAAMA,UAO1EH,EAAWsB,YAAc,aAEzB,MAAMC,EAAoBC,EAAeA,gBAACxB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),n=require("./menuContainer.component-3e1e324b.js"),l=require("./withFormControl-28664983.js"),a=require("./menu.context-22d23674.js"),r=require("./menuList.component-34a5c82e.js"),s=require("./text.component-057889c3.js"),i=require("./chakra-ui-layout.esm-6ee578f7.js"),o=require("./icon.component-100b924b.js"),u=require("./chakra-ui-select.esm-793cf4de.js"),c=require("./chakra-ui-menu.esm-1ed98193.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(t);const f=t=>{const{options:n}=t,l=e.__rest(t,["options"]);return m.default.createElement(r.MenuList,Object.assign({shouldRetainSelection:!0,menuItems:n,isMatchWidthSet:!0},l))},p=({selectedOption:e,defaultLeftElement:t,shouldTruncateText:n=!0})=>m.default.createElement(i.Flex,{"data-testid":"dropdown-container",className:"Select__Container",justify:"flex-start",align:"center",textAlign:"left",color:e.variant?`text.${e.variant}`:"text.default"},(null==e?void 0:e.leftElement)?m.default.createElement(i.Flex,{align:"center",className:"Select__LeftElement",pr:2},e.leftElement):t?m.default.createElement(i.Flex,{align:"center",className:"Select__LeftElement",pr:2},t):null,"string"==typeof e.label?m.default.createElement(s.WrappedText,{className:"Select__Text",isTruncated:n,variant:e.variant||"default"},e.label):e.label),v=l=>{var{defaultLeftElement:r,isFieldInline:s,listProps:i,options:d,placeholder:v,size:x="md",value:h,maxW:E="100%",isOnContrast:S,emptyStateText:j}=l,b=e.__rest(l,["defaultLeftElement","isFieldInline","listProps","options","placeholder","size","value","maxW","isOnContrast","emptyStateText"]);const g=S?"onContrast":"default",T=t.useRef(null),_=t.useMemo((()=>({label:v,value:"",variant:S?"placeholderOnContrast":"placeholder",leftElement:null,isSelected:!1,isPlaceholder:!0})),[v,S]),[O,q]=t.useState([]),C=t.useMemo((()=>{const e=O.find((e=>e.isSelected));return e||_}),[O,_]),y=t.useCallback((e=>{if(!O)return;const t=O.map((t=>Object.assign(Object.assign({},t),{isSelected:t.value===e.value})));q(t),(null==i?void 0:i.onSelect)&&i.onSelect(e)}),[O,i]),L=(null==i?void 0:i.shouldTruncateText)?{}:{height:"max-content",minH:10},M=t.useMemo((()=>{var e;return T.current?`${null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.clientWidth}px`:"320px"}),[null==T?void 0:T.current]);return t.useEffect((()=>{const e=d.map((e=>Object.assign(Object.assign({},e),{isSelected:e.value===h})));q([...e,_])}),[d,_,h]),m.default.createElement(a.MenuProvider,{menuItems:O},m.default.createElement(n.MenuContainer,{matchWidth:!0,isLazy:!0},m.default.createElement(u.Select,Object.assign({icon:m.default.createElement(o.Icon,{name:"chevronDown",size:x}),as:c.MenuButton,ref:T,onClick:e=>e.stopPropagation(),type:"button",className:"Select__MenuButton",variant:g,maxW:E},L,b),m.default.createElement(p,{selectedOption:C,defaultLeftElement:r,shouldTruncateText:null==i?void 0:i.shouldTruncateText})),m.default.createElement(f,Object.assign({},i,{onSelect:y,options:O,maxW:M||E,emptyStateText:j}))))};v.displayName="Select";const x=l.withFormControl(v);exports.WrappedSelect=x;
|
|
2
|
+
//# sourceMappingURL=select.component-b0b801a2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.component-b0b801a2.js","sources":["../src/components/Select/components/SelectList/selectList.component.tsx","../src/components/Select/components/SelectContainer/selectContainer.component.tsx","../src/components/Select/select.component.tsx"],"sourcesContent":["import React from 'react';\nimport { MenuList, KMenuListProps, MenuListProps } from '../../../Menu/components/MenuList/menuList.component';\nimport { SelectOptionProps } from '../SelectOption/selectOption.types';\n\nexport interface KSelectListProps\n extends Omit<\n KMenuListProps,\n | 'canSelectAll'\n | 'canSelectGroups'\n | 'isMultiSelect'\n | 'onSelectAll'\n | 'menuItems'\n | 'shouldRetainSelection'\n | 'isMatchWidthSet'\n | 'isLoading'\n > {\n options?: SelectOptionProps[];\n}\n\nexport type SelectListProps = KSelectListProps & MenuListProps;\n\nexport const SelectList = (props: SelectListProps): JSX.Element => {\n const { options, ...rest } = props;\n\n return <MenuList shouldRetainSelection={true} menuItems={options} isMatchWidthSet={true} {...rest} />;\n};\n","import React, { ReactNode } from 'react';\nimport { Flex } from '@chakra-ui/react';\nimport { Text } from '../../../Text/text.component';\nimport { SelectOptionProps } from '../SelectOption/selectOption.types';\n\nexport interface SelectContainerProps {\n selectedOption: SelectOptionProps;\n defaultLeftElement: ReactNode;\n shouldTruncateText?: boolean;\n}\n\nexport const SelectContainer = ({\n selectedOption,\n defaultLeftElement,\n shouldTruncateText = true,\n}: SelectContainerProps): JSX.Element => {\n return (\n <Flex\n data-testid=\"dropdown-container\"\n className=\"Select__Container\"\n justify=\"flex-start\"\n align=\"center\"\n textAlign=\"left\"\n color={selectedOption.variant ? `text.${selectedOption.variant}` : 'text.default'}\n >\n {selectedOption?.leftElement ? (\n <Flex align=\"center\" className=\"Select__LeftElement\" pr={2}>\n {selectedOption.leftElement}\n </Flex>\n ) : defaultLeftElement ? (\n <Flex align=\"center\" className=\"Select__LeftElement\" pr={2}>\n {defaultLeftElement}\n </Flex>\n ) : null}\n {typeof selectedOption.label === 'string' ? (\n <Text className=\"Select__Text\" isTruncated={shouldTruncateText} variant={selectedOption.variant || 'default'}>\n {selectedOption.label}\n </Text>\n ) : (\n selectedOption.label\n )}\n </Flex>\n );\n};\n","import React, { useMemo, ReactNode, useRef, useState, useCallback, useEffect } from 'react';\nimport { Select as CSelect, SelectProps as CSelectProps, MenuButton } from '@chakra-ui/react';\nimport { MenuContainer } from '../Menu/components/MenuContainer/menuContainer.component';\nimport { WithFormControlProps, withFormControl } from 'shared/hocs/FormControl/withFormControl';\nimport { MenuProvider } from '../Menu/context/menu.context';\nimport { SelectList, SelectListProps } from './components/SelectList/selectList.component';\nimport { SelectContainer } from './components/SelectContainer/selectContainer.component';\nimport { Icon } from '../Icon/icon.component';\nimport { IconSize } from '../Icon/icon.types';\nimport { FormControlSize } from 'shared/types/formControl';\nimport { SelectOptionProps } from './components/SelectOption/selectOption.types';\n\nexport interface KSelectProps extends WithFormControlProps {\n defaultLeftElement?: ReactNode;\n listProps?: SelectListProps;\n options: SelectOptionProps[];\n size?: FormControlSize;\n isOnContrast?: boolean;\n placeholder?: string;\n emptyStateText?: string;\n}\n\nexport type SelectProps = KSelectProps & Omit<CSelectProps, 'onSelect'>;\n\nconst Select = ({\n defaultLeftElement,\n isFieldInline,\n listProps,\n options,\n placeholder,\n size = 'md',\n value,\n maxW = '100%',\n isOnContrast,\n emptyStateText,\n ...rest\n}: SelectProps): JSX.Element => {\n // TODO: Need to add full support for isOnContrast, currently menu list still renders white\n const _computedVariant = isOnContrast ? 'onContrast' : 'default';\n const selectRef = useRef<HTMLSelectElement>(null);\n const placeholderOption: SelectOptionProps = useMemo(\n () => ({\n label: placeholder,\n value: '',\n variant: isOnContrast ? 'placeholderOnContrast' : 'placeholder',\n leftElement: null,\n isSelected: false,\n isPlaceholder: true,\n }),\n [placeholder, isOnContrast],\n );\n\n const [allOptions, setAllOptions] = useState<SelectOptionProps[]>([]);\n\n const selectedOption: SelectOptionProps = useMemo(() => {\n const selectedItem = allOptions.find((option) => option.isSelected);\n\n return selectedItem ? selectedItem : placeholderOption;\n }, [allOptions, placeholderOption]);\n\n const handleSelect = useCallback(\n (selectedItem: SelectOptionProps) => {\n if (!allOptions) return;\n\n const updatedOptions = allOptions.map((option) => {\n return {\n ...option,\n isSelected: option.value === selectedItem.value,\n };\n });\n setAllOptions(updatedOptions);\n\n if (listProps?.onSelect) {\n listProps.onSelect(selectedItem);\n }\n },\n [allOptions, listProps],\n );\n\n // If the text is not being truncated it should grow to fit the content\n const flexibleHeightProps = !listProps?.shouldTruncateText ? { height: 'max-content', minH: 10 } : {};\n\n const selectWidth = useMemo(() => {\n if (!selectRef.current) {\n return '320px';\n }\n\n return `${selectRef?.current?.clientWidth}px`;\n\n // Disables the warning for not including unused dependency in the hook array. This dependency is needed to rerender the menu list with the correct width\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectRef?.current]);\n\n // Set default selected state\n useEffect(() => {\n const mappedOptions = options.map((option) => ({\n ...option,\n isSelected: option.value === value,\n }));\n\n setAllOptions([...mappedOptions, placeholderOption]);\n }, [options, placeholderOption, value]);\n\n return (\n <MenuProvider menuItems={allOptions}>\n <MenuContainer matchWidth={true} isLazy={true}>\n <CSelect\n icon={<Icon name=\"chevronDown\" size={size as IconSize} />}\n as={MenuButton}\n ref={selectRef}\n onClick={(event: React.MouseEvent): void => event.stopPropagation()}\n type=\"button\"\n className=\"Select__MenuButton\"\n variant={_computedVariant}\n maxW={maxW}\n {...flexibleHeightProps}\n {...rest}\n >\n <SelectContainer\n selectedOption={selectedOption}\n defaultLeftElement={defaultLeftElement}\n shouldTruncateText={listProps?.shouldTruncateText}\n />\n </CSelect>\n <SelectList\n {...listProps}\n onSelect={handleSelect}\n options={allOptions}\n maxW={selectWidth || maxW}\n emptyStateText={emptyStateText}\n />\n </MenuContainer>\n </MenuProvider>\n );\n};\n\nSelect.displayName = 'Select';\n\nconst WrappedSelect = withFormControl(Select);\n\nexport { WrappedSelect as Select };\n"],"names":["SelectList","props","options","rest","__rest","React","MenuList","Object","assign","shouldRetainSelection","menuItems","isMatchWidthSet","SelectContainer","selectedOption","defaultLeftElement","shouldTruncateText","createElement","Flex","className","justify","align","textAlign","color","variant","leftElement","pr","label","Text","isTruncated","Select","_a","isFieldInline","listProps","placeholder","size","value","maxW","isOnContrast","emptyStateText","_computedVariant","selectRef","useRef","placeholderOption","useMemo","isSelected","isPlaceholder","allOptions","setAllOptions","useState","selectedItem","find","option","handleSelect","useCallback","updatedOptions","map","onSelect","flexibleHeightProps","height","minH","selectWidth","current","clientWidth","useEffect","mappedOptions","MenuProvider","MenuContainer","matchWidth","isLazy","CSelect","icon","Icon","name","as","MenuButton","ref","onClick","event","stopPropagation","type","displayName","WrappedSelect","withFormControl"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),a=require("./withFormControl-28664983.js"),n=require("./text.component-057889c3.js"),r=require("./button.component-d4c1718b.js"),l=require("./chakra-ui-input.esm-5fd07056.js"),i=require("./chakra-ui-layout.esm-6ee578f7.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=s(t);const o={sm:"xs",md:"sm",lg:"md"},c=a.withFormControl((a=>{var{isClearable:s=!1,size:c="md",leftElement:m,rightElement:d,inputRef:p,isFieldInline:f,onClear:E,value:h,isOnContrast:x,charLimit:g}=a,v=e.__rest(a,["isClearable","size","leftElement","rightElement","inputRef","isFieldInline","onClear","value","isOnContrast","charLimit"]);let b=x?"onContrast":"default";const I=()=>{E&&E(h||"")};s&&h&&(d=u.default.createElement(r.Button,{size:o[c],variant:"ghostNeutral",onClick:I,iconName:"close"}));const C=t.useMemo((()=>{var e;return(null===(e=null==h?void 0:h.toString())||void 0===e?void 0:e.length)||0}),[h]);return u.default.createElement(i.Box,{className:"TextInput__Container",pos:"relative",w:"100%"},u.default.createElement(l.InputGroup,{size:c},m&&u.default.createElement(l.InputLeftElement,{className:"TextInput__LeftElement",children:m,h:"100%"}),u.default.createElement(l.Input,Object.assign({className:"TextInput__Input",variant:b},v,{ref:p,value:h})),d&&u.default.createElement(l.InputRightElement,{className:"TextInput__RightElement",children:d})),!!g&&u.default.createElement(i.HStack,{className:"TextInput__CharCount",spacing:1,bg:"background.default",pos:"absolute",right:"0",bottom:"-20px"},u.default.createElement(n.WrappedText,{size:"xs",variant:C>g?"danger":"subtle"},C),u.default.createElement(n.WrappedText,{size:"xs",variant:"subtle"},"/ ",g)))})),m=t.forwardRef(((e,t)=>u.default.createElement(c,Object.assign({inputRef:t},e))));m.displayName="TextInput",exports.WrappedTextInput=m;
|
|
2
|
-
//# sourceMappingURL=textInput.component-
|
|
1
|
+
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),a=require("./withFormControl-28664983.js"),n=require("./text.component-057889c3.js"),r=require("./button.component-d4c1718b.js"),l=require("./chakra-ui-input.esm-5fd07056.js"),i=require("./chakra-ui-layout.esm-6ee578f7.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=s(t);const o={sm:"xs",md:"sm",lg:"md"},c=a.withFormControl((a=>{var{isClearable:s=!1,size:c="md",leftElement:m,rightElement:d,inputRef:p,isFieldInline:f,onClear:E,value:h,isOnContrast:x,charLimit:g}=a,v=e.__rest(a,["isClearable","size","leftElement","rightElement","inputRef","isFieldInline","onClear","value","isOnContrast","charLimit"]);let b=x?"onContrast":"default";const I=()=>{E&&E(h||"")};s&&h&&(d=u.default.createElement(r.Button,{size:o[c],variant:"ghostNeutral",onClick:I,iconName:"close"}));const C=t.useMemo((()=>{var e;return(null===(e=null==h?void 0:h.toString())||void 0===e?void 0:e.length)||0}),[h]);return u.default.createElement(i.Box,{className:"TextInput__Container",pos:"relative",w:"100%"},u.default.createElement(l.InputGroup,{size:c},m&&u.default.createElement(l.InputLeftElement,{className:"TextInput__LeftElement",children:m,h:"100%"}),u.default.createElement(l.Input,Object.assign({className:"TextInput__Input","data-testid":"text-input-container",variant:b},v,{ref:p,value:h})),d&&u.default.createElement(l.InputRightElement,{className:"TextInput__RightElement",children:d})),!!g&&u.default.createElement(i.HStack,{className:"TextInput__CharCount",spacing:1,bg:"background.default",pos:"absolute",right:"0",bottom:"-20px"},u.default.createElement(n.WrappedText,{size:"xs",variant:C>g?"danger":"subtle"},C),u.default.createElement(n.WrappedText,{size:"xs",variant:"subtle"},"/ ",g)))})),m=t.forwardRef(((e,t)=>u.default.createElement(c,Object.assign({inputRef:t},e))));m.displayName="TextInput",exports.WrappedTextInput=m;
|
|
2
|
+
//# sourceMappingURL=textInput.component-85dce08f.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textInput.component-85dce08f.js","sources":["../src/components/TextInput/textInput.types.ts","../src/components/TextInput/textInput.component.tsx"],"sourcesContent":["import { ButtonSize } from 'components/Button';\nimport { FormControlSize } from 'shared/types/formControl';\n\nexport const closeButtonSizeMap: Record<FormControlSize, ButtonSize> = {\n sm: 'xs',\n md: 'sm',\n lg: 'md',\n};\n","import React, { forwardRef, ForwardedRef, ReactElement, useMemo } from 'react';\nimport {\n Input as CInput,\n InputProps as CInputProps,\n InputGroup,\n InputLeftElement,\n InputRightElement,\n Box,\n HStack,\n} from '@chakra-ui/react';\nimport { withFormControl, WithFormControlProps } from 'shared/hocs/FormControl/withFormControl';\nimport { FormControlSize } from 'shared/types/formControl';\nimport { Text } from 'components/Text';\nimport { Button } from 'components/Button';\nimport { closeButtonSizeMap } from './textInput.types';\n\nexport interface TextInputBaseProps extends WithFormControlProps {\n charLimit?: number;\n inputRef?: ForwardedRef<HTMLInputElement>;\n isOnContrast?: boolean;\n leftElement?: ReactElement;\n rightElement?: ReactElement;\n size?: FormControlSize;\n}\n\nexport interface DefaultTextInputProps extends TextInputBaseProps {\n isClearable?: never;\n onClear?: never;\n}\n\nexport interface ClearableTextInputProps extends TextInputBaseProps {\n isClearable: boolean;\n onClear: (val: string | number | readonly string[]) => void;\n}\n\nexport type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;\n\nexport type TextInputProps = KTextInputProps & CInputProps;\n\nconst TextInput = withFormControl(\n ({\n isClearable = false,\n size = 'md',\n leftElement,\n rightElement,\n inputRef,\n isFieldInline,\n onClear,\n value,\n isOnContrast,\n charLimit = undefined,\n ...rest\n }: TextInputProps): JSX.Element => {\n let _computedVariant = isOnContrast ? 'onContrast' : 'default';\n\n const handleClear = (): void => {\n if (onClear) {\n onClear(value || '');\n }\n };\n\n if (isClearable && !!value) {\n rightElement = (\n <Button size={closeButtonSizeMap[size]} variant=\"ghostNeutral\" onClick={handleClear} iconName=\"close\" />\n );\n }\n\n const currentCharCount = useMemo(() => value?.toString()?.length || 0, [value]);\n\n return (\n <Box className=\"TextInput__Container\" pos=\"relative\" w=\"100%\">\n <InputGroup size={size}>\n {leftElement && <InputLeftElement className=\"TextInput__LeftElement\" children={leftElement} h=\"100%\" />}\n <CInput className=\"TextInput__Input\" data-testid=\"text-input-container\" variant={_computedVariant} {...rest} ref={inputRef} value={value} />\n {rightElement && <InputRightElement className=\"TextInput__RightElement\" children={rightElement} />}\n </InputGroup>\n {!!charLimit && (\n <HStack\n className=\"TextInput__CharCount\"\n spacing={1}\n bg=\"background.default\"\n pos=\"absolute\"\n right=\"0\"\n bottom=\"-20px\"\n >\n <Text size=\"xs\" variant={currentCharCount > charLimit ? 'danger' : 'subtle'}>\n {currentCharCount}\n </Text>\n <Text size=\"xs\" variant=\"subtle\">\n / {charLimit}\n </Text>\n </HStack>\n )}\n </Box>\n );\n },\n);\n\nconst WrappedTextInput = forwardRef((props: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (\n <TextInput inputRef={ref} {...props} />\n));\n\nWrappedTextInput.displayName = 'TextInput';\n\nexport { WrappedTextInput as TextInput };\n"],"names":["closeButtonSizeMap","sm","md","lg","TextInput","withFormControl","_a","isClearable","size","leftElement","rightElement","inputRef","isFieldInline","onClear","value","isOnContrast","charLimit","rest","__rest","_computedVariant","handleClear","React","createElement","Button","variant","onClick","iconName","currentCharCount","useMemo","toString","length","Box","className","pos","w","InputGroup","InputLeftElement","children","h","CInput","ref","InputRightElement","HStack","spacing","bg","right","bottom","Text","WrappedTextInput","forwardRef","props","Object","assign","displayName"],"mappings":"4XAGO,MAAMA,EAA0D,CACrEC,GAAI,KACJC,GAAI,KACJC,GAAI,MCiCAC,EAAYC,EAAAA,iBACfC,IAAA,IAAAC,YACCA,GAAc,EAAKC,KACnBA,EAAO,KAAIC,YACXA,EAAWC,aACXA,EAAYC,SACZA,EAAQC,cACRA,EAAaC,QACbA,EAAOC,MACPA,EAAKC,aACLA,EAAYC,UACZA,GAEeV,EADZW,EAAIC,EAAAA,OAAAZ,EAXR,6HAaC,IAAIa,EAAmBJ,EAAe,aAAe,UAErD,MAAMK,EAAc,KACdP,GACFA,EAAQC,GAAS,KAIjBP,GAAiBO,IACnBJ,EACEW,EAAA,QAAAC,cAACC,EAAMA,OAAA,CAACf,KAAMR,EAAmBQ,GAAOgB,QAAQ,eAAeC,QAASL,EAAaM,SAAS,WAIlG,MAAMC,EAAmBC,EAAOA,SAAC,KAAM,IAAAtB,EAAA,OAAmB,QAAnBA,EAAAQ,MAAAA,OAAK,EAALA,EAAOe,kBAAY,IAAAvB,OAAA,EAAAA,EAAAwB,SAAU,IAAG,CAAChB,IAExE,OACEO,EAAA,QAAAC,cAACS,EAAAA,IAAG,CAACC,UAAU,uBAAuBC,IAAI,WAAWC,EAAE,QACrDb,EAAAA,QAAAC,cAACa,EAAAA,WAAU,CAAC3B,KAAMA,GACfC,GAAeY,EAAA,QAAAC,cAACc,EAAAA,iBAAgB,CAACJ,UAAU,yBAAyBK,SAAU5B,EAAa6B,EAAE,SAC9FjB,UAACC,cAAAiB,EAAAA,qBAAOP,UAAU,mBAA+B,cAAA,uBAAuBR,QAASL,GAAsBF,GAAMuB,IAAK7B,EAAUG,MAAOA,KAClIJ,GAAgBW,EAAAA,QAAAC,cAACmB,oBAAiB,CAACT,UAAU,0BAA0BK,SAAU3B,OAEjFM,GACDK,UAACC,cAAAoB,EAAAA,OACC,CAAAV,UAAU,uBACVW,QAAS,EACTC,GAAG,qBACHX,IAAI,WACJY,MAAM,IACNC,OAAO,SAEPzB,EAAAA,QAACC,cAAAyB,eAAKvC,KAAK,KAAKgB,QAASG,EAAmBX,EAAY,SAAW,UAChEW,GAEHN,EAAC,QAAAC,cAAAyB,eAAKvC,KAAK,KAAKgB,QAAQ,eACnBR,QASXgC,EAAmBC,EAAUA,YAAC,CAACC,EAAuBV,IAC1DnB,EAAAA,QAACC,cAAAlB,EAAU+C,OAAAC,OAAA,CAAAzC,SAAU6B,GAASU,MAGhCF,EAAiBK,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react"),t=require("./icon.component-100b924b.js"),r=require("./popover.component-0c3ec017.js"),n=require("./index-c90ed78a.js"),o=require("./textInput.component-
|
|
2
|
-
//# sourceMappingURL=timePicker.component-
|
|
1
|
+
"use strict";var e=require("react"),t=require("./icon.component-100b924b.js"),r=require("./popover.component-0c3ec017.js"),n=require("./index-c90ed78a.js"),o=require("./textInput.component-85dce08f.js"),i=require("./chakra-ui-layout.esm-6ee578f7.js"),l=require("./useIconTextSizeMap-301c4f35.js"),a=require("./chakra-ui-hooks.esm-21b313f3.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(e);const c=({value:t,innerRef:r,isSelected:n,handleClick:o})=>{const l=e.useCallback((e=>{const t=e.currentTarget.textContent||"";o(t)}),[o]);return s.default.createElement(i.Box,{ref:r,onClick:l,background:n?"background.primary":"background.default",color:n?"text.onContrast":"text.subtle",fontSize:"sm",textAlign:"center",px:3,py:1,borderRadius:"md",cursor:"pointer",_hover:{background:n?"background.primary.hover":"background.primaryAlpha.hover"}},t)},d=({options:t,optionType:r,selectedValue:n,handleClick:o,isOpen:l=!1})=>{const a=e.useRef(null),u=e.useRef(null);return e.useEffect((()=>{var e,t;l&&u.current&&a.current&&(u.current.scrollTop=(null===(e=a.current)||void 0===e?void 0:e.offsetTop)-(null===(t=u.current)||void 0===t?void 0:t.offsetTop))}),[l]),s.default.createElement(i.Flex,{direction:"column",gap:1,ref:u,overflowY:"auto",sx:{"&::-webkit-scrollbar":{display:"none"}}},t.map((e=>s.default.createElement(c,{key:`${r}-option-${e}`,innerRef:e===n?a:null,value:e,isSelected:e===n,handleClick:o}))))};var p;exports.Meridiem=void 0,(p=exports.Meridiem||(exports.Meridiem={})).AM="AM",p.PM="PM";exports.TimePicker=({initialTime:u,minuteInterval:c=5,inputProps:p,placement:m,onTimeChange:f})=>{const{isOpen:M,onOpen:h,onClose:x}=a.useDisclosure(),[v,b]=e.useState(u),k=e.useMemo((()=>{if(!u)return;const e=new Date(u),t=e.getHours();let r=t;return t>12&&(r=t-12),0===t&&(r=12),{hours:r.toString(),minutes:e.getMinutes().toString(),meridiem:e.getHours()>11?exports.Meridiem.PM:exports.Meridiem.AM}}),[u]),[g,C]=e.useState(null==k?void 0:k.hours),[E,T]=e.useState(null==k?void 0:k.minutes),[y,S]=e.useState(null==k?void 0:k.meridiem),A=e.useMemo((()=>v?n.format(v,"h:mm aa"):""),[v]),O=e=>{const t=e.toString();return 1===t.length?`0${t}`:t},j=e.useMemo((()=>[12,1,2,3,4,5,6,7,8,9,10,11].map((e=>e.toString()))),[]),w=e.useMemo((()=>{const e=[];for(let t=0;t<60;t+=c)e.push(t);return e.map(O)}),[c]),P=[exports.Meridiem.AM,exports.Meridiem.PM],q=e.useCallback(((e,t,r)=>{const n=e||"12",o=t||"00",i=r||"AM";let l=0;e||C("12"),t||T("00"),r||S("AM"),i===exports.Meridiem.PM&&Number(n)<12&&(l=12),i===exports.Meridiem.AM&&12===Number(n)&&(l=-12);const a=Number(n)+l,u=(new Date).setHours(a,Number(o),0,0),s=new Date(u);b(s),f&&f(s)}),[f]),z=e.useCallback((e=>{C(e),q(e,E,y)}),[q,y,E]),I=e.useCallback((e=>{T(e),q(g,e,y)}),[q,g,y]),R=e.useCallback((e=>{S(e),q(g,E,e)}),[q,g,E]);return s.default.createElement(r.Popover,{isOpen:M,onOpen:h,onClose:x,placement:m,contentProps:{width:"max-content"},variant:"default",size:"sm",anchor:s.default.createElement(i.Box,{w:"100%"},s.default.createElement(o.WrappedTextInput,Object.assign({placeholder:"12:00 AM",rightElement:s.default.createElement(i.Flex,{cursor:(null==p?void 0:p.isDisabled)?"not-allowed":"pointer",h:"100%",align:"center"},s.default.createElement(t.Icon,{size:l.useIconTextSizeMap((null==p?void 0:p.size)||"md"),name:"clock"})),value:A,isReadOnly:!0,cursor:"pointer"},p)))},s.default.createElement(i.Flex,{height:"186px",gap:1.5,overflow:"hidden"},s.default.createElement(d,{options:j,optionType:"hour",selectedValue:g,handleClick:z,isOpen:M}),s.default.createElement(d,{options:w,optionType:"minute",selectedValue:E?O(E):void 0,handleClick:I,isOpen:M}),s.default.createElement(d,{options:P,optionType:"meridiem",selectedValue:y,handleClick:R,isOpen:M})))};
|
|
2
|
+
//# sourceMappingURL=timePicker.component-3249b590.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timePicker.component-7fb45602.js","sources":["../src/components/TimePicker/components/timeOption.component.tsx","../src/components/TimePicker/components/scrollContainer.component.tsx","../src/components/TimePicker/timePicker.types.ts","../src/components/TimePicker/timePicker.component.tsx"],"sourcesContent":["import React, { MutableRefObject, useCallback } from 'react';\nimport { Box } from '@chakra-ui/react';\n\ninterface TimeOptionProps {\n value: string;\n innerRef?: MutableRefObject<HTMLDivElement | null> | null;\n isSelected: boolean;\n handleClick: (selectedValue: string) => void;\n}\n\nexport const TimeOption = ({ value, innerRef, isSelected, handleClick }: TimeOptionProps): JSX.Element => {\n const onClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n const selectedValue = event.currentTarget.textContent || '';\n handleClick(selectedValue);\n },\n [handleClick],\n );\n\n return (\n <Box\n ref={innerRef}\n onClick={onClick}\n background={isSelected ? 'background.primary' : 'background.default'}\n color={isSelected ? 'text.onContrast' : 'text.subtle'}\n fontSize=\"sm\"\n textAlign=\"center\"\n px={3}\n py={1}\n borderRadius=\"md\"\n cursor=\"pointer\"\n _hover={{\n background: isSelected ? 'background.primary.hover' : 'background.primaryAlpha.hover',\n }}\n >\n {value}\n </Box>\n );\n};\n","import React, { useEffect, useRef } from 'react';\nimport { Flex } from '@chakra-ui/react';\nimport { TimeOption } from './timeOption.component';\n\ninterface ScrollContainerProps {\n options: string[];\n optionType: 'hour' | 'minute' | 'meridiem';\n selectedValue?: string;\n handleClick: (value: string) => void;\n isOpen: boolean;\n}\n\nexport const ScrollContainer = ({\n options,\n optionType,\n selectedValue,\n handleClick,\n isOpen = false,\n}: ScrollContainerProps): JSX.Element => {\n const itemRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (isOpen && containerRef.current && itemRef.current) {\n containerRef.current.scrollTop = itemRef.current?.offsetTop - containerRef.current?.offsetTop;\n }\n }, [isOpen]);\n\n return (\n <Flex\n direction=\"column\"\n gap={1}\n ref={containerRef}\n overflowY=\"auto\"\n sx={{\n '&::-webkit-scrollbar': {\n display: 'none',\n },\n }}\n >\n {options.map((option) => {\n return (\n <TimeOption\n key={`${optionType}-option-${option}`}\n innerRef={option === selectedValue ? itemRef : null}\n value={option}\n isSelected={option === selectedValue}\n handleClick={handleClick}\n />\n );\n })}\n </Flex>\n );\n};\n","export enum Meridiem {\n AM = 'AM',\n PM = 'PM',\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { PlacementWithLogical, Box, Flex, useDisclosure } from '@chakra-ui/react';\nimport { Icon } from '../Icon/icon.component';\nimport { Popover } from '../Popover/popover.component';\nimport format from 'date-fns/format';\nimport { TextInput, TextInputProps } from '../TextInput/textInput.component';\nimport { ScrollContainer } from './components/scrollContainer.component';\nimport { Meridiem } from './timePicker.types';\nimport { useIconTextSizeMap } from 'shared/hooks/useIconTextSizeMap';\n\nexport interface TimePickerProps {\n initialTime?: Date;\n minuteInterval?: number;\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n placement?: PlacementWithLogical;\n onTimeChange?: (time: Date) => void;\n}\n\nexport const TimePicker = ({\n initialTime,\n minuteInterval = 5,\n inputProps,\n placement,\n onTimeChange,\n}: TimePickerProps): JSX.Element => {\n const { isOpen, onOpen, onClose } = useDisclosure();\n\n // selectedTime should always be UTC\n const [selectedTime, setSelectedTime] = useState(initialTime);\n\n const initialFormattedTime = useMemo(() => {\n if (!initialTime) return;\n\n const localTime = new Date(initialTime);\n\n // calculate hours\n const hours = localTime.getHours();\n let adjustedHours = hours;\n\n if (hours > 12) {\n adjustedHours = hours - 12;\n }\n if (hours === 0) {\n adjustedHours = 12;\n }\n\n return {\n hours: adjustedHours.toString(),\n minutes: localTime.getMinutes().toString(),\n meridiem: localTime.getHours() > 11 ? Meridiem.PM : Meridiem.AM,\n };\n }, [initialTime]);\n\n // convert to local time for display\n const [selectedHour, setSelectedHour] = useState(initialFormattedTime?.hours);\n const [selectedMinute, setSelectedMinute] = useState(initialFormattedTime?.minutes);\n const [selectedMeridiem, setSelectedMeridiem] = useState<string | undefined>(initialFormattedTime?.meridiem);\n\n const formattedTime = useMemo(() => {\n if (!selectedTime) return '';\n return format(selectedTime, 'h:mm aa');\n }, [selectedTime]);\n\n const formatNumber = (number: number | string): string => {\n const formattedValue = number.toString();\n if (formattedValue.length === 1) {\n return `0${formattedValue}`;\n }\n\n return formattedValue;\n };\n\n const hourOptions = useMemo(() => {\n return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((hour) => hour.toString());\n }, []);\n\n const minuteOptions = useMemo(() => {\n const minutes = [];\n for (let i = 0; i < 60; i += minuteInterval) {\n minutes.push(i);\n }\n\n return minutes.map(formatNumber);\n }, [minuteInterval]);\n\n const meridiemOptions = [Meridiem.AM, Meridiem.PM];\n\n const handleTimeChange = useCallback(\n (hour?: string, minute?: string, meridiem?: string) => {\n const _hour = hour || '12';\n const _minute = minute || '00';\n const _meridiem = meridiem || 'AM';\n let meridiemAdjustment = 0;\n\n if (!hour) {\n setSelectedHour('12');\n }\n if (!minute) {\n setSelectedMinute('00');\n }\n if (!meridiem) {\n setSelectedMeridiem('AM');\n }\n\n // set 1-11pm to 13-23. Don't set 12pm to 24\n if (_meridiem === Meridiem.PM && Number(_hour) < 12) {\n meridiemAdjustment = 12;\n }\n\n // set 12am to 00\n if (_meridiem === Meridiem.AM && Number(_hour) === 12) {\n meridiemAdjustment = -12;\n }\n\n const hours = Number(_hour) + meridiemAdjustment;\n const time = new Date().setHours(hours, Number(_minute), 0, 0);\n const date = new Date(time);\n setSelectedTime(date);\n\n if (onTimeChange) {\n onTimeChange(date);\n }\n },\n [onTimeChange],\n );\n\n const handleHourClick = useCallback(\n (value: string) => {\n setSelectedHour(value);\n handleTimeChange(value, selectedMinute, selectedMeridiem);\n },\n [handleTimeChange, selectedMeridiem, selectedMinute],\n );\n\n const handleMinuteClick = useCallback(\n (value: string) => {\n setSelectedMinute(value);\n handleTimeChange(selectedHour, value, selectedMeridiem);\n },\n [handleTimeChange, selectedHour, selectedMeridiem],\n );\n\n const handleMeridiemClick = useCallback(\n (value: string) => {\n setSelectedMeridiem(value);\n handleTimeChange(selectedHour, selectedMinute, value);\n },\n [handleTimeChange, selectedHour, selectedMinute],\n );\n\n return (\n <Popover\n isOpen={isOpen}\n onOpen={onOpen}\n onClose={onClose}\n placement={placement}\n contentProps={{ width: 'max-content' }}\n variant=\"default\"\n size=\"sm\"\n anchor={\n <Box w=\"100%\">\n <TextInput\n placeholder=\"12:00 AM\"\n rightElement={\n <Flex cursor={inputProps?.isDisabled ? 'not-allowed' : 'pointer'} h=\"100%\" align=\"center\">\n <Icon size={useIconTextSizeMap(inputProps?.size || 'md')} name=\"clock\" />\n </Flex>\n }\n value={formattedTime}\n isReadOnly\n cursor={'pointer'}\n {...inputProps}\n />\n </Box>\n }\n >\n <Flex height=\"186px\" gap={1.5} overflow=\"hidden\">\n <ScrollContainer\n options={hourOptions}\n optionType=\"hour\"\n selectedValue={selectedHour}\n handleClick={handleHourClick}\n isOpen={isOpen}\n />\n <ScrollContainer\n options={minuteOptions}\n optionType=\"minute\"\n selectedValue={selectedMinute ? formatNumber(selectedMinute) : undefined}\n handleClick={handleMinuteClick}\n isOpen={isOpen}\n />\n <ScrollContainer\n options={meridiemOptions}\n optionType=\"meridiem\"\n selectedValue={selectedMeridiem}\n handleClick={handleMeridiemClick}\n isOpen={isOpen}\n />\n </Flex>\n </Popover>\n );\n};\n"],"names":["TimeOption","value","innerRef","isSelected","handleClick","onClick","useCallback","event","selectedValue","currentTarget","textContent","React","createElement","Box","ref","background","color","fontSize","textAlign","px","py","borderRadius","cursor","_hover","ScrollContainer","options","optionType","isOpen","itemRef","useRef","containerRef","useEffect","current","scrollTop","_a","offsetTop","_b","Flex","direction","gap","overflowY","sx","display","map","option","key","Meridiem","initialTime","minuteInterval","inputProps","placement","onTimeChange","onOpen","onClose","useDisclosure","selectedTime","setSelectedTime","useState","initialFormattedTime","useMemo","localTime","Date","hours","getHours","adjustedHours","toString","minutes","getMinutes","meridiem","PM","AM","selectedHour","setSelectedHour","selectedMinute","setSelectedMinute","selectedMeridiem","setSelectedMeridiem","formattedTime","format","formatNumber","number","formattedValue","length","hourOptions","hour","minuteOptions","i","push","meridiemOptions","handleTimeChange","minute","_hour","_minute","_meridiem","meridiemAdjustment","Number","time","setHours","date","handleHourClick","handleMinuteClick","handleMeridiemClick","Popover","contentProps","width","variant","size","anchor","w","TextInput","Object","assign","placeholder","rightElement","isDisabled","h","align","Icon","useIconTextSizeMap","name","isReadOnly","height","overflow","undefined"],"mappings":"2aAUO,MAAMA,EAAa,EAAGC,MAAAA,EAAOC,SAAAA,EAAUC,WAAAA,EAAYC,YAAAA,MACxD,MAAMC,EAAUC,eACbC,IACC,MAAMC,EAAgBD,EAAME,cAAcC,aAAe,GACzDN,EAAYI,KAEd,CAACJ,IAGH,OACEO,EAAA,QAAAC,cAACC,EAAGA,IAAA,CACFC,IAAKZ,EACLG,QAASA,EACTU,WAAYZ,EAAa,qBAAuB,qBAChDa,MAAOb,EAAa,kBAAoB,cACxCc,SAAS,KACTC,UAAU,SACVC,GAAI,EACJC,GAAI,EACJC,aAAa,KACbC,OAAO,UACPC,OAAQ,CACNR,WAAYZ,EAAa,2BAA6B,kCAGvDF,ICvBMuB,EAAkB,EAC7BC,QAAAA,EACAC,WAAAA,EACAlB,cAAAA,EACAJ,YAAAA,EACAuB,OAAAA,GAAS,MAET,MAAMC,EAAUC,SAAuB,MACjCC,EAAeD,SAAuB,MAQ5C,OANAE,EAAAA,WAAU,aACJJ,GAAUG,EAAaE,SAAWJ,EAAQI,UAC5CF,EAAaE,QAAQC,mBAAYC,EAAAN,EAAQI,8BAASG,YAAkC,UAAtBL,EAAaE,eAAS,IAAAI,OAAA,EAAAA,EAAAD,cAErF,CAACR,IAGFhB,wBAAC0B,OAAI,CACHC,UAAU,SACVC,IAAK,EACLzB,IAAKgB,EACLU,UAAU,OACVC,GAAI,CACF,uBAAwB,CACtBC,QAAS,UAIZjB,EAAQkB,KAAKC,GAEVjC,UAACC,cAAAZ,GACC6C,IAAK,GAAGnB,YAAqBkB,IAC7B1C,SAAU0C,IAAWpC,EAAgBoB,EAAU,KAC/C3B,MAAO2C,EACPzC,WAAYyC,IAAWpC,EACvBJ,YAAaA,QC/CzB,IAAY0C,EAAAA,QAGXA,cAAA,GAHWA,EAAAA,QAAQA,WAARA,iBAGX,KAFC,GAAA,KACAA,EAAA,GAAA,wBCgBwB,EACxBC,YAAAA,EACAC,eAAAA,EAAiB,EACjBC,WAAAA,EACAC,UAAAA,EACAC,aAAAA,MAEA,MAAMxB,OAAEA,EAAMyB,OAAEA,EAAMC,QAAEA,GAAYC,EAAaA,iBAG1CC,EAAcC,GAAmBC,EAAQA,SAACV,GAE3CW,EAAuBC,EAAAA,SAAQ,KACnC,IAAKZ,EAAa,OAElB,MAAMa,EAAY,IAAIC,KAAKd,GAGrBe,EAAQF,EAAUG,WACxB,IAAIC,EAAgBF,EASpB,OAPIA,EAAQ,KACVE,EAAgBF,EAAQ,IAEZ,IAAVA,IACFE,EAAgB,IAGX,CACLF,MAAOE,EAAcC,WACrBC,QAASN,EAAUO,aAAaF,WAChCG,SAAUR,EAAUG,WAAa,GAAKjB,iBAASuB,GAAKvB,QAAAA,SAASwB,MAE9D,CAACvB,KAGGwB,EAAcC,GAAmBf,EAAAA,SAASC,MAAAA,OAAA,EAAAA,EAAsBI,QAChEW,EAAgBC,GAAqBjB,EAAAA,SAASC,MAAAA,OAAA,EAAAA,EAAsBQ,UACpES,EAAkBC,GAAuBnB,EAAAA,SAA6BC,MAAAA,OAAA,EAAAA,EAAsBU,UAE7FS,EAAgBlB,EAAAA,SAAQ,IACvBJ,EACEuB,EAAMA,OAACvB,EAAc,WADF,IAEzB,CAACA,IAEEwB,EAAgBC,IACpB,MAAMC,EAAiBD,EAAOf,WAC9B,OAA8B,IAA1BgB,EAAeC,OACV,IAAID,IAGNA,GAGHE,EAAcxB,EAAAA,SAAQ,IACnB,CAAC,GAAI,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAAI,IAAIhB,KAAKyC,GAASA,EAAKnB,cACjE,IAEGoB,EAAgB1B,EAAAA,SAAQ,KAC5B,MAAMO,EAAU,GAChB,IAAK,IAAIoB,EAAI,EAAGA,EAAI,GAAIA,GAAKtC,EAC3BkB,EAAQqB,KAAKD,GAGf,OAAOpB,EAAQvB,IAAIoC,KAClB,CAAC/B,IAEEwC,EAAkB,CAAC1C,QAAQA,SAACwB,GAAIxB,QAAQA,SAACuB,IAEzCoB,EAAmBnF,EAAWA,aAClC,CAAC8E,EAAeM,EAAiBtB,KAC/B,MAAMuB,EAAQP,GAAQ,KAChBQ,EAAUF,GAAU,KACpBG,EAAYzB,GAAY,KAC9B,IAAI0B,EAAqB,EAEpBV,GACHZ,EAAgB,MAEbkB,GACHhB,EAAkB,MAEfN,GACHQ,EAAoB,MAIlBiB,IAAc/C,QAAAA,SAASuB,IAAM0B,OAAOJ,GAAS,KAC/CG,EAAqB,IAInBD,IAAc/C,QAAAA,SAASwB,IAAwB,KAAlByB,OAAOJ,KACtCG,GAAsB,IAGxB,MAAMhC,EAAQiC,OAAOJ,GAASG,EACxBE,GAAO,IAAInC,MAAOoC,SAASnC,EAAOiC,OAAOH,GAAU,EAAG,GACtDM,EAAO,IAAIrC,KAAKmC,GACtBxC,EAAgB0C,GAEZ/C,GACFA,EAAa+C,KAGjB,CAAC/C,IAGGgD,EAAkB7F,eACrBL,IACCuE,EAAgBvE,GAChBwF,EAAiBxF,EAAOwE,EAAgBE,KAE1C,CAACc,EAAkBd,EAAkBF,IAGjC2B,EAAoB9F,eACvBL,IACCyE,EAAkBzE,GAClBwF,EAAiBlB,EAActE,EAAO0E,KAExC,CAACc,EAAkBlB,EAAcI,IAG7B0B,EAAsB/F,eACzBL,IACC2E,EAAoB3E,GACpBwF,EAAiBlB,EAAcE,EAAgBxE,KAEjD,CAACwF,EAAkBlB,EAAcE,IAGnC,OACE9D,EAAC,QAAAC,cAAA0F,WACC3E,OAAQA,EACRyB,OAAQA,EACRC,QAASA,EACTH,UAAWA,EACXqD,aAAc,CAAEC,MAAO,eACvBC,QAAQ,UACRC,KAAK,KACLC,OACEhG,EAAAA,QAAAC,cAACC,EAAAA,IAAI,CAAA+F,EAAE,QACLjG,EAAAA,QAAAC,cAACiG,EAAAA,iBACCC,OAAAC,OAAA,CAAAC,YAAY,WACZC,aACEtG,EAAC,QAAAC,cAAAyB,EAAIA,MAACf,QAAQ2B,MAAAA,OAAU,EAAVA,EAAYiE,YAAa,cAAgB,UAAWC,EAAE,OAAOC,MAAM,UAC/EzG,EAAAA,QAAAC,cAACyG,EAAAA,KAAK,CAAAX,KAAMY,EAAAA,oBAAmBrE,MAAAA,SAAAA,EAAYyD,OAAQ,MAAOa,KAAK,WAGnEtH,MAAO4E,EACP2C,YAAU,EACVlG,OAAQ,WACJ2B,MAKVtC,UAAAC,cAACyB,EAAIA,KAAA,CAACoF,OAAO,QAAQlF,IAAK,IAAKmF,SAAS,UACtC/G,EAAAA,QAACC,cAAAY,GACCC,QAAS0D,EACTzD,WAAW,OACXlB,cAAe+D,EACfnE,YAAa+F,EACbxE,OAAQA,IAEVhB,EAAA,QAAAC,cAACY,EAAe,CACdC,QAAS4D,EACT3D,WAAW,SACXlB,cAAeiE,EAAiBM,EAAaN,QAAkBkD,EAC/DvH,YAAagG,EACbzE,OAAQA,IAEVhB,EAAC,QAAAC,cAAAY,EACC,CAAAC,QAAS+D,EACT9D,WAAW,WACXlB,cAAemE,EACfvE,YAAaiG,EACb1E,OAAQA"}
|
|
1
|
+
{"version":3,"file":"timePicker.component-3249b590.js","sources":["../src/components/TimePicker/components/timeOption.component.tsx","../src/components/TimePicker/components/scrollContainer.component.tsx","../src/components/TimePicker/timePicker.types.ts","../src/components/TimePicker/timePicker.component.tsx"],"sourcesContent":["import React, { MutableRefObject, useCallback } from 'react';\nimport { Box } from '@chakra-ui/react';\n\ninterface TimeOptionProps {\n value: string;\n innerRef?: MutableRefObject<HTMLDivElement | null> | null;\n isSelected: boolean;\n handleClick: (selectedValue: string) => void;\n}\n\nexport const TimeOption = ({ value, innerRef, isSelected, handleClick }: TimeOptionProps): JSX.Element => {\n const onClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n const selectedValue = event.currentTarget.textContent || '';\n handleClick(selectedValue);\n },\n [handleClick],\n );\n\n return (\n <Box\n ref={innerRef}\n onClick={onClick}\n background={isSelected ? 'background.primary' : 'background.default'}\n color={isSelected ? 'text.onContrast' : 'text.subtle'}\n fontSize=\"sm\"\n textAlign=\"center\"\n px={3}\n py={1}\n borderRadius=\"md\"\n cursor=\"pointer\"\n _hover={{\n background: isSelected ? 'background.primary.hover' : 'background.primaryAlpha.hover',\n }}\n >\n {value}\n </Box>\n );\n};\n","import React, { useEffect, useRef } from 'react';\nimport { Flex } from '@chakra-ui/react';\nimport { TimeOption } from './timeOption.component';\n\ninterface ScrollContainerProps {\n options: string[];\n optionType: 'hour' | 'minute' | 'meridiem';\n selectedValue?: string;\n handleClick: (value: string) => void;\n isOpen: boolean;\n}\n\nexport const ScrollContainer = ({\n options,\n optionType,\n selectedValue,\n handleClick,\n isOpen = false,\n}: ScrollContainerProps): JSX.Element => {\n const itemRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (isOpen && containerRef.current && itemRef.current) {\n containerRef.current.scrollTop = itemRef.current?.offsetTop - containerRef.current?.offsetTop;\n }\n }, [isOpen]);\n\n return (\n <Flex\n direction=\"column\"\n gap={1}\n ref={containerRef}\n overflowY=\"auto\"\n sx={{\n '&::-webkit-scrollbar': {\n display: 'none',\n },\n }}\n >\n {options.map((option) => {\n return (\n <TimeOption\n key={`${optionType}-option-${option}`}\n innerRef={option === selectedValue ? itemRef : null}\n value={option}\n isSelected={option === selectedValue}\n handleClick={handleClick}\n />\n );\n })}\n </Flex>\n );\n};\n","export enum Meridiem {\n AM = 'AM',\n PM = 'PM',\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { PlacementWithLogical, Box, Flex, useDisclosure } from '@chakra-ui/react';\nimport { Icon } from '../Icon/icon.component';\nimport { Popover } from '../Popover/popover.component';\nimport format from 'date-fns/format';\nimport { TextInput, TextInputProps } from '../TextInput/textInput.component';\nimport { ScrollContainer } from './components/scrollContainer.component';\nimport { Meridiem } from './timePicker.types';\nimport { useIconTextSizeMap } from 'shared/hooks/useIconTextSizeMap';\n\nexport interface TimePickerProps {\n initialTime?: Date;\n minuteInterval?: number;\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n placement?: PlacementWithLogical;\n onTimeChange?: (time: Date) => void;\n}\n\nexport const TimePicker = ({\n initialTime,\n minuteInterval = 5,\n inputProps,\n placement,\n onTimeChange,\n}: TimePickerProps): JSX.Element => {\n const { isOpen, onOpen, onClose } = useDisclosure();\n\n // selectedTime should always be UTC\n const [selectedTime, setSelectedTime] = useState(initialTime);\n\n const initialFormattedTime = useMemo(() => {\n if (!initialTime) return;\n\n const localTime = new Date(initialTime);\n\n // calculate hours\n const hours = localTime.getHours();\n let adjustedHours = hours;\n\n if (hours > 12) {\n adjustedHours = hours - 12;\n }\n if (hours === 0) {\n adjustedHours = 12;\n }\n\n return {\n hours: adjustedHours.toString(),\n minutes: localTime.getMinutes().toString(),\n meridiem: localTime.getHours() > 11 ? Meridiem.PM : Meridiem.AM,\n };\n }, [initialTime]);\n\n // convert to local time for display\n const [selectedHour, setSelectedHour] = useState(initialFormattedTime?.hours);\n const [selectedMinute, setSelectedMinute] = useState(initialFormattedTime?.minutes);\n const [selectedMeridiem, setSelectedMeridiem] = useState<string | undefined>(initialFormattedTime?.meridiem);\n\n const formattedTime = useMemo(() => {\n if (!selectedTime) return '';\n return format(selectedTime, 'h:mm aa');\n }, [selectedTime]);\n\n const formatNumber = (number: number | string): string => {\n const formattedValue = number.toString();\n if (formattedValue.length === 1) {\n return `0${formattedValue}`;\n }\n\n return formattedValue;\n };\n\n const hourOptions = useMemo(() => {\n return [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((hour) => hour.toString());\n }, []);\n\n const minuteOptions = useMemo(() => {\n const minutes = [];\n for (let i = 0; i < 60; i += minuteInterval) {\n minutes.push(i);\n }\n\n return minutes.map(formatNumber);\n }, [minuteInterval]);\n\n const meridiemOptions = [Meridiem.AM, Meridiem.PM];\n\n const handleTimeChange = useCallback(\n (hour?: string, minute?: string, meridiem?: string) => {\n const _hour = hour || '12';\n const _minute = minute || '00';\n const _meridiem = meridiem || 'AM';\n let meridiemAdjustment = 0;\n\n if (!hour) {\n setSelectedHour('12');\n }\n if (!minute) {\n setSelectedMinute('00');\n }\n if (!meridiem) {\n setSelectedMeridiem('AM');\n }\n\n // set 1-11pm to 13-23. Don't set 12pm to 24\n if (_meridiem === Meridiem.PM && Number(_hour) < 12) {\n meridiemAdjustment = 12;\n }\n\n // set 12am to 00\n if (_meridiem === Meridiem.AM && Number(_hour) === 12) {\n meridiemAdjustment = -12;\n }\n\n const hours = Number(_hour) + meridiemAdjustment;\n const time = new Date().setHours(hours, Number(_minute), 0, 0);\n const date = new Date(time);\n setSelectedTime(date);\n\n if (onTimeChange) {\n onTimeChange(date);\n }\n },\n [onTimeChange],\n );\n\n const handleHourClick = useCallback(\n (value: string) => {\n setSelectedHour(value);\n handleTimeChange(value, selectedMinute, selectedMeridiem);\n },\n [handleTimeChange, selectedMeridiem, selectedMinute],\n );\n\n const handleMinuteClick = useCallback(\n (value: string) => {\n setSelectedMinute(value);\n handleTimeChange(selectedHour, value, selectedMeridiem);\n },\n [handleTimeChange, selectedHour, selectedMeridiem],\n );\n\n const handleMeridiemClick = useCallback(\n (value: string) => {\n setSelectedMeridiem(value);\n handleTimeChange(selectedHour, selectedMinute, value);\n },\n [handleTimeChange, selectedHour, selectedMinute],\n );\n\n return (\n <Popover\n isOpen={isOpen}\n onOpen={onOpen}\n onClose={onClose}\n placement={placement}\n contentProps={{ width: 'max-content' }}\n variant=\"default\"\n size=\"sm\"\n anchor={\n <Box w=\"100%\">\n <TextInput\n placeholder=\"12:00 AM\"\n rightElement={\n <Flex cursor={inputProps?.isDisabled ? 'not-allowed' : 'pointer'} h=\"100%\" align=\"center\">\n <Icon size={useIconTextSizeMap(inputProps?.size || 'md')} name=\"clock\" />\n </Flex>\n }\n value={formattedTime}\n isReadOnly\n cursor={'pointer'}\n {...inputProps}\n />\n </Box>\n }\n >\n <Flex height=\"186px\" gap={1.5} overflow=\"hidden\">\n <ScrollContainer\n options={hourOptions}\n optionType=\"hour\"\n selectedValue={selectedHour}\n handleClick={handleHourClick}\n isOpen={isOpen}\n />\n <ScrollContainer\n options={minuteOptions}\n optionType=\"minute\"\n selectedValue={selectedMinute ? formatNumber(selectedMinute) : undefined}\n handleClick={handleMinuteClick}\n isOpen={isOpen}\n />\n <ScrollContainer\n options={meridiemOptions}\n optionType=\"meridiem\"\n selectedValue={selectedMeridiem}\n handleClick={handleMeridiemClick}\n isOpen={isOpen}\n />\n </Flex>\n </Popover>\n );\n};\n"],"names":["TimeOption","value","innerRef","isSelected","handleClick","onClick","useCallback","event","selectedValue","currentTarget","textContent","React","createElement","Box","ref","background","color","fontSize","textAlign","px","py","borderRadius","cursor","_hover","ScrollContainer","options","optionType","isOpen","itemRef","useRef","containerRef","useEffect","current","scrollTop","_a","offsetTop","_b","Flex","direction","gap","overflowY","sx","display","map","option","key","Meridiem","initialTime","minuteInterval","inputProps","placement","onTimeChange","onOpen","onClose","useDisclosure","selectedTime","setSelectedTime","useState","initialFormattedTime","useMemo","localTime","Date","hours","getHours","adjustedHours","toString","minutes","getMinutes","meridiem","PM","AM","selectedHour","setSelectedHour","selectedMinute","setSelectedMinute","selectedMeridiem","setSelectedMeridiem","formattedTime","format","formatNumber","number","formattedValue","length","hourOptions","hour","minuteOptions","i","push","meridiemOptions","handleTimeChange","minute","_hour","_minute","_meridiem","meridiemAdjustment","Number","time","setHours","date","handleHourClick","handleMinuteClick","handleMeridiemClick","Popover","contentProps","width","variant","size","anchor","w","TextInput","Object","assign","placeholder","rightElement","isDisabled","h","align","Icon","useIconTextSizeMap","name","isReadOnly","height","overflow","undefined"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react"),t=require("./timePicker.component-
|
|
2
|
-
//# sourceMappingURL=timeRange.component-
|
|
1
|
+
"use strict";var e=require("react"),t=require("./timePicker.component-3249b590.js"),r=require("./chakra-ui-layout.esm-6ee578f7.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e);exports.TimeRange=({startTimePickerProps:e,endTimePickerProps:a,dashContainerProps:n})=>i.default.createElement(r.Flex,null,i.default.createElement(t.TimePicker,Object.assign({},e)),i.default.createElement(r.Box,Object.assign({alignSelf:"center",mx:1},n),"-"),i.default.createElement(t.TimePicker,Object.assign({},a)));
|
|
2
|
+
//# sourceMappingURL=timeRange.component-1b54aa9e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeRange.component-
|
|
1
|
+
{"version":3,"file":"timeRange.component-1b54aa9e.js","sources":["../src/components/TimeRange/timeRange.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, BoxProps, Flex } from '@chakra-ui/react';\nimport { TimePicker, TimePickerProps } from '../TimePicker/timePicker.component';\n\nexport interface TimeRangeProps {\n startTimePickerProps: TimePickerProps;\n endTimePickerProps: TimePickerProps;\n dashContainerProps?: BoxProps;\n}\n\nexport const TimeRange = ({\n startTimePickerProps,\n endTimePickerProps,\n dashContainerProps,\n}: TimeRangeProps): JSX.Element => {\n return (\n <Flex>\n <TimePicker {...startTimePickerProps} />\n <Box alignSelf=\"center\" mx={1} {...dashContainerProps}>\n -\n </Box>\n <TimePicker {...endTimePickerProps} />\n </Flex>\n );\n};\n"],"names":["startTimePickerProps","endTimePickerProps","dashContainerProps","React","Flex","createElement","TimePicker","Object","assign","Box","alignSelf","mx"],"mappings":"yOAUyB,EACvBA,qBAAAA,EACAC,mBAAAA,EACAC,mBAAAA,KAGEC,wBAACC,EAAAA,KAAI,KACHD,EAAC,QAAAE,cAAAC,aAAeC,OAAAC,OAAA,GAAAR,IAChBG,EAAAA,QAACE,cAAAI,EAAAA,IAAIF,OAAAC,OAAA,CAAAE,UAAU,SAASC,GAAI,GAAOT,GAE7B,KACNC,UAAAE,cAACC,EAAAA,WAAeC,OAAAC,OAAA,GAAAP"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),r=require("./withFormControl-28664983.js"),i=require("./checkbox.component-eec36cbb.js"),c=require("./chakra-ui-checkbox.esm-4cded6a7.js"),s=require("./chakra-ui-layout.esm-6ee578f7.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(t);const a=t=>{var{checkboxes:r,size:n="md",direction:a="row",spacing:u,isFieldInline:d,isOnContrast:l}=t,p=e.__rest(t,["checkboxes","size","direction","spacing","isFieldInline","isOnContrast"]);return o.default.createElement(c.CheckboxGroup,Object.assign({},p),o.default.createElement(s.Stack,{direction:a,spacing:u,width:"fit-content"},r.map(((e,t)=>o.default.createElement(i.WrappedCheckbox,Object.assign({isOnContrast:l,key:t},e,{size:n}))))))};a.displayName="CheckboxGroup";const u=r.withFormControl(a);exports.WrappedCheckboxGroup=u;
|
|
2
|
-
//# sourceMappingURL=checkboxGroup.component-3abc29c8.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxGroup.component-3abc29c8.js","sources":["../src/components/CheckboxGroup/checkboxGroup.component.tsx"],"sourcesContent":["import React from 'react';\nimport {\n CheckboxGroup as CCheckboxGroup,\n CheckboxGroupProps as CCheckboxGroupProps,\n Stack,\n SystemProps,\n} from '@chakra-ui/react';\nimport { withFormControl, WithFormControlProps } from 'shared/hocs/FormControl/withFormControl';\nimport { FlexDirection } from 'shared/types/alignment';\nimport { Checkbox, CheckboxProps } from '../Checkbox/checkbox.component';\nimport { FormControlSize } from 'shared/types/formControl';\n\nexport interface KCheckboxGroupProps extends WithFormControlProps {\n size?: FormControlSize;\n checkboxes: CheckboxProps[];\n direction?: FlexDirection;\n spacing?: SystemProps['margin'];\n isFieldInline?: boolean;\n defaultValue?: (string | number)[];\n onChange?: (value: (string | number)[]) => void;\n}\n\nexport type CheckboxGroupProps = KCheckboxGroupProps & CCheckboxGroupProps;\n\nconst CheckboxGroup = ({\n checkboxes,\n size = 'md',\n direction = 'row',\n spacing,\n isFieldInline,\n isOnContrast,\n ...rest\n}: CheckboxGroupProps): JSX.Element => {\n return (\n <CCheckboxGroup {...rest}>\n <Stack direction={direction} spacing={spacing} width=\"fit-content\">\n {checkboxes.map((checkbox, index) => (\n <Checkbox isOnContrast={isOnContrast} key={index} {...checkbox} size={size} />\n ))}\n </Stack>\n </CCheckboxGroup>\n );\n};\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nconst WrappedCheckboxGroup = withFormControl(CheckboxGroup);\n\nexport { WrappedCheckboxGroup as CheckboxGroup };\n"],"names":["CheckboxGroup","_a","checkboxes","size","direction","spacing","isFieldInline","isOnContrast","rest","__rest","React","createElement","CCheckboxGroup","Object","assign","Stack","width","map","checkbox","index","Checkbox","WrappedCheckbox","key","displayName","WrappedCheckboxGroup","withFormControl"],"mappings":"uVAwBA,MAAMA,EAAiBC,QAAAC,WACrBA,EAAUC,KACVA,EAAO,KAAIC,UACXA,EAAY,MAAKC,QACjBA,EAAOC,cACPA,EAAaC,aACbA,GAAYN,EACTO,EAAIC,EAAAA,OAAAR,EAPc,4EASrB,OACES,EAAAA,QAAAC,cAACC,EAAcZ,cAAAa,OAAAC,OAAA,GAAKN,GAClBE,EAAC,QAAAC,cAAAI,EAAKA,OAACX,UAAWA,EAAWC,QAASA,EAASW,MAAM,eAClDd,EAAWe,KAAI,CAACC,EAAUC,IACzBT,EAAA,QAAAC,cAACS,EAAQC,gBAACR,OAAAC,OAAA,CAAAP,aAAcA,EAAce,IAAKH,GAAWD,EAAU,CAAAf,KAAMA,UAOhFH,EAAcuB,YAAc,gBAE5B,MAAMC,EAAuBC,EAAeA,gBAACzB"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),r=require("./chakra-ui-radio.esm-f310d451.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=a(t);exports.Radio=t=>{var{children:a,size:i="md",isOnContrast:n}=t,d=e.__rest(t,["children","size","isOnContrast"]);const o=n?"onContrast":"default";return s.default.createElement(r.Radio,Object.assign({variant:o},d,{size:i,alignItems:"flex-start"}),a)};
|
|
2
|
-
//# sourceMappingURL=radio.component-1ebba5e1.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"radio.component-1ebba5e1.js","sources":["../src/components/Radio/radio.component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Radio as CRadio, RadioProps as CRadioProps } from '@chakra-ui/react';\nimport { RadioSize } from './radio.types';\n\nexport interface KRadioProps {\n children?: ReactNode;\n isChecked?: boolean;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isOnContrast?: boolean;\n size?: RadioSize;\n value?: string | number;\n}\n\nexport type RadioProps = KRadioProps & CRadioProps;\n\nexport const Radio = ({ children, size = 'md', isOnContrast, ...rest }: RadioProps): JSX.Element => {\n const _computedVariant = isOnContrast ? 'onContrast' : 'default';\n return (\n <CRadio variant={_computedVariant} {...rest} size={size} alignItems=\"flex-start\">\n {children}\n </CRadio>\n );\n};\n"],"names":["_a","children","size","isOnContrast","rest","__rest","_computedVariant","React","CRadio","Radio","Object","assign","variant","alignItems"],"mappings":"yNAgBsBA,IAAA,IAAAC,SAAEA,EAAQC,KAAEA,EAAO,KAAIC,aAAEA,GAAYH,EAAKI,EAA1CC,EAAAA,OAAAL,EAAA,CAAA,WAAA,OAAA,iBACpB,MAAMM,EAAmBH,EAAe,aAAe,UACvD,OACEI,EAAAA,sBAACC,EAAMC,MAAAC,OAAAC,OAAA,CAACC,QAASN,GAAsBF,EAAI,CAAEF,KAAMA,EAAMW,WAAW,eACjEZ"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-d6f17add.js"),r=require("react"),i=require("./withFormControl-28664983.js"),t=require("./radio.component-1ebba5e1.js"),a=require("./chakra-ui-radio.esm-f310d451.js"),s=require("./chakra-ui-layout.esm-6ee578f7.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(r);const d=r=>{var{radios:i,size:n="md",direction:d="row",spacing:c,isFieldInline:u,isOnContrast:l}=r,m=e.__rest(r,["radios","size","direction","spacing","isFieldInline","isOnContrast"]);return o.default.createElement(a.RadioGroup,Object.assign({},m),o.default.createElement(s.Stack,{direction:d,spacing:c,maxW:m.maxW||"max-content"},i.map(((e,r)=>o.default.createElement(t.Radio,Object.assign({isOnContrast:l,key:r},e,{size:n}))))))};d.displayName="RadioGroup";const c=i.withFormControl(d);exports.WrappedRadioGroup=c;
|
|
2
|
-
//# sourceMappingURL=radioGroup.component-f08f38ce.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"radioGroup.component-f08f38ce.js","sources":["../src/components/RadioGroup/radioGroup.component.tsx"],"sourcesContent":["import React from 'react';\nimport { RadioGroup as CRadioGroup, RadioGroupProps as CRadioGroupProps, Stack, SystemProps } from '@chakra-ui/react';\nimport { withFormControl, WithFormControlProps } from 'shared/hocs/FormControl/withFormControl';\nimport { FlexDirection } from 'shared/types/alignment';\nimport { Radio, RadioProps } from '../Radio/radio.component';\nimport { RadioSize } from '../Radio/radio.types';\n\nexport interface KRadioGroupProps extends WithFormControlProps {\n size?: RadioSize;\n radios: RadioProps[];\n direction?: FlexDirection;\n spacing?: SystemProps['margin'];\n isOnContrast?: boolean;\n name?: string;\n value?: string | number;\n onChange?: (value: string) => void;\n}\n\nexport type RadioGroupProps = KRadioGroupProps & Omit<CRadioGroupProps, 'children'>;\n\nconst RadioGroup = ({\n radios,\n size = 'md',\n direction = 'row',\n spacing,\n isFieldInline,\n isOnContrast,\n ...rest\n}: RadioGroupProps): JSX.Element => {\n return (\n <CRadioGroup {...rest}>\n <Stack direction={direction} spacing={spacing} maxW={rest.maxW || 'max-content'}>\n {radios.map((radio, index) => (\n <Radio isOnContrast={isOnContrast} key={index} {...radio} size={size} />\n ))}\n </Stack>\n </CRadioGroup>\n );\n};\n\nRadioGroup.displayName = 'RadioGroup';\n\nconst WrappedRadioGroup = withFormControl(RadioGroup);\n\nexport { WrappedRadioGroup as RadioGroup };\n"],"names":["RadioGroup","_a","radios","size","direction","spacing","isFieldInline","isOnContrast","rest","__rest","React","createElement","CRadioGroup","Object","assign","Stack","maxW","map","radio","index","Radio","key","displayName","WrappedRadioGroup","withFormControl"],"mappings":"iVAoBA,MAAMA,EAAcC,QAAAC,OAClBA,EAAMC,KACNA,EAAO,KAAIC,UACXA,EAAY,MAAKC,QACjBA,EAAOC,cACPA,EAAaC,aACbA,GAAYN,EACTO,EAAIC,EAAAA,OAAAR,EAPW,wEASlB,OACES,EAAAA,QAAAC,cAACC,EAAWZ,WAAAa,OAAAC,OAAA,GAAKN,GACfE,EAAC,QAAAC,cAAAI,EAAKA,MAAC,CAAAX,UAAWA,EAAWC,QAASA,EAASW,KAAMR,EAAKQ,MAAQ,eAC/Dd,EAAOe,KAAI,CAACC,EAAOC,IAClBT,EAAA,QAAAC,cAACS,EAAKA,MAAAP,OAAAC,OAAA,CAACP,aAAcA,EAAcc,IAAKF,GAAWD,EAAK,CAAEf,KAAMA,UAO1EH,EAAWsB,YAAc,aAEzB,MAAMC,EAAoBC,EAAeA,gBAACxB"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("./tslib.es6-d6f17add.js"),t=require("react"),n=require("./menuContainer.component-3e1e324b.js"),l=require("./withFormControl-28664983.js"),a=require("./menu.context-22d23674.js"),r=require("./menuList.component-5a00cb30.js"),s=require("./text.component-057889c3.js"),i=require("./chakra-ui-layout.esm-6ee578f7.js"),u=require("./icon.component-100b924b.js"),c=require("./chakra-ui-select.esm-793cf4de.js"),o=require("./chakra-ui-menu.esm-1ed98193.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(t);const f=t=>{const{options:n}=t,l=e.__rest(t,["options"]);return m.default.createElement(r.MenuList,Object.assign({shouldRetainSelection:!0,menuItems:n,isMatchWidthSet:!0},l))},p=({selectedOption:e,defaultLeftElement:t,shouldTruncateText:n=!0})=>m.default.createElement(i.Flex,{className:"Select__Container",justify:"flex-start",align:"center",textAlign:"left",color:e.variant?`text.${e.variant}`:"text.default"},(null==e?void 0:e.leftElement)?m.default.createElement(i.Flex,{align:"center",className:"Select__LeftElement",pr:2},e.leftElement):t?m.default.createElement(i.Flex,{align:"center",className:"Select__LeftElement",pr:2},t):null,"string"==typeof e.label?m.default.createElement(s.WrappedText,{className:"Select__Text",isTruncated:n,variant:e.variant||"default"},e.label):e.label),v=l=>{var{defaultLeftElement:r,isFieldInline:s,listProps:i,options:d,placeholder:v,size:x="md",value:h,maxW:E="100%",isOnContrast:S,emptyStateText:b}=l,j=e.__rest(l,["defaultLeftElement","isFieldInline","listProps","options","placeholder","size","value","maxW","isOnContrast","emptyStateText"]);const g=S?"onContrast":"default",T=t.useRef(null),_=t.useMemo((()=>({label:v,value:"",variant:S?"placeholderOnContrast":"placeholder",leftElement:null,isSelected:!1,isPlaceholder:!0})),[v,S]),[O,q]=t.useState([]),C=t.useMemo((()=>{const e=O.find((e=>e.isSelected));return e||_}),[O,_]),y=t.useCallback((e=>{if(!O)return;const t=O.map((t=>Object.assign(Object.assign({},t),{isSelected:t.value===e.value})));q(t),(null==i?void 0:i.onSelect)&&i.onSelect(e)}),[O,i]),L=(null==i?void 0:i.shouldTruncateText)?{}:{height:"max-content",minH:10},M=t.useMemo((()=>{var e;return T.current?`${null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.clientWidth}px`:"320px"}),[null==T?void 0:T.current]);return t.useEffect((()=>{const e=d.map((e=>Object.assign(Object.assign({},e),{isSelected:e.value===h})));q([...e,_])}),[d,_,h]),m.default.createElement(a.MenuProvider,{menuItems:O},m.default.createElement(n.MenuContainer,{matchWidth:!0,isLazy:!0},m.default.createElement(c.Select,Object.assign({icon:m.default.createElement(u.Icon,{name:"chevronDown",size:x}),as:o.MenuButton,ref:T,onClick:e=>e.stopPropagation(),type:"button",className:"Select__MenuButton",variant:g,maxW:E},L,j),m.default.createElement(p,{selectedOption:C,defaultLeftElement:r,shouldTruncateText:null==i?void 0:i.shouldTruncateText})),m.default.createElement(f,Object.assign({},i,{onSelect:y,options:O,maxW:M||E,emptyStateText:b}))))};v.displayName="Select";const x=l.withFormControl(v);exports.WrappedSelect=x;
|
|
2
|
-
//# sourceMappingURL=select.component-b1c077a2.js.map
|