@redsift/pickers 10.3.0-alpha.1 → 10.3.0-alpha.11

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,32 @@
 import * as _redsift_design_system from '@redsift/design-system';
-import { ValueOf, TextProps, Theme, FlexboxProps, ContainerProps, Comp, ListboxContextProps, ButtonColor, ButtonVariant, TextFieldVariant } from '@redsift/design-system';
+import { ContainerProps, Comp, ValueOf, TextProps, Theme, FlexboxProps, ListboxContextProps, ItemProps, ButtonColor, ButtonVariant, TextFieldVariant } from '@redsift/design-system';
+export { ItemColor, ItemProps, StyledItem, StyledItemProps } 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.
@@ -48,6 +73,10 @@ type ComboboxState = {
     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.
@@ -69,6 +98,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. */
@@ -97,18 +130,6 @@ interface ComboboxProps extends PopoverProps {
 }
 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.
  */
@@ -121,18 +142,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.
  */
@@ -194,6 +203,78 @@ declare const Combobox: React.FC<ComboboxProps> & {
     };
 };
 
+/**
+ * The Item component.
+ */
+declare const Item: Comp<ItemProps, HTMLElement>;
+
+/**
+ * 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.
  */
@@ -234,47 +315,53 @@ 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.
@@ -332,35 +419,6 @@ interface SelectProps extends PopoverProps {
 }
 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.
  */
@@ -376,4 +434,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, Item, 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 };