@ctlyst.id/internal-ui 2.0.2 → 2.0.3

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-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,4 @@
+export * from './components/input-addon';
 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

@@ -480,6 +480,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 +1386,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 +1399,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 +1950,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 +1963,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 +1977,6 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     type,
     addOnLeft,
     addOnRight,
-    elementLeft,
-    elementRight,
     size,
     isRequired,
     label,
@@ -2021,7 +2020,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 +2067,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
@@ -4551,6 +4548,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;