nntc-ui 0.0.81 → 0.0.83

package/index.css

@@ -643,14 +643,31 @@
 
 /* src/components/common/DateTime/dateTime.module.css */
 .dateTime_root {
-  position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 320px;
 }
+.dateTime_fullWidth {
+  max-width: 100%;
+}
 .dateTime_medium {
-  height: 40px;
+  gap: 8px;
 }
 .dateTime_small {
+  gap: 4px;
+}
+.dateTime_label {
+  color: var(--theme-text-secondary);
+}
+.dateTime_wrapper {
+  position: relative;
+  width: 100%;
+}
+.dateTime_medium > .dateTime_wrapper {
+  height: 40px;
+}
+.dateTime_small > .dateTime_wrapper {
   height: 32px;
 }
 .dateTime_input {
@@ -667,11 +684,11 @@
   border-radius: 4px;
   outline: none;
 }
-.dateTime_medium > .dateTime_input {
+.dateTime_medium > .dateTime_wrapper > .dateTime_input {
   height: 40px;
   padding: 8px 48px 8px 16px;
 }
-.dateTime_small > .dateTime_input {
+.dateTime_small > .dateTime_wrapper > .dateTime_input {
   height: 32px;
   padding: 4px 48px 4px 16px;
 }
@@ -705,10 +722,10 @@
   height: 24px;
   cursor: pointer;
 }
-.dateTime_medium > .dateTime_icon {
+.dateTime_medium > .dateTime_wrapper > .dateTime_icon {
   top: 8px;
 }
-.dateTime_small > .dateTime_icon {
+.dateTime_small > .dateTime_wrapper > .dateTime_icon {
   top: 4px;
 }
 .dateTime_icon > svg {
@@ -722,15 +739,40 @@
   width: 100%;
   height: 0;
 }
+.dateTime_popoverContent {
+  max-width: none;
+}
 
 /* src/components/common/DateTime/ui/CalendarPopover/calendarPopover.module.css */
 .calendarPopover_root {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  width: 368px;
+}
+.calendarPopover_root.calendarPopover_dateTimeMode {
+  flex-direction: row;
+  align-items: stretch;
+  width: auto;
+}
+.calendarPopover_medium {
   padding: 24px 16px;
 }
+.calendarPopover_small {
+  padding: 20px 12px;
+}
+.calendarPopover_calendarContainer {
+  display: flex;
+  flex-direction: column;
+  width: 336px;
+}
+.calendarPopover_medium > .calendarPopover_calendarContainer {
+  gap: 24px;
+}
+.calendarPopover_small > .calendarPopover_calendarContainer {
+  gap: 20px;
+}
+.calendarPopover_small .calendarPopover_calendarContainer.calendarPopover_monthView {
+  width: 282px;
+}
 .calendarPopover_buttonsContainer {
   display: block;
 }
@@ -782,7 +824,19 @@
 }
 .calendarPopover_cell.calendarPopover_month {
   width: 84px;
-  height: 64px;
+}
+.calendarPopover_cell.calendarPopover_year {
+  width: 48px;
+}
+.calendarPopover_small .calendarPopover_cell {
+  width: 40px;
+  height: 40px;
+}
+.calendarPopover_small .calendarPopover_cell.calendarPopover_month {
+  width: 84px;
+}
+.calendarPopover_small .calendarPopover_cell.calendarPopover_year {
+  width: 48px;
 }
 .calendarPopover_cellData {
   position: relative;
@@ -799,6 +853,12 @@
   background-color: var(--theme-focus);
   border-radius: 50%;
 }
+.calendarPopover_small .calendarPopover_cellCircle {
+  top: 2px;
+  left: 2px;
+  width: 36px;
+  height: 36px;
+}
 .calendarPopover_cellCircle ~ .calendarPopover_cellData {
   color: var(--theme-text-button-invert);
 }
@@ -812,6 +872,10 @@
   height: 44px;
   background-color: var(--theme-date-range);
 }
+.calendarPopover_small .calendarPopover_cellSelection {
+  top: 2px;
+  height: 36px;
+}
 .calendarPopover_cellSelectionFirst {
   left: 50%;
   width: 50%;
@@ -821,7 +885,7 @@
 }
 .calendarPopover_monthCellSelection {
   position: absolute;
-  top: 10px;
+  top: 2px;
   left: 0;
   z-index: 1;
   display: block;
@@ -829,6 +893,10 @@
   height: 44px;
   background-color: var(--theme-date-range);
 }
+.calendarPopover_small .calendarPopover_monthCellSelection {
+  top: 2px;
+  height: 36px;
+}
 .calendarPopover_monthCellSelectionFirst {
   left: 50%;
   width: 50%;
@@ -836,6 +904,69 @@
 .calendarPopover_monthCellSelectionLast {
   width: 50%;
 }
+.calendarPopover_timeContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 116px;
+  padding-left: 16px;
+  margin-left: 16px;
+  overflow: hidden;
+  border-left: 1px solid var(--theme-input-border);
+}
+.calendarPopover_timeSelectionMarker {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 16px;
+  z-index: 0;
+  height: 36px;
+  pointer-events: none;
+  background-color: var(--theme-focus);
+  border-radius: 8px;
+  transform: translateY(-50%);
+}
+.calendarPopover_timeDivider {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  width: 16px;
+  color: var(--theme-text-button-invert);
+  text-align: center;
+}
+
+/* src/components/common/DateTime/ui/TimeWheelColumn/timeWheelColumn.module.css */
+.timeWheelColumn_timeWheel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  height: 252px;
+  padding: 108px 0;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+.timeWheelColumn_timeWheel::-webkit-scrollbar {
+  display: none;
+}
+.timeWheelColumn_timeWheelButton {
+  color: var(--theme-text-primary);
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+.timeWheelColumn_timeWheelItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  cursor: pointer;
+  scroll-snap-align: center;
+}
+.timeWheelColumn_timeWheelItemActive {
+  color: var(--theme-text-button-invert);
+}
 
 /* src/components/common/ColorPicker/colorPicker.module.css */
 .colorPicker_root {
@@ -956,6 +1087,9 @@
   width: 100%;
   max-width: 320px;
 }
+.input_fullWidth {
+  max-width: 100%;
+}
 .input_medium {
   gap: 8px;
 }
@@ -991,6 +1125,15 @@
 .input_input:disabled {
   color: var(--theme-text-inactive);
 }
+.input_input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.input_input[type=number]::-webkit-inner-spin-button,
+.input_input[type=number]::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
 .input_medium > .input_wrapper > .input_input {
   height: 40px;
   padding: 8px 16px 8px 16px;
@@ -999,6 +1142,15 @@
   height: 32px;
   padding: 4px 16px 4px 16px;
 }
+.input_filled > .input_input {
+  background-color: var(--theme-input-filled);
+}
+.input_filled:hover > .input_input:not(:disabled):not(:focus) {
+  background-color: var(--theme-input-filled-hover);
+}
+.input_filled > .input_input:focus {
+  background-color: var(--theme-input-filled-hover);
+}
 .input_outlined > .input_input {
   background-color: transparent;
   outline: 1px solid var(--theme-input-border);
@@ -1009,6 +1161,36 @@
 .input_outlined > .input_input:focus {
   outline-color: var(--theme-focus);
 }
+.input_fileInput {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+.input_fileDisplay {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.input_fileName {
+  flex: 1;
+  overflow: hidden;
+  color: var(--theme-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.input_fileName.input_placeholder {
+  color: var(--theme-text-inactive);
+}
+.input_fileDisplay > .input_attachIcon {
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: var(--theme-text-secondary);
+}
 
 /* src/components/common/SearchInput/searchInput.module.css */
 .searchInput_root {
@@ -1638,12 +1820,6 @@
 .virtualTable_tableContainer {
   height: calc(100% + 16px);
 }
-.virtualTable_root.virtualTable_small .virtualTable_table {
-  font-size: var(--text-body2-size);
-}
-.virtualTable_root.virtualTable_medium .virtualTable_table {
-  font-size: var(--text-body1-size);
-}
 .virtualTable_table {
   position: relative;
   color: var(--theme-text-primary);
@@ -1752,6 +1928,18 @@
 .virtualTable_marginLeftChanging {
   background-color: var(--theme-table-header);
 }
+.virtualTable_sticky::before,
+.virtualTable_marginLeftChanging::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: var(--theme-overlay-4);
+}
 .virtualTable_rightBorder {
   position: absolute;
   top: 0;
@@ -1792,8 +1980,18 @@
   justify-content: center;
   text-align: center;
 }
+.virtualTable_viewCell.virtualTable_success {
+  color: var(--theme-success);
+  background-color: var(--theme-table-success);
+}
 .virtualTable_viewCell.virtualTable_error {
+  color: var(--theme-error);
   background-color: var(--theme-table-error);
+}
+.virtualTable_viewCell.virtualTable_editable.virtualTable_success {
+  border-color: var(--theme-success);
+}
+.virtualTable_viewCell.virtualTable_editable.virtualTable_error {
   border-color: var(--theme-error);
 }
 .virtualTable_viewSpan {
@@ -1847,6 +2045,18 @@
 .virtualTable_rowButtonTrigger {
   height: auto !important;
 }
+.virtualTable_root.virtualTable_medium .virtualTable_table {
+  font-size: var(--text-body2-size);
+  line-height: var(--text-body2-height);
+}
+.virtualTable_root.virtualTable_small .virtualTable_table {
+  font-size: calc(var(--text-body2-size) - 2px);
+  line-height: calc(var(--text-body2-height) - 2px);
+}
+.virtualTable_root.virtualTable_small .virtualTable_th {
+  font-size: calc(var(--text-body2-size) - 4px);
+  line-height: calc(var(--text-body2-height) - 4px);
+}
 
 /* src/components/view/VirtualTable/ui/HeaderDropdown/headerDropdown.module.css */
 .headerDropdown_root {

package/index.d.ts

@@ -72,6 +72,14 @@ interface DayjsInstance {
     format(template?: string): string;
     year(): number;
     month(): number;
+    hour(): number;
+    hour(value: number): DayjsInstance;
+    minute(): number;
+    minute(value: number): DayjsInstance;
+    second(): number;
+    second(value: number): DayjsInstance;
+    millisecond(): number;
+    millisecond(value: number): DayjsInstance;
     startOf(unit: string): DayjsInstance;
     valueOf(): number;
     daysInMonth(): number;
@@ -83,13 +91,14 @@ type DayjsFactory = (date?: DayjsConfigType) => DayjsInstance;
 
 type Variant$6 = 'filled' | 'outlined';
 type Size$9 = 'medium' | 'small';
-type ValueType = 'date' | 'year';
+type ValueType = 'date' | 'year' | 'dateTime';
 interface Props$k {
     variant?: Variant$6;
     isPeriod?: boolean;
     valueType?: ValueType;
     componentSize?: Size$9;
     fullWidth?: boolean;
+    label?: string;
     placeholder?: string;
     values?: (string | undefined)[];
     defaultValues?: (string | undefined)[];
@@ -97,7 +106,9 @@ interface Props$k {
     onValueChange?: (values: (string | undefined)[]) => void;
     dayjs?: DayjsFactory;
 }
-declare function DateTime(props: UiProps<Props$k> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare const DateTime: React.ForwardRefExoticComponent<Props$k & {
+    classes?: PropsObject;
+} & InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 
 type Variant$5 = 'outlined';
 type Size$8 = 'medium' | 'small';
@@ -110,7 +121,7 @@ interface Props$j {
 }
 declare const ColorPicker: (props: UiProps<Props$j> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
 
-type Variant$4 = 'outlined';
+type Variant$4 = 'filled' | 'outlined';
 type Size$7 = 'medium' | 'small';
 interface Props$i {
     variant?: Variant$4;
@@ -118,7 +129,9 @@ interface Props$i {
     fullWidth?: boolean;
     label?: string;
 }
-declare const Input: (props: UiProps<Props$i> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<Props$i & {
+    classes?: PropsObject;
+} & InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 
 type Variant$3 = 'filled' | 'outlined';
 type Size$6 = 'medium' | 'small';
@@ -264,7 +277,8 @@ interface TableCell {
     payload?: {
         [key: string]: string;
     };
-    error?: string;
+    tooltip?: string;
+    fill?: 'error' | 'success';
 }
 
 interface TableRow {
@@ -311,7 +325,7 @@ interface TableColumn {
     width?: number;
     headerAlign?: ColumnAlign;
     rowsAlign?: ColumnAlign;
-    valueFormat?: (value: string) => string;
+    valueFormat?: (value: string | number | undefined) => string;
     showInModal?: boolean;
     onClick?: (payload: {
         [key: string]: string;
@@ -339,7 +353,7 @@ interface Props$8 {
     onChangeCell?: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => void;
     cellWidth?: (columnIndex: number) => number;
     rowButtons?: ((original: TableRow) => AdditionalButton[]) | undefined;
-    fixedColumnsCount?: 0 | 1 | 2;
+    fixedColumnsCount?: number;
     headerRowHeight?: number[];
     bodyRowHeight?: number;
     rowActionWidth?: number;