glints-aries 4.1.65 → 4.1.66

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

@@ -59,6 +59,8 @@ export interface SelectProps {
     borderRadius?: string;
     required?: boolean;
     isPlaceholderFloating?: boolean;
+    /** Allow popover to stretch to the full width of its activator */
+    fullWidth?: boolean;
 }
-export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, isPopoverActive, onPopoverActiveChange, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, isPopoverActive, onPopoverActiveChange, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, fullWidth, }: SelectProps) => JSX.Element;
 export {};

package/es/@next/Select/Select.js

@@ -50,7 +50,9 @@ export var Select = function Select(_ref) {
     border = _ref.border,
     borderRadius = _ref.borderRadius,
     required = _ref.required,
-    isPlaceholderFloating = _ref.isPlaceholderFloating;
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth;
   var _useState = useState(false),
     internalPopoverActive = _useState[0],
     setInternalPopoverActive = _useState[1];
@@ -198,7 +200,7 @@ export var Select = function Select(_ref) {
     preventFocusOnClose: true,
     preferredAlignment: "left",
     preferredPosition: "below",
-    fullWidth: true,
+    fullWidth: fullWidth,
     fitContent: optionListFitContent,
     zIndexOverride: zIndexOverride
   }, !disabled && /*#__PURE__*/React.createElement(Popover.Pane, {
@@ -210,7 +212,7 @@ export var Select = function Select(_ref) {
     onSelect: onSelect,
     sections: sections,
     selectedValues: selectedValues,
-    width: width,
+    width: fullWidth ? width : undefined,
     onMenuClose: handleClose,
     noOptionsMessage: optionsPlaceholderProps && (!inputValue ? optionsPlaceholderProps.idle : optionsPlaceholderProps.noResult),
     updateSearchableSelectState: function updateSearchableSelectState(newState) {

package/es/Input/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, isDisableCallingCode, isPlaceholderFloating, isRequired, error, addon, ...restProps }: Props) => JSX.Element;
+export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, isDisableCallingCode, isPlaceholderFloating, isRequired, error, addon, showFilterInput, ...restProps }: Props) => JSX.Element;
 export interface Props {
     value: PhoneNumber;
     onChange: (value: PhoneNumber) => void;
@@ -20,6 +20,7 @@ export interface Props {
     isDisableCallingCode?: boolean;
     isPlaceholderFloating?: boolean;
     isRequired?: boolean;
+    showFilterInput?: boolean;
 }
 export interface PhoneNumber {
     callingCode: number;

package/es/Input/PhoneNumberInput/PhoneNumberInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "isDisableCallingCode", "isPlaceholderFloating", "isRequired", "error", "addon"];
+var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "isDisableCallingCode", "isPlaceholderFloating", "isRequired", "error", "addon", "showFilterInput"];
 import { useCombobox } from 'downshift';
 import { find, orderBy } from 'lodash-es';
 import React, { useEffect, useRef, useState } from 'react';
@@ -37,6 +37,8 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
     isRequired = _ref.isRequired,
     error = _ref.error,
     addon = _ref.addon,
+    _ref$showFilterInput = _ref.showFilterInput,
+    showFilterInput = _ref$showFilterInput === void 0 ? true : _ref$showFilterInput,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     isCallingCodeInputOpen = _useState[0],
@@ -48,6 +50,20 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
     return setIsCallingCodeInputOpen(false);
   };
   var callingCodeOptions = orderBy(callingCodeOptionsExternal, ['isFeatured', 'label'], ['desc', 'asc']);
+  var hasFeaturedOptions = callingCodeOptions.some(function (item) {
+    return item.isFeatured;
+  });
+  var hasOtherOptions = callingCodeOptions.some(function (item) {
+    return !item.isFeatured;
+  });
+  var shouldShowGroupHeaders = hasFeaturedOptions && hasOtherOptions;
+  var getGroupHeaderLabel = function getGroupHeaderLabel(item, index) {
+    if (!shouldShowGroupHeaders) return '';
+    var previousItem = callingCodeOptions[index - 1];
+    var isGroupBoundary = item.isFeatured !== (previousItem || {}).isFeatured;
+    if (!isGroupBoundary) return '';
+    return item.isFeatured ? featuredOptionsLabel : otherOptionsLabel;
+  };
   var _useCombobox = useCombobox({
       items: callingCodeOptions,
       selectedItem: find(callingCodeOptions, {
@@ -119,7 +135,7 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
     isOpen: isCallingCodeInputOpen
   }, getComboboxProps(), {
     "data-testid": "calling-code-input"
-  }), /*#__PURE__*/React.createElement(S.CallingCodeFilterInputGroup, null, /*#__PURE__*/React.createElement(S.CallingCodeFilterInput, _extends({}, getInputProps({
+  }), showFilterInput && /*#__PURE__*/React.createElement(S.CallingCodeFilterInputGroup, null, /*#__PURE__*/React.createElement(S.CallingCodeFilterInput, _extends({}, getInputProps({
     placeholder: callingCodeFilterInputPlaceholder
   }, _extends({}, refErrorFix)), {
     ref: callingCodeFilterInputRef,
@@ -136,7 +152,7 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
       index: index
     }), {
       title: item.label,
-      withGroupHeader: item.isFeatured !== (callingCodeOptions[index - 1] || {}).isFeatured && (item.isFeatured ? featuredOptionsLabel : otherOptionsLabel)
+      withGroupHeader: getGroupHeaderLabel(item, index)
     }), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(S.CallingCodeOptionCallingCode, null, "+", item.callingCode), /*#__PURE__*/React.createElement(S.CallingCodeOptionLabel, null, item.label)));
   }) : /*#__PURE__*/React.createElement(S.NoOptions, {
     "data-testid": "no-options"

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

@@ -59,6 +59,8 @@ export interface SelectProps {
     borderRadius?: string;
     required?: boolean;
     isPlaceholderFloating?: boolean;
+    /** Allow popover to stretch to the full width of its activator */
+    fullWidth?: boolean;
 }
-export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, isPopoverActive, onPopoverActiveChange, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, isPopoverActive, onPopoverActiveChange, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, fullWidth, }: SelectProps) => JSX.Element;
 export {};

package/lib/@next/Select/Select.js

@@ -56,7 +56,9 @@ var Select = function Select(_ref) {
     border = _ref.border,
     borderRadius = _ref.borderRadius,
     required = _ref.required,
-    isPlaceholderFloating = _ref.isPlaceholderFloating;
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth;
   var _useState = (0, _react.useState)(false),
     internalPopoverActive = _useState[0],
     setInternalPopoverActive = _useState[1];
@@ -204,7 +206,7 @@ var Select = function Select(_ref) {
     preventFocusOnClose: true,
     preferredAlignment: "left",
     preferredPosition: "below",
-    fullWidth: true,
+    fullWidth: fullWidth,
     fitContent: optionListFitContent,
     zIndexOverride: zIndexOverride
   }, !disabled && /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
@@ -216,7 +218,7 @@ var Select = function Select(_ref) {
     onSelect: onSelect,
     sections: sections,
     selectedValues: selectedValues,
-    width: width,
+    width: fullWidth ? width : undefined,
     onMenuClose: handleClose,
     noOptionsMessage: optionsPlaceholderProps && (!inputValue ? optionsPlaceholderProps.idle : optionsPlaceholderProps.noResult),
     updateSearchableSelectState: function updateSearchableSelectState(newState) {

package/lib/Input/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, isDisableCallingCode, isPlaceholderFloating, isRequired, error, addon, ...restProps }: Props) => JSX.Element;
+export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, isDisableCallingCode, isPlaceholderFloating, isRequired, error, addon, showFilterInput, ...restProps }: Props) => JSX.Element;
 export interface Props {
     value: PhoneNumber;
     onChange: (value: PhoneNumber) => void;
@@ -20,6 +20,7 @@ export interface Props {
     isDisableCallingCode?: boolean;
     isPlaceholderFloating?: boolean;
     isRequired?: boolean;
+    showFilterInput?: boolean;
 }
 export interface PhoneNumber {
     callingCode: number;

package/lib/Input/PhoneNumberInput/PhoneNumberInput.js

@@ -14,7 +14,7 @@ var _Flex = require("../../Layout/Flex");
 var _useOutsideAlerter = require("../../Utils/useOutsideAlerter");
 var S = _interopRequireWildcard(require("./PhoneNumberInputStyles"));
 var _InputStyle = require("../../@next/Input/InputStyle");
-var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "isDisableCallingCode", "isPlaceholderFloating", "isRequired", "error", "addon"];
+var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "isDisableCallingCode", "isPlaceholderFloating", "isRequired", "error", "addon", "showFilterInput"];
 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; }
 // Downshift wants a ref to this, but we need one ourselves, and there is no way
@@ -43,6 +43,8 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
     isRequired = _ref.isRequired,
     error = _ref.error,
     addon = _ref.addon,
+    _ref$showFilterInput = _ref.showFilterInput,
+    showFilterInput = _ref$showFilterInput === void 0 ? true : _ref$showFilterInput,
     restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     isCallingCodeInputOpen = _useState[0],
@@ -54,6 +56,20 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
     return setIsCallingCodeInputOpen(false);
   };
   var callingCodeOptions = (0, _lodash.orderBy)(callingCodeOptionsExternal, ['isFeatured', 'label'], ['desc', 'asc']);
+  var hasFeaturedOptions = callingCodeOptions.some(function (item) {
+    return item.isFeatured;
+  });
+  var hasOtherOptions = callingCodeOptions.some(function (item) {
+    return !item.isFeatured;
+  });
+  var shouldShowGroupHeaders = hasFeaturedOptions && hasOtherOptions;
+  var getGroupHeaderLabel = function getGroupHeaderLabel(item, index) {
+    if (!shouldShowGroupHeaders) return '';
+    var previousItem = callingCodeOptions[index - 1];
+    var isGroupBoundary = item.isFeatured !== (previousItem || {}).isFeatured;
+    if (!isGroupBoundary) return '';
+    return item.isFeatured ? featuredOptionsLabel : otherOptionsLabel;
+  };
   var _useCombobox = (0, _downshift.useCombobox)({
       items: callingCodeOptions,
       selectedItem: (0, _lodash.find)(callingCodeOptions, {
@@ -125,7 +141,7 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
     isOpen: isCallingCodeInputOpen
   }, getComboboxProps(), {
     "data-testid": "calling-code-input"
-  }), /*#__PURE__*/_react["default"].createElement(S.CallingCodeFilterInputGroup, null, /*#__PURE__*/_react["default"].createElement(S.CallingCodeFilterInput, (0, _extends2["default"])({}, getInputProps({
+  }), showFilterInput && /*#__PURE__*/_react["default"].createElement(S.CallingCodeFilterInputGroup, null, /*#__PURE__*/_react["default"].createElement(S.CallingCodeFilterInput, (0, _extends2["default"])({}, getInputProps({
     placeholder: callingCodeFilterInputPlaceholder
   }, (0, _extends2["default"])({}, refErrorFix)), {
     ref: callingCodeFilterInputRef,
@@ -142,7 +158,7 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
       index: index
     }), {
       title: item.label,
-      withGroupHeader: item.isFeatured !== (callingCodeOptions[index - 1] || {}).isFeatured && (item.isFeatured ? featuredOptionsLabel : otherOptionsLabel)
+      withGroupHeader: getGroupHeaderLabel(item, index)
     }), /*#__PURE__*/_react["default"].createElement(_Flex.Flex, null, /*#__PURE__*/_react["default"].createElement(S.CallingCodeOptionCallingCode, null, "+", item.callingCode), /*#__PURE__*/_react["default"].createElement(S.CallingCodeOptionLabel, null, item.label)));
   }) : /*#__PURE__*/_react["default"].createElement(S.NoOptions, {
     "data-testid": "no-options"

package/package.json

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