@vchasno/ui-kit 0.4.59 → 0.4.60
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/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.4.60] - 2025-11-12
|
|
11
|
+
|
|
12
|
+
## Changed
|
|
13
|
+
|
|
14
|
+
- fix DatePicker not closing the calendar on selection of a date
|
|
15
|
+
|
|
10
16
|
## [0.4.59] - 2025-11-04
|
|
11
17
|
|
|
12
18
|
## Changed
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import t from"react-datepicker";import r from"react-text-mask";import a from"classnames";import{uk as o}from"date-fns/locale/uk";import n from"../../icons/clear.js";import l from"../InputMeta/InputMeta.js";import i from"../LabelText/LabelText.js";import c from"../Spinner/Spinner.js";var d=function(){return e.createElement("svg",{className:"vchasno-ui-date-picker__custom-calendar-icon",width:"20",height:"20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 4h1c.6 0 1 .4 1 1v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V5c0-.6.4-1 1-1h1V3c0-.6.4-1 1-1s1 .4 1 1v1h8V3c0-.6.4-1 1-1s1 .4 1 1v1zm-1 12c.6 0 1-.4 1-1V6H4v9c0 .6.4 1 1 1h10zM8 9a1 1 0 11-2 0 1 1 0 012 0zm2 1a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0zm-7 5a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0z",fill:"currentColor"}))},s=function(){return e.createElement("span",{className:"vchasno-ui-date-picker__custom-close-icon"},n)},m=["dd.MM.yyyy","dd-MM-yyyy","dd/MM/yyyy","dd.MM.yy","dd-MM-yy","dd/MM/yy"],p=[/\d/,/\d/,".",/\d/,/\d/,".",/\d/,/\d/,/\d/,/\d/],u=function(n){var u=n.label,f=n.disabled,y=n.required,
|
|
1
|
+
import e from"react";import t from"react-datepicker";import r from"react-text-mask";import a from"classnames";import{uk as o}from"date-fns/locale/uk";import n from"../../icons/clear.js";import l from"../InputMeta/InputMeta.js";import i from"../LabelText/LabelText.js";import c from"../Spinner/Spinner.js";var d=function(){return e.createElement("svg",{className:"vchasno-ui-date-picker__custom-calendar-icon",width:"20",height:"20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M16 4h1c.6 0 1 .4 1 1v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V5c0-.6.4-1 1-1h1V3c0-.6.4-1 1-1s1 .4 1 1v1h8V3c0-.6.4-1 1-1s1 .4 1 1v1zm-1 12c.6 0 1-.4 1-1V6H4v9c0 .6.4 1 1 1h10zM8 9a1 1 0 11-2 0 1 1 0 012 0zm2 1a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0zm-7 5a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0z",fill:"currentColor"}))},s=function(){return e.createElement("span",{className:"vchasno-ui-date-picker__custom-close-icon"},n)},m=["dd.MM.yyyy","dd-MM-yyyy","dd/MM/yyyy","dd.MM.yy","dd-MM-yy","dd/MM/yy"],p=[/\d/,/\d/,".",/\d/,/\d/,".",/\d/,/\d/,/\d/,/\d/],u=function(n){var u=n.label,f=n.disabled,y=n.required,v=n.loading,b=n.hint,h=n.error,w=n.dateFormat,M=n.className,k=n.timeCaption,g=n.enableTabLoop,E=n.locale,O=n.showMask,j=void 0!==O&&O,x=n.showPopperArrow,P=n.mask,_=n.dataQa,z=n.hideEmptyMeta,N=n.wide,S=n.pulse,T=function(e,t){if(null==e)return{};var r,a,o=function(e,t){if(null==e)return{};var r,a,o={},n=Object.keys(e);for(a=0;a<n.length;a++)r=n[a],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a<n.length;a++)r=n[a],!(t.indexOf(r)>=0)&&Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(n,["label","disabled","required","loading","hint","error","dateFormat","className","timeCaption","enableTabLoop","locale","showMask","showPopperArrow","mask","dataQa","hideEmptyMeta","wide","pulse"]),C=!!T.selected||!!T.value;return e.createElement("label",{onClick:function(e){return e.preventDefault()},"data-qa":_,className:a("vchasno-ui-date-picker",{"--loading":v,"--required":y,"--disabled":f,"--error":h,"--with-mask":j,"--wide":void 0!==N&&N,"--not-empty":C,"--is-label":!!u},M)},e.createElement("span",{className:a("vchasno-ui-date-picker__wrapper",{"vchasno-ui-pulse-animation":S&&!f})},u&&e.createElement(i,null,u),e.createElement(t,function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),a.forEach(function(t){var a;a=r[t],t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a})}return e}({enableTabLoop:void 0!==g&&g,locale:void 0===E?o:E,timeCaption:void 0===k?"Час":k,disabled:f,placeholderText:" ",showPopperArrow:void 0!==x&&x,className:"vchasno-ui-date-picker__picker",dateFormat:void 0===w?m:w,customInput:j?e.createElement(r,{inputMode:"text",mask:void 0===P?p:P,showMask:!0}):void 0},T)),v?e.createElement(c,{height:"18px"}):e.createElement(d,null),e.createElement(s,null)),!(void 0!==z&&z)||h||b?e.createElement(l,{hint:b,error:h}):null)};export{u as default};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../src/components/Datepicker/DatePicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport MaskedInput, { MaskedInputProps } from 'react-text-mask';\n\nimport cn from 'classnames';\nimport { uk } from 'date-fns/locale/uk';\n\nimport clearRawSvg from '../../icons/clear';\nimport InputMeta from '../InputMeta';\nimport LabelText from '../LabelText';\nimport Spinner from '../Spinner';\nimport {\n DataQa,\n ErrorFeedback,\n HideEmptyMeta,\n LoadingFeedback,\n WithHint,\n WithPulseAnimation,\n} from '../types';\n\nimport './DatePicker.global.css';\n\nconst SvgCalendar = () => (\n <svg\n className=\"vchasno-ui-date-picker__custom-calendar-icon\"\n width=\"20\"\n height=\"20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16 4h1c.6 0 1 .4 1 1v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V5c0-.6.4-1 1-1h1V3c0-.6.4-1 1-1s1 .4 1 1v1h8V3c0-.6.4-1 1-1s1 .4 1 1v1zm-1 12c.6 0 1-.4 1-1V6H4v9c0 .6.4 1 1 1h10zM8 9a1 1 0 11-2 0 1 1 0 012 0zm2 1a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0zm-7 5a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\n// Вставляємо на місце де має відображатися іконка закриття бібілотеки так як немає API для підміни іконки та її контролю\n// за допомогою :has(.react-datepicker__close-icon) та :has(.react-datepicker__close-icon:hover) контролюємо появу та зміну кольору іконки\nconst CloseSvg = () => (\n <span className=\"vchasno-ui-date-picker__custom-close-icon\">{clearRawSvg}</span>\n);\n\nconst DATE_FORMATS = ['dd.MM.yyyy', 'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yy', 'dd-MM-yy', 'dd/MM/yy'];\n\nconst defaultMask: MaskedInputProps['mask'] = [\n /\\d/,\n /\\d/,\n '.',\n /\\d/,\n /\\d/,\n '.',\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n];\n\nexport interface DatePickerProps\n extends ReactDatePickerProps,\n Partial<\n LoadingFeedback & WithHint & ErrorFeedback & DataQa & HideEmptyMeta & WithPulseAnimation\n > {\n label?: string;\n className?: string;\n showMask?: boolean;\n mask?: MaskedInputProps['mask'];\n onChange: ReactDatePickerProps['onChange'];\n isClearable?: ReactDatePickerProps['isClearable'];\n dateFormat?: ReactDatePickerProps['dateFormat'];\n wide?: boolean;\n}\n\n/**\n * @see <https://reactdatepicker.com/>\n */\nconst DatePicker: React.FC<DatePickerProps> = ({\n label,\n disabled,\n required,\n loading,\n hint,\n error,\n dateFormat = DATE_FORMATS,\n className,\n timeCaption = 'Час',\n enableTabLoop = false,\n locale = uk,\n showMask = false,\n showPopperArrow = false,\n mask = defaultMask,\n dataQa,\n hideEmptyMeta = false,\n wide = false,\n pulse,\n ...rest\n}) => {\n const valueExists = !!rest.selected || !!rest.value;\n\n return (\n <label\n data-qa={dataQa}\n className={cn(\n 'vchasno-ui-date-picker',\n {\n '--loading': loading,\n '--required': required,\n '--disabled': disabled,\n '--error': error,\n '--with-mask': showMask,\n '--wide': wide,\n '--not-empty': valueExists,\n '--is-label': !!label,\n },\n className,\n )}\n >\n <span\n className={cn('vchasno-ui-date-picker__wrapper', {\n 'vchasno-ui-pulse-animation': pulse && !disabled,\n })}\n >\n {label && <LabelText>{label}</LabelText>}\n <ReactDatePicker\n enableTabLoop={enableTabLoop}\n locale={locale}\n timeCaption={timeCaption}\n disabled={disabled}\n placeholderText=\" \"\n showPopperArrow={showPopperArrow}\n className=\"vchasno-ui-date-picker__picker\"\n dateFormat={dateFormat}\n customInput={\n showMask ? <MaskedInput inputMode=\"text\" mask={mask} showMask /> : undefined\n }\n {...rest}\n />\n {loading ? <Spinner height=\"18px\" /> : <SvgCalendar />}\n <CloseSvg />\n </span>\n {hideEmptyMeta && !error && !hint ? null : <InputMeta hint={hint} error={error} />}\n </label>\n );\n};\n\nexport default DatePicker;\n"],"names":["SvgCalendar","React","svg","className","width","height","fill","xmlns","path","fillRule","clipRule","d","CloseSvg","span","clearRawSvg","DATE_FORMATS","defaultMask","DatePicker","_param","label","disabled","required","loading","hint","error","dateFormat","timeCaption","enableTabLoop","locale","showMask","showPopperArrow","mask","dataQa","hideEmptyMeta","_param_wide","wide","pulse","rest","valueExists","selected","value","data-qa","cn","undefined","createElement","LabelText","ReactDatePicker","uk","placeholderText","customInput","MaskedInput","inputMode","Spinner","_param_hideEmptyMeta","InputMeta"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../src/components/Datepicker/DatePicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport MaskedInput, { MaskedInputProps } from 'react-text-mask';\n\nimport cn from 'classnames';\nimport { uk } from 'date-fns/locale/uk';\n\nimport clearRawSvg from '../../icons/clear';\nimport InputMeta from '../InputMeta';\nimport LabelText from '../LabelText';\nimport Spinner from '../Spinner';\nimport {\n DataQa,\n ErrorFeedback,\n HideEmptyMeta,\n LoadingFeedback,\n WithHint,\n WithPulseAnimation,\n} from '../types';\n\nimport './DatePicker.global.css';\n\n\nconst SvgCalendar = () => (\n <svg\n className=\"vchasno-ui-date-picker__custom-calendar-icon\"\n width=\"20\"\n height=\"20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M16 4h1c.6 0 1 .4 1 1v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V5c0-.6.4-1 1-1h1V3c0-.6.4-1 1-1s1 .4 1 1v1h8V3c0-.6.4-1 1-1s1 .4 1 1v1zm-1 12c.6 0 1-.4 1-1V6H4v9c0 .6.4 1 1 1h10zM8 9a1 1 0 11-2 0 1 1 0 012 0zm2 1a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0zm-7 5a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\n// Вставляємо на місце де має відображатися іконка закриття бібілотеки так як немає API для підміни іконки та її контролю\n// за допомогою :has(.react-datepicker__close-icon) та :has(.react-datepicker__close-icon:hover) контролюємо появу та зміну кольору іконки\nconst CloseSvg = () => (\n <span className=\"vchasno-ui-date-picker__custom-close-icon\">{clearRawSvg}</span>\n);\n\nconst DATE_FORMATS = ['dd.MM.yyyy', 'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yy', 'dd-MM-yy', 'dd/MM/yy'];\n\nconst defaultMask: MaskedInputProps['mask'] = [\n /\\d/,\n /\\d/,\n '.',\n /\\d/,\n /\\d/,\n '.',\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n];\n\nexport interface DatePickerProps\n extends ReactDatePickerProps,\n Partial<\n LoadingFeedback & WithHint & ErrorFeedback & DataQa & HideEmptyMeta & WithPulseAnimation\n > {\n label?: string;\n className?: string;\n showMask?: boolean;\n mask?: MaskedInputProps['mask'];\n onChange: ReactDatePickerProps['onChange'];\n isClearable?: ReactDatePickerProps['isClearable'];\n dateFormat?: ReactDatePickerProps['dateFormat'];\n wide?: boolean;\n}\n\n/**\n * @see <https://reactdatepicker.com/>\n */\nconst DatePicker: React.FC<DatePickerProps> = ({\n label,\n disabled,\n required,\n loading,\n hint,\n error,\n dateFormat = DATE_FORMATS,\n className,\n timeCaption = 'Час',\n enableTabLoop = false,\n locale = uk,\n showMask = false,\n showPopperArrow = false,\n mask = defaultMask,\n dataQa,\n hideEmptyMeta = false,\n wide = false,\n pulse,\n ...rest\n}) => {\n const valueExists = !!rest.selected || !!rest.value;\n\n\n return (\n <label\n // issue with label wrapping react-datepicker dosn't close after selecting date\n // https://github.com/Hacker0x01/react-datepicker/issues/1012#issuecomment-344546012\n onClick={e => e.preventDefault()}\n data-qa={dataQa}\n className={cn(\n 'vchasno-ui-date-picker',\n {\n '--loading': loading,\n '--required': required,\n '--disabled': disabled,\n '--error': error,\n '--with-mask': showMask,\n '--wide': wide,\n '--not-empty': valueExists,\n '--is-label': !!label,\n },\n className,\n )}\n >\n <span\n className={cn('vchasno-ui-date-picker__wrapper', {\n 'vchasno-ui-pulse-animation': pulse && !disabled,\n })}\n >\n {label && <LabelText>{label}</LabelText>}\n <ReactDatePicker\n enableTabLoop={enableTabLoop}\n locale={locale}\n timeCaption={timeCaption}\n disabled={disabled}\n placeholderText=\" \"\n showPopperArrow={showPopperArrow}\n className=\"vchasno-ui-date-picker__picker\"\n dateFormat={dateFormat}\n customInput={\n showMask ? <MaskedInput inputMode=\"text\" mask={mask} showMask /> : undefined\n }\n {...rest}\n />\n {loading ? <Spinner height=\"18px\" /> : <SvgCalendar />}\n <CloseSvg />\n </span>\n {hideEmptyMeta && !error && !hint ? null : <InputMeta hint={hint} error={error} />}\n </label>\n );\n};\n\nexport default DatePicker;\n"],"names":["SvgCalendar","React","svg","className","width","height","fill","xmlns","path","fillRule","clipRule","d","CloseSvg","span","clearRawSvg","DATE_FORMATS","defaultMask","DatePicker","_param","label","disabled","required","loading","hint","error","dateFormat","timeCaption","enableTabLoop","locale","showMask","showPopperArrow","mask","dataQa","hideEmptyMeta","_param_wide","wide","pulse","rest","valueExists","selected","value","onClick","e","preventDefault","data-qa","cn","undefined","createElement","LabelText","ReactDatePicker","uk","placeholderText","customInput","MaskedInput","inputMode","Spinner","_param_hideEmptyMeta","InputMeta"],"mappings":"iTAwBA,IAAMA,EAAc,kBAChBC,EAACC,aAAAA,CAAAA,MAAAA,CACGC,UAAU,+CACVC,MAAM,KACNC,OAAO,KACPC,KAAK,OACLC,MAAM,8BAENN,EAACO,aAAAA,CAAAA,OAAAA,CACGC,SAAS,UACTC,SAAS,UACTC,EAAE,sUACFL,KAAK,mBAOXM,EAAW,kBACbX,EAACY,aAAAA,CAAAA,OAAAA,CAAKV,UAAU,2CAA6CW,EAAAA,IAG3DC,EAAe,CAAC,aAAc,aAAc,aAAc,WAAY,WAAY,WAAW,CAE7FC,EAAwC,CAC1C,KACA,KACA,IACA,KACA,KACA,IACA,KACA,KACA,KACA,KACH,CAoBKC,EAAwC,SAAAC,CAAA,EAC1CC,IAAAA,EAAAA,EAAAA,MACAC,EAAAA,EAAAA,QAAAA,CACAC,IAAAA,QACAC,CAAAA,EAAAA,EAAAA,QACAC,EAAAA,EAAAA,IAAAA,CACAC,IAAAA,KACAC,CAAAA,EAAAA,EAAAA,UAAAA,CACAtB,EAAAA,EAAAA,cACAuB,WAAAA,KACAC,aAAAA,KACAC,MAAAA,KACAC,QAAAA,CAAAA,EAAAA,AAAAA,KAAAA,IAAAA,SACAC,eAAAA,KACAC,IAAAA,CACAC,EAAAA,EAAAA,MAAAA,CAAAA,EAAAA,EACAC,cAAgBC,EAAAhB,EAChBiB,KACAC,IAAAA,KACGC,CAAAA,EAAAA,sXAAAA,EAAAA,CAlBHlB,QACAC,WACAC,WACAC,UACAC,OACAC,QACAC,aACAtB,YACAuB,cACAC,gBACAC,SACAC,WACAC,kBACAC,OACAC,SACAC,gBACAE,OACAC,UAGME,EAAc,CAAC,CAACD,EAAKE,QAAQ,EAAI,CAAC,CAACF,EAAKG,KAAK,CAGnD,OACIvC,EAACkB,aAAAA,CAAAA,QAAAA,CAGGsB,QAASC,SAAAA,CAAAA,EAAKA,OAAAA,EAAEC,cAAc,IAC9BC,UAASZ,EACT7B,UAAW0C,EACP,yBACA,CACI,YAAavB,EACb,aAAcD,EACd,aAAcD,EACd,UAAWI,EACX,cAAeK,EACf,SArBTK,AAAAY,KAAAA,IAAAZ,GAAAA,EAsBS,cAAeI,EACf,aAAc,CAAC,CAACnB,GAEpBhB,IAGJF,EAACY,aAAAA,CAAAA,OAAAA,CACGV,UAAW0C,EAAG,kCAAmC,CAC7C,6BAA8BT,GAAS,CAAChB,CAC5C,IAECD,GAASlB,EAAA8C,aAAA,CAACC,EAAW7B,KAAAA,GACtBlB,EAACgD,aAAAA,CAAAA,EAAAA,iaAAAA,CACGtB,cA1ChBA,AAAAA,KAAAA,IAAAA,KA2CgBC,OA1ChBA,AAAAA,KAAAA,IAAAA,EAASsB,IA2COxB,YA7ChBA,AAAAA,KAAAA,IAAAA,EAAc,QA8CEN,SAAUA,EACV+B,gBAAgB,IAChBrB,gBA5ChBA,AAAAA,KAAAA,IAAAA,KA6CgB3B,UAAU,iCACVsB,sBApDHV,EACbZ,EAoDgBiD,YACIvB,EAAW5B,EAACoD,aAAAA,CAAAA,EAAAA,CAAYC,UAAU,OAAOvB,KA/C7DA,AAAAA,KAAAA,IAAAA,EAAOf,IA+CkEa,SAAAA,CAAAA,CAAciB,GAAAA,KAAAA,CAEnET,EAAAA,IAEPf,EAAUrB,EAACsD,aAAAA,CAAAA,EAAAA,CAAQlD,OAAO,SAAYJ,EAACD,aAAAA,CAAAA,EAAAA,MACxCC,gBAACW,EAEJqB,OAAAA,CApDOuB,CAAAA,AAAAV,KAAAA,IAAAU,GAAAA,CAAA,GAoDWhC,GAAUD,EAActB,EAACwD,aAAAA,CAAAA,EAAAA,CAAUlC,KAAMA,EAAMC,MAAOA,IAArC,KAGhD"}
|