@lifesg/react-design-system 1.0.0-alpha.2 → 1.0.0-alpha.3

package/form/types.d.ts

@@ -39,6 +39,8 @@ export interface FormInputGroupProps<T, V> extends InputGroupPartialProps<T, V>,
 }
 export interface FormTextareaProps extends TextareaPartialProps, BaseFormElementProps {
 }
+export interface FormCustomFieldProps extends FormWrapperProps, BaseFormElementProps {
+}
 export interface FormInputSelectProps<T, V> extends InputSelectPartialProps<T, V>, BaseFormElementProps {
 }
 export interface FormMultiSelectProps<T, V> extends InputMultiSelectPartialProps<T, V>, BaseFormElementProps {

package/index.js

@@ -941,7 +941,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
     &:not(:last-child) {
         margin-bottom: 1rem;
     }
-`,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxs(Container$7,{children:[e&&jsx(FormLabel,"string"==typeof e?{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}:{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e}),i,t&&jsx(ErrorMessage,{weight:"semibold","data-testid":n||(r?`${r}-error-message`:"error-message"),children:t})]}),FormDateInput=({label:e,errorMessage:t,id:r="form-date-input","data-error-testid":a,"data-testid":i,...n})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled.input`
+`,FormWrapper=({label:e,errorMessage:t,id:r,disabled:a,children:i,"data-error-testid":n})=>jsxs(Container$7,{children:[e&&jsx(FormLabel,"string"==typeof e?{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,children:e}:{htmlFor:`${r}-base`,"data-testid":r?`${r}-label`:"form-label",disabled:a,...e}),i,t&&jsx(ErrorMessage,{weight:"semibold","data-testid":n||(r?`${r}-error-message`:"error-message"),children:t})]}),FormCustomField=({id:e="form-custom-field","data-error-testid":t,children:r,...a})=>jsx(FormWrapper,{id:e,"data-error-testid":t,...a,children:r}),FormDateInput=({label:e,errorMessage:t,id:r="form-date-input","data-error-testid":a,"data-testid":i,...n})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,"data-error-testid":a,disabled:n.disabled,children:jsx(DateInput,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),InputElement=styled.input`
     ${TextStyleHelper.getTextStyle("Body","regular")}
     border: 1px solid ${Color.Neutral[5]};
     border-radius: 4px;
@@ -1704,7 +1704,7 @@ var t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,a=Object.pr
                 border: 1px solid ${Color.Accent.Light[1]};
                 box-shadow: inset 0 0 5px 1px rgba(87, 169, 255, 0.5);
             `:void 0}
-`,Timepicker=({id:e,disabled:t=!1,error:r,value:a,defaultValue:i,placeholder:n,format:s="24hr",onChange:o,onBlur:l,onSelectionCancel:h,...p})=>{const[c,d]=useState(!1),u=useRef();useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[c]);const m=useCallback((()=>{t||c||d(!0)}),[c]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&c&&(d(!1),l&&l())},v=useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxs(Wrapper,{ref:u,id:e,...p,children:[jsx(InputSelectorElement,{onFocus:m,focused:c,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsx(TimepickerDropdown,{id:e,show:c,value:a||i,format:s,onCancel:()=>{d(!1),h&&h()},onChange:e=>{d(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children:jsx(Timepicker,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker},Container$1=styled.div`
+`,Timepicker=({id:e,disabled:t=!1,error:r,value:a,defaultValue:i,placeholder:n,format:s="24hr",onChange:o,onBlur:l,onSelectionCancel:h,...p})=>{const[c,d]=useState(!1),u=useRef();useEffect((()=>(document.addEventListener("mousedown",f),document.addEventListener("keyup",y),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keyup",y)})),[c]);const m=useCallback((()=>{t||c||d(!0)}),[c]),f=e=>{t||g(e)},y=e=>{if("Tab"===e.code)g(e)},g=e=>{u&&!u.current.contains(e.target)&&c&&(d(!1),l&&l())},v=useCallback((()=>"12hr"===s?"HH:MMam":"HH:MM"),[s,n]);return jsxs(Wrapper,{ref:u,id:e,...p,children:[jsx(InputSelectorElement,{onFocus:m,focused:c,readOnly:!0,placeholder:n||v(),value:TimepickerHelper.formatValue(a,s),defaultValue:i,disabled:t,error:r,"data-testid":e?`${e}-timepicker-selector`:"timepicker-selector"}),jsx(TimepickerDropdown,{id:e,show:c,value:a||i,format:s,onCancel:()=>{d(!1),h&&h()},onChange:e=>{d(!1),o&&o(e)}})]})},FormTimepicker=({label:e,errorMessage:t,id:r="form-timepicker","data-error-testid":a,"data-testid":i,...n})=>jsx(FormWrapper,{id:r,label:e,errorMessage:t,disabled:n.disabled,"data-error-testid":a,children:jsx(Timepicker,{id:`${r}-base`,"data-testid":i||r,error:!!t,...n})}),Form={DateInput:FormDateInput,Input:FormInput,InputGroup:FormInputGroup,Label:FormLabel,MultiSelect:FormMultiSelect,Select:FormSelect,Textarea:FormTextarea,Timepicker:FormTimepicker,CustomField:FormCustomField},Container$1=styled.div`
     border-top: 1px solid ${Color.Neutral[5]};
     border-bottom: 1px solid ${Color.Neutral[5]};
 `,ItemTitleDefault=styled(Text.H3)`