nntc-ui 0.0.82 → 0.0.84

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 {
@@ -716,21 +733,47 @@
 }
 .dateTime_popoverTarget {
   position: absolute;
-  bottom: 0;
+  top: 0;
   left: 0;
-  z-index: 1;
+  z-index: 0;
   width: 100%;
-  height: 0;
+  height: 100%;
+  pointer-events: none;
+}
+.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 +825,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 +854,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 +873,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 +886,7 @@
 }
 .calendarPopover_monthCellSelection {
   position: absolute;
-  top: 10px;
+  top: 2px;
   left: 0;
   z-index: 1;
   display: block;
@@ -829,6 +894,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 +905,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 +1088,9 @@
   width: 100%;
   max-width: 320px;
 }
+.input_fullWidth {
+  max-width: 100%;
+}
 .input_medium {
   gap: 8px;
 }
@@ -991,6 +1126,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 +1143,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);

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonHTMLAttributes, ReactNode, DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren, ChangeEvent, JSX, MutableRefObject, ReactElement, CSSProperties, HTMLProps, ElementType } from 'react';
+import { ButtonHTMLAttributes, ReactNode, DetailedHTMLProps, InputHTMLAttributes, PropsWithChildren, JSX, MutableRefObject, ReactElement, CSSProperties, HTMLProps, ElementType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Placement } from '@floating-ui/react';
 
@@ -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,15 @@ 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;
+    defaultOpen?: boolean;
     componentSize?: Size$9;
     fullWidth?: boolean;
+    label?: string;
     placeholder?: string;
     values?: (string | undefined)[];
     defaultValues?: (string | undefined)[];
@@ -97,7 +107,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 +122,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 +130,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';
@@ -334,7 +348,7 @@ interface Props$8 {
     additionalColumnsViews?: (id: string, value: string | number | undefined, payload: {
         [key: string]: string;
     } | undefined) => {
-        edit: ((onChange: (e: ChangeEvent) => void, onBlur: () => void) => JSX.Element | null) | null;
+        edit: ((onChange: (changeValue?: string, withBlur?: boolean) => void, onBlur: () => void) => JSX.Element | null) | null;
         view: JSX.Element | null;
     };
     onChangeCell?: (rowIndex: number, columnId: string, value: string | number | undefined, original?: TableRow) => void;