@redsift/pickers 11.5.0 → 11.6.0-muiv5-alpha.0

package/components/menu-button-trigger/MenuButtonTrigger.js

@@ -0,0 +1,167 @@
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { FocusWithinGroupContext, useTheme, isComponent, FocusWithinGroupActionType, EventKey } from '@redsift/design-system';
+import { usePopoverContext, useMergeRefs } from '@redsift/popovers';
+import { MenuButtonContext } from '../menu-button/context.js';
+
+const COMPONENT_NAME = 'MenuButtonTrigger';
+const CLASSNAME = 'redsift-menu-button-trigger';
+
+/**
+ * The MenuButtonTrigger component.
+ */
+const MenuButtonTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    getReferenceProps,
+    isOpen,
+    handleOpen,
+    refs
+  } = usePopoverContext();
+  const childrenRef = children.ref;
+  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+  const focusContext = useContext(FocusWithinGroupContext);
+  const menuButtonContext = useContext(MenuButtonContext);
+  const theme = useTheme();
+  const renderedChildren = typeof children === 'function' ? children({
+    isOpen
+  }) : children;
+  const handleKeyDown = event => {
+    const code = event.code;
+    if (code === 'Escape' || code === 'Tab') {
+      if (isOpen) {
+        handleOpen(false);
+      }
+    } else if (code === 'ArrowDown') {
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      if (focusContext.state.selectedId !== null) {
+        focusContext.dispatch({
+          type: FocusWithinGroupActionType.DELAY_ACTION,
+          payload: {
+            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+            payload: {
+              key: EventKey.ArrowDown,
+              ctrlKey: event.ctrlKey
+            }
+          }
+        });
+      } else {
+        focusContext.dispatch({
+          type: FocusWithinGroupActionType.DELAY_ACTION,
+          payload: {
+            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+            payload: {
+              key: EventKey.Home,
+              ctrlKey: event.ctrlKey
+            }
+          }
+        });
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (code === 'ArrowUp') {
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: focusContext.state.selectedId !== null ? EventKey.ArrowUp : EventKey.Home,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (code === 'Home') {
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: EventKey.Home,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (code === 'End') {
+      if (!isOpen) {
+        handleOpen(true);
+      }
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+          payload: {
+            key: EventKey.End,
+            ctrlKey: event.ctrlKey
+          }
+        }
+      });
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (code === 'Enter') {
+      if (isOpen && focusContext.state.selectedId) {
+        var _document$getElementB, _document$getElementB2, _document$getElementB3, _document$getElementB4;
+        (_document$getElementB = document.getElementById(focusContext.state.selectedId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
+        (_document$getElementB2 = document.getElementById(focusContext.state.selectedId)) === null || _document$getElementB2 === void 0 ? void 0 : (_document$getElementB3 = _document$getElementB2.getElementsByTagName('a')) === null || _document$getElementB3 === void 0 ? void 0 : (_document$getElementB4 = _document$getElementB3[0]) === null || _document$getElementB4 === void 0 ? void 0 : _document$getElementB4.click();
+      }
+    }
+  };
+  const handleClick = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isOpen) {
+      handleOpen(false);
+    } else {
+      var _focusContext$state$a, _focusContext$state$a2;
+      handleOpen(true);
+      focusContext.dispatch({
+        type: FocusWithinGroupActionType.DELAY_ACTION,
+        payload: {
+          type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+          payload: {
+            id: (_focusContext$state$a = (_focusContext$state$a2 = focusContext.state.activedescendant) === null || _focusContext$state$a2 === void 0 ? void 0 : _focusContext$state$a2[0]) !== null && _focusContext$state$a !== void 0 ? _focusContext$state$a : ''
+          }
+        }
+      });
+    }
+  };
+  if (isComponent('Button')(renderedChildren) || isComponent('IconButton')(renderedChildren)) {
+    var _props$children, _focusContext$state$a3, _menuButtonContext$co, _menuButtonContext$va;
+    return /*#__PURE__*/React.cloneElement(renderedChildren, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+      ref: triggerRef
+    }, props), renderedChildren.props), {}, {
+      children: (_props$children = renderedChildren.props.children) !== null && _props$children !== void 0 ? _props$children : ''
+    }))), {}, {
+      theme,
+      'aria-activedescendant': isOpen ? (_focusContext$state$a3 = focusContext.state.activedescendant) === null || _focusContext$state$a3 === void 0 ? void 0 : _focusContext$state$a3[0] : undefined,
+      className: classNames(renderedChildren.props.className, menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.triggerClassName),
+      color: (_menuButtonContext$co = menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.color) !== null && _menuButtonContext$co !== void 0 ? _menuButtonContext$co : renderedChildren.props.color,
+      isActive: isOpen,
+      isDisabled: menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.isDisabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: 'button',
+      variant: (_menuButtonContext$va = menuButtonContext === null || menuButtonContext === void 0 ? void 0 : menuButtonContext.variant) !== null && _menuButtonContext$va !== void 0 ? _menuButtonContext$va : renderedChildren.props.variant
+    }));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren);
+});
+MenuButtonTrigger.className = CLASSNAME;
+MenuButtonTrigger.displayName = COMPONENT_NAME;
+
+export { MenuButtonTrigger };
+//# sourceMappingURL=MenuButtonTrigger.js.map

package/components/menu-button-trigger/MenuButtonTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonTrigger.js","sources":["../../../src/components/menu-button-trigger/MenuButtonTrigger.tsx"],"sourcesContent":["import React, { MouseEvent, ReactElement, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport {\n  Comp,\n  EventKey,\n  FocusWithinGroupActionType,\n  FocusWithinGroupContext,\n  isComponent,\n  useTheme,\n} from '@redsift/design-system';\nimport { MenuButtonTriggerProps } from './types';\nimport { useMergeRefs, usePopoverContext } from '@redsift/popovers';\nimport { MenuButtonContext } from '../menu-button/context';\n\nconst COMPONENT_NAME = 'MenuButtonTrigger';\nconst CLASSNAME = 'redsift-menu-button-trigger';\n\n/**\n * The MenuButtonTrigger component.\n */\nexport const MenuButtonTrigger: Comp<MenuButtonTriggerProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const { children } = props;\n\n  const { getReferenceProps, isOpen, handleOpen, refs } = usePopoverContext();\n  const childrenRef = (children as any).ref;\n  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);\n\n  const focusContext = useContext(FocusWithinGroupContext);\n  const menuButtonContext = useContext(MenuButtonContext);\n  const theme = useTheme();\n\n  const renderedChildren = typeof children === 'function' ? children({ isOpen }) : children;\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    const code = event.code;\n\n    if (code === 'Escape' || code === 'Tab') {\n      if (isOpen) {\n        handleOpen(false);\n      }\n    } else if (code === 'ArrowDown') {\n      if (!isOpen) {\n        handleOpen(true);\n      }\n      if (focusContext.state.selectedId !== null) {\n        focusContext.dispatch({\n          type: FocusWithinGroupActionType.DELAY_ACTION,\n          payload: {\n            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,\n            payload: {\n              key: EventKey.ArrowDown,\n              ctrlKey: event.ctrlKey,\n            },\n          },\n        });\n      } else {\n        focusContext.dispatch({\n          type: FocusWithinGroupActionType.DELAY_ACTION,\n          payload: {\n            type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,\n            payload: {\n              key: EventKey.Home,\n              ctrlKey: event.ctrlKey,\n            },\n          },\n        });\n      }\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (code === 'ArrowUp') {\n      if (!isOpen) {\n        handleOpen(true);\n      }\n      focusContext.dispatch({\n        type: FocusWithinGroupActionType.DELAY_ACTION,\n        payload: {\n          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,\n          payload: {\n            key: focusContext.state.selectedId !== null ? EventKey.ArrowUp : EventKey.Home,\n            ctrlKey: event.ctrlKey,\n          },\n        },\n      });\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (code === 'Home') {\n      if (!isOpen) {\n        handleOpen(true);\n      }\n      focusContext.dispatch({\n        type: FocusWithinGroupActionType.DELAY_ACTION,\n        payload: {\n          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,\n          payload: {\n            key: EventKey.Home,\n            ctrlKey: event.ctrlKey,\n          },\n        },\n      });\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (code === 'End') {\n      if (!isOpen) {\n        handleOpen(true);\n      }\n      focusContext.dispatch({\n        type: FocusWithinGroupActionType.DELAY_ACTION,\n        payload: {\n          type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,\n          payload: {\n            key: EventKey.End,\n            ctrlKey: event.ctrlKey,\n          },\n        },\n      });\n      event.preventDefault();\n      event.stopPropagation();\n    } else if (code === 'Enter') {\n      if (isOpen && focusContext.state.selectedId) {\n        document.getElementById(focusContext.state.selectedId)?.click();\n        document.getElementById(focusContext.state.selectedId)?.getElementsByTagName('a')?.[0]?.click();\n      }\n    }\n  };\n\n  const handleClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (isOpen) {\n      handleOpen(false);\n    } else {\n      handleOpen(true);\n      focusContext.dispatch({\n        type: FocusWithinGroupActionType.DELAY_ACTION,\n        payload: {\n          type: FocusWithinGroupActionType.FOCUS_ON_LIST,\n          payload: {\n            id: focusContext.state.activedescendant?.[0] ?? '',\n          },\n        },\n      });\n    }\n  };\n\n  if (isComponent('Button')(renderedChildren) || isComponent('IconButton')(renderedChildren)) {\n    return React.cloneElement(renderedChildren, {\n      ...getReferenceProps({\n        ref: triggerRef,\n        ...props,\n        ...(renderedChildren as ReactElement).props,\n        children: (renderedChildren as ReactElement).props.children ?? '',\n      }),\n      theme,\n      'aria-activedescendant': isOpen ? focusContext.state.activedescendant?.[0] : undefined,\n      className: classNames((renderedChildren as ReactElement).props.className, menuButtonContext?.triggerClassName),\n      color: menuButtonContext?.color ?? (renderedChildren as ReactElement).props.color,\n      isActive: isOpen,\n      isDisabled: menuButtonContext?.isDisabled,\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      role: 'button',\n      variant: menuButtonContext?.variant ?? (renderedChildren as ReactElement).props.variant,\n    });\n  }\n\n  return <>{renderedChildren}</>;\n});\nMenuButtonTrigger.className = CLASSNAME;\nMenuButtonTrigger.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","MenuButtonTrigger","forwardRef","props","ref","children","getReferenceProps","isOpen","handleOpen","refs","usePopoverContext","childrenRef","triggerRef","useMergeRefs","setReference","focusContext","useContext","FocusWithinGroupContext","menuButtonContext","MenuButtonContext","theme","useTheme","renderedChildren","handleKeyDown","event","code","state","selectedId","dispatch","type","FocusWithinGroupActionType","DELAY_ACTION","payload","KEY_DOWN_ON_LIST","key","EventKey","ArrowDown","ctrlKey","Home","preventDefault","stopPropagation","ArrowUp","End","_document$getElementB","_document$getElementB2","_document$getElementB3","_document$getElementB4","document","getElementById","click","getElementsByTagName","handleClick","_focusContext$state$a","_focusContext$state$a2","FOCUS_ON_LIST","id","activedescendant","isComponent","_props$children","_focusContext$state$a3","_menuButtonContext$co","_menuButtonContext$va","React","cloneElement","_objectSpread","undefined","className","classNames","triggerClassName","color","isActive","isDisabled","onClick","onKeyDown","role","variant","createElement","Fragment","displayName"],"mappings":"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"}

package/components/menu-button-trigger/types.d.ts

@@ -0,0 +1,15 @@
+import { PopoverTriggerProps } from '@redsift/popovers';
+import { ReactElement } from 'react';
+
+/**
+ * Component props.
+ */
+interface MenuButtonTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
+    /** Children */
+    children: ReactElement | ((state: {
+        value?: string;
+        isOpen?: boolean;
+    }) => ReactElement);
+}
+
+export { MenuButtonTriggerProps };

package/components/select/Select.d.ts

@@ -0,0 +1,22 @@
+import * as _redsift_design_system from '@redsift/design-system';
+import React from 'react';
+import { SelectProps } from './types.js';
+import { SelectTriggerProps } from '../select-trigger/types.js';
+import { SelectContentProps } from '../select-content/types.js';
+
+/**
+ * The Select component.
+ */
+declare const BaseSelect: React.FC<SelectProps> & {
+    displayName?: string;
+    className?: string;
+};
+declare const Select: React.FC<SelectProps> & {
+    displayName?: string | undefined;
+    className?: string | undefined;
+} & {
+    Trigger: _redsift_design_system.Comp<SelectTriggerProps, HTMLButtonElement>;
+    Content: _redsift_design_system.Comp<SelectContentProps, HTMLDivElement>;
+};
+
+export { BaseSelect, Select };

package/components/select/Select.js

@@ -0,0 +1,116 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useState, useEffect, useReducer, useMemo } from 'react';
+import { Popover } from '@redsift/popovers';
+import { SelectContext } from './context.js';
+import { useTheme, ListboxReducer, ListboxActionType, ThemeProvider, FocusWithinGroup, ListboxContext, Flexbox, Text, Theme } from '@redsift/design-system';
+import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
+import { SelectContent } from '../select-content/SelectContent.js';
+
+const COMPONENT_NAME = 'Select';
+const CLASSNAME = 'redsift-select';
+
+/**
+ * The Select component.
+ */
+const BaseSelect = props => {
+  const {
+    color,
+    defaultValue,
+    description,
+    descriptionProps,
+    isDisabled,
+    isInvalid,
+    minWidth = 'trigger-width',
+    onChange,
+    theme: propsTheme,
+    triggerClassName,
+    value,
+    variant,
+    wrapperProps
+  } = props;
+  const theme = useTheme(propsTheme);
+  const [selectedValue, setValue] = useState(value || defaultValue || '');
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+
+  /** Listbox context */
+  const [listboxState, listboxDispatch] = useReducer(ListboxReducer, {
+    isDisabled,
+    selectedValues: [selectedValue]
+  });
+  const listboxContext = useMemo(() => ({
+    state: listboxState,
+    dispatch: listboxDispatch
+  }), [listboxState]);
+  useEffect(() => {
+    listboxDispatch({
+      type: ListboxActionType.UPDATE_OPTIONS,
+      payload: {
+        isDisabled: isDisabled || false
+      }
+    });
+  }, [isDisabled, theme]);
+
+  /** Select context. */
+  const state = {
+    color,
+    isDisabled: isDisabled || false,
+    isInvalid: isInvalid || false,
+    setValue(value) {
+      if (isDisabled) {
+        return;
+      }
+      const previousValue = selectedValue;
+      setValue(value);
+      if (value !== previousValue && onChange) {
+        onChange(value);
+      }
+    },
+    theme,
+    triggerClassName,
+    value: selectedValue,
+    variant
+  };
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React.createElement(FocusWithinGroup, {
+    focusType: "virtual-focus",
+    focusOnInit: false
+  }, /*#__PURE__*/React.createElement(SelectContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement(ListboxContext.Provider, {
+    value: listboxContext
+  }, /*#__PURE__*/React.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "0px"
+  }, wrapperProps), /*#__PURE__*/React.createElement(Popover, _extends({
+    theme: theme,
+    overrideDisplayName: {
+      content: 'SelectContent',
+      trigger: 'SelectTrigger'
+    },
+    placement: "bottom-start",
+    role: "listbox",
+    minWidth: minWidth
+  }, props)), description && typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, _extends({
+    theme: theme,
+    marginTop: "8px",
+    variant: "caption",
+    color: isInvalid ? 'error' : theme === Theme.light ? 'dark-grey' : 'white'
+  }, descriptionProps), description) : description ? description : null)))));
+};
+BaseSelect.className = CLASSNAME;
+BaseSelect.displayName = COMPONENT_NAME;
+const Select = Object.assign(BaseSelect, {
+  Trigger: SelectTrigger,
+  Content: SelectContent
+});
+
+export { BaseSelect, Select };
+//# sourceMappingURL=Select.js.map

package/components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useReducer, useState } from 'react';\nimport { SelectContent } from '../select-content';\nimport { SelectTrigger } from '../select-trigger';\n\nimport { SelectProps } from './types';\nimport { Popover } from '@redsift/popovers';\nimport { SelectContext } from './context';\nimport {\n  ListboxReducer,\n  ListboxState,\n  ListboxContextProps,\n  FocusWithinGroup,\n  ListboxContext,\n  Flexbox,\n  Text,\n  ListboxActionType,\n  Theme,\n  useTheme,\n  ThemeProvider,\n} from '@redsift/design-system';\n\nconst COMPONENT_NAME = 'Select';\nconst CLASSNAME = 'redsift-select';\n\n/**\n * The Select component.\n */\nexport const BaseSelect: React.FC<SelectProps> & {\n  displayName?: string;\n  className?: string;\n} = (props) => {\n  const {\n    color,\n    defaultValue,\n    description,\n    descriptionProps,\n    isDisabled,\n    isInvalid,\n    minWidth = 'trigger-width',\n    onChange,\n    theme: propsTheme,\n    triggerClassName,\n    value,\n    variant,\n    wrapperProps,\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const [selectedValue, setValue] = useState<string>(value || defaultValue || '');\n  useEffect(() => {\n    if (value) {\n      state.setValue(value);\n    }\n  }, [value]);\n\n  /** Listbox context */\n  const [listboxState, listboxDispatch] = useReducer(ListboxReducer, {\n    isDisabled,\n    selectedValues: [selectedValue],\n  } as ListboxState);\n  const listboxContext = useMemo<ListboxContextProps>(\n    () => ({\n      state: listboxState,\n      dispatch: listboxDispatch,\n    }),\n    [listboxState]\n  );\n  useEffect(() => {\n    listboxDispatch({\n      type: ListboxActionType.UPDATE_OPTIONS,\n      payload: {\n        isDisabled: isDisabled || false,\n      },\n    });\n  }, [isDisabled, theme]);\n\n  /** Select context. */\n  const state = {\n    color,\n    isDisabled: isDisabled || false,\n    isInvalid: isInvalid || false,\n    setValue(value: string) {\n      if (isDisabled) {\n        return;\n      }\n\n      const previousValue = selectedValue;\n      setValue(value);\n      if (value !== previousValue && onChange) {\n        onChange(value);\n      }\n    },\n    theme,\n    triggerClassName,\n    value: selectedValue,\n    variant,\n  };\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <FocusWithinGroup focusType=\"virtual-focus\" focusOnInit={false}>\n        <SelectContext.Provider value={state}>\n          <ListboxContext.Provider value={listboxContext}>\n            <Flexbox flexDirection=\"column\" alignItems=\"flex-start\" gap=\"0px\" {...wrapperProps}>\n              <Popover\n                theme={theme}\n                overrideDisplayName={{ content: 'SelectContent', trigger: 'SelectTrigger' }}\n                placement=\"bottom-start\"\n                role=\"listbox\"\n                minWidth={minWidth}\n                {...props}\n              />\n              {description && typeof description === 'string' ? (\n                <Text\n                  theme={theme}\n                  marginTop=\"8px\"\n                  variant=\"caption\"\n                  color={isInvalid ? 'error' : theme === Theme.light ? 'dark-grey' : 'white'}\n                  {...descriptionProps}\n                >\n                  {description}\n                </Text>\n              ) : description ? (\n                description\n              ) : null}\n            </Flexbox>\n          </ListboxContext.Provider>\n        </SelectContext.Provider>\n      </FocusWithinGroup>\n    </ThemeProvider>\n  );\n};\nBaseSelect.className = CLASSNAME;\nBaseSelect.displayName = COMPONENT_NAME;\n\nexport const Select = Object.assign(BaseSelect, {\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseSelect","props","color","defaultValue","description","descriptionProps","isDisabled","isInvalid","minWidth","onChange","theme","propsTheme","triggerClassName","value","variant","wrapperProps","useTheme","selectedValue","setValue","useState","useEffect","state","listboxState","listboxDispatch","useReducer","ListboxReducer","selectedValues","listboxContext","useMemo","dispatch","type","ListboxActionType","UPDATE_OPTIONS","payload","previousValue","React","createElement","ThemeProvider","FocusWithinGroup","focusType","focusOnInit","SelectContext","Provider","ListboxContext","Flexbox","_extends","flexDirection","alignItems","gap","Popover","overrideDisplayName","content","trigger","placement","role","Text","marginTop","Theme","light","className","displayName","Select","Object","assign","Trigger","SelectTrigger","Content","SelectContent"],"mappings":"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"}

package/components/select/context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const SelectContext = /*#__PURE__*/React.createContext(null);
+
+export { SelectContext };
+//# sourceMappingURL=context.js.map

package/components/select/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/select/context.ts"],"sourcesContent":["import React from 'react';\nimport { SelectState } from './types';\n\nexport const SelectContext = React.createContext<SelectState | null>(null);\n"],"names":["SelectContext","React","createContext"],"mappings":";;AAGO,MAAMA,aAAa,gBAAGC,KAAK,CAACC,aAAa,CAAqB,IAAI;;;;"}

package/components/select/types.d.ts

@@ -0,0 +1,61 @@
+import { ButtonColor, ButtonVariant, TextFieldVariant, TextProps, Theme, FlexboxProps } from '@redsift/design-system';
+import { PopoverProps } from '@redsift/popovers';
+import { ReactElement } from 'react';
+
+/**
+ * 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. */
+    readonly isInvalid: boolean;
+    /** Sets the selected value. */
+    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.
+     */
+    defaultValue?: string;
+    /** Description of the select. */
+    description?: string | ReactElement;
+    /** Additional description properties. */
+    descriptionProps?: Omit<TextProps, 'ref'>;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is invalid or not. */
+    isInvalid?: boolean;
+    /** Method to handle component change. */
+    onChange?(value: string): void;
+    /**
+     * Currently selected value.
+     * 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;
+
+export { SelectProps, SelectState, StyledSelectProps };

package/components/select-content/SelectContent.d.ts

@@ -0,0 +1,9 @@
+import { Comp } from '@redsift/design-system';
+import { SelectContentProps } from './types.js';
+
+/**
+ * The SelectContent component.
+ */
+declare const SelectContent: Comp<SelectContentProps, HTMLDivElement>;
+
+export { SelectContent };

package/components/select-content/SelectContent.js

@@ -0,0 +1,62 @@
+import { extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef, useContext, useEffect } from 'react';
+import { getContainerProps, AppContainerContext, FocusWithinGroupContext, ListboxContext, useTheme, Flexbox } from '@redsift/design-system';
+import { usePopoverContext, useMergeRefs, FloatingPortal, StyledPopoverContent, PopoverContent } from '@redsift/popovers';
+import classNames from 'classnames';
+
+const COMPONENT_NAME = 'SelectContent';
+const CLASSNAME = 'redsift-select-content';
+
+/**
+ * The SelectContent component.
+ */
+const SelectContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    style
+  } = props;
+  const containerProps = getContainerProps(props);
+  const {
+    getFloatingProps,
+    isOpen,
+    refs,
+    strategy,
+    x,
+    y
+  } = usePopoverContext();
+  const popoverRef = useMergeRefs([refs.setFloating, ref]);
+  const appContainerState = useContext(AppContainerContext);
+  const focusContext = useContext(FocusWithinGroupContext);
+  const listboxState = useContext(ListboxContext);
+  const theme = useTheme();
+  useEffect(() => {
+    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {
+      focusContext.dispatch(focusContext.state.delayedAction);
+    }
+  }, [focusContext.state.delayedAction, focusContext.state.tabStops.length]);
+  return /*#__PURE__*/React.createElement(FloatingPortal, {
+    root: appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.appContainerRef.current
+  }, isOpen && /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({
+    $theme: theme,
+    ref: popoverRef
+  }, getFloatingProps(props), {
+    style: _objectSpread2({
+      position: strategy,
+      top: y !== null && y !== void 0 ? y : 0,
+      left: x !== null && x !== void 0 ? x : 0
+    }, style),
+    className: classNames(PopoverContent.className, SelectContent.className, className),
+    "aria-disabled": listboxState.state.isDisabled
+  }), /*#__PURE__*/React.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "0px",
+    margin: "8px 0px",
+    width: "100%"
+  }, containerProps), children)));
+});
+SelectContent.className = CLASSNAME;
+SelectContent.displayName = COMPONENT_NAME;
+
+export { SelectContent };
+//# sourceMappingURL=SelectContent.js.map

package/components/select-content/SelectContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContent.js","sources":["../../../src/components/select-content/SelectContent.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useEffect } from 'react';\n\nimport {\n  AppContainerContext,\n  Comp,\n  Flexbox,\n  FocusWithinGroupContext,\n  ListboxContext,\n  getContainerProps,\n  useTheme,\n} from '@redsift/design-system';\nimport { SelectContentProps } from './types';\nimport {\n  FloatingPortal,\n  PopoverContent,\n  StyledPopoverContent,\n  useMergeRefs,\n  usePopoverContext,\n} from '@redsift/popovers';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'SelectContent';\nconst CLASSNAME = 'redsift-select-content';\n\n/**\n * The SelectContent component.\n */\nexport const SelectContent: Comp<SelectContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, style } = props;\n  const containerProps = getContainerProps(props);\n\n  const { getFloatingProps, isOpen, refs, strategy, x, y } = usePopoverContext();\n  const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n  const appContainerState = useContext(AppContainerContext);\n  const focusContext = useContext(FocusWithinGroupContext);\n  const listboxState = useContext(ListboxContext);\n  const theme = useTheme();\n\n  useEffect(() => {\n    if (focusContext && focusContext.state.delayedAction && focusContext.state.tabStops.length) {\n      focusContext.dispatch(focusContext.state.delayedAction);\n    }\n  }, [focusContext.state.delayedAction, focusContext.state.tabStops.length]);\n\n  return (\n    <FloatingPortal root={appContainerState?.appContainerRef.current}>\n      {isOpen && (\n        <StyledPopoverContent\n          $theme={theme!}\n          ref={popoverRef}\n          {...getFloatingProps(props)}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            ...style,\n          }}\n          className={classNames(PopoverContent.className, SelectContent.className, className)}\n          aria-disabled={listboxState.state.isDisabled}\n        >\n          <Flexbox flexDirection=\"column\" gap=\"0px\" margin=\"8px 0px\" width=\"100%\" {...containerProps}>\n            {children}\n          </Flexbox>\n        </StyledPopoverContent>\n      )}\n    </FloatingPortal>\n  );\n});\nSelectContent.className = CLASSNAME;\nSelectContent.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","SelectContent","forwardRef","props","ref","children","className","style","containerProps","getContainerProps","getFloatingProps","isOpen","refs","strategy","x","y","usePopoverContext","popoverRef","useMergeRefs","setFloating","appContainerState","useContext","AppContainerContext","focusContext","FocusWithinGroupContext","listboxState","ListboxContext","theme","useTheme","useEffect","state","delayedAction","tabStops","length","dispatch","React","createElement","FloatingPortal","root","appContainerRef","current","StyledPopoverContent","_extends","$theme","_objectSpread","position","top","left","classNames","PopoverContent","isDisabled","Flexbox","flexDirection","gap","margin","width","displayName"],"mappings":"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"}

package/components/select-content/types.d.ts

@@ -0,0 +1,9 @@
+import { PopoverContentProps } from '@redsift/popovers';
+
+/**
+ * Component props.
+ */
+interface SelectContentProps extends PopoverContentProps {
+}
+
+export { SelectContentProps };

package/components/select-trigger/SelectTrigger.d.ts

@@ -0,0 +1,9 @@
+import { Comp } from '@redsift/design-system';
+import { SelectTriggerProps } from './types.js';
+
+/**
+ * The SelectTrigger component.
+ */
+declare const SelectTrigger: Comp<SelectTriggerProps, HTMLButtonElement>;
+
+export { SelectTrigger };