glints-aries 4.0.215 → 4.0.216

package/es/@next/Combobox/Combobox.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ComboboxProps {
+    activator: React.ReactElement;
+    allowMultiple?: boolean;
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Combobox: {
+    ({ activator, allowMultiple, children, onClose, }: ComboboxProps): JSX.Element;
+    Label: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+    TextInput: ({ onChange, value, ...props }: import("./components/TextInput/TextInput").ComboboxTextInputProps) => JSX.Element;
+    OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: import("./components/OptionList/OptionList").OptionListProps) => JSX.Element;
+    Option: ({ label, value, selected }: import("./components/OptionList/Option").OptionProps) => JSX.Element;
+};

package/es/@next/Combobox/Combobox.js

@@ -0,0 +1,67 @@
+import React, { useCallback, useState } from 'react';
+import { Popover } from '../Popover';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { TextInput, OptionList, Option } from './components';
+import { ComboboxOptionContext } from './components/OptionList/OptionListContext';
+import { ComboboxTextInputContext } from './components/TextInput/TextInputContext';
+export var Combobox = function Combobox(_ref) {
+  var activator = _ref.activator,
+    _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    children = _ref.children,
+    onClose = _ref.onClose;
+  var _useState = useState(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState(),
+    textInputWidth = _useState2[0],
+    setTextInputWidth = _useState2[1];
+  var handleClose = useCallback(function () {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  var handleFocus = function handleFocus() {
+    setPopoverActive(true);
+  };
+  var handleBlur = function handleBlur() {
+    if (popoverActive) {
+      handleClose();
+    }
+  };
+  var textInputContextValue = {
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    textInputWidth: textInputWidth,
+    setTextInputWidth: setTextInputWidth
+  };
+  var optionContextValue = {
+    allowMultiple: allowMultiple
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    active: popoverActive,
+    activator: /*#__PURE__*/React.createElement(ComboboxTextInputContext.Provider, {
+      value: textInputContextValue
+    }, activator),
+    onClose: handleClose,
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement(ComboboxOptionContext.Provider, {
+    value: optionContextValue
+  }, /*#__PURE__*/React.createElement(ComboboxTextInputContext.Provider, {
+    value: textInputContextValue
+  }, children))));
+};
+var Label = function Label(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: Neutral.B18
+  }, children);
+};
+Combobox.Label = Label;
+Combobox.TextInput = TextInput;
+Combobox.OptionList = OptionList;
+Combobox.Option = Option;

package/es/@next/Combobox/Combobox.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const MultiSelect: any;

package/es/@next/Combobox/comboboxStoryHelper/TagStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/es/@next/Combobox/comboboxStoryHelper/TagStyle.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Tag } from '../../Tag';
+import { space8 } from '../../utilities/spacing';
+export var StyledTag = styled(Tag).withConfig({
+  displayName: "TagStyle__StyledTag",
+  componentId: "sc-1k5uydi-0"
+})(["margin-right:", ";"], space8);

package/es/@next/Combobox/components/OptionList/Option.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type OptionType = {
+    label: string;
+    value: string;
+};
+export interface OptionProps extends OptionType {
+    selected?: boolean;
+}
+export interface NoOptionListProps {
+    noOptionsMessage?: React.ReactNode;
+}
+export declare const Option: ({ label, value, selected }: OptionProps) => JSX.Element;
+export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;

package/es/@next/Combobox/components/OptionList/Option.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Checkbox } from '../../../Checkbox';
+import { Typography } from '../../../Typography';
+import { Neutral } from '../../../utilities/colors';
+import { useOption, useOptionList } from './OptionListContext';
+import { EmptyOptionContainer } from './OptionListStyle';
+export var Option = function Option(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    selected = _ref.selected;
+  var optionContext = useOption();
+  var allowMultiple = optionContext.allowMultiple;
+  var optionListContext = useOptionList();
+  var onOptionSelect = optionListContext.onOptionSelect;
+  var handleOptionSelect = function handleOptionSelect(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onOptionSelect({
+      value: value
+    });
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    value: value,
+    onClick: handleOptionSelect,
+    "data-active": selected
+  }, allowMultiple ? /*#__PURE__*/React.createElement(Checkbox, {
+    label: label,
+    checked: selected
+  }) : label);
+};
+export var NoOptionList = function NoOptionList(_ref2) {
+  var _ref2$noOptionsMessag = _ref2.noOptionsMessage,
+    noOptionsMessage = _ref2$noOptionsMessag === void 0 ? 'No matching results' : _ref2$noOptionsMessag;
+  return /*#__PURE__*/React.createElement(EmptyOptionContainer, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body2",
+    color: Neutral.B40
+  }, noOptionsMessage));
+};

package/es/@next/Combobox/components/OptionList/OptionList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NoOptionListProps } from './Option';
+export interface OptionListProps extends NoOptionListProps {
+    children: React.ReactNode;
+    isEmpty?: boolean;
+    onSelect?(value: string): void;
+}
+export declare const OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: OptionListProps) => JSX.Element;

package/es/@next/Combobox/components/OptionList/OptionList.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useComboboxTextInput } from '../TextInput/TextInputContext';
+import { NoOptionList } from './Option';
+import { ComboboxOptionListContext } from './OptionListContext';
+import { OptionListContainer, StyledOptionList } from './OptionListStyle';
+export var OptionList = function OptionList(_ref) {
+  var children = _ref.children,
+    isEmpty = _ref.isEmpty,
+    noOptionsMessage = _ref.noOptionsMessage,
+    onSelect = _ref.onSelect;
+  var textInputContext = useComboboxTextInput();
+  var textInputWidth = textInputContext.textInputWidth;
+  var hasChildren = !isEmpty;
+  var onOptionSelect = function onOptionSelect(_ref2) {
+    var value = _ref2.value;
+    if (onSelect) onSelect(value);
+  };
+  var optionListContextValue = {
+    onOptionSelect: onOptionSelect
+  };
+  return /*#__PURE__*/React.createElement(OptionListContainer, {
+    textInputWidth: textInputWidth
+  }, /*#__PURE__*/React.createElement(StyledOptionList, null, /*#__PURE__*/React.createElement(ComboboxOptionListContext.Provider, {
+    value: optionListContextValue
+  }, hasChildren ? children : /*#__PURE__*/React.createElement(NoOptionList, {
+    noOptionsMessage: noOptionsMessage
+  }))));
+};

package/es/@next/Combobox/components/OptionList/OptionListContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type ComboboxOptionType = {
+    allowMultiple?: boolean;
+};
+export declare const ComboboxOptionContext: import("react").Context<ComboboxOptionType>;
+export declare const useOption: () => ComboboxOptionType;
+declare type ComboboxOptionListType = {
+    onOptionSelect({ value }: {
+        value: string;
+    }): void;
+    selectedOptions?: string[];
+};
+export declare const ComboboxOptionListContext: import("react").Context<ComboboxOptionListType>;
+export declare const useOptionList: () => ComboboxOptionListType;
+export {};

package/es/@next/Combobox/components/OptionList/OptionListContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+export var ComboboxOptionContext = /*#__PURE__*/createContext(undefined);
+export var useOption = function useOption() {
+  var context = useContext(ComboboxOptionContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionContext was provided. Your component must be wrapped in a <ComboboxOptionContext.Provider>');
+  }
+  return context;
+};
+export var ComboboxOptionListContext = /*#__PURE__*/createContext(undefined);
+export var useOptionList = function useOptionList() {
+  var context = useContext(ComboboxOptionListContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionListContext was provided. Your component must be wrapped in a <ComboboxOptionListContext.Provider>');
+  }
+  return context;
+};

package/es/@next/Combobox/components/OptionList/OptionListStyle.d.ts

@@ -0,0 +1,7 @@
+interface OptionListContainerProps {
+    textInputWidth?: number;
+}
+export declare const OptionListContainer: import("styled-components").StyledComponent<"div", any, OptionListContainerProps, never>;
+export declare const StyledOptionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const EmptyOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/es/@next/Combobox/components/OptionList/OptionListStyle.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../../../utilities/borderRadius';
+import { Neutral } from '../../../utilities/colors';
+import { space4, space8 } from '../../../utilities/spacing';
+export var OptionListContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__OptionListContainer",
+  componentId: "sc-19tus93-0"
+})(["width:", "px;padding:", " 0;"], function (props) {
+  return props.textInputWidth;
+}, space8);
+export var StyledOptionList = styled.ul.withConfig({
+  displayName: "OptionListStyle__StyledOptionList",
+  componentId: "sc-19tus93-1"
+})(["list-style:none;margin:0 ", ";padding:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";&:hover{background:", ";border-radius:", ";cursor:pointer;}&[data-active='true']{border-radius:", ";cursor:default;}svg{height:24px;width:24px;}}"], space8, space8, space4, Neutral.B99, borderRadius4, borderRadius4);
+export var EmptyOptionContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__EmptyOptionContainer",
+  componentId: "sc-19tus93-2"
+})(["display:flex;align-items:center;justify-content:center;margin:10px 0;"]);

package/es/@next/Combobox/components/OptionList/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionList } from './OptionList';
+export { Option } from './Option';

package/es/@next/Combobox/components/OptionList/index.js

@@ -0,0 +1,2 @@
+export { OptionList } from './OptionList';
+export { Option } from './Option';

package/es/@next/Combobox/components/TextInput/TextInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInputProps } from '../../../TextInput';
+export interface ComboboxTextInputProps extends Omit<TextInputProps, 'onChange'> {
+    onChange?(value: string): void;
+    textInputWidth?: number;
+    setTextInputWidth?: React.Dispatch<(prevState: undefined) => undefined>;
+}
+export declare const TextInput: ({ onChange, value, ...props }: ComboboxTextInputProps) => JSX.Element;

package/es/@next/Combobox/components/TextInput/TextInput.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onChange", "value"];
+import React, { useEffect, useRef } from 'react';
+import { Icon } from '../../../Icon';
+import { TextInput as GlintsTextInput } from '../../../TextInput';
+import { useComboboxTextInput } from './TextInputContext';
+export var TextInput = function TextInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var inputRef = useRef(null);
+  var textInputContext = useComboboxTextInput();
+  var onFocus = textInputContext.onFocus,
+    setTextInputWidth = textInputContext.setTextInputWidth;
+  useEffect(function () {
+    setTextInputWidth(inputRef.current.getBoundingClientRect().width);
+  }, [inputRef, setTextInputWidth]);
+  var handleChange = function handleChange(_ref2) {
+    var value = _ref2.value;
+    if (onChange) onChange(value);
+  };
+  return /*#__PURE__*/React.createElement(GlintsTextInput, _extends({}, props, {
+    ref: inputRef,
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      name: "ri-search"
+    }),
+    value: value,
+    onChange: function onChange(value) {
+      return handleChange({
+        value: value
+      });
+    },
+    onFocus: onFocus
+  }));
+};

package/es/@next/Combobox/components/TextInput/TextInputContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ComboboxTextInputProps } from './TextInput';
+export declare const ComboboxTextInputContext: import("react").Context<ComboboxTextInputProps>;
+export declare const useComboboxTextInput: () => ComboboxTextInputProps;

package/es/@next/Combobox/components/TextInput/TextInputContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export var ComboboxTextInputContext = /*#__PURE__*/createContext(undefined);
+export var useComboboxTextInput = function useComboboxTextInput() {
+  var context = useContext(ComboboxTextInputContext);
+  if (!context) {
+    throw new Error('No TextInputContext was provided. Your component must be wrapped in a <TextInputContext.Provider>');
+  }
+  return context;
+};

package/es/@next/Combobox/components/TextInput/index.d.ts

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/es/@next/Combobox/components/TextInput/index.js

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/es/@next/Combobox/components/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export * from './OptionList';

package/es/@next/Combobox/components/index.js

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export * from './OptionList';

package/es/@next/Combobox/index.d.ts

@@ -0,0 +1 @@
+export * from './Combobox';

package/es/@next/Combobox/index.js

@@ -0,0 +1 @@
+export * from './Combobox';

package/es/@next/index.d.ts

@@ -13,6 +13,7 @@ export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochrom
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Card, CardProps } from './Card';
 export { Checkbox, CheckboxProps } from './Checkbox';
+export { Combobox, ComboboxProps } from './Combobox';
 export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
 export { DataTable, DataTableProps, TableCellProps, TableHeaderProps, TableRowProps, } from './DataTable';
 export { Divider } from './Divider';

package/es/@next/index.js

@@ -14,6 +14,7 @@ export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochrom
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Card, CardProps } from './Card';
 export { Checkbox, CheckboxProps } from './Checkbox';
+export { Combobox, ComboboxProps } from './Combobox';
 export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
 export { DataTable, DataTableProps, TableCellProps, TableHeaderProps, TableRowProps } from './DataTable';
 export { Divider } from './Divider';

package/lib/@next/Combobox/Combobox.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ComboboxProps {
+    activator: React.ReactElement;
+    allowMultiple?: boolean;
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Combobox: {
+    ({ activator, allowMultiple, children, onClose, }: ComboboxProps): JSX.Element;
+    Label: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+    TextInput: ({ onChange, value, ...props }: import("./components/TextInput/TextInput").ComboboxTextInputProps) => JSX.Element;
+    OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: import("./components/OptionList/OptionList").OptionListProps) => JSX.Element;
+    Option: ({ label, value, selected }: import("./components/OptionList/Option").OptionProps) => JSX.Element;
+};

package/lib/@next/Combobox/Combobox.js

@@ -0,0 +1,74 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Combobox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Popover = require("../Popover");
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var _components = require("./components");
+var _OptionListContext = require("./components/OptionList/OptionListContext");
+var _TextInputContext = require("./components/TextInput/TextInputContext");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Combobox = function Combobox(_ref) {
+  var activator = _ref.activator,
+    _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    children = _ref.children,
+    onClose = _ref.onClose;
+  var _useState = (0, _react.useState)(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = (0, _react.useState)(),
+    textInputWidth = _useState2[0],
+    setTextInputWidth = _useState2[1];
+  var handleClose = (0, _react.useCallback)(function () {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  var handleFocus = function handleFocus() {
+    setPopoverActive(true);
+  };
+  var handleBlur = function handleBlur() {
+    if (popoverActive) {
+      handleClose();
+    }
+  };
+  var textInputContextValue = {
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    textInputWidth: textInputWidth,
+    setTextInputWidth: setTextInputWidth
+  };
+  var optionContextValue = {
+    allowMultiple: allowMultiple
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {
+    active: popoverActive,
+    activator: /*#__PURE__*/_react["default"].createElement(_TextInputContext.ComboboxTextInputContext.Provider, {
+      value: textInputContextValue
+    }, activator),
+    onClose: handleClose,
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    fullWidth: true
+  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, null, /*#__PURE__*/_react["default"].createElement(_OptionListContext.ComboboxOptionContext.Provider, {
+    value: optionContextValue
+  }, /*#__PURE__*/_react["default"].createElement(_TextInputContext.ComboboxTextInputContext.Provider, {
+    value: textInputContextValue
+  }, children))));
+};
+exports.Combobox = Combobox;
+var Label = function Label(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: _colors.Neutral.B18
+  }, children);
+};
+Combobox.Label = Label;
+Combobox.TextInput = _components.TextInput;
+Combobox.OptionList = _components.OptionList;
+Combobox.Option = _components.Option;

package/lib/@next/Combobox/Combobox.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const MultiSelect: any;

package/lib/@next/Combobox/comboboxStoryHelper/TagStyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/lib/@next/Combobox/comboboxStoryHelper/TagStyle.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledTag = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Tag = require("../../Tag");
+var _spacing = require("../../utilities/spacing");
+var StyledTag = (0, _styledComponents["default"])(_Tag.Tag).withConfig({
+  displayName: "TagStyle__StyledTag",
+  componentId: "sc-1k5uydi-0"
+})(["margin-right:", ";"], _spacing.space8);
+exports.StyledTag = StyledTag;

package/lib/@next/Combobox/components/OptionList/Option.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type OptionType = {
+    label: string;
+    value: string;
+};
+export interface OptionProps extends OptionType {
+    selected?: boolean;
+}
+export interface NoOptionListProps {
+    noOptionsMessage?: React.ReactNode;
+}
+export declare const Option: ({ label, value, selected }: OptionProps) => JSX.Element;
+export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;

package/lib/@next/Combobox/components/OptionList/Option.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Option = exports.NoOptionList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Checkbox = require("../../../Checkbox");
+var _Typography = require("../../../Typography");
+var _colors = require("../../../utilities/colors");
+var _OptionListContext = require("./OptionListContext");
+var _OptionListStyle = require("./OptionListStyle");
+var Option = function Option(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    selected = _ref.selected;
+  var optionContext = (0, _OptionListContext.useOption)();
+  var allowMultiple = optionContext.allowMultiple;
+  var optionListContext = (0, _OptionListContext.useOptionList)();
+  var onOptionSelect = optionListContext.onOptionSelect;
+  var handleOptionSelect = function handleOptionSelect(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onOptionSelect({
+      value: value
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement("li", {
+    value: value,
+    onClick: handleOptionSelect,
+    "data-active": selected
+  }, allowMultiple ? /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, {
+    label: label,
+    checked: selected
+  }) : label);
+};
+exports.Option = Option;
+var NoOptionList = function NoOptionList(_ref2) {
+  var _ref2$noOptionsMessag = _ref2.noOptionsMessage,
+    noOptionsMessage = _ref2$noOptionsMessag === void 0 ? 'No matching results' : _ref2$noOptionsMessag;
+  return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.EmptyOptionContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "body2",
+    color: _colors.Neutral.B40
+  }, noOptionsMessage));
+};
+exports.NoOptionList = NoOptionList;

package/lib/@next/Combobox/components/OptionList/OptionList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NoOptionListProps } from './Option';
+export interface OptionListProps extends NoOptionListProps {
+    children: React.ReactNode;
+    isEmpty?: boolean;
+    onSelect?(value: string): void;
+}
+export declare const OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: OptionListProps) => JSX.Element;

package/lib/@next/Combobox/components/OptionList/OptionList.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.OptionList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TextInputContext = require("../TextInput/TextInputContext");
+var _Option = require("./Option");
+var _OptionListContext = require("./OptionListContext");
+var _OptionListStyle = require("./OptionListStyle");
+var OptionList = function OptionList(_ref) {
+  var children = _ref.children,
+    isEmpty = _ref.isEmpty,
+    noOptionsMessage = _ref.noOptionsMessage,
+    onSelect = _ref.onSelect;
+  var textInputContext = (0, _TextInputContext.useComboboxTextInput)();
+  var textInputWidth = textInputContext.textInputWidth;
+  var hasChildren = !isEmpty;
+  var onOptionSelect = function onOptionSelect(_ref2) {
+    var value = _ref2.value;
+    if (onSelect) onSelect(value);
+  };
+  var optionListContextValue = {
+    onOptionSelect: onOptionSelect
+  };
+  return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.OptionListContainer, {
+    textInputWidth: textInputWidth
+  }, /*#__PURE__*/_react["default"].createElement(_OptionListStyle.StyledOptionList, null, /*#__PURE__*/_react["default"].createElement(_OptionListContext.ComboboxOptionListContext.Provider, {
+    value: optionListContextValue
+  }, hasChildren ? children : /*#__PURE__*/_react["default"].createElement(_Option.NoOptionList, {
+    noOptionsMessage: noOptionsMessage
+  }))));
+};
+exports.OptionList = OptionList;

package/lib/@next/Combobox/components/OptionList/OptionListContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type ComboboxOptionType = {
+    allowMultiple?: boolean;
+};
+export declare const ComboboxOptionContext: import("react").Context<ComboboxOptionType>;
+export declare const useOption: () => ComboboxOptionType;
+declare type ComboboxOptionListType = {
+    onOptionSelect({ value }: {
+        value: string;
+    }): void;
+    selectedOptions?: string[];
+};
+export declare const ComboboxOptionListContext: import("react").Context<ComboboxOptionListType>;
+export declare const useOptionList: () => ComboboxOptionListType;
+export {};

package/lib/@next/Combobox/components/OptionList/OptionListContext.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useOptionList = exports.useOption = exports.ComboboxOptionListContext = exports.ComboboxOptionContext = void 0;
+var _react = require("react");
+var ComboboxOptionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ComboboxOptionContext = ComboboxOptionContext;
+var useOption = function useOption() {
+  var context = (0, _react.useContext)(ComboboxOptionContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionContext was provided. Your component must be wrapped in a <ComboboxOptionContext.Provider>');
+  }
+  return context;
+};
+exports.useOption = useOption;
+var ComboboxOptionListContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ComboboxOptionListContext = ComboboxOptionListContext;
+var useOptionList = function useOptionList() {
+  var context = (0, _react.useContext)(ComboboxOptionListContext);
+  if (!context) {
+    throw new Error('No ComboboxOptionListContext was provided. Your component must be wrapped in a <ComboboxOptionListContext.Provider>');
+  }
+  return context;
+};
+exports.useOptionList = useOptionList;

package/lib/@next/Combobox/components/OptionList/OptionListStyle.d.ts

@@ -0,0 +1,7 @@
+interface OptionListContainerProps {
+    textInputWidth?: number;
+}
+export declare const OptionListContainer: import("styled-components").StyledComponent<"div", any, OptionListContainerProps, never>;
+export declare const StyledOptionList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const EmptyOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/@next/Combobox/components/OptionList/OptionListStyle.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledOptionList = exports.OptionListContainer = exports.EmptyOptionContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _borderRadius = require("../../../utilities/borderRadius");
+var _colors = require("../../../utilities/colors");
+var _spacing = require("../../../utilities/spacing");
+var OptionListContainer = _styledComponents["default"].div.withConfig({
+  displayName: "OptionListStyle__OptionListContainer",
+  componentId: "sc-19tus93-0"
+})(["width:", "px;padding:", " 0;"], function (props) {
+  return props.textInputWidth;
+}, _spacing.space8);
+exports.OptionListContainer = OptionListContainer;
+var StyledOptionList = _styledComponents["default"].ul.withConfig({
+  displayName: "OptionListStyle__StyledOptionList",
+  componentId: "sc-19tus93-1"
+})(["list-style:none;margin:0 ", ";padding:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";&:hover{background:", ";border-radius:", ";cursor:pointer;}&[data-active='true']{border-radius:", ";cursor:default;}svg{height:24px;width:24px;}}"], _spacing.space8, _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _borderRadius.borderRadius4);
+exports.StyledOptionList = StyledOptionList;
+var EmptyOptionContainer = _styledComponents["default"].div.withConfig({
+  displayName: "OptionListStyle__EmptyOptionContainer",
+  componentId: "sc-19tus93-2"
+})(["display:flex;align-items:center;justify-content:center;margin:10px 0;"]);
+exports.EmptyOptionContainer = EmptyOptionContainer;

package/lib/@next/Combobox/components/OptionList/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionList } from './OptionList';
+export { Option } from './Option';

package/lib/@next/Combobox/components/OptionList/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.OptionList = exports.Option = void 0;
+var _OptionList = require("./OptionList");
+exports.OptionList = _OptionList.OptionList;
+var _Option = require("./Option");
+exports.Option = _Option.Option;

package/lib/@next/Combobox/components/TextInput/TextInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TextInputProps } from '../../../TextInput';
+export interface ComboboxTextInputProps extends Omit<TextInputProps, 'onChange'> {
+    onChange?(value: string): void;
+    textInputWidth?: number;
+    setTextInputWidth?: React.Dispatch<(prevState: undefined) => undefined>;
+}
+export declare const TextInput: ({ onChange, value, ...props }: ComboboxTextInputProps) => JSX.Element;

package/lib/@next/Combobox/components/TextInput/TextInput.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TextInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = require("../../../Icon");
+var _TextInput = require("../../../TextInput");
+var _TextInputContext = require("./TextInputContext");
+var _excluded = ["onChange", "value"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var TextInput = function TextInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var inputRef = (0, _react.useRef)(null);
+  var textInputContext = (0, _TextInputContext.useComboboxTextInput)();
+  var onFocus = textInputContext.onFocus,
+    setTextInputWidth = textInputContext.setTextInputWidth;
+  (0, _react.useEffect)(function () {
+    setTextInputWidth(inputRef.current.getBoundingClientRect().width);
+  }, [inputRef, setTextInputWidth]);
+  var handleChange = function handleChange(_ref2) {
+    var value = _ref2.value;
+    if (onChange) onChange(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, (0, _extends2["default"])({}, props, {
+    ref: inputRef,
+    prefix: /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+      name: "ri-search"
+    }),
+    value: value,
+    onChange: function onChange(value) {
+      return handleChange({
+        value: value
+      });
+    },
+    onFocus: onFocus
+  }));
+};
+exports.TextInput = TextInput;

package/lib/@next/Combobox/components/TextInput/TextInputContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ComboboxTextInputProps } from './TextInput';
+export declare const ComboboxTextInputContext: import("react").Context<ComboboxTextInputProps>;
+export declare const useComboboxTextInput: () => ComboboxTextInputProps;

package/lib/@next/Combobox/components/TextInput/TextInputContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useComboboxTextInput = exports.ComboboxTextInputContext = void 0;
+var _react = require("react");
+var ComboboxTextInputContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ComboboxTextInputContext = ComboboxTextInputContext;
+var useComboboxTextInput = function useComboboxTextInput() {
+  var context = (0, _react.useContext)(ComboboxTextInputContext);
+  if (!context) {
+    throw new Error('No TextInputContext was provided. Your component must be wrapped in a <TextInputContext.Provider>');
+  }
+  return context;
+};
+exports.useComboboxTextInput = useComboboxTextInput;

package/lib/@next/Combobox/components/TextInput/index.d.ts

@@ -0,0 +1 @@
+export { TextInput } from './TextInput';

package/lib/@next/Combobox/components/TextInput/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TextInput = void 0;
+var _TextInput = require("./TextInput");
+exports.TextInput = _TextInput.TextInput;

package/lib/@next/Combobox/components/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export * from './OptionList';

package/lib/@next/Combobox/components/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {
+  TextInput: true
+};
+exports.TextInput = void 0;
+var _TextInput = require("./TextInput");
+exports.TextInput = _TextInput.TextInput;
+var _OptionList = require("./OptionList");
+Object.keys(_OptionList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _OptionList[key]) return;
+  exports[key] = _OptionList[key];
+});

package/lib/@next/Combobox/index.d.ts

@@ -0,0 +1 @@
+export * from './Combobox';

package/lib/@next/Combobox/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _Combobox = require("./Combobox");
+Object.keys(_Combobox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Combobox[key]) return;
+  exports[key] = _Combobox[key];
+});

package/lib/@next/index.d.ts

@@ -13,6 +13,7 @@ export { Button, ButtonProps, DestructiveButton, OutlineButton, OutlineMonochrom
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 export { Card, CardProps } from './Card';
 export { Checkbox, CheckboxProps } from './Checkbox';
+export { Combobox, ComboboxProps } from './Combobox';
 export { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
 export { DataTable, DataTableProps, TableCellProps, TableHeaderProps, TableRowProps, } from './DataTable';
 export { Divider } from './Divider';

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
+exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SimplePagination = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -52,6 +52,9 @@ exports.CardProps = _Card.CardProps;
 var _Checkbox = require("./Checkbox");
 exports.Checkbox = _Checkbox.Checkbox;
 exports.CheckboxProps = _Checkbox.CheckboxProps;
+var _Combobox = require("./Combobox");
+exports.Combobox = _Combobox.Combobox;
+exports.ComboboxProps = _Combobox.ComboboxProps;
 var _CurrencyInput = require("./CurrencyInput");
 exports.CurrencyInput = _CurrencyInput.CurrencyInput;
 exports.CurrencyInputProps = _CurrencyInput.CurrencyInputProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.215",
+  "version": "4.0.216",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",