@televet/kibble-ui 5.0.26-franklin.6 → 5.0.26-rb.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/calendar.component-BFSyxaB6.js +2 -0
- package/dist/chunks/calendar.component-BFSyxaB6.js.map +1 -0
- package/dist/chunks/calendar.component-CegJR9ey.js +18 -0
- package/dist/chunks/calendar.component-CegJR9ey.js.map +1 -0
- package/dist/chunks/datePicker.component-BuGpHTzS.js +2 -0
- package/dist/chunks/{datePicker.component-JVmLDTg8.js.map → datePicker.component-BuGpHTzS.js.map} +1 -1
- package/dist/chunks/datePicker.component-CLTjEX7i.js +166 -0
- package/dist/chunks/datePicker.component-CLTjEX7i.js.map +1 -0
- package/dist/chunks/{datePicker.provider-DjDP292O.js → datePicker.provider-CttuPiiS.js} +3 -3
- package/dist/chunks/{datePicker.provider-DjDP292O.js.map → datePicker.provider-CttuPiiS.js.map} +1 -1
- package/dist/chunks/{dateTimePicker.component-r4V8f57O.js → dateTimePicker.component-CLAI_Q6e.js} +2 -2
- package/dist/chunks/{dateTimePicker.component-r4V8f57O.js.map → dateTimePicker.component-CLAI_Q6e.js.map} +1 -1
- package/dist/chunks/{semanticTokens.records-CwC7zhMS.js → semanticTokens.records-C_ewkfqj.js} +4 -4
- package/dist/chunks/{semanticTokens.records-CwC7zhMS.js.map → semanticTokens.records-C_ewkfqj.js.map} +1 -1
- package/dist/chunks/{semanticTokens.records-CmeaObFQ.js → semanticTokens.records-YFGbKTL1.js} +2 -2
- package/dist/chunks/{semanticTokens.records-CmeaObFQ.js.map → semanticTokens.records-YFGbKTL1.js.map} +1 -1
- package/dist/chunks/{theme.provider-CtbJ04tc.js → theme.provider-BeSlhtUQ.js} +2 -2
- package/dist/chunks/{theme.provider-CtbJ04tc.js.map → theme.provider-BeSlhtUQ.js.map} +1 -1
- package/dist/chunks/{theme.provider-C_F9M-W3.js → theme.provider-DYehMUhm.js} +2 -2
- package/dist/chunks/{theme.provider-C_F9M-W3.js.map → theme.provider-DYehMUhm.js.map} +1 -1
- package/dist/cjs/components/Calendar/index.cjs +1 -1
- package/dist/cjs/components/DatePicker/index.cjs +1 -1
- package/dist/cjs/components/index.cjs +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/theme/index.cjs +1 -1
- package/dist/cjs/theme/semanticTokens/index.cjs +1 -1
- package/dist/esm/cli/generate-theme-types.js +0 -0
- package/dist/esm/cli/postinstall.js +0 -0
- package/dist/esm/components/Calendar/index.js +2 -4
- package/dist/esm/components/Calendar/index.js.map +1 -1
- package/dist/esm/components/DatePicker/index.js +2 -2
- package/dist/esm/components/DateTimePicker/index.js +1 -1
- package/dist/esm/components/index.js +124 -126
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/index.js +148 -150
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/theme/index.js +1 -1
- package/dist/esm/theme/semanticTokens/index.js +1 -1
- package/dist/types/components/Calendar/calendar.component.d.ts +1 -12
- package/dist/types/components/Calendar/index.d.ts +0 -1
- package/dist/types/components/DatePicker/datePicker.component.d.ts +0 -14
- package/package.json +1 -1
- package/dist/chunks/calendar.component-BuByj_kQ.js +0 -2
- package/dist/chunks/calendar.component-BuByj_kQ.js.map +0 -1
- package/dist/chunks/calendar.component-DXOO8TEd.js +0 -22
- package/dist/chunks/calendar.component-DXOO8TEd.js.map +0 -1
- package/dist/chunks/calendarTodayButton.component-BUWyokw4.js +0 -30
- package/dist/chunks/calendarTodayButton.component-BUWyokw4.js.map +0 -1
- package/dist/chunks/calendarTodayButton.component-CynzgVXX.js +0 -2
- package/dist/chunks/calendarTodayButton.component-CynzgVXX.js.map +0 -1
- package/dist/chunks/datePicker.component-Ccp2rTeh.js +0 -172
- package/dist/chunks/datePicker.component-Ccp2rTeh.js.map +0 -1
- package/dist/chunks/datePicker.component-JVmLDTg8.js +0 -2
- package/dist/types/components/Calendar/calendarTodayButton.component.d.ts +0 -10
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),n=require("./index-BQRnVsAg.js"),r=require("./datePicker.provider-i35-VNAb.js"),d=require("./divider.component-BX3zyB7O.js"),x=({["data-testid"]:t="kibble-calendar",withDateRange:s=!0,withHeaderTriggers:i=!1,...a})=>e.jsxRuntimeExports.jsx(n.Box,{className:"Calendar","data-testid":t,maxW:"340px",children:e.jsxRuntimeExports.jsxs(r.DatePickerProvider,{withDateRange:s,...a,standalone:!0,children:[e.jsxRuntimeExports.jsx(r.DatePickerHeader,{withTriggers:i}),e.jsxRuntimeExports.jsx(d.Divider,{}),e.jsxRuntimeExports.jsx(r.DatePickerCalendar,{})]})});exports.Calendar=x;
|
|
2
|
+
//# sourceMappingURL=calendar.component-BFSyxaB6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.component-BFSyxaB6.js","sources":["../../src/components/Calendar/calendar.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { DatePickerCalendar } from 'components/DatePicker/components/DatePickerCalendar/datePickerCalendar.component';\nimport { DatePickerHeader } from 'components/DatePicker/components/DatePickerHeader/datePickerHeader.component';\nimport { Divider } from 'components/Divider';\nimport { DatePickerProvider } from 'components/DatePicker/context/datePicker.provider';\nimport { DateProps } from 'components/DatePicker/datePicker.types';\n\nexport interface CalendarProps extends DateProps {\n /** Data test id for the calendar.\n * @default kibble-calendar\n */\n 'data-testid'?: string;\n /**\n * If true, the calendar will allow for a date range selection.\n * @default true\n */\n withDateRange?: boolean;\n /**\n * If true, the calendar will show the month and year selectors in the header.\n * @default false\n */\n withHeaderTriggers?: boolean;\n}\n\nexport const Calendar = ({\n ['data-testid']: dataTestId = 'kibble-calendar',\n withDateRange = true,\n withHeaderTriggers = false,\n ...rest\n}: CalendarProps): React.JSX.Element => {\n return (\n <Box className=\"Calendar\" data-testid={dataTestId} maxW=\"340px\">\n <DatePickerProvider withDateRange={withDateRange} {...rest} standalone>\n <DatePickerHeader withTriggers={withHeaderTriggers} />\n <Divider />\n <DatePickerCalendar />\n </DatePickerProvider>\n </Box>\n );\n};\n"],"names":["Calendar","dataTestId","withDateRange","withHeaderTriggers","rest","jsx","Box","jsxs","DatePickerProvider","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"uLAyBaA,EAAW,CAAC,CACvB,CAAC,eAAgBC,EAAa,kBAC9B,cAAAC,EAAgB,GAChB,mBAAAC,EAAqB,GACrB,GAAGC,CACL,IAEKC,EAAAA,kBAAAA,IAAAC,EAAAA,IAAA,CAAI,UAAU,WAAW,cAAaL,EAAY,KAAK,QACtD,SAAAM,EAAA,kBAAA,KAACC,EAAmB,mBAAA,CAAA,cAAAN,EAA+B,GAAGE,EAAM,WAAU,GACpE,SAAA,CAACC,EAAAA,kBAAAA,IAAAI,EAAA,iBAAA,CAAiB,aAAcN,CAAoB,CAAA,0BACnDO,EAAQ,QAAA,EAAA,0BACRC,EAAmB,mBAAA,CAAA,CAAA,CAAA,CAAA,CACtB,CACF,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { j as a } from "./jsx-runtime-C5mzlN2N.js";
|
|
2
|
+
import { B as i } from "./index-9BerxEcw.js";
|
|
3
|
+
import { a as d, b as o, c as m } from "./datePicker.provider-CttuPiiS.js";
|
|
4
|
+
import { D as n } from "./divider.component-CFOh4Nw3.js";
|
|
5
|
+
const p = ({
|
|
6
|
+
["data-testid"]: r = "kibble-calendar",
|
|
7
|
+
withDateRange: e = !0,
|
|
8
|
+
withHeaderTriggers: s = !1,
|
|
9
|
+
...t
|
|
10
|
+
}) => /* @__PURE__ */ a.jsx(i, { className: "Calendar", "data-testid": r, maxW: "340px", children: /* @__PURE__ */ a.jsxs(d, { withDateRange: e, ...t, standalone: !0, children: [
|
|
11
|
+
/* @__PURE__ */ a.jsx(o, { withTriggers: s }),
|
|
12
|
+
/* @__PURE__ */ a.jsx(n, {}),
|
|
13
|
+
/* @__PURE__ */ a.jsx(m, {})
|
|
14
|
+
] }) });
|
|
15
|
+
export {
|
|
16
|
+
p as C
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=calendar.component-CegJR9ey.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.component-CegJR9ey.js","sources":["../../src/components/Calendar/calendar.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { DatePickerCalendar } from 'components/DatePicker/components/DatePickerCalendar/datePickerCalendar.component';\nimport { DatePickerHeader } from 'components/DatePicker/components/DatePickerHeader/datePickerHeader.component';\nimport { Divider } from 'components/Divider';\nimport { DatePickerProvider } from 'components/DatePicker/context/datePicker.provider';\nimport { DateProps } from 'components/DatePicker/datePicker.types';\n\nexport interface CalendarProps extends DateProps {\n /** Data test id for the calendar.\n * @default kibble-calendar\n */\n 'data-testid'?: string;\n /**\n * If true, the calendar will allow for a date range selection.\n * @default true\n */\n withDateRange?: boolean;\n /**\n * If true, the calendar will show the month and year selectors in the header.\n * @default false\n */\n withHeaderTriggers?: boolean;\n}\n\nexport const Calendar = ({\n ['data-testid']: dataTestId = 'kibble-calendar',\n withDateRange = true,\n withHeaderTriggers = false,\n ...rest\n}: CalendarProps): React.JSX.Element => {\n return (\n <Box className=\"Calendar\" data-testid={dataTestId} maxW=\"340px\">\n <DatePickerProvider withDateRange={withDateRange} {...rest} standalone>\n <DatePickerHeader withTriggers={withHeaderTriggers} />\n <Divider />\n <DatePickerCalendar />\n </DatePickerProvider>\n </Box>\n );\n};\n"],"names":["Calendar","dataTestId","withDateRange","withHeaderTriggers","rest","jsx","Box","jsxs","DatePickerProvider","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":";;;;AAyBO,MAAMA,IAAW,CAAC;AAAA,EACvB,CAAC,gBAAgBC,IAAa;AAAA,EAC9B,eAAAC,IAAgB;AAAA,EAChB,oBAAAC,IAAqB;AAAA,EACrB,GAAGC;AACL,MAEKC,gBAAAA,EAAAA,IAAAC,GAAA,EAAI,WAAU,YAAW,eAAaL,GAAY,MAAK,SACtD,UAAAM,gBAAAA,EAAA,KAACC,GAAmB,EAAA,eAAAN,GAA+B,GAAGE,GAAM,YAAU,IACpE,UAAA;AAAA,EAACC,gBAAAA,EAAAA,IAAAI,GAAA,EAAiB,cAAcN,EAAoB,CAAA;AAAA,wBACnDO,GAAQ,EAAA;AAAA,wBACRC,GAAmB,CAAA,CAAA;AAAA,EAAA,CACtB,EACF,CAAA;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BjDatQAs.js"),n=require("./datePicker.provider-i35-VNAb.js"),k=require("./textInput.component-CwTc0h_F.js"),g=require("./icon.component-B1hr5lLa.js"),S=require("./text.component-BDDz5KQP.js"),l=require("./format-CK7Imh-5.js"),v=require("./popover-root-provider-CZDbUJ2K.js"),q=require("./h-stack-D4MnHHRc.js"),P=require("./flex-BOU6tYUd.js"),y=require("react"),C=require("./button.component-DjdgBXDC.js"),w=require("./popover.recipe-CtptsJg6.js"),z=require("./usePortalContentRef-CTrvBQ7I.js"),N=require("./divider.component-BX3zyB7O.js"),T=require("./create-slot-recipe-context-HXE1VazG.js"),B=require("./index-Ts8g8jZd.js"),m=require("./popover-C7aj8Iwj.js");function W(t,r){return+l.toDate(t)<+l.toDate(r)}const A=(t,r)=>r?n.isAfter(t,r):!0,H=(t,r)=>r?W(t,r):!0;function O({inputProps:t,["data-testid"]:r="kibble-datepicker-input"}){const{setFocusedInput:o,startDate:a,endDate:i,focusedInput:c,dateFormat:s,withDateRange:u,minDate:d,maxDate:x,onDateChange:R,onDateSelect:I,onClose:F}=n.useDatePickerContext(),{open:_,setOpen:b}=v.usePopoverContext(),f=t?.size||"md",h=p=>{p.key==="Enter"&&_&&(b(!1),F(),p.preventDefault(),p.stopPropagation())},E=p=>{const D=p.target.value,j=n.xt(D,s,n.today);D.length===s.length&&l.isDate(j)&&A(j,d)&&H(j,x)&&I(j),!D.length&&R&&R({startDate:null,endDate:null})};return e.jsxRuntimeExports.jsxs(q.HStack,{w:"100%",className:"DatePicker__Trigger","data-testid":r,children:[e.jsxRuntimeExports.jsx(k.WrappedTextInput,{className:"DatePicker__Input--Start","data-testid":`${r}-start`,autoComplete:"off",rightElement:e.jsxRuntimeExports.jsx(P.Flex,{...!t?.disabled&&{onClick:()=>o(n.FocusedInput.StartDate)},h:"100%",align:"center",children:e.jsxRuntimeExports.jsx(g.Icon,{name:"calendarDate",size:f})}),value:n.Ue(a,s,""),onChange:E,onKeyDown:h,...!t?.disabled&&{onFocus:()=>{o(n.FocusedInput.StartDate)}},placeholder:l.format(n.today,s).toString(),...c===n.FocusedInput.StartDate&&{"data-focus":!0},...t}),u&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(S.WrappedText,{children:" - "}),e.jsxRuntimeExports.jsx(k.WrappedTextInput,{className:"DatePicker__Input--End","data-testid":`${r}-end`,rightElement:e.jsxRuntimeExports.jsx(P.Flex,{...!t?.disabled&&{onClick:()=>o(n.FocusedInput.StartDate)},h:"100%",align:"center",children:e.jsxRuntimeExports.jsx(g.Icon,{name:"calendarDate",size:f})}),value:n.Ue(i,s,""),onChange:E,...!t?.disabled&&{onFocus:()=>o(n.FocusedInput.EndDate)},onKeyDown:h,placeholder:l.format(n.today,s).toString(),...c===n.FocusedInput.EndDate&&{"data-focus":!0},...t})]})]})}function $({buttonText:t="Apply",onSubmit:r,hideResetButton:o}){const{startDate:a,endDate:i,clearDates:c,standalone:s}=n.useDatePickerContext(),{open:u,setOpen:d}=v.usePopoverContext(),x=y.useCallback(()=>{s||d(!1),r&&r({startDate:a,endDate:i})},[s,d,r,a,i]);return e.jsxRuntimeExports.jsxs(q.HStack,{w:"100%",justify:o?"end":"space-between",align:"center",borderTop:"1px",borderColor:"border.default",px:3,py:2,children:[!o&&e.jsxRuntimeExports.jsx(C.Button,{size:"sm",variant:"ghostNeutral",onClick:()=>c({open:u}),children:"Clear Dates"}),e.jsxRuntimeExports.jsx(C.Button,{size:"sm",onClick:x,children:t})]})}const M=t=>{const{footerProps:r,hideFooter:o=!1,inputProps:a,portalled:i=!0,withDateRange:c=!1,["data-testid"]:s="kibble-datepicker"}=t,{contentRef:u}=z.usePortalContentRef(),x=T.useSlotRecipe({recipe:w.popoverRecipe})();return e.jsxRuntimeExports.jsxs(n.DatePickerProvider,{...t,children:[e.jsxRuntimeExports.jsx(m.PopoverTrigger,{w:"100%",children:e.jsxRuntimeExports.jsx(O,{inputProps:{...a,readOnly:!0}})}),e.jsxRuntimeExports.jsx(B.Portal,{container:u||void 0,disabled:!i,children:e.jsxRuntimeExports.jsx(m.PopoverPositioner,{className:"DatePicker","data-testid":s,children:e.jsxRuntimeExports.jsx(m.PopoverContent,{className:"DatePicker__Content","data-testid":`${s}-content`,css:{...x.content,minW:"340px"},children:e.jsxRuntimeExports.jsxs(m.PopoverBody,{css:{"--popover-padding":0},children:[e.jsxRuntimeExports.jsx(n.DatePickerHeader,{}),e.jsxRuntimeExports.jsx(N.Divider,{}),e.jsxRuntimeExports.jsx(n.DatePickerCalendar,{}),c&&!o&&e.jsxRuntimeExports.jsx($,{...r})]})})})})]})};exports.DatePicker=M;
|
|
2
|
+
//# sourceMappingURL=datePicker.component-BuGpHTzS.js.map
|
package/dist/chunks/{datePicker.component-JVmLDTg8.js.map → datePicker.component-BuGpHTzS.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datePicker.component-JVmLDTg8.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/**\n * @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n *\n * @description\n * Is the first date before the second one?\n *\n * @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n *\n * @returns The first date is before the second date\n *\n * @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n */\nexport function isBefore(date, dateToCompare) {\n return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n /** Props to customize the input field. See `TextInput` for more information. */\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n /** Data test id for the input.\n * @default kibble-datepicker-input\n */\n 'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n inputProps,\n ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n const {\n setFocusedInput,\n startDate,\n endDate,\n focusedInput,\n dateFormat,\n withDateRange,\n minDate,\n maxDate,\n onDateChange,\n onDateSelect,\n onClose,\n } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n const iconSize = inputProps?.size || 'md';\n\n const onKeyDown = (e: React.KeyboardEvent): void => {\n if (e.key === 'Enter' && open) {\n setOpen(false);\n onClose();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n const dateValue = e.target.value;\n const parsedDate = parseDate(dateValue, dateFormat, today);\n\n if (\n dateValue.length === dateFormat.length &&\n isDate(parsedDate) &&\n isDateAfterMin(parsedDate, minDate) &&\n isDateBeforeMax(parsedDate, maxDate)\n ) {\n onDateSelect(parsedDate);\n }\n\n // Trigger change when input is empty\n if (!dateValue.length && onDateChange) {\n onDateChange({ startDate: null, endDate: null });\n }\n };\n\n return (\n <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n <TextInput\n className=\"DatePicker__Input--Start\"\n data-testid={`${dataTestId}-start`}\n autoComplete=\"off\"\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(startDate, dateFormat, '')}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n {...(!inputProps?.disabled && {\n onFocus: (): void => {\n setFocusedInput(FocusedInput.StartDate);\n },\n })}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.StartDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n {withDateRange && (\n <>\n <Text> - </Text>\n <TextInput\n className=\"DatePicker__Input--End\"\n data-testid={`${dataTestId}-end`}\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(endDate, dateFormat, '')}\n onChange={onInputChange}\n {...(!inputProps?.disabled && {\n onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n })}\n onKeyDown={onKeyDown}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.EndDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n </>\n )}\n </HStack>\n );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n /** Text to display in the submit button.\n * @default Apply\n */\n buttonText?: string;\n /** Callback function to be called when the submit button is clicked. */\n onSubmit?: ({ startDate, endDate }: DateRange) => void;\n /** If true, the reset button will be hidden. */\n hideResetButton?: boolean;\n /** Data test id for the footer.\n * @default kibble-datepicker-footer\n */\n 'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n buttonText = 'Apply',\n onSubmit,\n hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n\n const handleSubmit = useCallback((): void => {\n if (!standalone) {\n setOpen(false);\n }\n\n if (onSubmit) {\n onSubmit({ startDate, endDate });\n }\n }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n return (\n <HStack\n w=\"100%\"\n justify={hideResetButton ? 'end' : 'space-between'}\n align=\"center\"\n borderTop=\"1px\"\n borderColor=\"border.default\"\n px={3}\n py={2}\n >\n {!hideResetButton && (\n <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n Clear Dates\n </Button>\n )}\n <Button size=\"sm\" onClick={handleSubmit}>\n {buttonText}\n </Button>\n </HStack>\n );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\nimport { CalendarTodayButton } from 'components/Calendar/calendarTodayButton.component';\n\nexport interface DatePickerProps extends DateProps {\n /** Props to customize the calendar footer. Only applicable when `withDateRange` is true. */\n footerProps?: DatePickerFooterProps;\n /**\n * Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n * @default false\n */\n hideFooter?: boolean;\n /** Props to customize the input field. See `TextInput` for more information. */\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n /**\n * Placement of the calendar popover\n * @default bottom\n */\n placement?: Placement;\n /**\n * If true, the date picker will be rendered in a portal.\n * @default true\n */\n portalled?: boolean;\n /**\n * Custom trigger element. When provided, replaces the default text input trigger.\n */\n trigger?: React.ReactNode;\n /**\n * If true, a \"Today\" button is rendered below the calendar grid.\n * @default false\n */\n showTodayButton?: boolean;\n /**\n * Callback fired after the \"Today\" button is clicked.\n * Only relevant when showTodayButton is true.\n */\n onTodayClick?: () => void;\n /**\n * If true, the date picker will render two input fields that control both the start and end date for a range selection.\n * @default false\n */\n withDateRange?: boolean;\n /** Data test id for the date picker.\n * @default kibble-datepicker\n */\n 'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n const {\n footerProps,\n hideFooter = false,\n inputProps,\n portalled = true,\n showTodayButton = false,\n onTodayClick,\n trigger,\n withDateRange = false,\n ['data-testid']: dataTestId = 'kibble-datepicker',\n ...providerProps\n } = props;\n const { contentRef } = usePortalContentRef();\n const recipe = useSlotRecipe({ recipe: popoverRecipe });\n const styles = recipe();\n\n return (\n <DatePickerProvider {...providerProps} withDateRange={withDateRange}>\n <CPopover.Trigger asChild={!!trigger}>\n {trigger ?? <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />}\n </CPopover.Trigger>\n <Portal container={contentRef || undefined} disabled={!portalled}>\n <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n <CPopover.Content\n className=\"DatePicker__Content\"\n data-testid={`${dataTestId}-content`}\n css={{ ...styles.content, minW: '340px' }}\n >\n <CPopover.Body css={{ '--popover-padding': 0 }}>\n <DatePickerHeader />\n <Divider />\n <DatePickerCalendar />\n {showTodayButton && <CalendarTodayButton onTodayClick={onTodayClick} />}\n {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n </CPopover.Body>\n </CPopover.Content>\n </CPopover.Positioner>\n </Portal>\n </DatePickerProvider>\n );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","showTodayButton","onTodayClick","trigger","providerProps","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar","CalendarTodayButton"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"datePicker.component-BuGpHTzS.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/**\n * @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n *\n * @description\n * Is the first date before the second one?\n *\n * @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n *\n * @returns The first date is before the second date\n *\n * @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n */\nexport function isBefore(date, dateToCompare) {\n return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n /** Props to customize the input field. See `TextInput` for more information. */\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n /** Data test id for the input.\n * @default kibble-datepicker-input\n */\n 'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n inputProps,\n ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n const {\n setFocusedInput,\n startDate,\n endDate,\n focusedInput,\n dateFormat,\n withDateRange,\n minDate,\n maxDate,\n onDateChange,\n onDateSelect,\n onClose,\n } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n const iconSize = inputProps?.size || 'md';\n\n const onKeyDown = (e: React.KeyboardEvent): void => {\n if (e.key === 'Enter' && open) {\n setOpen(false);\n onClose();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n const dateValue = e.target.value;\n const parsedDate = parseDate(dateValue, dateFormat, today);\n\n if (\n dateValue.length === dateFormat.length &&\n isDate(parsedDate) &&\n isDateAfterMin(parsedDate, minDate) &&\n isDateBeforeMax(parsedDate, maxDate)\n ) {\n onDateSelect(parsedDate);\n }\n\n // Trigger change when input is empty\n if (!dateValue.length && onDateChange) {\n onDateChange({ startDate: null, endDate: null });\n }\n };\n\n return (\n <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n <TextInput\n className=\"DatePicker__Input--Start\"\n data-testid={`${dataTestId}-start`}\n autoComplete=\"off\"\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(startDate, dateFormat, '')}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n {...(!inputProps?.disabled && {\n onFocus: (): void => {\n setFocusedInput(FocusedInput.StartDate);\n },\n })}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.StartDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n {withDateRange && (\n <>\n <Text> - </Text>\n <TextInput\n className=\"DatePicker__Input--End\"\n data-testid={`${dataTestId}-end`}\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(endDate, dateFormat, '')}\n onChange={onInputChange}\n {...(!inputProps?.disabled && {\n onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n })}\n onKeyDown={onKeyDown}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.EndDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n </>\n )}\n </HStack>\n );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n /** Text to display in the submit button.\n * @default Apply\n */\n buttonText?: string;\n /** Callback function to be called when the submit button is clicked. */\n onSubmit?: ({ startDate, endDate }: DateRange) => void;\n /** If true, the reset button will be hidden. */\n hideResetButton?: boolean;\n /** Data test id for the footer.\n * @default kibble-datepicker-footer\n */\n 'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n buttonText = 'Apply',\n onSubmit,\n hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n\n const handleSubmit = useCallback((): void => {\n if (!standalone) {\n setOpen(false);\n }\n\n if (onSubmit) {\n onSubmit({ startDate, endDate });\n }\n }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n return (\n <HStack\n w=\"100%\"\n justify={hideResetButton ? 'end' : 'space-between'}\n align=\"center\"\n borderTop=\"1px\"\n borderColor=\"border.default\"\n px={3}\n py={2}\n >\n {!hideResetButton && (\n <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n Clear Dates\n </Button>\n )}\n <Button size=\"sm\" onClick={handleSubmit}>\n {buttonText}\n </Button>\n </HStack>\n );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n /** Props to customize the calendar footer. Only applicable when `withDateRange` is true. */\n footerProps?: DatePickerFooterProps;\n /**\n * Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n * @default false\n */\n hideFooter?: boolean;\n /** Props to customize the input field. See `TextInput` for more information. */\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n /**\n * Placement of the calendar popover\n * @default bottom\n */\n placement?: Placement;\n /**\n * If true, the date picker will be rendered in a portal.\n * @default true\n */\n portalled?: boolean;\n /**\n * If true, the date picker will render two input fields that control both the start and end date for a range selection.\n * @default false\n */\n withDateRange?: boolean;\n /** Data test id for the date picker.\n * @default kibble-datepicker\n */\n 'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n const {\n footerProps,\n hideFooter = false,\n inputProps,\n portalled = true,\n withDateRange = false,\n ['data-testid']: dataTestId = 'kibble-datepicker',\n } = props;\n const { contentRef } = usePortalContentRef();\n const recipe = useSlotRecipe({ recipe: popoverRecipe });\n const styles = recipe();\n\n return (\n <DatePickerProvider {...props}>\n <CPopover.Trigger w=\"100%\">\n <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n </CPopover.Trigger>\n <Portal container={contentRef || undefined} disabled={!portalled}>\n <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n <CPopover.Content\n className=\"DatePicker__Content\"\n data-testid={`${dataTestId}-content`}\n css={{ ...styles.content, minW: '340px' }}\n >\n <CPopover.Body css={{ '--popover-padding': 0 }}>\n <DatePickerHeader />\n <Divider />\n <DatePickerCalendar />\n {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n </CPopover.Body>\n </CPopover.Content>\n </CPopover.Positioner>\n </Portal>\n </DatePickerProvider>\n );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { j as e } from "./jsx-runtime-C5mzlN2N.js";
|
|
2
|
+
import { i as R, u as y, U as k, F as c, x as W, t as D, a as B, b as T, c as A } from "./datePicker.provider-CttuPiiS.js";
|
|
3
|
+
import { W as P } from "./textInput.component-BeiTxTkS.js";
|
|
4
|
+
import { I as C } from "./icon.component-PV_nHBId.js";
|
|
5
|
+
import { W as H } from "./text.component-DhuUgP3j.js";
|
|
6
|
+
import { t as b, f as v, i as O } from "./format-CqTHHSak.js";
|
|
7
|
+
import { u as I } from "./popover-root-provider-CFn2dthZ.js";
|
|
8
|
+
import { H as _ } from "./h-stack-8q5nAOg0.js";
|
|
9
|
+
import { F } from "./flex-CX-8gE9T.js";
|
|
10
|
+
import { useCallback as $ } from "react";
|
|
11
|
+
import { B as S } from "./button.component-BO6oee_V.js";
|
|
12
|
+
import { p as M } from "./popover.recipe-DPwwsWLb.js";
|
|
13
|
+
import { u as U } from "./usePortalContentRef-DO_jc4W9.js";
|
|
14
|
+
import { D as K } from "./divider.component-CFOh4Nw3.js";
|
|
15
|
+
import { u as V } from "./create-slot-recipe-context-D_FXDJGp.js";
|
|
16
|
+
import { P as q } from "./index-DcmJgLUo.js";
|
|
17
|
+
import { P as G, a as J, b as L, c as Q } from "./popover-Gb1fXSR7.js";
|
|
18
|
+
function X(t, a) {
|
|
19
|
+
return +b(t) < +b(a);
|
|
20
|
+
}
|
|
21
|
+
const Y = (t, a) => a ? R(t, a) : !0, Z = (t, a) => a ? X(t, a) : !0;
|
|
22
|
+
function ee({
|
|
23
|
+
inputProps: t,
|
|
24
|
+
["data-testid"]: a = "kibble-datepicker-input"
|
|
25
|
+
}) {
|
|
26
|
+
const {
|
|
27
|
+
setFocusedInput: s,
|
|
28
|
+
startDate: o,
|
|
29
|
+
endDate: n,
|
|
30
|
+
focusedInput: i,
|
|
31
|
+
dateFormat: r,
|
|
32
|
+
withDateRange: l,
|
|
33
|
+
minDate: d,
|
|
34
|
+
maxDate: p,
|
|
35
|
+
onDateChange: x,
|
|
36
|
+
onDateSelect: w,
|
|
37
|
+
onClose: E
|
|
38
|
+
} = y(), { open: z, setOpen: N } = I(), h = t?.size || "md", j = (m) => {
|
|
39
|
+
m.key === "Enter" && z && (N(!1), E(), m.preventDefault(), m.stopPropagation());
|
|
40
|
+
}, g = (m) => {
|
|
41
|
+
const u = m.target.value, f = W(u, r, D);
|
|
42
|
+
u.length === r.length && O(f) && Y(f, d) && Z(f, p) && w(f), !u.length && x && x({ startDate: null, endDate: null });
|
|
43
|
+
};
|
|
44
|
+
return /* @__PURE__ */ e.jsxs(_, { w: "100%", className: "DatePicker__Trigger", "data-testid": a, children: [
|
|
45
|
+
/* @__PURE__ */ e.jsx(
|
|
46
|
+
P,
|
|
47
|
+
{
|
|
48
|
+
className: "DatePicker__Input--Start",
|
|
49
|
+
"data-testid": `${a}-start`,
|
|
50
|
+
autoComplete: "off",
|
|
51
|
+
rightElement: /* @__PURE__ */ e.jsx(
|
|
52
|
+
F,
|
|
53
|
+
{
|
|
54
|
+
...!t?.disabled && {
|
|
55
|
+
onClick: () => s(c.StartDate)
|
|
56
|
+
},
|
|
57
|
+
h: "100%",
|
|
58
|
+
align: "center",
|
|
59
|
+
children: /* @__PURE__ */ e.jsx(C, { name: "calendarDate", size: h })
|
|
60
|
+
}
|
|
61
|
+
),
|
|
62
|
+
value: k(o, r, ""),
|
|
63
|
+
onChange: g,
|
|
64
|
+
onKeyDown: j,
|
|
65
|
+
...!t?.disabled && {
|
|
66
|
+
onFocus: () => {
|
|
67
|
+
s(c.StartDate);
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
placeholder: v(D, r).toString(),
|
|
71
|
+
...i === c.StartDate && {
|
|
72
|
+
"data-focus": !0
|
|
73
|
+
},
|
|
74
|
+
...t
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
78
|
+
/* @__PURE__ */ e.jsx(H, { children: " - " }),
|
|
79
|
+
/* @__PURE__ */ e.jsx(
|
|
80
|
+
P,
|
|
81
|
+
{
|
|
82
|
+
className: "DatePicker__Input--End",
|
|
83
|
+
"data-testid": `${a}-end`,
|
|
84
|
+
rightElement: /* @__PURE__ */ e.jsx(
|
|
85
|
+
F,
|
|
86
|
+
{
|
|
87
|
+
...!t?.disabled && {
|
|
88
|
+
onClick: () => s(c.StartDate)
|
|
89
|
+
},
|
|
90
|
+
h: "100%",
|
|
91
|
+
align: "center",
|
|
92
|
+
children: /* @__PURE__ */ e.jsx(C, { name: "calendarDate", size: h })
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
value: k(n, r, ""),
|
|
96
|
+
onChange: g,
|
|
97
|
+
...!t?.disabled && {
|
|
98
|
+
onFocus: () => s(c.EndDate)
|
|
99
|
+
},
|
|
100
|
+
onKeyDown: j,
|
|
101
|
+
placeholder: v(D, r).toString(),
|
|
102
|
+
...i === c.EndDate && {
|
|
103
|
+
"data-focus": !0
|
|
104
|
+
},
|
|
105
|
+
...t
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
] })
|
|
109
|
+
] });
|
|
110
|
+
}
|
|
111
|
+
function te({
|
|
112
|
+
buttonText: t = "Apply",
|
|
113
|
+
onSubmit: a,
|
|
114
|
+
hideResetButton: s
|
|
115
|
+
}) {
|
|
116
|
+
const { startDate: o, endDate: n, clearDates: i, standalone: r } = y(), { open: l, setOpen: d } = I(), p = $(() => {
|
|
117
|
+
r || d(!1), a && a({ startDate: o, endDate: n });
|
|
118
|
+
}, [r, d, a, o, n]);
|
|
119
|
+
return /* @__PURE__ */ e.jsxs(
|
|
120
|
+
_,
|
|
121
|
+
{
|
|
122
|
+
w: "100%",
|
|
123
|
+
justify: s ? "end" : "space-between",
|
|
124
|
+
align: "center",
|
|
125
|
+
borderTop: "1px",
|
|
126
|
+
borderColor: "border.default",
|
|
127
|
+
px: 3,
|
|
128
|
+
py: 2,
|
|
129
|
+
children: [
|
|
130
|
+
!s && /* @__PURE__ */ e.jsx(S, { size: "sm", variant: "ghostNeutral", onClick: () => i({ open: l }), children: "Clear Dates" }),
|
|
131
|
+
/* @__PURE__ */ e.jsx(S, { size: "sm", onClick: p, children: t })
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
);
|
|
135
|
+
}
|
|
136
|
+
const ge = (t) => {
|
|
137
|
+
const {
|
|
138
|
+
footerProps: a,
|
|
139
|
+
hideFooter: s = !1,
|
|
140
|
+
inputProps: o,
|
|
141
|
+
portalled: n = !0,
|
|
142
|
+
withDateRange: i = !1,
|
|
143
|
+
["data-testid"]: r = "kibble-datepicker"
|
|
144
|
+
} = t, { contentRef: l } = U(), p = V({ recipe: M })();
|
|
145
|
+
return /* @__PURE__ */ e.jsxs(B, { ...t, children: [
|
|
146
|
+
/* @__PURE__ */ e.jsx(G, { w: "100%", children: /* @__PURE__ */ e.jsx(ee, { inputProps: { ...o, readOnly: !0 } }) }),
|
|
147
|
+
/* @__PURE__ */ e.jsx(q, { container: l || void 0, disabled: !n, children: /* @__PURE__ */ e.jsx(J, { className: "DatePicker", "data-testid": r, children: /* @__PURE__ */ e.jsx(
|
|
148
|
+
L,
|
|
149
|
+
{
|
|
150
|
+
className: "DatePicker__Content",
|
|
151
|
+
"data-testid": `${r}-content`,
|
|
152
|
+
css: { ...p.content, minW: "340px" },
|
|
153
|
+
children: /* @__PURE__ */ e.jsxs(Q, { css: { "--popover-padding": 0 }, children: [
|
|
154
|
+
/* @__PURE__ */ e.jsx(T, {}),
|
|
155
|
+
/* @__PURE__ */ e.jsx(K, {}),
|
|
156
|
+
/* @__PURE__ */ e.jsx(A, {}),
|
|
157
|
+
i && !s && /* @__PURE__ */ e.jsx(te, { ...a })
|
|
158
|
+
] })
|
|
159
|
+
}
|
|
160
|
+
) }) })
|
|
161
|
+
] });
|
|
162
|
+
};
|
|
163
|
+
export {
|
|
164
|
+
ge as D
|
|
165
|
+
};
|
|
166
|
+
//# sourceMappingURL=datePicker.component-CLTjEX7i.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"datePicker.component-CLTjEX7i.js","sources":["../../node_modules/date-fns/isBefore.js","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.utils.ts","../../src/components/DatePicker/components/DatePickerInput/datePickerInput.component.tsx","../../src/components/DatePicker/components/DatePickerFooter/datePickerFooter.component.tsx","../../src/components/DatePicker/datePicker.component.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/**\n * @name isBefore\n * @category Common Helpers\n * @summary Is the first date before the second one?\n *\n * @description\n * Is the first date before the second one?\n *\n * @param date - The date that should be before the other one to return true\n * @param dateToCompare - The date to compare with\n *\n * @returns The first date is before the second date\n *\n * @example\n * // Is 10 July 1989 before 11 February 1987?\n * const result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))\n * //=> false\n */\nexport function isBefore(date, dateToCompare) {\n return +toDate(date) < +toDate(dateToCompare);\n}\n\n// Fallback for modularized imports:\nexport default isBefore;\n","import isAfter from 'date-fns/isAfter';\nimport isBefore from 'date-fns/isBefore';\n\nexport const isDateAfterMin = (date: Date, minDate?: Date): boolean => (minDate ? isAfter(date, minDate) : true);\nexport const isDateBeforeMax = (date: Date, maxDate?: Date): boolean => (maxDate ? isBefore(date, maxDate) : true);\n","import React, { ChangeEvent } from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { TextInput, TextInputProps } from 'components/TextInput/textInput.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Text } from 'components/Text/text.component';\nimport isDate from 'date-fns/isDate';\nimport { getInputValue, parseDate } from '@datepicker-react/hooks';\nimport { isDateAfterMin, isDateBeforeMax } from './datePickerInput.utils';\nimport { FocusedInput, today, useDatePickerContext } from '../../context/datePicker.context';\nimport format from 'date-fns/format';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\ninterface DatePickerInputProps {\n /** Props to customize the input field. See `TextInput` for more information. */\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n /** Data test id for the input.\n * @default kibble-datepicker-input\n */\n 'data-testid'?: string;\n}\n\nexport function DatePickerInput({\n inputProps,\n ['data-testid']: dataTestId = 'kibble-datepicker-input',\n}: DatePickerInputProps): React.JSX.Element {\n const {\n setFocusedInput,\n startDate,\n endDate,\n focusedInput,\n dateFormat,\n withDateRange,\n minDate,\n maxDate,\n onDateChange,\n onDateSelect,\n onClose,\n } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n const iconSize = inputProps?.size || 'md';\n\n const onKeyDown = (e: React.KeyboardEvent): void => {\n if (e.key === 'Enter' && open) {\n setOpen(false);\n onClose();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\n const dateValue = e.target.value;\n const parsedDate = parseDate(dateValue, dateFormat, today);\n\n if (\n dateValue.length === dateFormat.length &&\n isDate(parsedDate) &&\n isDateAfterMin(parsedDate, minDate) &&\n isDateBeforeMax(parsedDate, maxDate)\n ) {\n onDateSelect(parsedDate);\n }\n\n // Trigger change when input is empty\n if (!dateValue.length && onDateChange) {\n onDateChange({ startDate: null, endDate: null });\n }\n };\n\n return (\n <HStack w=\"100%\" className=\"DatePicker__Trigger\" data-testid={dataTestId}>\n <TextInput\n className=\"DatePicker__Input--Start\"\n data-testid={`${dataTestId}-start`}\n autoComplete=\"off\"\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(startDate, dateFormat, '')}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n {...(!inputProps?.disabled && {\n onFocus: (): void => {\n setFocusedInput(FocusedInput.StartDate);\n },\n })}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.StartDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n {withDateRange && (\n <>\n <Text> - </Text>\n <TextInput\n className=\"DatePicker__Input--End\"\n data-testid={`${dataTestId}-end`}\n rightElement={\n <Flex\n {...(!inputProps?.disabled && {\n onClick: (): void => setFocusedInput(FocusedInput.StartDate),\n })}\n h=\"100%\"\n align=\"center\"\n >\n <Icon name=\"calendarDate\" size={iconSize} />\n </Flex>\n }\n value={getInputValue(endDate, dateFormat, '')}\n onChange={onInputChange}\n {...(!inputProps?.disabled && {\n onFocus: (): void => setFocusedInput(FocusedInput.EndDate),\n })}\n onKeyDown={onKeyDown}\n placeholder={format(today, dateFormat).toString()}\n {...(focusedInput === FocusedInput.EndDate && {\n 'data-focus': true,\n })}\n {...inputProps}\n />\n </>\n )}\n </HStack>\n );\n}\n","import React, { useCallback } from 'react';\nimport { Button } from 'components/Button/button.component';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { DateRange } from '../../datePicker.types';\nimport { useDatePickerContext } from '../../context/datePicker.context';\nimport { usePopoverContext } from '@chakra-ui/react/popover';\n\nexport interface DatePickerFooterProps {\n /** Text to display in the submit button.\n * @default Apply\n */\n buttonText?: string;\n /** Callback function to be called when the submit button is clicked. */\n onSubmit?: ({ startDate, endDate }: DateRange) => void;\n /** If true, the reset button will be hidden. */\n hideResetButton?: boolean;\n /** Data test id for the footer.\n * @default kibble-datepicker-footer\n */\n 'data-testid'?: string;\n}\n\nexport function DatePickerFooter({\n buttonText = 'Apply',\n onSubmit,\n hideResetButton,\n}: DatePickerFooterProps): React.JSX.Element {\n const { startDate, endDate, clearDates, standalone } = useDatePickerContext();\n const { open, setOpen } = usePopoverContext();\n\n const handleSubmit = useCallback((): void => {\n if (!standalone) {\n setOpen(false);\n }\n\n if (onSubmit) {\n onSubmit({ startDate, endDate });\n }\n }, [standalone, setOpen, onSubmit, startDate, endDate]);\n\n return (\n <HStack\n w=\"100%\"\n justify={hideResetButton ? 'end' : 'space-between'}\n align=\"center\"\n borderTop=\"1px\"\n borderColor=\"border.default\"\n px={3}\n py={2}\n >\n {!hideResetButton && (\n <Button size=\"sm\" variant=\"ghostNeutral\" onClick={() => clearDates({ open })}>\n Clear Dates\n </Button>\n )}\n <Button size=\"sm\" onClick={handleSubmit}>\n {buttonText}\n </Button>\n </HStack>\n );\n}\n","import React from 'react';\nimport { DateProps } from './datePicker.types';\nimport { TextInputProps } from 'components/TextInput/textInput.component';\nimport { Placement } from 'shared/types/placement';\nimport { DatePickerProvider } from './context/datePicker.provider';\nimport { DatePickerInput } from './components/DatePickerInput/datePickerInput.component';\nimport { DatePickerFooter, DatePickerFooterProps } from './components/DatePickerFooter/datePickerFooter.component';\nimport { DatePickerHeader } from './components/DatePickerHeader/datePickerHeader.component';\nimport { DatePickerCalendar } from './components/DatePickerCalendar/datePickerCalendar.component';\nimport { Popover as CPopover } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { popoverRecipe } from 'components/Popover/popover.recipe';\nimport { usePortalContentRef } from 'hooks/usePortalContentRef';\nimport { Divider } from 'components/Divider';\n\nexport interface DatePickerProps extends DateProps {\n /** Props to customize the calendar footer. Only applicable when `withDateRange` is true. */\n footerProps?: DatePickerFooterProps;\n /**\n * Hides the calendar footer with the submit button. Only applicable when `withDateRange` is true.\n * @default false\n */\n hideFooter?: boolean;\n /** Props to customize the input field. See `TextInput` for more information. */\n inputProps?: Omit<TextInputProps, 'onChange' | 'value' | 'isClearable' | 'onClear'>;\n /**\n * Placement of the calendar popover\n * @default bottom\n */\n placement?: Placement;\n /**\n * If true, the date picker will be rendered in a portal.\n * @default true\n */\n portalled?: boolean;\n /**\n * If true, the date picker will render two input fields that control both the start and end date for a range selection.\n * @default false\n */\n withDateRange?: boolean;\n /** Data test id for the date picker.\n * @default kibble-datepicker\n */\n 'data-testid'?: string;\n}\n\nexport const DatePicker = (props: DatePickerProps): React.JSX.Element => {\n const {\n footerProps,\n hideFooter = false,\n inputProps,\n portalled = true,\n withDateRange = false,\n ['data-testid']: dataTestId = 'kibble-datepicker',\n } = props;\n const { contentRef } = usePortalContentRef();\n const recipe = useSlotRecipe({ recipe: popoverRecipe });\n const styles = recipe();\n\n return (\n <DatePickerProvider {...props}>\n <CPopover.Trigger w=\"100%\">\n <DatePickerInput inputProps={{ ...inputProps, readOnly: true }} />\n </CPopover.Trigger>\n <Portal container={contentRef || undefined} disabled={!portalled}>\n <CPopover.Positioner className=\"DatePicker\" data-testid={dataTestId}>\n <CPopover.Content\n className=\"DatePicker__Content\"\n data-testid={`${dataTestId}-content`}\n css={{ ...styles.content, minW: '340px' }}\n >\n <CPopover.Body css={{ '--popover-padding': 0 }}>\n <DatePickerHeader />\n <Divider />\n <DatePickerCalendar />\n {withDateRange && !hideFooter && <DatePickerFooter {...footerProps} />}\n </CPopover.Body>\n </CPopover.Content>\n </CPopover.Positioner>\n </Portal>\n </DatePickerProvider>\n );\n};\n"],"names":["isBefore","date","dateToCompare","toDate","isDateAfterMin","minDate","isAfter","isDateBeforeMax","maxDate","DatePickerInput","inputProps","dataTestId","setFocusedInput","startDate","endDate","focusedInput","dateFormat","withDateRange","onDateChange","onDateSelect","onClose","useDatePickerContext","open","setOpen","usePopoverContext","iconSize","onKeyDown","e","onInputChange","dateValue","parsedDate","parseDate","today","isDate","HStack","jsx","TextInput","Flex","FocusedInput","Icon","getInputValue","format","jsxs","Fragment","Text","DatePickerFooter","buttonText","onSubmit","hideResetButton","clearDates","standalone","handleSubmit","useCallback","Button","DatePicker","props","footerProps","hideFooter","portalled","contentRef","usePortalContentRef","styles","useSlotRecipe","popoverRecipe","DatePickerProvider","CPopover.Trigger","Portal","CPopover.Positioner","CPopover.Content","CPopover.Body","DatePickerHeader","Divider","DatePickerCalendar"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { j as N } from "./jsx-runtime-C5mzlN2N.js";
|
|
2
|
-
import { useState as Oe, useEffect as Be, useCallback as q, useMemo as K,
|
|
2
|
+
import { useState as Oe, useEffect as Be, useCallback as q, useMemo as K, createContext as Lt, useContext as It, useRef as Ce } from "react";
|
|
3
3
|
import { W as Ge } from "./text.component-DhuUgP3j.js";
|
|
4
4
|
import { B as qt } from "./index-9BerxEcw.js";
|
|
5
5
|
import { B as Xe } from "./button.component-BO6oee_V.js";
|
|
@@ -2319,7 +2319,7 @@ const ie = /* @__PURE__ */ new Date(), Je = ie.getFullYear(), pr = ie.getMonth()
|
|
|
2319
2319
|
goToDate: () => {
|
|
2320
2320
|
throw new Error("goToDate(): boolean not implemented");
|
|
2321
2321
|
}
|
|
2322
|
-
}, Ht =
|
|
2322
|
+
}, Ht = Lt(kr), we = () => It(Ht), xr = ["root"], yt = {
|
|
2323
2323
|
bg: "background.secondary",
|
|
2324
2324
|
borderColor: "border.focus",
|
|
2325
2325
|
color: "text.contrast",
|
|
@@ -3007,4 +3007,4 @@ export {
|
|
|
3007
3007
|
we as u,
|
|
3008
3008
|
ga as x
|
|
3009
3009
|
};
|
|
3010
|
-
//# sourceMappingURL=datePicker.provider-
|
|
3010
|
+
//# sourceMappingURL=datePicker.provider-CttuPiiS.js.map
|