forstok-ui-lib 5.11.12 → 5.11.13
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/index.d.ts +3 -2
- package/dist/index.js +16 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +16 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/input/otp.tsx +62 -0
- package/src/components/input/styles.ts +16 -0
- package/src/typeds/base.typed.ts +2 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { HTMLAttributes, ReactNode, AnchorHTMLAttributes, MouseEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ChangeEvent, DragEvent, InputHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, RefObject, ImgHTMLAttributes, JSX, TextareaHTMLAttributes } from 'react';
|
|
3
|
+
import { HTMLAttributes, ReactNode, AnchorHTMLAttributes, MouseEvent, Dispatch, SetStateAction, KeyboardEvent, FocusEvent, ChangeEvent, DragEvent, ClipboardEvent, InputHTMLAttributes, PropsWithChildren, ButtonHTMLAttributes, RefObject, ImgHTMLAttributes, JSX, TextareaHTMLAttributes } from 'react';
|
|
4
4
|
import { OnChangeValue, ActionMeta, OptionProps, StylesConfig, CSSObjectWithLabel, ControlProps, GroupBase, SingleValueProps, MenuListProps } from 'react-select';
|
|
5
5
|
export { components } from 'react-select';
|
|
6
6
|
import { CSSObject } from '@emotion/serialize';
|
|
@@ -54,6 +54,7 @@ type TChangeEvent = (e: ChangeEvent) => void;
|
|
|
54
54
|
type TDragEvent = (e: DragEvent) => void;
|
|
55
55
|
type TEnterEvent = (e: KeyboardEvent<HTMLInputElement | HTMLElement> | FocusEvent<HTMLInputElement | HTMLElement | Element> | MouseEvent<HTMLElement>) => void;
|
|
56
56
|
type TKeyboadEvent = (e: KeyboardEvent<HTMLInputElement>) => void;
|
|
57
|
+
type TPasteEvent<T> = (e: ClipboardEvent<T>) => void;
|
|
57
58
|
type TPage = {
|
|
58
59
|
totalCount: number;
|
|
59
60
|
totalPageCount: number;
|
|
@@ -995,4 +996,4 @@ declare const configDateRange: {
|
|
|
995
996
|
minDate: string;
|
|
996
997
|
};
|
|
997
998
|
|
|
998
|
-
export { BoxContainer, BreadcrumbContainer, BulkActionWrapper, ButtonComponent, ButtonGroup, ButtonLabel, CardContainer, CardWrapper, CheckboxComponent, CollapseContainer, ContentLoaderAccountsList, ContentLoaderActivityList, ContentLoaderAddition, ContentLoaderAnalyticsMenu, ContentLoaderCategoryList, ContentLoaderChatAccounts, ContentLoaderChatMessages, ContentLoaderChatProducts, ContentLoaderChatStores, ContentLoaderDashboardCard, ContentLoaderEditBundle, ContentLoaderFilterCategories, ContentLoaderFilters, ContentLoaderInvoiceListPaymentreceiveDetail, ContentLoaderMasterBundleDetail, ContentLoaderMasterDetail, ContentLoaderMasterList, ContentLoaderMasterListingDetail, ContentLoaderNonOrderList, ContentLoaderNotifUpdate, ContentLoaderOneLinePromotion, ContentLoaderOnlyBodyDashboardCard, ContentLoaderOnlyBodyTableList, ContentLoaderOnlyHeaderTableList, ContentLoaderOrderDetail, ContentLoaderOrderList, ContentLoaderPOSCategory, ContentLoaderPOSItem, ContentLoaderPOSStore, ContentLoaderPagination, ContentLoaderPopupBundle, ContentLoaderPopupChooseStore, ContentLoaderPopupLinkedListing, ContentLoaderPopupListOrder, ContentLoaderPopupPaymentReceive, ContentLoaderPopupPaymentReceived, ContentLoaderPopupPicklist, ContentLoaderPopupReadyToShip, ContentLoaderPopupStoreSelect, ContentLoaderPosProductDetail, ContentLoaderPromotionHover, ContentLoaderReportingDashboard, ContentLoaderSetting, ContentLoaderTableList, CreateContainer, CreateHeaderWrapper, CreateToolWrapper, DateComponent, DateTimeComponent, DateWrapper, DetailItem, DetailItemAction, DetailItemInfo, DetailItemTitle, DetailItemWrapper, DetailList, DetailPanelWrapper, DetailWrapper, DropDownComponent, DropdownAction, DropdownItem, DropdownList, DropdownTitle, ErrorComponent, FigureWraper, FilterButton, FilterContainer, FilterItem, FilterList, FilterListTitle, FilterWrapper, FoContainer, FormContainer, HeaderContainer, IconComponent, IconDot, ImageComponent, InfoGroup, InitialContainer, InputComponent, InputGroup, InputWithRefComponent as InputRefComponent, IsNumeric, ItemPriceLabel, ItemTable, type KeysToSnakeCase, LabelComponent, LeftPanelContainer, LinkComponent, LinkContainer, ListAddItemContainer, ListComponent, ListContainer, ListTable, ListTableContainer, LoadingComponent, MasterTableActionWrapper, MasterTableComponent, MenuList, MessageComponent, MessageQuestionComponent, MultiPanelContainer, MuteLabel, NameLabel, NavChildItem, NavList, NavMainItem, NavMainItemWrapper, NavMobileOverlay, PageButton, PageDot, PageLabel, PageWrapper, PaginationContainer, PanelBody, PanelContainer, PanelWrapper, type PartialBy, PopupAddProductContainer, PopupBoxWrapper, PopupCard, PopupComponent, PopupDownloadWrapper, PopupExportCardWrapper, RadioComponent, RightPanelContainer, SearchDropdownContainer, SearchFilterContainer, SearchFormWrapper, SearchResultItem, SearchResultList, SearchResultWrapper, SearchWrapper, SearchWrapperPopup, SelectComponent, SingleFormContainer, SortByWrapper, SwitchComponent, type TActionMeta, type TCSSObject, type TCSSObjectWithLabel, type TChangeEvent, type TChannel, type TCloseDropdownFunction, type TControlPropsWithVariable, type TCustomStylesWithVariable, type TDetailNew, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type TGroupBaseWithVariable, type THeadProps, type THierarchy, type TIdNum, type TIdStr, type TInData, type TInList, type TInListProps, type TInPart, type TInlistPart, type TKeyboadEvent, type TLoadOption, type TMasterProps, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TNewFilterPartial, type TNewFunction, type TObjPage, type TObject, type TOnChangeValue, type TOnChangeValueFalse, type TOnChangeValueTrue, type TOption, type TOptionProps, type TOptionPropsWithVariable, type TPage, type TPageObj, type TPagination, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TSelectAsyncPaginate, type TSingleValueProps, type TState, type TStateCallback, type TTimeFilter, type TUser, TableColumnGroup, TableHeadLabel, TableHeadWrapper, TableItemColumn, TableItemWrapper, TableLabel, TableRightGroup, TableRowGroup, TabsContainer, TabsContent, TabsHeader, TabsItem, TabsList, TabsWrapper, TextAreaComponent, TextAreaWithRefComponent as TextAreaRefComponent, TextComponent, Title, TotalLabel, UploadComponent, UploadDragDropComponent, type WithRequired, abbreviateNumber, boxBase, capitalize, clearList, colorCommonQuantity, colorStockAdjust, colorStockInboundQuantity, colorStockInboundStatus, colorStockQuantity, colorStockStatus, configDateRange, currencyNumber, dateRangeDays, dateRangeStatus, debounce, dropBase, elipsis, errorMessage, errorTitle, evCheckAllValidation, evExecuteError, evGenerateValueMatch, evHighlight, evKeyMapperScanner, evScrollTo, evUpdateInputRc, formLabel, formatNumber, generateMessage, generateMessageQuestion, generateValue, generateValueTable, getSizeContainer, getStorage, headTable, historyType, multiElipsis, pageMasterTable, removeStorage, responseWidth, setStorage, statusColor, thirdElipsis, typePage, unCamelCaseKeys, unescapeHTML, validateByApproveJs };
|
|
999
|
+
export { BoxContainer, BreadcrumbContainer, BulkActionWrapper, ButtonComponent, ButtonGroup, ButtonLabel, CardContainer, CardWrapper, CheckboxComponent, CollapseContainer, ContentLoaderAccountsList, ContentLoaderActivityList, ContentLoaderAddition, ContentLoaderAnalyticsMenu, ContentLoaderCategoryList, ContentLoaderChatAccounts, ContentLoaderChatMessages, ContentLoaderChatProducts, ContentLoaderChatStores, ContentLoaderDashboardCard, ContentLoaderEditBundle, ContentLoaderFilterCategories, ContentLoaderFilters, ContentLoaderInvoiceListPaymentreceiveDetail, ContentLoaderMasterBundleDetail, ContentLoaderMasterDetail, ContentLoaderMasterList, ContentLoaderMasterListingDetail, ContentLoaderNonOrderList, ContentLoaderNotifUpdate, ContentLoaderOneLinePromotion, ContentLoaderOnlyBodyDashboardCard, ContentLoaderOnlyBodyTableList, ContentLoaderOnlyHeaderTableList, ContentLoaderOrderDetail, ContentLoaderOrderList, ContentLoaderPOSCategory, ContentLoaderPOSItem, ContentLoaderPOSStore, ContentLoaderPagination, ContentLoaderPopupBundle, ContentLoaderPopupChooseStore, ContentLoaderPopupLinkedListing, ContentLoaderPopupListOrder, ContentLoaderPopupPaymentReceive, ContentLoaderPopupPaymentReceived, ContentLoaderPopupPicklist, ContentLoaderPopupReadyToShip, ContentLoaderPopupStoreSelect, ContentLoaderPosProductDetail, ContentLoaderPromotionHover, ContentLoaderReportingDashboard, ContentLoaderSetting, ContentLoaderTableList, CreateContainer, CreateHeaderWrapper, CreateToolWrapper, DateComponent, DateTimeComponent, DateWrapper, DetailItem, DetailItemAction, DetailItemInfo, DetailItemTitle, DetailItemWrapper, DetailList, DetailPanelWrapper, DetailWrapper, DropDownComponent, DropdownAction, DropdownItem, DropdownList, DropdownTitle, ErrorComponent, FigureWraper, FilterButton, FilterContainer, FilterItem, FilterList, FilterListTitle, FilterWrapper, FoContainer, FormContainer, HeaderContainer, IconComponent, IconDot, ImageComponent, InfoGroup, InitialContainer, InputComponent, InputGroup, InputWithRefComponent as InputRefComponent, IsNumeric, ItemPriceLabel, ItemTable, type KeysToSnakeCase, LabelComponent, LeftPanelContainer, LinkComponent, LinkContainer, ListAddItemContainer, ListComponent, ListContainer, ListTable, ListTableContainer, LoadingComponent, MasterTableActionWrapper, MasterTableComponent, MenuList, MessageComponent, MessageQuestionComponent, MultiPanelContainer, MuteLabel, NameLabel, NavChildItem, NavList, NavMainItem, NavMainItemWrapper, NavMobileOverlay, PageButton, PageDot, PageLabel, PageWrapper, PaginationContainer, PanelBody, PanelContainer, PanelWrapper, type PartialBy, PopupAddProductContainer, PopupBoxWrapper, PopupCard, PopupComponent, PopupDownloadWrapper, PopupExportCardWrapper, RadioComponent, RightPanelContainer, SearchDropdownContainer, SearchFilterContainer, SearchFormWrapper, SearchResultItem, SearchResultList, SearchResultWrapper, SearchWrapper, SearchWrapperPopup, SelectComponent, SingleFormContainer, SortByWrapper, SwitchComponent, type TActionMeta, type TCSSObject, type TCSSObjectWithLabel, type TChangeEvent, type TChannel, type TCloseDropdownFunction, type TControlPropsWithVariable, type TCustomStylesWithVariable, type TDetailNew, type TDragEvent, type TDropdown, type TEnterEvent, type TFile, type TFileImage, type TGroupBaseWithVariable, type THeadProps, type THierarchy, type TIdNum, type TIdStr, type TInData, type TInList, type TInListProps, type TInPart, type TInlistPart, type TKeyboadEvent, type TLoadOption, type TMasterProps, type TMessage, type TMessageFunction, type TMessageQuestion, type TMessageQuestionFunction, type TMouseEvent, type TNewFilterPartial, type TNewFunction, type TObjPage, type TObject, type TOnChangeValue, type TOnChangeValueFalse, type TOnChangeValueTrue, type TOption, type TOptionProps, type TOptionPropsWithVariable, type TPage, type TPageObj, type TPagination, type TPasteEvent, type TPopup, type TPopupContainer, type TPopupFunction, type TPopupFunctionGroup, type TPopupFunctionParam, type TPopupOpenFunction, type TSelectAsyncPaginate, type TSingleValueProps, type TState, type TStateCallback, type TTimeFilter, type TUser, TableColumnGroup, TableHeadLabel, TableHeadWrapper, TableItemColumn, TableItemWrapper, TableLabel, TableRightGroup, TableRowGroup, TabsContainer, TabsContent, TabsHeader, TabsItem, TabsList, TabsWrapper, TextAreaComponent, TextAreaWithRefComponent as TextAreaRefComponent, TextComponent, Title, TotalLabel, UploadComponent, UploadDragDropComponent, type WithRequired, abbreviateNumber, boxBase, capitalize, clearList, colorCommonQuantity, colorStockAdjust, colorStockInboundQuantity, colorStockInboundStatus, colorStockQuantity, colorStockStatus, configDateRange, currencyNumber, dateRangeDays, dateRangeStatus, debounce, dropBase, elipsis, errorMessage, errorTitle, evCheckAllValidation, evExecuteError, evGenerateValueMatch, evHighlight, evKeyMapperScanner, evScrollTo, evUpdateInputRc, formLabel, formatNumber, generateMessage, generateMessageQuestion, generateValue, generateValueTable, getSizeContainer, getStorage, headTable, historyType, multiElipsis, pageMasterTable, removeStorage, responseWidth, setStorage, statusColor, thirdElipsis, typePage, unCamelCaseKeys, unescapeHTML, validateByApproveJs };
|
package/dist/index.js
CHANGED
|
@@ -135,7 +135,22 @@
|
|
|
135
135
|
top: 50%;
|
|
136
136
|
transform: translateY(-50%);
|
|
137
137
|
color: var(--mt-clr);
|
|
138
|
-
|
|
138
|
+
`;o.default.input`
|
|
139
|
+
text-align: center;
|
|
140
|
+
height: 40px;
|
|
141
|
+
width: 38px;
|
|
142
|
+
font-size: 20px;
|
|
143
|
+
margin-right: 5px;
|
|
144
|
+
&:last-child {
|
|
145
|
+
margin-right: 0;
|
|
146
|
+
}
|
|
147
|
+
@media only screen and (min-width: 768px) {
|
|
148
|
+
height: 55px;
|
|
149
|
+
width: 45px;
|
|
150
|
+
font-size: 28px;
|
|
151
|
+
margin-right: 16px;
|
|
152
|
+
}
|
|
153
|
+
`;const se=t=>{var n,r,{$mode:i,$aliasLabel:a,$isError:o,$iconLeft:s,$iconRight:c,reset:d,setReset:u,isForceUpdate:p,setForceUpdate:h,evChange:g,evBlur:f,isField:m,evChangeCustom:y,evEnter:b,evKeyUp:v}=t,w=l(t,["$mode","$aliasLabel","$isError","$iconLeft","$iconRight","reset","setReset","isForceUpdate","setForceUpdate","evChange","evBlur","isField","evChangeCustom","evEnter","evKeyUp"]);const{type:C,name:k,defaultValue:I,defaultChecked:A}=w,S="currency"===i?z(null!==(n=null==I?void 0:I.toString())&&void 0!==n?n:""):null!==(r=null==I?void 0:I.toString())&&void 0!==r?r:"",[j,D]=e.useState(S),[E,M]=e.useState(A||!1);e.useEffect((()=>{var e,t;if(p){const n="currency"===i?z(null!==(e=null==I?void 0:I.toString())&&void 0!==e?e:""):null!==(t=null==I?void 0:I.toString())&&void 0!==t?t:"";D(n),M(A||!1),h&&h(!1)}d&&(D(""),M(!1),u&&u(!1))}),[p,h,d,u,I,A,M,i]);const T=e=>{const t=e.target.value;D(t)};let N=Object.assign({},w);delete N.defaultValue,delete N.defaultChecked;const O=x.jsx(ie,Object.assign({$mode:i,$isError:o,$iconLeft:s,$iconRight:c,checked:E,value:j,onChange:e=>{T(e),g&&g(e)},onBlur:e=>{T(e),(e=>{if(f&&f(e),m&&b&&b(e),m&&k){const t="number"===C?parseInt(e.target.value):"currency"===i?e.target.value?parseInt(z(e.target.value,!1)):null:e.target.value.trim();y&&y(k,t)}})(e)},onKeyUp:e=>{v&&v(e),(e=>{"currency"===i&&(e.currentTarget.value=z(e.currentTarget.value)),"Enter"===e.key&&(e.preventDefault(),m&&b&&b(e))})(e)}},("number"===C||"currency"===i)&&{onKeyPress:e=>{const t=e.target;return"number"!==C&&"currency"!==i||(isNaN(Number(e.key))||void 0===e.key||""===e.key)&&e.preventDefault(),"currency"!==i||((1!==t.value.length||"0"!==e.key||"0"!==t.value)&&" "!==e.key||void e.preventDefault())}},"number"===C&&{onPaste:e=>{const t=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"");e.preventDefault(),document.execCommand("insertText",!1,t)}},"number"===C&&{onFocus:e=>e.target.addEventListener("wheel",(function(e){e.preventDefault()}),{passive:!1})},"number"===C&&{min:"0"},a&&{$aliasLabel:a},N));return"currency"===i?x.jsxs(ae,{children:[O,x.jsxs(oe,{children:[a||"","Rp"]})]}):O},le=e.forwardRef(((e,t)=>{var{$mode:n,$isError:r,$iconLeft:i,$iconRight:a}=e,o=l(e,["$mode","$isError","$iconLeft","$iconRight"]);const{type:s}=o,c=x.jsx(ie,Object.assign({ref:t,$mode:n,$isError:r,$iconLeft:i,$iconRight:a,onKeyUp:e=>{(e=>{"currency"===n&&(e.currentTarget.value=z(e.currentTarget.value))})(e)}},("number"===s||"currency"===n)&&{onKeyPress:e=>{const t=e.target;return"number"!==s&&"currency"!==n||(isNaN(Number(e.key))||void 0===e.key||""===e.key)&&e.preventDefault(),"currency"!==n||((1!==t.value.length||"0"!==e.key||"0"!==t.value)&&" "!==e.key||void e.preventDefault())}},"number"===s&&{onPaste:e=>{const t=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"");e.preventDefault(),document.execCommand("insertText",!1,t)}},"number"===s&&{onFocus:e=>e.target.addEventListener("wheel",(function(e){e.preventDefault()}),{passive:!1})},"number"===s&&{min:"0"},o));return"currency"===n?x.jsxs(ae,{children:[c,x.jsx(oe,{children:"Rp"})]}):c})),ce=t.css`
|
|
139
154
|
position: absolute;
|
|
140
155
|
opacity: 0;
|
|
141
156
|
cursor: pointer;
|