@delightui/components 0.1.25 → 0.1.27

package/dist/cjs/components/molecules/DatePicker/DatePicker.types.d.ts

@@ -82,10 +82,6 @@ export type DatePickerProps = {
     * @default false
     */
     allowInput?: boolean;
-    /**
-     * Container element for the calendar when used inside a Popover
-     */
-    container?: HTMLElement | null;
     /**
      * Custom time picker plugin
      */
@@ -94,12 +90,14 @@ export type DatePickerProps = {
      * Custom time picker plugin
      */
     customDateTimePickerPlugin?: (config: CustomTimePickerConfig) => Plugin;
+    /**
+     * Use custom time input same as date picker input
+     * This is useful when the datepicker is inline and is re-added to the DOM after closing
+     * For example using this inside a Popover as content
+     */
+    useCustomTimeInputForTimePicker?: boolean;
 };
 export type CustomTimePickerConfig = {
     minuteStep: number;
-    /**
-     * Container element for the calendar when used inside a Popover
-     */
-    container?: HTMLElement | null;
 };
 export {};

package/dist/cjs/components/molecules/DatePicker/Plugins/customTimeSelector.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from "flatpickr/dist/types/options";
+import { CustomTimePickerConfig } from '../DatePicker.types';
+declare const timeDropdownPlugin: (config: CustomTimePickerConfig) => Plugin;
+export default timeDropdownPlugin;

package/dist/cjs/components/molecules/DatePicker/Plugins/utils.d.ts

@@ -15,8 +15,10 @@ export declare const filterDropdownOptions: (dropdown: HTMLDivElement, query: st
  * Positions the dropdown relative to the input field.
  * @param dropdown - The dropdown element to position.
  * @param inputElement - The input element to base the dropdown positioning on.
+ * @param wrapperElement - The wrapper element to base the dropdown positioning on. This will take precedence over the input element.
+ * @param dropdownPosition - The position of the dropdown. 'fixed' or 'absolute'.
  */
-export declare const positionDropdownRelativeToInput: (dropdown: HTMLDivElement, inputElement: HTMLInputElement) => void;
+export declare const positionDropdownRelativeToInput: (dropdown: HTMLDivElement, inputElement: HTMLInputElement, wrapperElement?: HTMLElement, dropdownPosition?: "fixed" | "absolute") => void;
 /**
  * Formats a Date object into a time string (HH:MM AM/PM).
  * @param date - The Date object to format.

package/dist/cjs/components/molecules/Popover/Popover.types.d.ts

@@ -100,6 +100,11 @@ export type PopoverProps = {
      * Additional class for overlay container styling.
      */
     overlayClassName?: string;
+    /**
+     * Position of the Popover.
+     * @default 'absolute'
+     */
+    contentPosition?: 'absolute' | 'fixed';
 };
 export type PopoverHandle = {
     close: () => void;

package/dist/cjs/library.css

@@ -1461,7 +1461,6 @@ span.flatpickr-weekday {
 .custom-time-wrapper {
   display: flex;
   flex-direction: column;
-  position: relative;
   width: 100%;
   margin-top: var(--spacing-large);
   gap: var(--spacing-large);
@@ -1482,11 +1481,15 @@ span.flatpickr-weekday {
   height: auto;
   gap: var(--spacing-medium);
   border-radius: var(--corner-radius-extra-small);
-  border: 1px solid var(--border-primary);
+  outline: 1px solid var(--colours-grey-450);
   background: var(--interactive-surface-secondary-default);
   align-items: center;
   padding-left: var(--spacing-medium);
   color: var(--text-primary);
+  position: relative;
+}
+.custom-time-input-wrapper:focus-within {
+  outline: 1px solid var(--border-primary);
 }
 .custom-time-input-wrapper .custom-time-input {
   width: 100%;
@@ -1500,15 +1503,40 @@ span.flatpickr-weekday {
   color: var(--text-primary);
   caret-color: var(--text-primary);
 }
+.custom-time-only-input-wrapper {
+  display: flex;
+  width: 100%;
+  height: auto;
+  gap: var(--spacing-medium);
+  border-radius: var(--corner-radius-extra-small);
+  border: medium none currentcolor;
+  border: initial;
+  background: var(--interactive-surface-secondary-default);
+  align-items: center;
+  padding-left: var(--spacing-medium);
+  color: var(--text-primary);
+}
+.custom-time-only-input-wrapper .custom-time-input {
+  width: 100%;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-small);
+  font-weight: 400;
+  line-height: var(--line-height-body-small);
+  text-align: left;
+  padding: var(--spacing-medium);
+  padding-left: 0px;
+  color: var(--text-primary);
+  caret-color: var(--text-primary);
+}
 .time-dropdown {
   display: flex;
   flex-direction: column;
   z-index: 99999;
   gap: var(--spacing-extra-small);
   color: #fff;
-  font-size: var(--font-size-body-small);
-  font-family: var(--font-family-body-small);
-  line-height: var(--line-height-body-small);
+  font-size: 13px;
+  font-family: var(--font-family-body);
+  line-height: 16px;
   background: var(--surface-background-4);
   outline: 1px solid var(--border-border-grey-3);
   width: 250px;
@@ -1516,6 +1544,7 @@ span.flatpickr-weekday {
   overflow: auto;
   padding: var(--spacing-medium);
   border-radius: var(--corner-radius-extra-small);
+  margin-top: 2px;
 }
 .time-dropdown .dropdown-option {
   align-items: center;