@redsift/pickers 10.2.0 → 10.3.0-alpha.10

package/CONTRIBUTING.md

@@ -58,6 +58,10 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package provides dashboard-related components and decorators to make charts and datagrid filterable using [crossfilter](https://crossfilter.github.io/crossfilter/).
 
+- `@redsift/products`
+
+  This package provides ready-to-use implementation of components with a customize style to fit Red Sift's use cases. It is based on all other packages.
+
 - _Deprecated_ `@redsift/design-system-legacy`
 
   This package contains all components prior to the 6.0.0 version. These components are deprecated and contributing to this package is discouraged since it will be removed in the future.
@@ -133,9 +137,6 @@ import { BadgeProps } from './types';
 
 const COMPONENT_NAME = 'Badge';
 const CLASSNAME = 'redsift-badge';
-const DEFAULT_PROPS: Partial<BadgeProps> = {
-  // default values
-};
 
 /**
  * The Badge component.
@@ -158,7 +159,6 @@ export const Badge: Comp<BadgeProps, HTMLDivElement> = forwardRef((props, ref) =
   );
 });
 Badge.className = CLASSNAME;
-Badge.defaultProps = DEFAULT_PROPS;
 Badge.displayName = COMPONENT_NAME;
 ```
 

package/index.d.ts

@@ -1,7 +1,31 @@
 import * as _redsift_design_system from '@redsift/design-system';
-import { ValueOf, TextProps, Theme, FlexboxProps, ContainerProps, Comp, ListboxContextProps, ButtonColor, ButtonVariant } from '@redsift/design-system';
+import { ContainerProps, Comp, ValueOf, TextProps, Theme, FlexboxProps, ListboxContextProps, ButtonColor, ButtonVariant, TextFieldVariant } from '@redsift/design-system';
+import React, { ComponentProps, RefObject, ReactElement, ReactNode } from 'react';
 import { PopoverProps, PopoverContentProps, PopoverTriggerProps } from '@redsift/popovers';
-import React, { RefObject, ReactElement, ComponentProps, ReactNode } from 'react';
+
+/**
+ * Component props.
+ */
+interface ComboboxContentFooterProps extends ComponentProps<'div'>, ContainerProps {
+}
+type StyledComboboxContentFooterProps = ComboboxContentFooterProps & {};
+
+/**
+ * The ComboboxContentFooter component.
+ */
+declare const ComboboxContentFooter: Comp<ComboboxContentFooterProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface ComboboxContentHeaderProps extends ComponentProps<'div'>, ContainerProps {
+}
+type StyledComboboxContentHeaderProps = ComboboxContentHeaderProps & {};
+
+/**
+ * The ComboboxContentHeader component.
+ */
+declare const ComboboxContentHeader: Comp<ComboboxContentHeaderProps, HTMLDivElement>;
 
 /**
  * Component variant.
@@ -46,6 +70,12 @@ type ComboboxState = {
     freeTextItemRef?: RefObject<HTMLDivElement>;
     /** Id of the first item used to create values. */
     freeTextItemId?: string;
+    /** Class name to append to the trigger. */
+    readonly triggerClassName?: string;
+    /** Ref to the form, if any. */
+    formRef?: RefObject<HTMLFormElement>;
+    /** Ref to the submit button, if any. */
+    submitRef?: RefObject<HTMLButtonElement>;
 };
 /**
  * Component props.
@@ -67,6 +97,10 @@ interface ComboboxProps extends PopoverProps {
         type: 'startsWith' | 'contains' | 'endsWith';
         caseSensitive?: boolean;
     };
+    /** Ref to the form, if any. */
+    formRef?: RefObject<HTMLFormElement>;
+    /** Ref to the submit button, if any. */
+    submitRef?: RefObject<HTMLButtonElement>;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Whether the component is invalid or not. */
@@ -88,23 +122,13 @@ interface ComboboxProps extends PopoverProps {
     selectionMode?: ComboboxSelectionMode;
     /** Theme. */
     theme?: Theme;
+    /** Class name to append to the trigger. */
+    triggerClassName?: string;
     /** Props to forward to the wrapper. */
     wrapperProps?: Omit<FlexboxProps, 'ref'>;
 }
 type StyledComboboxProps = ComboboxProps;
 
-/**
- * Component props.
- */
-interface ComboboxContentFooterProps extends ComponentProps<'div'>, ContainerProps {
-}
-type StyledComboboxContentFooterProps = ComboboxContentFooterProps & {};
-
-/**
- * The ComboboxContentFooter component.
- */
-declare const ComboboxContentFooter: Comp<ComboboxContentFooterProps, HTMLDivElement>;
-
 /**
  * Component props.
  */
@@ -117,18 +141,6 @@ interface ComboboxContentListboxProps extends FlexboxProps {
  */
 declare const ComboboxContentListbox: Comp<ComboboxContentListboxProps, HTMLDivElement>;
 
-/**
- * Component props.
- */
-interface ComboboxContentHeaderProps extends ComponentProps<'div'>, ContainerProps {
-}
-type StyledComboboxContentHeaderProps = ComboboxContentHeaderProps & {};
-
-/**
- * The ComboboxContentHeader component.
- */
-declare const ComboboxContentHeader: Comp<ComboboxContentHeaderProps, HTMLDivElement>;
-
 /**
  * Component props.
  */
@@ -156,6 +168,8 @@ interface ComboboxTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
         value?: ComboboxValue;
         isOpen?: boolean;
     }) => ReactElement);
+    /** Whether the clear button should be hiding (not recommended) */
+    hideClearButton?: boolean;
     /** Whether or not the expand/collapse icon button should be displayed or not. */
     hideExpandButton?: boolean;
     /** Whether the popover should open on focus. */
@@ -188,6 +202,73 @@ declare const Combobox: React.FC<ComboboxProps> & {
     };
 };
 
+/**
+ * Component props.
+ */
+interface MenuButtonContentFooterProps extends ComponentProps<'div'>, ContainerProps {
+}
+type StyledMenuButtonContentFooterProps = MenuButtonContentFooterProps & {};
+
+/**
+ * The MenuButtonContentFooter component.
+ */
+declare const MenuButtonContentFooter: Comp<MenuButtonContentFooterProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface MenuButtonContentHeaderProps extends ComponentProps<'div'>, ContainerProps {
+}
+type StyledMenuButtonContentHeaderProps = MenuButtonContentHeaderProps & {};
+
+/**
+ * The MenuButtonContentHeader component.
+ */
+declare const MenuButtonContentHeader: Comp<MenuButtonContentHeaderProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface MenuButtonContentMenuProps extends FlexboxProps {
+}
+
+/**
+ * The MenuButtonContentMenu component.
+ */
+declare const MenuButtonContentMenu: Comp<MenuButtonContentMenuProps, HTMLDivElement>;
+
+/**
+ * Component props.
+ */
+interface MenuButtonContentProps extends PopoverContentProps {
+}
+
+/**
+ * The MenuButtonContent component.
+ */
+declare const BaseMenuButtonContent: Comp<MenuButtonContentProps, HTMLDivElement>;
+declare const MenuButtonContent: Comp<MenuButtonContentProps, HTMLDivElement> & {
+    Header: Comp<MenuButtonContentHeaderProps, HTMLDivElement>;
+    Menu: Comp<MenuButtonContentMenuProps, HTMLDivElement>;
+    Footer: Comp<MenuButtonContentFooterProps, HTMLDivElement>;
+};
+
+/**
+ * Component props.
+ */
+interface MenuButtonTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
+    /** Children */
+    children: ReactElement | ((state: {
+        value?: string;
+        isOpen?: boolean;
+    }) => ReactElement);
+}
+
+/**
+ * The MenuButtonTrigger component.
+ */
+declare const MenuButtonTrigger: Comp<MenuButtonTriggerProps, HTMLButtonElement>;
+
 /**
  * Context props.
  */
@@ -196,7 +277,7 @@ type MenuButtonState = {
     readonly color?: ButtonColor;
     /** Whether the trigger is disabled or not. */
     readonly isDisabled: boolean;
-    /** Class name to append to the Button. */
+    /** Class name to append to the trigger. */
     readonly triggerClassName?: string;
     /** Button variant that will be forward to the trigger. */
     readonly variant?: ButtonVariant;
@@ -217,7 +298,7 @@ interface MenuButtonProps extends PopoverProps {
     label?: string | ReactElement;
     /** Additional label properties. */
     labelProps?: Omit<TextProps, 'ref'>;
-    /** Class name to append to the Button. */
+    /** Class name to append to the trigger. */
     triggerClassName?: string;
     /** Button variant that will be forward to the trigger. */
     variant?: ButtonVariant;
@@ -228,52 +309,60 @@ interface MenuButtonProps extends PopoverProps {
 }
 type StyledMenuButtonProps = MenuButtonProps;
 
+/**
+ * The MenuButton component.
+ */
+declare const BaseMenuButton: React.FC<MenuButtonProps> & {
+    displayName?: string;
+    className?: string;
+};
+declare const MenuButton: React.FC<MenuButtonProps> & {
+    displayName?: string | undefined;
+    className?: string | undefined;
+} & {
+    Trigger: _redsift_design_system.Comp<MenuButtonTriggerProps, HTMLButtonElement>;
+    Content: _redsift_design_system.Comp<MenuButtonContentProps, HTMLDivElement> & {
+        Header: _redsift_design_system.Comp<MenuButtonContentHeaderProps, HTMLDivElement>;
+        Menu: _redsift_design_system.Comp<MenuButtonContentMenuProps, HTMLDivElement>;
+        Footer: _redsift_design_system.Comp<MenuButtonContentFooterProps, HTMLDivElement>;
+    };
+};
+
 /**
  * Component props.
  */
-interface MenuButtonContentProps extends PopoverContentProps {
+interface SelectContentProps extends PopoverContentProps {
 }
 
 /**
- * The MenuButtonContent component.
+ * The SelectContent component.
  */
-declare const MenuButtonContent: Comp<MenuButtonContentProps, HTMLDivElement>;
+declare const SelectContent: Comp<SelectContentProps, HTMLDivElement>;
 
 /**
  * Component props.
  */
-interface MenuButtonTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
+interface SelectTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
     /** Children */
     children: ReactElement | ((state: {
         value?: string;
         isOpen?: boolean;
     }) => ReactElement);
+    /** Whether or not the expand/collapse icon button should be displayed or not. */
+    hideExpandButton?: boolean;
 }
 
 /**
- * The MenuButtonTrigger component.
- */
-declare const MenuButtonTrigger: Comp<MenuButtonTriggerProps, HTMLButtonElement>;
-
-/**
- * The MenuButton component.
+ * The SelectTrigger component.
  */
-declare const BaseMenuButton: React.FC<MenuButtonProps> & {
-    displayName?: string;
-    className?: string;
-};
-declare const MenuButton: React.FC<MenuButtonProps> & {
-    displayName?: string | undefined;
-    className?: string | undefined;
-} & {
-    Trigger: _redsift_design_system.Comp<MenuButtonTriggerProps, HTMLButtonElement>;
-    Content: _redsift_design_system.Comp<MenuButtonContentProps, HTMLDivElement>;
-};
+declare const SelectTrigger: Comp<SelectTriggerProps, HTMLButtonElement>;
 
 /**
  * Context props.
  */
 type SelectState = {
+    /** Button color that will be forward to the trigger. */
+    readonly color?: ButtonColor;
     /** Whether the select is disabled or not. */
     readonly isDisabled: boolean;
     /** Whether the select is invalid or not. */
@@ -282,11 +371,17 @@ type SelectState = {
     setValue(value: string): void;
     /** Current selected value. */
     readonly value: string;
+    /** Class name to append to the trigger. */
+    readonly triggerClassName?: string;
+    /** Button variant that will be forward to the trigger. */
+    readonly variant?: ButtonVariant | TextFieldVariant;
 };
 /**
  * Component props.
  */
 interface SelectProps extends PopoverProps {
+    /** Button color that will be forward to the trigger. */
+    color?: ButtonColor;
     /**
      * Default selected value.
      * Used for uncontrolled version.
@@ -307,42 +402,17 @@ interface SelectProps extends PopoverProps {
      * Used for controlled version.
      */
     value?: string;
+    /** Button variant that will be forward to the trigger. */
+    variant?: ButtonVariant | TextFieldVariant;
     /** Theme. */
     theme?: Theme;
+    /** Class name to append to the trigger. */
+    triggerClassName?: string;
     /** Props to forward to the wrapper. */
     wrapperProps?: Omit<FlexboxProps, 'ref'>;
 }
 type StyledSelectProps = SelectProps;
 
-/**
- * Component props.
- */
-interface SelectContentProps extends PopoverContentProps {
-}
-
-/**
- * The SelectContent component.
- */
-declare const SelectContent: Comp<SelectContentProps, HTMLDivElement>;
-
-/**
- * Component props.
- */
-interface SelectTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
-    /** Children */
-    children: ReactElement | ((state: {
-        value?: string;
-        isOpen?: boolean;
-    }) => ReactElement);
-    /** Whether or not the expand/collapse icon button should be displayed or not. */
-    hideExpandButton?: boolean;
-}
-
-/**
- * The SelectTrigger component.
- */
-declare const SelectTrigger: Comp<SelectTriggerProps, HTMLButtonElement>;
-
 /**
  * The Select component.
  */
@@ -358,4 +428,4 @@ declare const Select: React.FC<SelectProps> & {
     Content: _redsift_design_system.Comp<SelectContentProps, HTMLDivElement>;
 };
 
-export { BaseCombobox, BaseComboboxContent, BaseMenuButton, BaseSelect, Combobox, ComboboxContent, ComboboxContentFooter, ComboboxContentFooterProps, ComboboxContentHeader, ComboboxContentHeaderProps, ComboboxContentListbox, ComboboxContentListboxProps, ComboboxContentProps, ComboboxProps, ComboboxSelectionMode, ComboboxState, ComboboxTrigger, ComboboxTriggerProps, ComboboxValue, ComboboxVariant, MenuButton, MenuButtonContent, MenuButtonContentProps, MenuButtonProps, MenuButtonState, MenuButtonTrigger, MenuButtonTriggerProps, Select, SelectContent, SelectContentProps, SelectProps, SelectState, SelectTrigger, SelectTriggerProps, StyledComboboxContentFooterProps, StyledComboboxContentHeaderProps, StyledComboboxProps, StyledMenuButtonProps, StyledSelectProps };
+export { BaseCombobox, BaseComboboxContent, BaseMenuButton, BaseMenuButtonContent, BaseSelect, Combobox, ComboboxContent, ComboboxContentFooter, ComboboxContentFooterProps, ComboboxContentHeader, ComboboxContentHeaderProps, ComboboxContentListbox, ComboboxContentListboxProps, ComboboxContentProps, ComboboxProps, ComboboxSelectionMode, ComboboxState, ComboboxTrigger, ComboboxTriggerProps, ComboboxValue, ComboboxVariant, MenuButton, MenuButtonContent, MenuButtonContentFooter, MenuButtonContentFooterProps, MenuButtonContentHeader, MenuButtonContentHeaderProps, MenuButtonContentMenu, MenuButtonContentMenuProps, MenuButtonContentProps, MenuButtonProps, MenuButtonState, MenuButtonTrigger, MenuButtonTriggerProps, Select, SelectContent, SelectContentProps, SelectProps, SelectState, SelectTrigger, SelectTriggerProps, StyledComboboxContentFooterProps, StyledComboboxContentHeaderProps, StyledComboboxProps, StyledMenuButtonContentFooterProps, StyledMenuButtonContentHeaderProps, StyledMenuButtonProps, StyledSelectProps };