forstok-ui-lib 5.7.3 → 5.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.7.3",
+  "version": "5.7.6",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -52,6 +52,7 @@
     "react-router-dom": "^7.1.1",
     "react-select": "^5.10.0",
     "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-import-css": "^3.5.8",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",

package/rollup.config.js

@@ -2,12 +2,13 @@ import PeerDepsExternalPlugin from 'rollup-plugin-peer-deps-external'
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import terser from '@rollup/plugin-terser';
-import postcss from 'rollup-plugin-postcss';
+// import postcss from 'rollup-plugin-postcss';
 import dts from 'rollup-plugin-dts';
 import typescript from '@rollup/plugin-typescript';
 import url from '@rollup/plugin-url';
 import svgr from '@svgr/rollup';
 import image from '@rollup/plugin-image';
+import css from 'rollup-plugin-import-css';
 
 const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
 const packageJson = require('./package.json');
@@ -50,15 +51,20 @@ export default [
         ], 
       }),
       terser(),
-      postcss({
-        config: {
-          path: './postcss.config.js'
-        },
-        inject: true,  
-        minimize: true,
-        sourceMap: true,
+      // postcss({
+      //   config: {
+      //     path: './postcss.config.js'
+      //   },
+      //   inject: true,  
+      //   minimize: true,
+      //   sourceMap: true,
+      //   modules: true,
+      //   extract: true
+      // }),
+      css({
+        minify: true,
         modules: true,
-        extract: true
+        inject: true, 
       }),
       url(), 
       svgr({ icon: true }),

package/src/assets/stylesheets/shares.styles.ts

@@ -2083,6 +2083,7 @@ export const FigureWraper = styled.figure<{ $size?: string, $mode?: string }>`
   }}
 `
 export const PanelBody = styled.section`
+  height: 100%;
   ${PanelContainer} {
     overflow-y: auto;
   }
@@ -2271,7 +2272,6 @@ export const TabsItem = styled.div<{ $activated?: boolean }>`
   position: relative;
   padding: 9px;
   color: ${({ $activated }:{ $activated?: boolean }) => $activated ? 'var(--sec-clr-lnk__hvr)' : 'var(--pri-clr-lnk)'};
-
   &::after {
     content: '';
     position: absolute;
@@ -2816,7 +2816,6 @@ export const DropdownAction = styled.div`
   grid-gap: 8px;
   border-top: 1px solid var(--sec-clr-ln);
 `
-
 export const FilterList = styled.ul` 
   ${clearList}
 ` 
@@ -3064,7 +3063,6 @@ export const CreateHeaderWrapper = styled.article<{ $mode?: string }>`
   }
   ${getCreateHeaderWrapperModFunc} 
 `
-
 export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string }>`
   padding: 20px 15px;
   margin: .5em 0; 
@@ -3193,7 +3191,6 @@ export const CreateToolWrapper = styled.article<{ $mode?: string, $type?: string
     }
   }}  
 `
-
 export const SearchDropdownContainer = styled.section`
   position: relative;
 `
@@ -3255,7 +3252,6 @@ export const PopupCard = styled.section<{ $mode?: string }>`
   }
   ${getPopupCardModFunc}
 `
-
 export const PopupExportCardWrapper = styled.article`
   display: grid;
   grid-auto-flow: row;
@@ -3263,4 +3259,4 @@ export const PopupExportCardWrapper = styled.article`
   @media only screen and (min-width: 768px) {
     grid-template-columns: 1fr 1fr;
   }
-`
+`

package/src/components/date/daterangepicker.css

@@ -71,16 +71,12 @@
 .react-calendar__tile--now.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--active {
   border-radius: 10px !important;
 }
-
-
 .react-calendar__tile--rangeStart, .react-calendar__tile--hoverStart {
   border-radius: 10px 0px 0 10px !important;
 }
 .react-calendar__tile--rangeEnd, .react-calendar__tile--hoverEnd {
   border-radius: 0 10px 10px 0 !important;
 }
-
-
 .react-calendar__month-view__days {
   gap: 1px 0;
 }

package/src/components/date/index.tsx

@@ -2,7 +2,6 @@ import { forwardRef, useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import moment from 'moment';
 import './react.datepicker.css';
-import './styles.css';
 import { DateContainer, DateIndicatorContainer } from './styles';
 import type { TState } from '../../typeds/base.typed'
 

package/src/components/date/react.datepicker.css

@@ -17,7 +17,6 @@
   padding: 0;
   border: 0;
 }
-
 .react-datepicker {
   font-family: "Helvetica Neue", helvetica, arial, sans-serif;
   font-size: 0.8rem;
@@ -29,7 +28,6 @@
   position: relative;
   line-height: initial;
 }
-
 .react-datepicker--time-only .react-datepicker__time-container {
   border-left: 0;
 }
@@ -38,7 +36,6 @@
   border-bottom-left-radius: 0.3rem;
   border-bottom-right-radius: 0.3rem;
 }
-
 .react-datepicker-popper {
   z-index: 1;
   line-height: 0;
@@ -54,7 +51,6 @@
   fill: #fff;
   color: #fff;
 }
-
 .react-datepicker__header {
   text-align: center;
   background-color: #f0f0f0;
@@ -74,7 +70,6 @@
 .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
   border-top-right-radius: 0.3rem;
 }
-
 .react-datepicker__year-dropdown-container--select,
 .react-datepicker__month-dropdown-container--select,
 .react-datepicker__month-year-dropdown-container--select,
@@ -84,7 +79,6 @@
   display: inline-block;
   margin: 0 15px;
 }
-
 .react-datepicker__current-month,
 .react-datepicker-time__header,
 .react-datepicker-year-header {
@@ -93,18 +87,15 @@
   font-weight: bold;
   font-size: 0.944rem;
 }
-
 h2.react-datepicker__current-month {
   padding: 0;
   margin: 0;
 }
-
 .react-datepicker-time__header {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
-
 .react-datepicker__navigation {
   align-items: center;
   background: none;
@@ -147,7 +138,6 @@ h2.react-datepicker__current-month {
 .react-datepicker__navigation:hover *::before {
   border-color: rgb(165.75, 165.75, 165.75);
 }
-
 .react-datepicker__navigation-icon {
   position: relative;
   top: -1px;
@@ -168,11 +158,9 @@ h2.react-datepicker__current-month {
   transform: rotate(225deg);
   right: -7px;
 }
-
 .react-datepicker__month-container {
   float: left;
 }
-
 .react-datepicker__year {
   margin: 0.4rem;
   text-align: center;
@@ -187,7 +175,6 @@ h2.react-datepicker__current-month {
   width: 4rem;
   margin: 2px;
 }
-
 .react-datepicker__month {
   margin: 0.4rem;
   text-align: center;
@@ -198,7 +185,6 @@ h2.react-datepicker__current-month {
   width: 4rem;
   margin: 2px;
 }
-
 .react-datepicker__input-time-container {
   clear: both;
   width: 100%;
@@ -232,7 +218,6 @@ h2.react-datepicker__current-month {
   margin-left: 5px;
   display: inline-block;
 }
-
 .react-datepicker__time-container {
   float: right;
   border-left: 1px solid #aeaeae;
@@ -292,7 +277,6 @@ h2.react-datepicker__current-month {
   cursor: default;
   background-color: transparent;
 }
-
 .react-datepicker__week-number {
   color: #ccc;
   display: inline-block;
@@ -316,16 +300,13 @@ h2.react-datepicker__current-month {
 .react-datepicker__week-number--selected:hover {
   background-color: rgb(28.75, 93.2196969697, 143.75);
 }
-
 .react-datepicker__day-names {
   white-space: nowrap;
   margin-bottom: -8px;
 }
-
 .react-datepicker__week {
   white-space: nowrap;
 }
-
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {
@@ -336,7 +317,6 @@ h2.react-datepicker__current-month {
   text-align: center;
   margin: 0.166rem;
 }
-
 .react-datepicker__day,
 .react-datepicker__month-text,
 .react-datepicker__quarter-text,
@@ -537,7 +517,6 @@ h2.react-datepicker__current-month {
   opacity: 0;
   transition: visibility 0s, opacity 0.3s ease-in-out;
 }
-
 .react-datepicker__input-container {
   position: relative;
   display: inline-block;
@@ -548,11 +527,9 @@ h2.react-datepicker__current-month {
   padding: 0.5rem;
   box-sizing: content-box;
 }
-
 .react-datepicker__view-calendar-icon input {
   padding: 6px 10px 5px 25px;
 }
-
 .react-datepicker__year-read-view,
 .react-datepicker__month-read-view,
 .react-datepicker__month-year-read-view {
@@ -580,7 +557,6 @@ h2.react-datepicker__current-month {
   right: -16px;
   top: 0;
 }
-
 .react-datepicker__year-dropdown,
 .react-datepicker__month-dropdown,
 .react-datepicker__month-year-dropdown {
@@ -605,7 +581,6 @@ h2.react-datepicker__current-month {
   height: 150px;
   overflow-y: scroll;
 }
-
 .react-datepicker__year-option,
 .react-datepicker__month-option,
 .react-datepicker__month-year-option {
@@ -652,7 +627,6 @@ h2.react-datepicker__current-month {
   position: absolute;
   left: 15px;
 }
-
 .react-datepicker__close-icon {
   cursor: pointer;
   background-color: transparent;
@@ -688,7 +662,6 @@ h2.react-datepicker__current-month {
   cursor: default;
   background-color: #ccc;
 }
-
 .react-datepicker__today-button {
   background: #f0f0f0;
   border-top: 1px solid #aeaeae;
@@ -698,7 +671,6 @@ h2.react-datepicker__current-month {
   padding: 5px 0;
   clear: left;
 }
-
 .react-datepicker__portal {
   position: fixed;
   width: 100vw;
@@ -729,7 +701,6 @@ h2.react-datepicker__current-month {
 .react-datepicker__portal .react-datepicker-time__header {
   font-size: 1.44rem;
 }
-
 .react-datepicker__children-container {
   width: 13.8rem;
   margin: 0.4rem;
@@ -737,7 +708,6 @@ h2.react-datepicker__current-month {
   padding-left: 0.2rem;
   height: auto;
 }
-
 .react-datepicker__aria-live {
   position: absolute;
   clip-path: circle(0);
@@ -749,9 +719,11 @@ h2.react-datepicker__current-month {
   width: 1px;
   white-space: nowrap;
 }
-
 .react-datepicker__calendar-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.125em;
 }
+#popup-portal .react-datepicker-popper {
+  z-index: 1000;
+}

package/src/components/date/styles.css

@@ -1,3 +0,0 @@
-#popup-portal .react-datepicker-popper {
-  z-index: 1000;
-}