@ctlyst.id/internal-ui 1.0.4-canary.2 → 1.0.4-canary.4

package/dist/components/datepicker/components/datepicker-month/datepicker-month.d.ts

@@ -4,6 +4,8 @@ export interface DatePickerMonthProps {
     'data-test-id'?: string;
     min: string;
     max: string;
+    widthEmpty?: string | number;
+    widthFilled?: string | number;
 }
 declare const DatePickerMonth: FC<DatePickerMonthProps>;
 export default DatePickerMonth;

package/dist/components/datepicker/components/datepicker-month/multi-datepicker-month.d.ts

@@ -4,6 +4,8 @@ export interface MultiDatePickerMonthProps {
     min?: string;
     max?: string;
     isError?: boolean;
+    widthEmpty?: string | number;
+    widthFilled?: string | number;
 }
 declare const MultiDatePickerMonth: FC<MultiDatePickerMonthProps>;
 export default MultiDatePickerMonth;

package/dist/components/navigation/components/customer-icon.d.ts

@@ -0,0 +1,2 @@
+declare const CustomerIcon: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"svg", import("@chakra-ui/icon/dist/icon").IconProps>;
+export default CustomerIcon;

package/dist/components/navigation/components/mapping-icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconType } from 'react-icons/lib';
+export declare const mappingIcon: Map<string, IconType>;

package/dist/components/navigation/types.d.ts

@@ -1,7 +1,7 @@
 import type { IconType } from 'react-icons/lib';
 export declare type NavigationLink = {
     title: string;
-    icon: IconType;
+    icon?: IconType;
     navLink?: string;
     navHost?: string;
     children?: Omit<NavigationLink, 'children'>[];

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

@@ -1208,6 +1208,8 @@ const DatePickerMonth = ({
   onChange,
   min,
   max,
+  widthEmpty,
+  widthFilled,
   ...props
 }) => {
   const [date, setDate] = React__default.useState(null);
@@ -1220,14 +1222,11 @@ const DatePickerMonth = ({
           display: none;
           -webkit-appearance: none;
         }
-        input[value=''] {
-          width: 58px;
-        }
       `
   }, /*#__PURE__*/React__default.createElement(react.Input, {
     "data-test-id": props['data-test-id'],
     type: "date",
-    width: date ? '51px' : '58px',
+    width: date ? widthFilled : widthEmpty,
     onChange: e => {
       onChange(e.target.value);
       setDate(e.target.value);
@@ -1252,7 +1251,9 @@ const DatePickerMonth = ({
   }));
 };
 DatePickerMonth.defaultProps = {
-  'data-test-id': ''
+  'data-test-id': '',
+  widthEmpty: '58px',
+  widthFilled: '51px'
 };
 
 const transparent = 'transparent';
@@ -1662,7 +1663,9 @@ const MultiDatePickerMonth = ({
   onChange,
   isError = false,
   min = '2020-01-01',
-  max = '2020-12-31'
+  max = '2020-12-31',
+  widthEmpty,
+  widthFilled
 }) => {
   const [date, setDate] = React__default.useState([null, null]);
   return /*#__PURE__*/React__default.createElement(MultiDateWrapper, {
@@ -1674,7 +1677,9 @@ const MultiDatePickerMonth = ({
       setDate([val, date[1]]);
     },
     min: min,
-    max: max
+    max: max,
+    widthEmpty: widthEmpty,
+    widthFilled: widthFilled
   }), /*#__PURE__*/React__default.createElement(react.Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
     "data-test-id": "CT_DatePickerMonth_EndDate",
     onChange: val => {
@@ -1682,13 +1687,17 @@ const MultiDatePickerMonth = ({
       setDate([date[0], val]);
     },
     min: min,
-    max: max
+    max: max,
+    widthEmpty: widthEmpty,
+    widthFilled: widthFilled
   }));
 };
 MultiDatePickerMonth.defaultProps = {
   min: '2020-01-01',
   max: '2020-12-31',
-  isError: false
+  isError: false,
+  widthEmpty: '58px',
+  widthFilled: '51px'
 };
 
 /* eslint-disable no-nested-ternary */
@@ -2007,6 +2016,28 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(({
   }, rest), children);
 });
 
+const CustomerIcon = /*#__PURE__*/react.createIcon({
+  displayName: 'CustomerIcon',
+  viewBox: '0 0 16 16',
+  path: [/*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "inherit",
+    d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",
+    clipRule: "inherit"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    d: "M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "inherit",
+    d: "M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",
+    clipRule: "inherit"
+  })]
+});
+
+/* eslint-disable import/prefer-default-export */
+const mappingIcon = /*#__PURE__*/new Map([['Order', fi.FiShoppingBag], ['Fulfillment', fi.FiShoppingCart], ['Transfer Stock', fi.FiRepeat], ['Stock', fi.FiBox], ['Product Database', fi.FiLayers], ['Purchasing', fi.FiDollarSign], ['Reseller', fi.FiUsers], ['Retur', fi.FiRotateCcw], ['Other', fi.FiSettings], ['Content', fi.FiLayout], ['Voucher', fi.FiGift], ['Customer', CustomerIcon]]);
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const Navigation = ({
   navigations,
@@ -2046,7 +2077,7 @@ const Navigation = ({
       color: isActive ? 'white' : 'inherit',
       p: 2
     }, /*#__PURE__*/React.createElement(react.Icon, {
-      as: navigation.icon,
+      as: mappingIcon.get(navigation.title),
       mr: 2
     }), /*#__PURE__*/React.createElement(react.Text, {
       whiteSpace: "nowrap",
@@ -2066,8 +2097,7 @@ const Navigation = ({
     }, navigation.children.map(({
       title,
       navHost,
-      navLink,
-      icon
+      navLink
     }) => {
       const link = navHost ? `${navHost}${navLink}` : navLink;
       const isLocalLink = host === navHost;
@@ -2104,7 +2134,7 @@ const Navigation = ({
         px: 6,
         py: 4
       }, /*#__PURE__*/React.createElement(react.Icon, {
-        as: icon,
+        as: mappingIcon.get(navigation.title),
         mr: 3
       }), /*#__PURE__*/React.createElement(react.Text, {
         fontSize: "text.sm"