@uniai-fe/uds-primitives 0.7.0 → 0.7.1

package/dist/styles.css

@@ -601,6 +601,7 @@
   --input-time-dropdown-border-color: var(--color-border-standard-cool-gray);
   --input-time-dropdown-surface-color: var(--color-common-100);
   --input-time-dropdown-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
+  --input-time-dropdown-content-height: 200px;
   --input-time-dropdown-group-gap: var(--spacing-gap-3);
   --input-time-option-gap: var(--spacing-gap-1);
   --input-time-scrollarea-width: 64px;
@@ -4044,22 +4045,27 @@ figure.chip {
   position: absolute;
   z-index: 20;
   box-sizing: border-box;
+  max-height: calc(var(--input-time-dropdown-content-height) + var(--input-time-dropdown-padding) + var(--input-time-dropdown-padding));
   padding: var(--input-time-dropdown-padding);
   border: var(--input-time-dropdown-border-width) solid var(--input-time-dropdown-border-color);
   border-radius: var(--input-time-dropdown-radius);
   background-color: var(--input-time-dropdown-surface-color);
   box-shadow: var(--input-time-dropdown-shadow);
+  overflow: hidden;
 }
 
 .input-time-scrollarea {
   position: relative;
   min-width: var(--input-time-scrollarea-width);
+  height: var(--input-time-dropdown-content-height);
+  max-height: var(--input-time-dropdown-content-height);
   overflow: hidden;
 }
 
 .input-time-scrollarea .mantine-ScrollArea-viewport {
   box-sizing: border-box;
   height: 100%;
+  max-height: var(--input-time-dropdown-content-height);
   padding-inline-end: var(--input-time-scrollarea-gutter);
   scrollbar-gutter: stable;
   overflow: auto;
@@ -4068,6 +4074,8 @@ figure.chip {
 .input-time-controls-list-group {
   display: flex;
   gap: var(--input-time-dropdown-group-gap);
+  max-height: var(--input-time-dropdown-content-height);
+  overflow: hidden;
 }
 
 .input-time-controls-list {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/input/markup/time/Picker.tsx

@@ -31,6 +31,8 @@ const INPUT_TIME_CLASS_NAMES = {
   scrollarea: "input-time-scrollarea",
 } satisfies Partial<Record<TimePickerStylesNames, string>>;
 
+const INPUT_TIME_DROPDOWN_CONTENT_HEIGHT = 200;
+
 /**
  * Input Time Picker; Mantine TimePicker 기반 UDS adapter.
  * `Input.Time.Picker` public namespace에서 사용하며 Calendar/date 하위에 속하지 않는다.
@@ -178,13 +180,21 @@ const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
           : undefined;
     const widthValue =
       width !== undefined ? getFormFieldWidthValue(width) : undefined;
+    const dropdownContentHeight =
+      maxDropdownContentHeight ?? INPUT_TIME_DROPDOWN_CONTENT_HEIGHT;
     const containerStyle: CSSProperties | undefined =
-      widthValue !== undefined
-        ? ({ ["--input-time-width" as const]: widthValue } as CSSProperties)
+      widthValue !== undefined || maxDropdownContentHeight !== undefined
+        ? ({
+            "--input-time-width": widthValue,
+            "--input-time-dropdown-content-height":
+              maxDropdownContentHeight !== undefined
+                ? `${maxDropdownContentHeight}px`
+                : undefined,
+          } as CSSProperties)
         : undefined;
     const resolvedIcon = icon === undefined ? <ClockIcon /> : icon;
     const showClearButton = Boolean(
-      clearable && timeValue && !isDisabled && !readOnly,
+      clearable && timeValue && isFocused && !isDisabled && !readOnly,
     );
     const reserveClearSpace = Boolean(clearable && !isDisabled && !readOnly);
     const rightSectionWidth =
@@ -267,6 +277,11 @@ const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
       ) : (
         clearButton
       );
+    const resolvedScrollAreaProps = {
+      h: "var(--input-time-dropdown-content-height)",
+      mah: "var(--input-time-dropdown-content-height)",
+      ...scrollAreaProps,
+    };
 
     return (
       <div
@@ -314,8 +329,8 @@ const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
           secondsPlaceholder={secondsPlaceholder}
           pasteSplit={pasteSplit}
           presets={presets}
-          maxDropdownContentHeight={maxDropdownContentHeight}
-          scrollAreaProps={scrollAreaProps}
+          maxDropdownContentHeight={dropdownContentHeight}
+          scrollAreaProps={resolvedScrollAreaProps}
           reverseTimeControlsList={reverseTimeControlsList}
           popoverProps={{
             width: "target",

package/src/components/input/styles/time.scss

@@ -340,23 +340,31 @@
   position: absolute;
   z-index: 20;
   box-sizing: border-box;
+  max-height: calc(
+    var(--input-time-dropdown-content-height) +
+      var(--input-time-dropdown-padding) + var(--input-time-dropdown-padding)
+  );
   padding: var(--input-time-dropdown-padding);
   border: var(--input-time-dropdown-border-width) solid
     var(--input-time-dropdown-border-color);
   border-radius: var(--input-time-dropdown-radius);
   background-color: var(--input-time-dropdown-surface-color);
   box-shadow: var(--input-time-dropdown-shadow);
+  overflow: hidden;
 }
 
 .input-time-scrollarea {
   position: relative;
   min-width: var(--input-time-scrollarea-width);
+  height: var(--input-time-dropdown-content-height);
+  max-height: var(--input-time-dropdown-content-height);
   overflow: hidden;
 }
 
 .input-time-scrollarea .mantine-ScrollArea-viewport {
   box-sizing: border-box;
   height: 100%;
+  max-height: var(--input-time-dropdown-content-height);
   padding-inline-end: var(--input-time-scrollarea-gutter);
   scrollbar-gutter: stable;
   overflow: auto;
@@ -365,6 +373,8 @@
 .input-time-controls-list-group {
   display: flex;
   gap: var(--input-time-dropdown-group-gap);
+  max-height: var(--input-time-dropdown-content-height);
+  overflow: hidden;
 }
 
 .input-time-controls-list {

package/src/components/input/styles/variables.scss

@@ -200,6 +200,7 @@
   --input-time-dropdown-border-color: var(--color-border-standard-cool-gray);
   --input-time-dropdown-surface-color: var(--color-common-100);
   --input-time-dropdown-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
+  --input-time-dropdown-content-height: 200px;
   --input-time-dropdown-group-gap: var(--spacing-gap-3);
   --input-time-option-gap: var(--spacing-gap-1);
   --input-time-scrollarea-width: 64px;