@delightui/components 0.1.3 → 0.1.5

package/dist/cjs/components/atoms/List/List.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { ListProps } from './List.types';
-declare const List: <T>(props: ListProps<T>) => React.JSX.Element;
-export default List;
+import type { ListItemType, ListProps } from './List.types';
+declare const ListWrapper: <T extends ListItemType>(props: ListProps<T>) => React.JSX.Element;
+export default ListWrapper;

package/dist/cjs/components/atoms/List/List.types.d.ts

@@ -1,9 +1,12 @@
-import type { HTMLAttributes } from 'react';
+import type { Dispatch, HTMLAttributes, SetStateAction } from 'react';
 /**
  * Enum for the alignment of the list.
  */
 export type ListAlignEnum = 'Horizontal' | 'Vertical';
-export type ListProps<T> = HTMLAttributes<HTMLUListElement> & {
+export type ListItemType = object & {
+    id?: string | number;
+};
+export type ListProps<T extends ListItemType> = HTMLAttributes<HTMLUListElement> & {
     /**
      * The data to be rendered in the list.
      */
@@ -29,4 +32,15 @@ export type ListProps<T> = HTMLAttributes<HTMLUListElement> & {
      * Additional class for styling.
      */
     className?: string;
+    /**
+     * Flag to enable sorting of list items
+     */
+    sortable?: boolean;
+    /**
+     * callback function to update the current order of data
+     *
+     * @param data
+     * @returns
+     */
+    updateSortOrder?: Dispatch<SetStateAction<T[]>>;
 };

package/dist/cjs/components/atoms/Text/Text.types.d.ts

@@ -39,6 +39,11 @@ export interface TextProps {
      * @default false
      */
     noWrap?: boolean;
+    /**
+     * Flag to handle how white space inside an element is handled.
+     * @default false
+     */
+    whiteSpaceNoWrap?: boolean;
     /**
      * Flag to italicize the text.
      * @default false

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

@@ -1,3 +1,5 @@
+import FlatPickr from 'react-flatpickr';
+type DatePickerPosition = 'auto' | 'above' | 'below' | 'auto left' | 'auto center' | 'auto right' | 'above left' | 'above center' | 'above right' | 'below left' | 'below center' | 'below right';
 export type DatePickerProps = {
     /**
      * Additional class for styling.
@@ -53,4 +55,18 @@ export type DatePickerProps = {
      * render date picker inline
      */
     inline?: boolean;
+    /**
+   * Hide calendar for only time picker.
+   * @default false
+   */
+    noCalendar?: boolean;
+    /**
+     * The Flatpickr ref.
+     */
+    datePickerRef?: React.RefObject<FlatPickr>;
+    /**
+     * Datepicker position
+     */
+    position?: DatePickerPosition;
 };
+export {};

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { PopoverProps } from './Popover.types';
+import type { PopoverHandle, PopoverProps } from './Popover.types';
 /**
- * Popover component definition.
+ * Popover component that displays a floating content element in relation to a target element.
+ * It can be triggered via different user actions like 'Click' or 'Hover'.
  */
-declare const Popover: (props: PopoverProps) => React.JSX.Element;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;
 export default Popover;

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

@@ -39,6 +39,10 @@ export type PopoverProps = {
      * Function to handle hiding the Popover.
      */
     onHide?: () => void;
+    /**
+     * Function to handle hiding the Popover.
+     */
+    onOpen?: () => void;
     /**
      * Direction in which the Popover should open.
      * @default 'Down'
@@ -78,8 +82,21 @@ export type PopoverProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Indicates if content should change placement to stay on the screen.
+     * @default false
+     */
+    flip?: boolean;
     /**
      * Additional class for styling.
      */
     className?: string;
+    /**
+     * Additional class for overlay container styling.
+     */
+    overlayClassName?: string;
+};
+export type PopoverHandle = {
+    close: () => void;
+    open: () => void;
 };

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

@@ -1,4 +1,4 @@
 import Popover from './Popover';
-import type { PopoverProps } from './Popover.types';
-export type { PopoverProps };
+import type { PopoverProps, PopoverHandle } from './Popover.types';
+export type { PopoverProps, PopoverHandle };
 export default Popover;

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

@@ -121,6 +121,10 @@ export type SelectViewProps = Omit<HTMLAttributes<HTMLElement>, 'style' | 'child
      * Additional CSS classes for customization.
      */
     className?: string;
+    /**
+     * The component used to render each item in the list.
+     */
+    selectedView?: React.FC<any>;
 };
 /**
  * Props for the Select component, combining provider and view props.

package/dist/cjs/components/utils.d.ts

@@ -15,6 +15,7 @@ export declare const renderChildren: (children: ReactNode, options?: {
     defaultWeight?: TextWeightEnum;
     defaultType?: TextTypeEnum;
     noWrap?: boolean;
+    whiteSpaceNoWrap?: boolean;
     as?: "span";
 }) => ReactElement;
 /**

package/dist/cjs/library.css

@@ -494,6 +494,10 @@
   --text-wrap: nowrap;
 }
 
+.Text-module_whiteSpaceNoWrap__GYqL2 {
+  white-space: nowrap;
+}
+
 .Text-module_capitalize__r9qCk {
   text-transform: capitalize;
 }
@@ -1735,6 +1739,9 @@ span.flatpickr-weekday {
 .flatpickr-calendar .flatpickr-months .flatpickr-current-month {
   color: var(--datePicker-cur-month-color);
 }
+.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background-color: var(--datePicker-background-color);
+}
 .flatpickr-calendar .flatpickr-months .arrowUp,
 .flatpickr-calendar .flatpickr-months .arrowDown {
   display: none;
@@ -2101,6 +2108,8 @@ span.flatpickr-weekday {
   border-radius: var(--select-options-border-radius);
   border: var(--select-options-border-width) solid var(--select-options-border-color);
   background-color: var(--select-options-background-color);
+  max-height: 160px;
+  overflow-y: auto;
 }
 .Select-module_select__sbUrw .Select-module_options__UwfeB .Select-module_resetOption__dvBeU {
   display: flex;