@dreamcommerce/aurora 3.0.0-262 → 3.0.0-264

package/build/esm/packages/aurora/src/components/select/select.js

@@ -1,16 +1,18 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../utilities/cn.js';
 import { Root } from '@radix-ui/react-select';
 import { CloseCircleFillIcon } from '../../assets/icons/close_circle_fill_icon.js';
 import { SelectContent } from './components/select_content.js';
 import { SelectTrigger } from './components/select_trigger.js';
-import { SelectValue } from './components/select_value.js';
+import { useSelectValue } from './hooks/use_select_value.js';
 
-var _excluded = ["children", "id", "defaultValue", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "errors", "onValueChange", "onScroll"];
+var _excluded = ["children", "id", "value", "options", "disabled", "placeholder", "hasSearch", "searchPlaceholder", "hasClearValueButton", "innerAdditionalContent", "enableLocalSearch", "localSearchNotFoundContent", "errors", "onValueChange", "onScroll", "onSearch", "onClose", "hasError"];
 var Select = function Select(_ref) {
+  var _selectedOption$value;
   var children = _ref.children,
     id = _ref.id,
-    defaultValue = _ref.defaultValue,
+    value = _ref.value,
     options = _ref.options,
     disabled = _ref.disabled,
     placeholder = _ref.placeholder,
@@ -18,105 +20,76 @@ var Select = function Select(_ref) {
     searchPlaceholder = _ref.searchPlaceholder,
     hasClearValueButton = _ref.hasClearValueButton,
     innerAdditionalContent = _ref.innerAdditionalContent,
+    enableLocalSearch = _ref.enableLocalSearch,
+    localSearchNotFoundContent = _ref.localSearchNotFoundContent,
     errors = _ref.errors,
     onValueChange = _ref.onValueChange,
     onScroll = _ref.onScroll,
+    onSearch = _ref.onSearch,
+    onClose = _ref.onClose,
+    hasError = _ref.hasError,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useSelectValue = useSelectValue({
+      value: value,
+      options: options
+    }),
+    selectedOption = _useSelectValue.selectedOption,
+    setSelectedOption = _useSelectValue.setSelectedOption;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
-    filterTerm = _useState2[0],
-    setFilterTerm = _useState2[1];
-  var _useState3 = useState(defaultValue),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedValue = _useState4[0],
-    setSelectedValue = _useState4[1];
-  var triggerRef = useRef(null);
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    triggerWidth = _useState6[0],
-    setTriggerWidth = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    open = _useState8[0],
-    setOpen = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    renderContent = _useState10[0],
-    setRenderContent = _useState10[1];
-  var clearFilterInputOnClose = function clearFilterInputOnClose(openState) {
-    if (hasSearch && !openState) setFilterTerm('');
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var handleSearch = function handleSearch(str) {
+    setSearch(str);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(str);
   };
-  var filteredOptions = React.useMemo(function () {
-    if (!hasSearch || !filterTerm) return options;
-    return options.filter(function (opt) {
-      return opt.text.toLowerCase().includes(filterTerm.toLowerCase()) || opt.isHeader;
-    });
-  }, [filterTerm, options]);
-  useEffect(function () {
-    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(selectedValue !== null && selectedValue !== void 0 ? selectedValue : '');
-  }, [selectedValue]);
-  var getSelectedLabel = function getSelectedLabel(options, selectedValue) {
-    var _options$find;
-    return ((_options$find = options.find(function (opt) {
-      return opt.value === selectedValue;
-    })) === null || _options$find === void 0 ? void 0 : _options$find.text) || '';
+  var handleChange = function handleChange(val) {
+    var _option$value;
+    var option = val ? options.find(function (opt) {
+      return opt.value === val;
+    }) : undefined;
+    setSelectedOption(option);
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : '');
   };
-  var handleChange = function handleChange(sufixedValue) {
-    var cleanValue = sufixedValue.split('-')[0];
-    setSelectedValue(cleanValue);
+  var handleOpenChange = function handleOpenChange(open) {
+    if (hasSearch && !open) setSearch('');
+    if (onClose && !open) onClose();
   };
-  useEffect(function () {
-    if (!open) {
-      setRenderContent(false);
-      return;
-    }
-    var timer = setTimeout(function () {
-      return setRenderContent(true);
-    }, 10);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [open]);
-  useEffect(function () {
-    if (renderContent && triggerRef.current) {
-      var rect = triggerRef.current.getBoundingClientRect();
-      setTriggerWidth(rect.width);
-    }
-  }, [renderContent]);
+  var showPlaceholder = !selectedOption;
   return /*#__PURE__*/React.createElement(Root, _objectSpread2({
-    defaultValue: defaultValue,
+    value: (_selectedOption$value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _selectedOption$value !== void 0 ? _selectedOption$value : '',
     onValueChange: handleChange,
     disabled: disabled,
-    onOpenChange: function onOpenChange(openState) {
-      setOpen(openState);
-      clearFilterInputOnClose(openState);
-    }
+    onOpenChange: handleOpenChange
   }, props), /*#__PURE__*/React.createElement("div", {
     className: "aurora-relative aurora-flex aurora-items-center aurora-flex-col"
   }, /*#__PURE__*/React.createElement(SelectTrigger, {
-    ref: triggerRef,
     id: id,
-    hasError: !!(errors !== null && errors !== void 0 && errors.length)
-  }, /*#__PURE__*/React.createElement(SelectValue, {
-    placeholder: placeholder
-  }, selectedValue ? getSelectedLabel(options, selectedValue) : placeholder !== null && placeholder !== void 0 ? placeholder : '')), selectedValue && hasClearValueButton && (/*#__PURE__*/React.createElement("div", {
-    className: "aurora-absolute aurora-top-3 aurora-right-8 aurora-z-10",
-    onClick: function onClick() {
-      return setSelectedValue('');
-    }
-  }, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
-    className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
-  })))), renderContent && (/*#__PURE__*/React.createElement(SelectContent, {
-    options: filteredOptions,
-    selectedValue: selectedValue,
+    hasError: hasError || !!(errors !== null && errors !== void 0 && errors.length),
+    clearValueButton: value && hasClearValueButton && onValueChange && (/*#__PURE__*/React.createElement("div", {
+      onPointerDown: function onPointerDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick() {
+        handleChange('');
+      },
+      className: "aurora-w-5 aurora-h-5 aurora-flex aurora-items-center aurora-justify-center"
+    }, /*#__PURE__*/React.createElement(CloseCircleFillIcon, {
+      className: "aurora-h-4 aurora-w-4 aurora-cursor-pointer"
+    })))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: cn('aurora-pointer-events-none aurora-select-none', showPlaceholder && 'aurora-text-subtle')
+  }, !showPlaceholder ? selectedOption.text : placeholder))), /*#__PURE__*/React.createElement(SelectContent, {
+    options: options,
     hasSearch: hasSearch,
     searchPlaceholder: searchPlaceholder,
     innerAdditionalContent: innerAdditionalContent,
-    filterTerm: filterTerm,
-    setFilterTerm: setFilterTerm,
-    triggerWidth: triggerWidth,
-    onScroll: onScroll
-  })));
+    search: search,
+    onSearch: handleSearch,
+    onScroll: onScroll,
+    enableLocalSearch: enableLocalSearch,
+    localSearchNotFoundContent: localSearchNotFoundContent
+  }));
 };
 Select.displayName = Root.displayName;
 

package/build/esm/packages/aurora/src/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/select/select_types.d.ts

@@ -1,7 +1,9 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ReactNode, RefObject } from 'react';
+import { TInputProps } from "../input/input_types";
 export interface TSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
     hasError?: boolean;
+    clearValueButton?: ReactNode;
 }
 export declare type TSelectOption = {
     text: string;
@@ -11,23 +13,25 @@ export declare type TSelectOption = {
     isDisabled?: boolean;
     isReadonly?: boolean;
 };
+export interface TSelectSearchProps extends TInputProps {
+    options: TSelectOption[];
+}
 export interface TSelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
     options: TSelectOption[];
-    selectedValue?: string;
     hasSearch?: boolean;
     searchPlaceholder?: string;
     innerAdditionalContent?: ReactNode;
-    filterTerm: string;
-    triggerWidth?: number | null;
-    setFilterTerm?: Dispatch<SetStateAction<string>>;
+    search: string;
+    onSearch?: (str: string) => void;
+    enableLocalSearch?: boolean;
+    localSearchNotFoundContent?: ReactNode;
 }
 export interface TSelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
     isDisabled?: boolean;
     isReadonly?: boolean;
-    isSelected?: boolean;
     additionalInfo?: string;
 }
-export interface TSelectProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
+export interface TSelectProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'defaultValue'> {
     id: string;
     options: TSelectOption[];
     placeholder?: string;
@@ -37,5 +41,17 @@ export interface TSelectProps extends React.ComponentPropsWithoutRef<typeof Sele
     hasClearValueButton?: boolean;
     errors?: string | string[];
     hasError?: boolean;
+    enableLocalSearch?: boolean;
+    localSearchNotFoundContent?: ReactNode;
     onScroll?: (event: React.UIEvent<HTMLElement>) => void;
+    onSearch?: (str: string) => void;
+    onClose?: () => void;
+}
+export interface TUseSelectValueProps {
+    value: string | undefined;
+    options: TSelectOption[];
+}
+export interface TUsePreventSearchBlurProps {
+    inputRef: RefObject<HTMLInputElement | null>;
+    options: TSelectOption[];
 }

package/build/esm/packages/aurora/src/components/select/select_types.js

@@ -1,3 +1,4 @@
 import '@radix-ui/react-select';
 import 'react';
+import '@auroraComponents/input/input_types';
 //# sourceMappingURL=select_types.js.map

package/build/esm/packages/aurora/src/components/select/select_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../src/components/select/select_types.ts"],"names":[],"mappings":"AAAA,OAAiC,wBAAwB,CAAC;AAE1D,OAAoD,OAAO,CAAC"}
+{"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../src/components/select/select_types.ts"],"names":[],"mappings":"AAAA,OAAiC,wBAAwB,CAAC;AAE1D,OAAqC,OAAO,CAAC;AAC7C,OAA4B,qCAAqC,CAAC"}

package/build/esm/packages/aurora/src/components/select/select_utils.d.ts

@@ -0,0 +1,6 @@
+import { TSelectOption } from "./select_types";
+export declare class SelectUtils {
+    static localSearchIsOptionVisible: (option: TSelectOption, search: string) => boolean;
+    static localSearchIsHeaderVisible: (search: string, options: TSelectOption[], index: number) => boolean;
+    static findValueInOptions: (value: string | undefined, options: TSelectOption[]) => TSelectOption | undefined;
+}

package/build/esm/packages/aurora/src/components/select/select_utils.js

@@ -0,0 +1,35 @@
+import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var _SelectUtils;
+var SelectUtils = /*#__PURE__*/_createClass(function SelectUtils() {
+  _classCallCheck(this, SelectUtils);
+});
+_SelectUtils = SelectUtils;
+_defineProperty(SelectUtils, "localSearchIsOptionVisible", function (option, search) {
+  return option.text.toLocaleLowerCase().includes(search.toLocaleLowerCase());
+});
+_defineProperty(SelectUtils, "localSearchIsHeaderVisible", function (search, options, index) {
+  var visible = false;
+  var i = index + 1;
+  while (options[i]) {
+    var curr = options[i];
+    if (curr.isHeader) {
+      break;
+    }
+    if (_SelectUtils.localSearchIsOptionVisible(curr, search)) {
+      visible = true;
+      break;
+    }
+    i++;
+  }
+  return visible;
+});
+_defineProperty(SelectUtils, "findValueInOptions", function (value, options) {
+  if (!value) return undefined;
+  return options.find(function (opt) {
+    return opt.value === value;
+  });
+});
+
+export { SelectUtils };
+//# sourceMappingURL=select_utils.js.map

package/build/esm/packages/aurora/src/components/select/select_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}