forstok-ui-lib 7.5.4 → 7.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "7.5.4",
+  "version": "7.6.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -46,7 +46,6 @@
     "moment": "^2.30.1",
     "moment-range": "^4.0.2",
     "npm-force-resolutions": "^0.0.10",
-    "rc-picker": "^4.11.3",
     "react": "^19.0.0",
     "react-content-loader": "^7.0.2",
     "react-datepicker": "^8.1.0",
@@ -67,10 +66,9 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "styled-components": "^6.1.15",
     "react-select": "^5.10.0",
     "react-select-async-paginate": "^0.7.9",
-    "rc-picker": "^4.11.3"
+    "styled-components": "^6.1.15"
   },
   "overrides": {}
 }

package/rollup.config.js

@@ -60,7 +60,6 @@ export default [
         'styled-components',
         'react-select',
         'react-select-async-paginate',
-        'rc-picker',
         '@wojtekmaj/react-daterange-picker',
         'approvejs',
         'html-to-text',

package/src/components/index.ts

@@ -23,7 +23,6 @@ export { default as UploadDragDropComponent } from './upload/drag.drop';
 export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
 export { default as DateComponent } from './date';
-export { default as DateRangeComponent } from './date/range';
 export { default as DateRefComponent } from './date/ref';
 export { default as DateTimeComponent } from './datetime';
 export { default as RadioComponent } from './radio';
@@ -42,6 +41,7 @@ export * from './dropdown/typed';
 export * from './date/typed';
 
 export * from './form/styles';
+export * from './date/styles';
 export * from './dropdown/styles';
 export * from './select/styles';
 

package/src/components/textarea/index.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type FocusEvent, type TextareaHTMLAttributes, useEffect, useState } from 'react';
+import { type ChangeEvent, type FocusEvent, type TextareaHTMLAttributes, useEffect, useRef, useState } from 'react';
 
 import EmojiComponent from '../emoji';
 
@@ -20,6 +20,8 @@ type TTextArea = TextareaHTMLAttributes<HTMLTextAreaElement> & {
 }
 
 const TextAreaComponent = ({ $isError, reset, setReset, isForceUpdate, setForceUpdate, evChange, evBlur, isField, evChangeCustom, $isEmoji,...props }: TTextArea) => {
+  const innerRef = useRef<HTMLTextAreaElement>(null);
+
   const { name, defaultValue } = props
 
   const [valueInput, setValueInput] = useState<string>(defaultValue?.toString() ?? '')
@@ -53,6 +55,15 @@ const TextAreaComponent = ({ $isError, reset, setReset, isForceUpdate, setForceU
     if (name) {
       document.getElementsByName(name)[0]?.focus();
     }
+    if (innerRef.current) {
+      const event = {
+        target: innerRef.current,
+        currentTarget: innerRef.current
+      } as unknown as ChangeEvent<HTMLTextAreaElement>;
+
+      innerRef.current.value = uValue;
+      evChange && evChange(event);
+    }
   }
 
   let parseProps = {...props}
@@ -61,6 +72,7 @@ const TextAreaComponent = ({ $isError, reset, setReset, isForceUpdate, setForceU
   return (
     <div style={{ position: 'relative' }}>
       <TextAreaContainer 
+        ref={innerRef}
         $isError={$isError} 
         value={valueInput}
         onChange={(e: ChangeEvent<HTMLTextAreaElement>) => { 

package/src/components/date/momentGenerateConfig.ts

@@ -1,17 +0,0 @@
-import generateMoment from 'rc-picker/lib/generate/moment';
-import type { GenerateConfig } from 'rc-picker/lib/generate';
-import moment, { Moment } from 'moment';
-
-// Extend the existing config
-const momentGenerateConfig: GenerateConfig<Moment> & {
-  isValidate: (date: Moment | null) => boolean;
-} = {
-  ...generateMoment,
-
-  // FIX: Add missing function with proper typing
-  isValidate: (date: Moment | null) => {
-    return date != null && moment(date).isValid();
-  },
-};
-
-export default momentGenerateConfig;

package/src/components/date/range.tsx

@@ -1,118 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import moment, { Moment } from 'moment';
-import { RangePicker } from 'rc-picker';
-import { RangePickerRef } from 'rc-picker/lib/interface';
-
-import momentGenerateConfig from './momentGenerateConfig';
-import enUS from 'rc-picker/lib/locale/en_US.js';
-
-import IconComponent from '../icon';
-
-import 'rc-picker/assets/index.css';
-import { RangeContainer } from './styles';
-
-import { TMoment, TState } from '../../typeds/base.typed';
-import { TModerateDateAntFunction } from './typed';
-
-import { configDateRangeAnt } from '../../maps/common';
-
-type TDateRange = {
-  $mode?: 'white';
-  startDate?: TMoment;
-  endDate?: TMoment;
-  minDate?: TMoment;
-  maxDate?: TMoment;
-  evModDate: TModerateDateAntFunction;
-  isForceUpdate?: boolean;
-  setForceUpdate?: TState<boolean | undefined>;
-};
-
-const DateRangeComponent = (props: TDateRange) => {
-  const {
-    $mode,
-    startDate,
-    endDate,
-    minDate,
-    maxDate,
-    evModDate,
-    isForceUpdate,
-    setForceUpdate,
-  } = props;
-
-  // Ensure ALWAYS Moment objects
-  const _minDate: Moment = moment(minDate ?? configDateRangeAnt.minDate);
-  let _startDate: Moment = moment(startDate ?? configDateRangeAnt.startDate);
-  let _endDate: Moment = moment(endDate ?? configDateRangeAnt.endDate);
-
-  if (_startDate < _minDate) _startDate = _minDate;
-  if (maxDate && moment(maxDate).isBefore(_endDate)) {
-    _endDate = moment(maxDate);
-  }
-
-  const [value, setValue] = useState<[Moment, Moment]>([_startDate, _endDate]);
-
-  useEffect(() => {
-    if (isForceUpdate) {
-      setValue([_startDate, _endDate]);
-      setForceUpdate && setForceUpdate(false);
-    }
-  }, [isForceUpdate]);
-
-  const onChange = (
-    dates: [Moment | null, Moment | null] | null,
-    dateStrings: [string, string],
-  ) => {
-    if (!dates) return;
-
-    const [start, end] = dates;
-
-    if (!start || !end) return;
-
-    setValue([start, end]);
-    evModDate(start, end);
-  };
-
-  const rangePickerRef = useRef<RangePickerRef>(null);
-
-  return (
-    <RangeContainer className="_refRangeContainer" $mode={$mode}>
-      <RangePicker
-        ref={rangePickerRef}
-        generateConfig={momentGenerateConfig}
-        locale={enUS}
-        value={value}                 // controlled
-        onChange={onChange}
-        allowEmpty
-        allowClear={false}
-        separator="-"
-        format="MMM D, YYYY"
-        placeholder={['Start Date', 'End Date']}
-        minDate={_minDate}
-        maxDate={maxDate ? moment(maxDate) : moment()}
-        suffixIcon={<IconComponent $width="14px" $name="calendar" />}
-        prevIcon={<IconComponent $width="12px" $name="arrow-left" />}
-        nextIcon={<IconComponent $width="12px" $name="arrow-right" />}
-        superPrevIcon={<IconComponent $width="12px" $name="arrow-left-double" />}
-        superNextIcon={<IconComponent $width="12px" $name="arrow-right-double" />}
-        presets={[
-          { label: 'Today', value: [moment(), moment()] },
-          { label: 'Last 7 days', value: [moment().subtract(6, 'days'), moment()] },
-          { label: 'Last 14 days', value: [moment().subtract(13, 'days'), moment()] },
-          { label: 'Last 30 days', value: [moment().subtract(29, 'days'), moment()] },
-          { label: 'Last 90 days', value: [moment().subtract(89, 'days'), moment()] },
-        ]}
-        onOpenChange={(open) => {
-          const parentEl = rangePickerRef.current?.nativeElement?.closest(
-            '._refRangeContainer'
-          );
-          if (!parentEl) return;
-          open
-            ? parentEl.classList.add('is-actived')
-            : parentEl.classList.remove('is-actived');
-        }}
-      />
-    </RangeContainer>
-  );
-};
-
-export default DateRangeComponent;