forstok-ui-lib 5.6.0 → 5.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.6.0",
+  "version": "5.6.2",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/images/icons/arrow-download.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 41.712 41.712" style="enable-background:new 0 0 41.712 41.712;" xml:space="preserve">
+<path style="fill:#000000;" d="M31.586,21.8c0.444-0.444,0.444-1.143,0-1.587c-0.429-0.444-1.143-0.444-1.571,0l-8.047,8.032V1.706
+	c0-0.619-0.492-1.127-1.111-1.127c-0.619,0-1.127,0.508-1.127,1.127v26.539l-8.031-8.032c-0.444-0.444-1.159-0.444-1.587,0
+	c-0.444,0.444-0.444,1.143,0,1.587l9.952,9.952c0.429,0.429,1.143,0.429,1.587,0L31.586,21.8z M39.474,29.086
+	c0-0.619,0.492-1.111,1.111-1.111c0.619,0,1.127,0.492,1.127,1.111v10.92c0,0.619-0.508,1.127-1.127,1.127H1.111
+	C0.492,41.133,0,40.625,0,40.006v-10.92c0-0.619,0.492-1.111,1.111-1.111s1.127,0.492,1.127,1.111v9.809h37.236V29.086z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/images/icons/arrow-white-upload.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
+  <g>
+    <g fill="#1D1D1B">
+      <path d="m63.824,41.771c0-1.341-1.086-2.428-2.427-2.428-1.342,0-2.428,1.087-2.428,2.428v14.07h-54.014v-14.07c1.77636e-15-1.341-1.085-2.428-2.428-2.428-1.341,0-2.427,1.087-2.427,2.428v15.486c0,0.179 0.065,0.337 0.103,0.505-0.037,0.168-0.103,0.326-0.103,0.506 0,1.34 1.086,2.427 2.427,2.427h58.87c1.341,0 2.427-1.087 2.427-2.427 0-0.18-0.063-0.338-0.103-0.506 0.039-0.168 0.103-0.327 0.103-0.505v-15.486z" fill="#FFFFFF"/>
+      <path d="m32.114,49.306c1.341,0 2.428-1.087 2.428-2.427v-35.464l10.573,10.573c0.474,0.474 1.096,0.712 1.717,0.712 0.62,0 1.242-0.238 1.715-0.712 0.95-0.948 0.95-2.484 0-3.432l-14.717-14.717c-0.947-0.95-2.483-0.95-3.432-4.44089e-16l-14.717,14.717c-0.947,0.948-0.947,2.484 0,3.432 0.474,0.474 1.096,0.712 1.717,0.712s1.242-0.238 1.716-0.712l10.573-10.573v35.464c0,1.34 1.085,2.427 2.427,2.427z" fill="#FFFFFF"/>
+    </g>
+  </g>
+</svg>

package/src/components/button/styles.ts

@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components';
+import IconArrowDownload from '../../assets/images/icons/arrow-download.svg';
+import IconArrowUpload from '../../assets/images/icons/arrow-white-upload.svg';
 import IconDotted from '../../assets/images/icons/dotted.svg';
 import IconClose from '../../assets/images/icons/close.svg';
 import IconCloseWhite from '../../assets/images/icons/close-white.svg';
@@ -178,7 +180,30 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
   }
   if ($iconLeft) {
     style += ` padding-left: 35px; `
-    if ($iconLeft === 'filter') {
+    if ($iconLeft === 'export') {
+      style += `
+        &:before { 
+          content: url(${IconArrowDownload}); 
+          position: absolute;
+          left: 12px;
+          top: 7px;
+          width: 14px;
+          ${IconStyles}
+        }
+      `
+    } else if ($iconLeft === 'import') {
+      style += `
+        &:before { 
+          content: url(${IconArrowUpload}); 
+          position: absolute;
+          left: 50%;
+          top: 8px;
+          width: 1rem;
+          margin-left: -8px;
+          ${IconStyles}
+        }
+      `
+    } else if ($iconLeft === 'filter') {
       style += `
         &:before { 
           content: url(${IconFilter}); 

package/src/components/select/index.tsx

@@ -320,6 +320,7 @@ const SelectComponent = ({ type, isError=false, mode, customOption, customLabel,
       {...isMulti && { isMulti: true }}
       {...customOption && { components: { Option: customOption } }}
       {...mode === 'paymentReceiveStore' && { components: { Option: customOption, SingleValue: customLabel } }}
+      {...customLabel && { components: { SingleValue: customLabel } }}
       {...MenuList && { components: { MenuList, Option: customOption } }}
       {...selectKey && { key: selectKey }}
       {...disabled && { isDisabled: disabled }}

package/src/components/select/typed.ts

@@ -1,4 +1,4 @@
-import type { ActionMeta, OnChangeValue } from 'react-select';
+import type { ActionMeta, OnChangeValue, SingleValueProps } from 'react-select';
 import type { OptionProps, GroupBase, StylesConfig, CSSObjectWithLabel, ControlProps } from 'react-select';
 import { CSSObject } from '@emotion/serialize'
 import type { TChannel } from '../../typeds/shares.typed';
@@ -69,4 +69,6 @@ export type TControlProps = ControlProps<TOption, boolean>
 
 export type TOptionProps = OptionProps<TOption, boolean>
 
-export type TGroupBase = GroupBase<TOption>
+export type TGroupBase = GroupBase<TOption>
+
+export type TSingleValueProps = SingleValueProps<TOption, boolean>