@ctlyst.id/internal-ui 2.0.2 → 2.0.4

package/dist/components/field/components/field.d.ts

@@ -1,3 +1,4 @@
+import type { FormControlProps } from '@chakra-ui/react';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 export interface Props {
     label?: string | ReactNode;
@@ -7,6 +8,7 @@ export interface Props {
     leftHelperText?: string | ReactNode;
     rightHelperText?: string | ReactNode;
     isRequired?: boolean;
+    boxProps?: FormControlProps;
 }
 export declare type FieldProps<T = unknown> = Props & T;
 declare const Field: FC<PropsWithChildren<Props>>;

package/dist/components/form/__stories__/input.stories.d.ts

@@ -11,4 +11,5 @@ export declare const Default: () => JSX.Element;
 export declare const Variant: () => JSX.Element;
 export declare const PasswordField: () => JSX.Element;
 export declare const WithClear: () => JSX.Element;
+export declare const WithElement: () => JSX.Element;
 export declare const WithAddOn: () => JSX.Element;

package/dist/components/form/components/input-element.d.ts

@@ -0,0 +1,2 @@
+export { InputLeftElement as InputElementLeft } from '@chakra-ui/react';
+export { InputRightElement as InputElementRight } from '@chakra-ui/react';

package/dist/components/form/components/input-field.d.ts

@@ -5,8 +5,6 @@ import type { FieldProps } from '../../field/components/field';
 export interface InputFieldProps extends ChakraInputProps, FieldProps {
     addOnLeft?: ReactNode;
     addOnRight?: ReactNode;
-    elementLeft?: ReactNode;
-    elementRight?: ReactNode;
     withClear?: boolean;
     isLoading?: boolean;
     onClear?: () => void;

package/dist/components/form/index.d.ts

@@ -1,3 +1,5 @@
+export * from './components/input-addon';
+export * from './components/input-element';
 export { default as InputField } from './components/input-field';
 export * from './components/input-field';
 export { default as TextareaField } from './components/textarea';

package/dist/internal-ui.cjs.development.js

@@ -229,7 +229,6 @@ CheckboxComponent.defaultProps = {
   errorText: ''
 };
 
-/* eslint-disable no-nested-ternary */
 const Field = props => {
   const {
     label,
@@ -239,7 +238,8 @@ const Field = props => {
     rightHelperText,
     isRequired,
     children,
-    isSuccess
+    isSuccess,
+    boxProps = {}
   } = props;
   const getHelperColor = () => {
     if (isError) return 'danger.500';
@@ -252,9 +252,9 @@ const Field = props => {
   };
   const helperColor = getHelperColor();
   const justifyHelper = getJustifyContentHelper();
-  return /*#__PURE__*/React__default.createElement(react.FormControl, {
+  return /*#__PURE__*/React__default.createElement(react.FormControl, Object.assign({
     isInvalid: isError
-  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
+  }, boxProps), label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
     mb: 1,
     fontSize: "text.sm",
     requiredIndicator: undefined
@@ -267,19 +267,19 @@ const Field = props => {
     display: "flex",
     width: "full",
     justifyContent: justifyHelper
-  }, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+  }, !isError ? leftHelperText && (typeof leftHelperText === 'string' ? /*#__PURE__*/React__default.createElement(react.FormHelperText, {
     fontSize: "text.xs",
     color: helperColor,
     mt: 1
-  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
+  }, leftHelperText) : leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
     fontSize: "text.xs",
     color: "danger.500",
     mt: 1
-  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+  }, errorMessage) : errorMessage, rightHelperText && (typeof rightHelperText === 'string' ? /*#__PURE__*/React__default.createElement(react.FormHelperText, {
     fontSize: "text.xs",
     color: helperColor,
     mt: 1
-  }, rightHelperText)));
+  }, rightHelperText) : rightHelperText)));
 };
 Field.defaultProps = {
   label: '',
@@ -288,7 +288,8 @@ Field.defaultProps = {
   errorMessage: undefined,
   leftHelperText: undefined,
   rightHelperText: undefined,
-  isRequired: false
+  isRequired: false,
+  boxProps: {}
 };
 
 function CheckboxGroupComponent(props) {
@@ -480,6 +481,41 @@ DataTable.defaultProps = {
   sortingState: []
 };
 
+const getProperties = props => {
+  const {
+    isError,
+    isDisabled,
+    isSuccess
+  } = props;
+  let outlineColor = 'neutral.400';
+  let focusColor = 'primary.500';
+  if (isError || isDisabled || isSuccess) {
+    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
+    focusColor = outlineColor;
+  }
+  return {
+    outlineColor,
+    focusColor
+  };
+};
+const getWrapperStyle = props => {
+  const {
+    outlineColor,
+    focusColor
+  } = getProperties(props);
+  const style = {
+    border: '1px solid',
+    borderColor: outlineColor,
+    borderRadius: 'md',
+    transition: 'all 0.15s',
+    boxShadow: 'none',
+    _focusWithin: {
+      borderColor: focusColor
+    }
+  };
+  return react.defineStyle(style);
+};
+
 const Styles = () => {
   const {
     colorMode
@@ -1351,6 +1387,7 @@ const Datepicker = ({
   var _props$dateFormat;
   const selected = value ? new Date(value) : undefined;
   const dateFormat = ((_props$dateFormat = props.dateFormat) !== null && _props$dateFormat !== void 0 ? _props$dateFormat : withTime) ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+  const wrapperStyle = getWrapperStyle({});
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
@@ -1363,9 +1400,9 @@ const Datepicker = ({
     id: id,
     name: name,
     selected: selected,
-    customInput: /*#__PURE__*/React__default.createElement(react.Input, {
+    customInput: /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
       autoComplete: "off"
-    }),
+    }, wrapperStyle)),
     dateFormat: dateFormat,
     showPopperArrow: false,
     calendarClassName: classnames({
@@ -1914,45 +1951,10 @@ MultiDatePickerMonth.defaultProps = {
   isError: false
 };
 
-const getProperties = props => {
-  const {
-    isError,
-    isDisabled,
-    isSuccess
-  } = props;
-  let outlineColor = 'neutral.400';
-  let focusColor = 'primary.500';
-  if (isError || isDisabled || isSuccess) {
-    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
-    focusColor = outlineColor;
-  }
-  return {
-    outlineColor,
-    focusColor
-  };
-};
-const getWrapperStyle = props => {
-  const {
-    outlineColor,
-    focusColor
-  } = getProperties(props);
-  const style = {
-    border: '1px solid',
-    borderColor: outlineColor,
-    borderRadius: 'md',
-    transition: 'all 0.15s',
-    boxShadow: 'none',
-    _focusWithin: {
-      borderColor: focusColor
-    }
-  };
-  return react.defineStyle(style);
-};
-
 const InputAddonLeft = ({
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(react.Box, {
+  return /*#__PURE__*/React__default.createElement(react.InputLeftAddon, {
     borderLeftRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
@@ -1962,7 +1964,7 @@ const InputAddonLeft = ({
 const InputAddonRight = ({
   children
 }) => {
-  return /*#__PURE__*/React__default.createElement(react.Box, {
+  return /*#__PURE__*/React__default.createElement(react.InputRightAddon, {
     borderRightRadius: "md",
     backgroundColor: "neutral.200",
     px: 3,
@@ -1976,8 +1978,6 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     type,
     addOnLeft,
     addOnRight,
-    elementLeft,
-    elementRight,
     size,
     isRequired,
     label,
@@ -2021,7 +2021,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     borderRadius: "md",
     backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
     cursor: isDisabled ? 'not-allowed' : 'default'
-  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputAddonLeft, null, addOnLeft), /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+  }, addOnLeft, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
     ref: ref,
     type: inputType,
     value: value,
@@ -2068,13 +2068,11 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     color: iconColor
   })), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
     size: "sm"
-  })), "(", addOnRight && /*#__PURE__*/React__default.createElement(InputAddonRight, null, addOnRight))));
+  })), addOnRight)));
 });
 InputField.defaultProps = {
   addOnLeft: undefined,
   addOnRight: undefined,
-  elementLeft: undefined,
-  elementRight: undefined,
   withClear: undefined,
   isLoading: undefined,
   onClear: undefined
@@ -4386,6 +4384,18 @@ Object.defineProperty(exports, 'DrawerOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'InputElementLeft', {
+  enumerable: true,
+  get: function () {
+    return react.InputLeftElement;
+  }
+});
+Object.defineProperty(exports, 'InputElementRight', {
+  enumerable: true,
+  get: function () {
+    return react.InputRightElement;
+  }
+});
 Object.defineProperty(exports, 'Modal', {
   enumerable: true,
   get: function () {
@@ -4551,6 +4561,8 @@ exports.Field = Field;
 exports.Flex = react.Flex;
 exports.Grid = react.Grid;
 exports.Header = Header;
+exports.InputAddonLeft = InputAddonLeft;
+exports.InputAddonRight = InputAddonRight;
 exports.InputField = InputField;
 exports.Loader = Loader;
 exports.MainMenu = Navigation;