@licklist/design 0.44.485-dev.80 → 0.44.485-dev.82

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from "./sales";
 export * from "./setting";
 export * from "./sidebar";
 export * from "./snippet";
+export * from "./sortable-fields";
 export * from "./sortable-list";
 export * from "./sortable-tree";
 export * from "./static";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}

package/dist/product-set/product/ProductControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/product/ProductControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,YAAY,EAMb,MAAM,kEAAkE,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,OAAO,EACL,mBAAmB,EACnB,UAAU,EACX,MAAM,8DAA8D,CAAC;AAEtE,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAef,OAAO,EACL,KAAK,EAEN,MAAM,sDAAsD,CAAC;AAO9D,OAAO,EAEL,oCAAoC,EACpC,qCAAqC,EACtC,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EAEL,2BAA2B,EAC5B,MAAM,iCAAiC,CAAC;AAOzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAO5C,MAAM,WAAW,oBACf,SAAQ,UAAU,EAChB,2BAA2B,EAC3B,qCAAqC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,gBAAgB,EACtB,mBAAmB,CAAC,CAAC,CAAC,EACtB,oCAAoC,CAAC,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,UAAU,EAAE,EACnD,SAAiB,EACjB,eAAe,EACf,aAAqB,EACrB,oBAA4B,EAC5B,QAAa,EACb,MAAM,EACN,mBAAmB,EACnB,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAggBxB"}
+{"version":3,"file":"ProductControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/product/ProductControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,YAAY,EAMb,MAAM,kEAAkE,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,OAAO,EACL,mBAAmB,EACnB,UAAU,EACX,MAAM,8DAA8D,CAAC;AAEtE,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAef,OAAO,EACL,KAAK,EAEN,MAAM,sDAAsD,CAAC;AAO9D,OAAO,EAEL,oCAAoC,EACpC,qCAAqC,EACtC,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EAEL,2BAA2B,EAC5B,MAAM,iCAAiC,CAAC;AAOzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,oBACf,SAAQ,UAAU,EAChB,2BAA2B,EAC3B,qCAAqC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,gBAAgB,EACtB,mBAAmB,CAAC,CAAC,CAAC,EACtB,oCAAoC,CAAC,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,UAAU,EAAE,EACnD,SAAiB,EACjB,eAAe,EACf,aAAqB,EACrB,oBAA4B,EAC5B,QAAa,EACb,MAAM,EACN,mBAAmB,EACnB,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAsgBxB"}

package/dist/product-set/product/ProductControl.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("react-i18next"),o=e(require("react-bootstrap/Row")),l=e(require("react-bootstrap/Col")),i=require("react-bootstrap"),c=require("../../static/Icon.js"),s=require("react-hook-form"),m=e(require("@licklist/plugins/dist/services/Form/HookFormService")),d=require("@react-aria/utils"),u=require("../../static/switch/BooleanSwitch.js"),E=require("../../static/form-number-input/FormNumberInput.js");require("../../static/index.js");var p=require("../form/context.js"),g=require("@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper"),f=require("./booking-management/ProductBookingManagementControl.js"),C=require("./deposit/ProductDepositControl.js"),v=require("./quantity/ProductQuantityControl.js"),b=require("./quantity/ProductQuantityConstantControl.js"),h=require("./quantity/ProductQuantityRechargingControl.js"),F=e(require("react-bootstrap/Collapse")),I=require("@licklist/plugins/dist/hooks/Media/useImages"),P=require("@licklist/core/dist/DataMapper/Media/ImageDataMapper"),N=require("../../file-upload/FileUpload.js"),q=require("../../tiptap-editor/TipTapEditor.js"),y=require("./fixed-duration-fields/FixedDurationOptions.js"),k=require("./duration/ProductDurationControl.js"),x=require("./price/ProductPriceControl.js");exports.ProductControl=function(e){var T=e.isLoading,_=void 0!==T&&T,L=e.fieldNamePrefix,S=e.allowDeposits,w=void 0!==S&&S,j=e.hasBookingManagement,A=void 0!==j&&j,G=e.zoneList,D=void 0===G?[]:G,M=e.onCopy,R=e.onProductNameChange,B=e.productName,Y=e.hasTicket,O=e.categoryType,U=s.useFormContext(),Q=U.register,V=U.control,H=U.formState.errors,z=U.setValue,X=U.getValues,W=U.watch,Z=a.useContext(p.ProductSetLoadingContext),J=Z.setLoading,K=Z.providerHasBookingManagement,$=r.useTranslation("Design").t,ee=t.__read(a.useState(!1),2),te=ee[0],ae=ee[1],ne=t.__read(a.useState(null),2),re=ne[0],oe=ne[1],le=Boolean(W("".concat(L,".isUnlimited"))),ie=d.useId(),ce=d.useId(),se=d.useId(),me=d.useId(),de=d.useId(),ue=d.useId(),Ee=d.useId(),pe=d.useId(),ge=d.useId(),fe=d.useId(),Ce=d.useId(),ve=[{id:1,value:$("quantitySelector")},{id:2,value:$("stockControl")}],be=a.useCallback((function(){return ae((function(e){return!e}))}),[]),he=s.useWatch({control:V,name:"".concat(L,".quantitySelector")}),Fe=I.useImages(re),Ie=Fe.images,Pe=Fe.handleImageRemove,Ne=Fe.handleImageUploading,qe=Fe.isLoading,ye=a.useCallback((function(e){Ne(e,P.IMAGE_TYPE_IMAGE)}),[Ne]),ke=a.useCallback((function(e,t){Pe(String(e),t)}),[Pe]),xe=function(e){return e.target.select()};a.useEffect((function(){J(qe)}),[J,qe]),a.useEffect((function(){var e=X("".concat(L,".images"));oe(e)}),[X,oe,L]),a.useEffect((function(){Array.isArray(Ie)&&z("".concat(L,".images"),Ie)}),[Ie,L,z]);var Te=null!=he?he:"1",_e=g.QUANTITY_TYPE_LIST_DTO[Te];return n.createElement(n.Fragment,null,n.createElement(o,null,n.createElement(l,{lg:8,md:8},n.createElement(i.Form.Group,{controlId:ce},n.createElement(i.Form.Label,null,$("name")),n.createElement(i.Form.Control,t.__assign({},Q("".concat(L,".name")),{value:B,onChange:R,isInvalid:m.isInvalid("".concat(L,".name"),H),disabled:_,placeholder:$("name")})),n.createElement(i.Form.Control.Feedback,{type:"invalid"},m.getErrors("".concat(L,".name"),H))),n.createElement(i.Form.Group,{controlId:se},n.createElement(i.Form.Label,null,$("description")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange;return n.createElement(q.TipTapEditor,{withEmoji:!1,viewMode:!1,onUpdate:r,content:a,disabled:_})},control:V,name:"".concat(L,".description")}),n.createElement(i.Form.Control.Feedback,{type:"invalid"},m.getErrors("".concat(L,".description"),H))),w?n.createElement(o,null,n.createElement(C.ProductDepositControl,{isLoading:_,fieldNamePrefix:L}),n.createElement(x.ProductPriceControl,{isLoading:_,fieldNamePrefix:"".concat(L,".price"),title:$("totalPrice"),allowDeposits:w})):n.createElement(x.ProductPriceControl,{isLoading:_,fieldNamePrefix:"".concat(L,".price")}),n.createElement("div",null,n.createElement(v.ProductQuantityControl,{isLoading:_,fieldNamePrefix:L,onFocus:xe}),_e===g.QUANTITY_TYPE_CONSTANT&&n.createElement(b.ProductQuantityConstantControl,{isLoading:_,fieldNamePrefix:L,onFocus:xe,disabled:le}),_e===g.QUANTITY_TYPE_RECHARGING&&n.createElement(h.ProductQuantityRechargingControl,{isLoading:_,fieldNamePrefix:L,onFocus:xe,disabled:le}),n.createElement(i.Form.Group,{controlId:fe,className:"custom-checkbox"},n.createElement(i.Form.Check,t.__assign({custom:!0,type:"checkbox"},Q("".concat(L,".isUnlimited")),{name:"".concat(L,".isUnlimited"),disabled:_})),n.createElement(i.Form.Check.Label,null,$("isUnlimited")))),n.createElement(i.Form.Group,{controlId:pe},n.createElement(i.Form.Label,null,$("quantitySelectorType")),n.createElement(i.Form.Control,t.__assign({as:"select",defaultValue:Y?ve[0].id:void 0},Q("".concat(L,".quantitySelector")),{isInvalid:m.isInvalid("".concat(L,".quantitySelector"),H),disabled:_||Y}),ve.map((function(e){return n.createElement("option",{value:e.id,key:e.id},e.value)}))),n.createElement(i.Form.Control.Feedback,{type:"invalid"},m.getErrors("".concat(L,".quantitySelector"),H))))),O===g.CATEGORY_TYPE_FIXED_DURATION&&n.createElement(o,{className:"align-items-start"},n.createElement(k.ProductDurationControl,{fieldNamePrefix:L,providerHasBookingManagement:K}),n.createElement(l,{lg:4,md:4},n.createElement(E.FormNumberInput,{fieldName:"".concat(L,".capacity"),label:$("capacity")}))),O===g.CATEGORY_TYPE_GAME&&n.createElement(o,{className:"align-items-start"},n.createElement(l,{lg:4,md:4},n.createElement(E.FormNumberInput,{fieldName:"".concat(L,".capacity"),label:$("capacity"),rules:{min:{value:1,message:$("Validation:fieldRequired",{attribute:$("capacity")})}}})),n.createElement(l,{lg:4,md:4},n.createElement(E.FormNumberInput,{fieldName:"".concat(L,".duration"),label:$("durationMinutes"),rules:{min:{value:1,message:$("Validation:fieldRequired",{attribute:$("duration")})}}}))),n.createElement(o,null,n.createElement(l,{lg:8,md:8},n.createElement(i.Form.Group,{controlId:me},n.createElement(i.Form.Label,null,$("productTermsConditions")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name,l=t.ref;return n.createElement(i.Form.Control,{ref:l,as:"textarea",rows:3,value:a,onChange:r,isInvalid:m.isInvalid("".concat(L,".termsAndConditions"),H),disabled:_,name:o})},control:V,name:"".concat(L,".termsAndConditions")}),n.createElement(i.Form.Control.Feedback,{type:"invalid"},m.getErrors("".concat(L,".termsAndConditions"),H)))),n.createElement(l,{lg:4,md:4,className:"licklist-file-upload-wrapper"},n.createElement(N.FileUpload,{onFilesChange:ye,allowedExtensions:["jpeg","jpg","png"],subTitle:".jpeg    .jpg    .png",enablePreview:!0,onFileRemove:ke,defaultFiles:Ie,isLoading:qe,withIcon:!0,title:$("addImage")}))),n.createElement(l,{lg:12,md:12,xl:!0,className:"p-0"},n.createElement(i.Form.Group,{controlId:de,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,$("isAvailable")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:_})},control:V,name:"".concat(L,".isAvailable")})),n.createElement(i.Form.Group,{controlId:ue,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,$("isSoldOut")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:_})},control:V,name:"".concat(L,".isSoldOut")})),n.createElement(i.Form.Group,{controlId:ie,className:"custom-checkbox"},n.createElement(i.Form.Check,{custom:!0,type:"checkbox",name:ie,disabled:_},n.createElement(i.Form.Check.Input,{checked:te,onChange:be,type:"checkbox"}),n.createElement(i.Form.Check.Label,null,$("showAdvancedOptions"))))),n.createElement(l,{lg:12,md:12,xl:!0,className:"p-0"},n.createElement(F,{in:te},n.createElement("div",null,n.createElement(i.Form.Group,{controlId:Ee,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,$("isRequired")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:_})},control:V,name:"".concat(L,".isRequired")})),n.createElement(i.Form.Group,{controlId:ge,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,$("hasSpecialNotes")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:_})},control:V,name:"".concat(L,".hasSpecialNotes")})),[g.CATEGORY_TYPE_GAME,g.CATEGORY_TYPE_FIXED_DURATION].includes(O)&&n.createElement(y.FixedDurationOptions,{fieldNamePrefix:L}),n.createElement(i.Form.Group,{controlId:Ce,className:"advanced-switch-container"},n.createElement(x.ProductPriceControl,{title:$("minSpend"),isRequired:!1,isMoreThanZero:!0,allowDeposits:!1,isLoading:_,fieldNamePrefix:"".concat(L,".minSpend")})))),n.createElement(o,null,n.createElement(l,{xs:12},A&&n.createElement(f.ProductBookingManagementControl,{isLoading:_,zoneList:D,fieldNamePrefix:L})))),n.createElement(o,null,n.createElement(l,{xs:!0},n.createElement("div",{className:"d-flex justify-content-end mt-4"},Boolean(M)&&n.createElement(i.Button,{onClick:M,variant:"link",className:"d-flex align-items-center"},n.createElement(c.default,{type:"clipboard",height:"1rem",className:"mr-2"})," ",$("copy"))))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("react-i18next"),o=e(require("react-bootstrap/Row")),l=e(require("react-bootstrap/Col")),i=require("react-bootstrap"),c=require("../../static/Icon.js"),s=require("react-hook-form"),m=e(require("@licklist/plugins/dist/services/Form/HookFormService")),d=require("@react-aria/utils"),u=require("../../static/switch/BooleanSwitch.js"),E=require("../../static/form-number-input/FormNumberInput.js");require("../../static/index.js");var p=require("../form/context.js"),g=require("@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper"),C=require("./booking-management/ProductBookingManagementControl.js"),f=require("./deposit/ProductDepositControl.js"),v=require("./quantity/ProductQuantityControl.js"),b=require("./quantity/ProductQuantityConstantControl.js"),h=require("./quantity/ProductQuantityRechargingControl.js"),I=e(require("react-bootstrap/Collapse")),F=require("@licklist/plugins/dist/hooks/Media/useImages"),P=require("@licklist/core/dist/DataMapper/Media/ImageDataMapper"),N=require("../../file-upload/FileUpload.js"),T=require("../../tiptap-editor/TipTapEditor.js"),q=require("./fixed-duration-fields/FixedDurationOptions.js"),y=require("./duration/ProductDurationControl.js"),_=require("./price/ProductPriceControl.js"),k=require("./constants.js");exports.ProductControl=function(e){var x=e.isLoading,A=void 0!==x&&x,L=e.fieldNamePrefix,S=e.allowDeposits,R=void 0!==S&&S,j=e.hasBookingManagement,w=void 0!==j&&j,D=e.zoneList,G=void 0===D?[]:D,M=e.onCopy,O=e.onProductNameChange,B=e.productName,U=e.hasTicket,Y=e.categoryType,Q=s.useFormContext(),H=Q.register,V=Q.control,X=Q.formState.errors,z=Q.setValue,W=Q.getValues,Z=Q.watch,J=a.useContext(p.ProductSetLoadingContext),K=J.setLoading,$=J.providerHasBookingManagement,ee=r.useTranslation(["Design","Validation"]).t,te=t.__read(a.useState(!1),2),ae=te[0],ne=te[1],re=t.__read(a.useState(null),2),oe=re[0],le=re[1],ie=Boolean(Z("".concat(L,".isUnlimited"))),ce=d.useId(),se=d.useId(),me=d.useId(),de=d.useId(),ue=d.useId(),Ee=d.useId(),pe=d.useId(),ge=d.useId(),Ce=d.useId(),fe=d.useId(),ve=d.useId(),be=[{id:1,value:ee("quantitySelector")},{id:2,value:ee("stockControl")}],he=a.useCallback((function(){return ne((function(e){return!e}))}),[]),Ie=s.useWatch({control:V,name:"".concat(L,".quantitySelector")}),Fe=F.useImages(oe),Pe=Fe.images,Ne=Fe.handleImageRemove,Te=Fe.handleImageUploading,qe=Fe.isLoading,ye=a.useCallback((function(e){Te(e,P.IMAGE_TYPE_IMAGE)}),[Te]),_e=a.useCallback((function(e,t){Ne(String(e),t)}),[Ne]),ke=function(e){return e.target.select()};a.useEffect((function(){K(qe)}),[K,qe]),a.useEffect((function(){var e=W("".concat(L,".images"));le(e)}),[W,le,L]),a.useEffect((function(){Array.isArray(Pe)&&z("".concat(L,".images"),Pe)}),[Pe,L,z]);var xe=null!=Ie?Ie:"1",Ae=g.QUANTITY_TYPE_LIST_DTO[xe];return n.createElement(n.Fragment,null,n.createElement(o,null,n.createElement(l,{lg:8,md:8},n.createElement(i.Form.Group,{controlId:se},n.createElement(i.Form.Label,null,ee("name")),n.createElement(i.Form.Control,t.__assign({},H("".concat(L,".name")),{value:B,onChange:O,isInvalid:m.isInvalid("".concat(L,".name"),X),disabled:A,placeholder:ee("name")})),n.createElement(i.Form.Control.Feedback,{type:"invalid"},m.getErrors("".concat(L,".name"),X))),n.createElement(i.Form.Group,{controlId:me},n.createElement(i.Form.Label,null,ee("description")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange;return n.createElement(T.TipTapEditor,{withEmoji:!1,viewMode:!1,onUpdate:r,content:a,disabled:A})},rules:{maxLength:{value:k.MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH,message:ee("Validation:descriptionTooManyCharactersMessage",{max:k.MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH})}},control:V,name:"".concat(L,".description")})),n.createElement("div",{className:"invalid-feedback field-values-error d-block"},m.getErrors("".concat(L,".description"),X)),R?n.createElement(o,null,n.createElement(f.ProductDepositControl,{isLoading:A,fieldNamePrefix:L}),n.createElement(_.ProductPriceControl,{isLoading:A,fieldNamePrefix:"".concat(L,".price"),title:ee("totalPrice"),allowDeposits:R})):n.createElement(_.ProductPriceControl,{isLoading:A,fieldNamePrefix:"".concat(L,".price")}),n.createElement("div",null,n.createElement(v.ProductQuantityControl,{isLoading:A,fieldNamePrefix:L,onFocus:ke}),Ae===g.QUANTITY_TYPE_CONSTANT&&n.createElement(b.ProductQuantityConstantControl,{isLoading:A,fieldNamePrefix:L,onFocus:ke,disabled:ie}),Ae===g.QUANTITY_TYPE_RECHARGING&&n.createElement(h.ProductQuantityRechargingControl,{isLoading:A,fieldNamePrefix:L,onFocus:ke,disabled:ie}),n.createElement(i.Form.Group,{controlId:fe,className:"custom-checkbox"},n.createElement(i.Form.Check,t.__assign({custom:!0,type:"checkbox"},H("".concat(L,".isUnlimited")),{name:"".concat(L,".isUnlimited"),disabled:A})),n.createElement(i.Form.Check.Label,null,ee("isUnlimited")))),n.createElement(i.Form.Group,{controlId:ge},n.createElement(i.Form.Label,null,ee("quantitySelectorType")),n.createElement(i.Form.Control,t.__assign({as:"select",defaultValue:U?be[0].id:void 0},H("".concat(L,".quantitySelector")),{isInvalid:m.isInvalid("".concat(L,".quantitySelector"),X),disabled:A||U}),be.map((function(e){return n.createElement("option",{value:e.id,key:e.id},e.value)}))),n.createElement(i.Form.Control.Feedback,{type:"invalid"},m.getErrors("".concat(L,".quantitySelector"),X))))),Y===g.CATEGORY_TYPE_FIXED_DURATION&&n.createElement(o,{className:"align-items-start"},n.createElement(y.ProductDurationControl,{fieldNamePrefix:L,providerHasBookingManagement:$}),n.createElement(l,{lg:4,md:4},n.createElement(E.FormNumberInput,{fieldName:"".concat(L,".capacity"),label:ee("capacity")}))),Y===g.CATEGORY_TYPE_GAME&&n.createElement(o,{className:"align-items-start"},n.createElement(l,{lg:4,md:4},n.createElement(E.FormNumberInput,{fieldName:"".concat(L,".capacity"),label:ee("capacity"),rules:{min:{value:1,message:ee("Validation:fieldRequired",{attribute:ee("capacity")})}}})),n.createElement(l,{lg:4,md:4},n.createElement(E.FormNumberInput,{fieldName:"".concat(L,".duration"),label:ee("durationMinutes"),rules:{min:{value:1,message:ee("Validation:fieldRequired",{attribute:ee("duration")})}}}))),n.createElement(o,null,n.createElement(l,{lg:8,md:8},n.createElement(i.Form.Group,{controlId:de},n.createElement(i.Form.Label,null,ee("productTermsConditions")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name,l=t.ref;return n.createElement(i.Form.Control,{ref:l,as:"textarea",rows:3,value:a,onChange:r,isInvalid:m.isInvalid("".concat(L,".termsAndConditions"),X),disabled:A,name:o})},control:V,name:"".concat(L,".termsAndConditions")}),n.createElement(i.Form.Control.Feedback,{type:"invalid"},m.getErrors("".concat(L,".termsAndConditions"),X)))),n.createElement(l,{lg:4,md:4,className:"licklist-file-upload-wrapper"},n.createElement(N.FileUpload,{onFilesChange:ye,allowedExtensions:["jpeg","jpg","png"],subTitle:".jpeg    .jpg    .png",enablePreview:!0,onFileRemove:_e,defaultFiles:Pe,isLoading:qe,withIcon:!0,title:ee("addImage")}))),n.createElement(l,{lg:12,md:12,xl:!0,className:"p-0"},n.createElement(i.Form.Group,{controlId:ue,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,ee("isAvailable")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:A})},control:V,name:"".concat(L,".isAvailable")})),n.createElement(i.Form.Group,{controlId:Ee,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,ee("isSoldOut")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:A})},control:V,name:"".concat(L,".isSoldOut")})),n.createElement(i.Form.Group,{controlId:ce,className:"custom-checkbox"},n.createElement(i.Form.Check,{custom:!0,type:"checkbox",name:ce,disabled:A},n.createElement(i.Form.Check.Input,{checked:ae,onChange:he,type:"checkbox"}),n.createElement(i.Form.Check.Label,null,ee("showAdvancedOptions"))))),n.createElement(l,{lg:12,md:12,xl:!0,className:"p-0"},n.createElement(I,{in:ae},n.createElement("div",null,n.createElement(i.Form.Group,{controlId:pe,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,ee("isRequired")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:A})},control:V,name:"".concat(L,".isRequired")})),n.createElement(i.Form.Group,{controlId:Ce,className:"advanced-switch-container"},n.createElement(i.Form.Label,null,ee("hasSpecialNotes")),n.createElement(s.Controller,{render:function(e){var t=e.field,a=t.value,r=t.onChange,o=t.name;return n.createElement(u.BooleanSwitch,{name:o,value:Boolean(a),onChange:r,disabled:A})},control:V,name:"".concat(L,".hasSpecialNotes")})),[g.CATEGORY_TYPE_GAME,g.CATEGORY_TYPE_FIXED_DURATION].includes(Y)&&n.createElement(q.FixedDurationOptions,{fieldNamePrefix:L}),n.createElement(i.Form.Group,{controlId:ve,className:"advanced-switch-container"},n.createElement(_.ProductPriceControl,{title:ee("minSpend"),isRequired:!1,isMoreThanZero:!0,allowDeposits:!1,isLoading:A,fieldNamePrefix:"".concat(L,".minSpend")})))),n.createElement(o,null,n.createElement(l,{xs:12},w&&n.createElement(C.ProductBookingManagementControl,{isLoading:A,zoneList:G,fieldNamePrefix:L})))),n.createElement(o,null,n.createElement(l,{xs:!0},n.createElement("div",{className:"d-flex justify-content-end mt-4"},Boolean(M)&&n.createElement(i.Button,{onClick:M,variant:"link",className:"d-flex align-items-center"},n.createElement(c.default,{type:"clipboard",height:"1rem",className:"mr-2"})," ",ee("copy"))))))};

package/dist/product-set/product/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;
+//# sourceMappingURL=constants.d.ts.map

package/dist/product-set/product/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/product-set/product/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yCAAyC,OAAO,CAAC"}

package/dist/product-set/product/constants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH=1e3;

package/dist/sortable-fields/SortableFieldItem.d.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import "./style.scss";
+interface Props {
+    id: UniqueIdentifier;
+}
+export declare function SortableFieldItem({ children, id }: PropsWithChildren<Props>): JSX.Element;
+export declare function DragHandle(): JSX.Element;
+export {};
+//# sourceMappingURL=SortableFieldItem.d.ts.map

package/dist/sortable-fields/SortableFieldItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableFieldItem.d.ts","sourceRoot":"","sources":["../../src/sortable-fields/SortableFieldItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAEV,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAGvB,OAAO,cAAc,CAAC;AAEtB,UAAU,KAAK;IACb,EAAE,EAAE,gBAAgB,CAAC;CACtB;AAYD,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,iBAAiB,CAAC,KAAK,CAAC,eAsB3E;AAED,wBAAgB,UAAU,gBAYzB"}

package/dist/sortable-fields/SortableFieldList.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { SortableFieldItem } from "./SortableFieldItem";
+interface BaseItem {
+    id: UniqueIdentifier;
+}
+interface Props<T extends BaseItem> {
+    items: T[];
+    onChange(activeIndex: number, overIndex: number): void;
+    renderItem(item: T, index: number): ReactNode;
+}
+export declare function SortableFieldList<T extends BaseItem>({ items, onChange, renderItem, }: Props<T>): JSX.Element;
+export declare namespace SortableFieldList {
+    var Item: typeof SortableFieldItem;
+    var DragHandle: typeof import("./SortableFieldItem").DragHandle;
+}
+export {};
+//# sourceMappingURL=SortableFieldList.d.ts.map

package/dist/sortable-fields/SortableFieldList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableFieldList.d.ts","sourceRoot":"","sources":["../../src/sortable-fields/SortableFieldList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMtD,OAAO,EAAc,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,UAAU,QAAQ;IAChB,EAAE,EAAE,gBAAgB,CAAC;CACtB;AAED,UAAU,KAAK,CAAC,CAAC,SAAS,QAAQ;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACvD,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/C;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,QAAQ,EAAE,EACpD,KAAK,EACL,QAAQ,EACR,UAAU,GACX,EAAE,KAAK,CAAC,CAAC,CAAC,eA2BV;yBA/Be,iBAAiB"}

package/dist/sortable-fields/index.d.ts

@@ -0,0 +1,2 @@
+export type { SortableFieldList } from "./SortableFieldList";
+//# sourceMappingURL=index.d.ts.map

package/dist/sortable-fields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sortable-fields/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/styles/packages.scss

@@ -8,6 +8,7 @@
 @import "./sales";
 @import "./setting";
 @import "./sidebar";
+@import "./sortable-field";
 @import "./sortable-tree";
 @import "./static";
 @import "./table";

package/dist/styles/sortable-field/SortableField.scss

@@ -0,0 +1,21 @@
+.sortable-field-list {
+    display: flex;
+
+    .icon-container {
+        margin-right: .8rem;
+        margin-left: .2rem;
+        margin-top: 1rem;
+
+        div {
+            width: 0.75rem;
+            height: 2px;
+            margin-bottom: 2px;
+            background-color: #B5CCDE;
+            border-radius: 1px;
+        }
+    }
+
+    .form-group {
+        width: 100%;
+    }
+}

package/dist/styles/sortable-field/_index.scss

@@ -0,0 +1 @@
+@import "./SortableField";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.80",
+  "version": "0.44.485-dev.82",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./sales";
 export * from "./setting";
 export * from "./sidebar";
 export * from "./snippet";
+export * from "./sortable-fields";
 export * from "./sortable-list";
 export * from "./sortable-tree";
 export * from "./static";

package/src/product-set/product/ProductControl.tsx

@@ -64,6 +64,7 @@ import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
 import { ProductDurationControl } from "./duration";
 import { ProductPriceControl } from "./price";
+import { MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH } from "./constants";
 
 // TO DO refactor this file
 // and add correct types
@@ -138,7 +139,7 @@ export function ProductControl<T extends FormValues>({
   const { setLoading, providerHasBookingManagement } = useContext(
     ProductSetLoadingContext
   );
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation(["Design", "Validation"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -218,7 +219,6 @@ export function ProductControl<T extends FormValues>({
 
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
-
   return (
     <>
       <Row>
@@ -256,17 +256,24 @@ export function ProductControl<T extends FormValues>({
                   disabled={isLoading}
                 />
               )}
+              rules={{
+                maxLength: {
+                  value: MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH,
+                  message: t("Validation:descriptionTooManyCharactersMessage", {
+                    max: MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH,
+                  }) as string,
+                },
+              }}
               control={control}
               name={`${fieldNamePrefix}.description` as Path<T>}
             />
-
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors<T>(
-                `${fieldNamePrefix}.description` as Path<T>,
-                errors
-              )}
-            </Form.Control.Feedback>
           </Form.Group>
+          <div className="invalid-feedback field-values-error d-block">
+            {HookFormService.getErrors<T>(
+              `${fieldNamePrefix}.description` as Path<T>,
+              errors
+            )}
+          </div>
 
           {allowDeposits ? (
             <Row>

package/src/product-set/product/constants.ts

@@ -0,0 +1 @@
+export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;

package/src/sortable-fields/SortableFieldItem.tsx

@@ -0,0 +1,61 @@
+import React, { createContext, useContext, useMemo } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
+import type {
+  DraggableSyntheticListeners,
+  UniqueIdentifier,
+} from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import "./style.scss";
+
+interface Props {
+  id: UniqueIdentifier;
+}
+
+interface Context {
+  listeners: DraggableSyntheticListeners;
+  ref(node: HTMLElement | null): void;
+}
+
+const SortableItemContext = createContext<Context>({
+  listeners: undefined,
+  ref: () => {},
+});
+
+export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
+  const { isDragging, listeners, setNodeRef, setDraggableNodeRef, transform } =
+    useSortable({ id });
+  const context = useMemo(
+    () => ({
+      listeners,
+      ref: setDraggableNodeRef,
+    }),
+    [listeners, setDraggableNodeRef]
+  );
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.4 : undefined,
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <SortableItemContext.Provider value={context}>
+      <div ref={setNodeRef} className="sortable-field-list" style={style}>
+        {children}
+      </div>
+    </SortableItemContext.Provider>
+  );
+}
+
+export function DragHandle() {
+  const { listeners, ref } = useContext(SortableItemContext);
+
+  return (
+    <div {...listeners} ref={ref}>
+      <div className="icon-container">
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+}

package/src/sortable-fields/SortableFieldList.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type { ReactNode } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+
+import { DragHandle, SortableFieldItem } from "./SortableFieldItem";
+
+interface BaseItem {
+  id: UniqueIdentifier;
+}
+
+interface Props<T extends BaseItem> {
+  items: T[];
+  onChange(activeIndex: number, overIndex: number): void;
+  renderItem(item: T, index: number): ReactNode;
+}
+
+export function SortableFieldList<T extends BaseItem>({
+  items,
+  onChange,
+  renderItem,
+}: Props<T>) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragEnd={({ active, over }) => {
+        if (over && active.id !== over?.id) {
+          const activeIndex = items.findIndex(({ id }) => id === active.id);
+          const overIndex = items.findIndex(({ id }) => id === over.id);
+
+          onChange(activeIndex, overIndex);
+        }
+      }}
+    >
+      <SortableContext items={items}>
+        {items.map((item, index) => (
+          <div key={item.id}>{renderItem(item, index)}</div>
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+SortableFieldList.Item = SortableFieldItem;
+SortableFieldList.DragHandle = DragHandle;

package/src/sortable-fields/index.ts

@@ -0,0 +1 @@
+export type { SortableFieldList } from "./SortableFieldList";

package/src/styles/packages.scss

@@ -8,6 +8,7 @@
 @import "./sales";
 @import "./setting";
 @import "./sidebar";
+@import "./sortable-field";
 @import "./sortable-tree";
 @import "./static";
 @import "./table";

package/src/styles/sortable-field/SortableField.scss

@@ -0,0 +1,21 @@
+.sortable-field-list {
+    display: flex;
+
+    .icon-container {
+        margin-right: .8rem;
+        margin-left: .2rem;
+        margin-top: 1rem;
+
+        div {
+            width: 0.75rem;
+            height: 2px;
+            margin-bottom: 2px;
+            background-color: #B5CCDE;
+            border-radius: 1px;
+        }
+    }
+
+    .form-group {
+        width: 100%;
+    }
+}

package/src/styles/sortable-field/_index.scss

@@ -0,0 +1 @@
+@import "./SortableField";