@spaced-out/ui-design-system 0.2.7 → 0.2.8-beta.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.8-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.2.7...v0.2.8-beta.0) (2024-10-23)
+
+
+### Features
+
+* introduces prop 'allowInternalFilter' in typeahead and creates baseTypeahead with statelful and stateless variations. ([#280](https://github.com/spaced-out/ui-design-system/issues/280)) ([a2aa433](https://github.com/spaced-out/ui-design-system/commit/a2aa433dbb1b6d324a767ab26de10479d6a6eb51))
+
 ### [0.2.7](https://github.com/spaced-out/ui-design-system/compare/v0.2.6...v0.2.7) (2024-10-22)
 
 

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.module.css

@@ -40,6 +40,12 @@
     height: size34;
   }
 
+  &.disabled {
+    color: colorTextDisabled;
+    border: borderWidthPrimary solid colorBorderPrimary;
+    border-right-width: borderWidthNone;
+  }
+
   &.rightCurved {
     border-right-width: borderWidthPrimary;
     border-top-right-radius: borderRadiusMedium;
@@ -51,12 +57,6 @@
     border-bottom-left-radius: borderRadiusMedium;
   }
 
-  &.disabled {
-    color: colorTextDisabled;
-    border: borderWidthPrimary solid colorBorderPrimary;
-    border-right-width: borderWidthNone;
-  }
-
   &:hover {
     color: colorTextPrimary;
     background-color: initial;

package/lib/components/Typeahead/SimpleTypeahead.js

@@ -29,6 +29,7 @@ const SimpleTypeaheadBase = (props, ref) => {
     footer,
     menuClassNames,
     clickAwayRef,
+    allowInternalFilter = true,
     ...inputProps
   } = props;
   const [typeaheadInputText, setTypeaheadInputText] = React.useState('');
@@ -52,6 +53,7 @@ const SimpleTypeaheadBase = (props, ref) => {
     selectedKeys: typeaheadSelectedKeys
   }));
   return /*#__PURE__*/React.createElement(_Typeahead.Typeahead, _extends({}, inputProps, {
+    allowInternalFilter: allowInternalFilter,
     classNames: classNames,
     size: size,
     placeholder: placeholder,

package/lib/components/Typeahead/SimpleTypeahead.js.flow

@@ -48,6 +48,7 @@ export type SimpleTypeaheadProps = {
   resolveLabel?: (option: MenuOption) => string | React.Node,
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
   clickAwayRef?: ClickAwayRefType,
+  allowInternalFilter?: boolean,
   ...
 };
 
@@ -70,6 +71,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
     footer,
     menuClassNames,
     clickAwayRef,
+    allowInternalFilter = true,
     ...inputProps
   } = props;
 
@@ -111,6 +113,7 @@ const SimpleTypeaheadBase = (props: SimpleTypeaheadProps, ref) => {
   return (
     <Typeahead
       {...inputProps}
+      allowInternalFilter={allowInternalFilter}
       classNames={classNames}
       size={size}
       placeholder={placeholder}

package/lib/components/Typeahead/Typeahead.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     classNames,
@@ -36,7 +36,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     clickAwayRef,
     ...inputProps
   } = _ref;
-  const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
+  const menuOptions = menu?.options;
   const {
     x,
     y,
@@ -52,16 +52,6 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
   };
-  React.useEffect(() => {
-    const optionsFiltered = menu?.options && menu.options.filter(option => {
-      if (!option.label || !typeaheadInputText) {
-        return true;
-      } else {
-        return option.label.toLowerCase().indexOf(typeaheadInputText.toLowerCase()) !== -1;
-      }
-    });
-    setFilteredOptions(optionsFiltered || []);
-  }, [typeaheadInputText, menu?.options]);
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle,
     clickAwayRef: clickAwayRef
@@ -107,7 +97,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onClear: _e => {
         onClear?.();
       }
-    })), isOpen && !isLoading && menu && filteredOptions && !!filteredOptions.length && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/React.createElement("div", {
       ref: refs.setFloating,
       style: {
         position: strategy,
@@ -116,7 +106,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         width: _size.sizeFluid
       }
     }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      options: filteredOptions,
+      options: menuOptions,
       onSelect: (option, e) => {
         onSelect && onSelect(option, e);
         if (!menu.optionsVariant || menu.optionsVariant === 'normal') {
@@ -128,4 +118,49 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }))));
   });
 });
+const StatefulTypeahead = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    menu,
+    ...props
+  } = _ref3;
+  const {
+    typeaheadInputText = ''
+  } = props;
+  const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
+  React.useEffect(() => {
+    const optionsFiltered = menu?.options && menu.options.filter(option => {
+      if (!option.label || !typeaheadInputText) {
+        return true;
+      } else {
+        return option.label.toLowerCase().indexOf(typeaheadInputText.toLowerCase()) !== -1;
+      }
+    });
+    setFilteredOptions(optionsFiltered || []);
+  }, [typeaheadInputText, menu?.options]);
+  return /*#__PURE__*/React.createElement(BaseTypeahead, _extends({}, props, {
+    menu: {
+      ...menu,
+      options: filteredOptions
+    },
+    ref: ref
+  }));
+});
+const StatelessTypeahead = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(BaseTypeahead, _extends({}, props, {
+  ref: ref
+})));
+const Typeahead = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    allowInternalFilter = true,
+    ...props
+  } = _ref4;
+  if (allowInternalFilter) {
+    return /*#__PURE__*/React.createElement(StatefulTypeahead, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(StatelessTypeahead, _extends({}, props, {
+      ref: ref
+    }));
+  }
+});
 exports.Typeahead = Typeahead;

package/lib/components/Typeahead/Typeahead.js.flow

@@ -27,7 +27,7 @@ import css from './Typeahead.module.css';
 
 type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
 
-export type TypeaheadProps = {
+type BaseTypeaheadProps = {
   ...InputProps,
   classNames?: ClassNames,
   onSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -43,10 +43,16 @@ export type TypeaheadProps = {
   ...
 };
 
-export const Typeahead: React$AbstractComponent<
-  TypeaheadProps,
+export type TypeaheadProps = {
+  ...BaseTypeaheadProps,
+  allowInternalFilter?: boolean,
+  ...
+};
+
+const BaseTypeahead: React$AbstractComponent<
+  BaseTypeaheadProps,
   HTMLInputElement,
-> = React.forwardRef<TypeaheadProps, HTMLInputElement>(
+> = React.forwardRef<BaseTypeaheadProps, HTMLInputElement>(
   (
     {
       size = 'medium',
@@ -64,10 +70,10 @@ export const Typeahead: React$AbstractComponent<
       onFocus,
       clickAwayRef,
       ...inputProps
-    }: TypeaheadProps,
+    }: BaseTypeaheadProps,
     ref,
   ): React.Node => {
-    const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
+    const menuOptions = menu?.options;
     const {x, y, refs, strategy} = useFloating({
       open: true,
       strategy: 'absolute',
@@ -80,23 +86,6 @@ export const Typeahead: React$AbstractComponent<
       isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
     };
 
-    React.useEffect(() => {
-      const optionsFiltered =
-        menu?.options &&
-        menu.options.filter((option) => {
-          if (!option.label || !typeaheadInputText) {
-            return true;
-          } else {
-            return (
-              option.label
-                .toLowerCase()
-                .indexOf(typeaheadInputText.toLowerCase()) !== -1
-            );
-          }
-        });
-      setFilteredOptions(optionsFiltered || []);
-    }, [typeaheadInputText, menu?.options]);
-
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
         {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
@@ -138,8 +127,8 @@ export const Typeahead: React$AbstractComponent<
             {isOpen &&
               !isLoading &&
               menu &&
-              filteredOptions &&
-              !!filteredOptions.length && (
+              menuOptions &&
+              !!menuOptions.length && (
               <div
                 ref={refs.setFloating}
                 style={{
@@ -151,7 +140,7 @@ export const Typeahead: React$AbstractComponent<
               >
                 <Menu
                   {...menu}
-                  options={filteredOptions}
+                  options={menuOptions}
                   onSelect={(option, e) => {
                     onSelect && onSelect(option, e);
                     if (
@@ -172,3 +161,60 @@ export const Typeahead: React$AbstractComponent<
     );
   },
 );
+
+const StatefulTypeahead: React$AbstractComponent<
+  BaseTypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<BaseTypeaheadProps, HTMLInputElement>(
+  ({menu, ...props}: BaseTypeaheadProps, ref): React.Node => {
+    const {typeaheadInputText = ''} = props;
+    const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
+
+    React.useEffect(() => {
+      const optionsFiltered =
+        menu?.options &&
+        menu.options.filter((option) => {
+          if (!option.label || !typeaheadInputText) {
+            return true;
+          } else {
+            return (
+              option.label
+                .toLowerCase()
+                .indexOf(typeaheadInputText.toLowerCase()) !== -1
+            );
+          }
+        });
+      setFilteredOptions(optionsFiltered || []);
+    }, [typeaheadInputText, menu?.options]);
+
+    return (
+      <BaseTypeahead
+        {...props}
+        menu={{...menu, options: filteredOptions}}
+        ref={ref}
+      />
+    );
+  },
+);
+
+const StatelessTypeahead: React$AbstractComponent<
+  BaseTypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<BaseTypeaheadProps, HTMLInputElement>(
+  (props: BaseTypeaheadProps, ref): React.Node => (
+    <BaseTypeahead {...props} ref={ref} />
+  ),
+);
+
+export const Typeahead: React$AbstractComponent<
+  TypeaheadProps,
+  HTMLInputElement,
+> = React.forwardRef<TypeaheadProps, HTMLInputElement>(
+  ({allowInternalFilter = true, ...props}: TypeaheadProps, ref): React.Node => {
+    if (allowInternalFilter) {
+      return <StatefulTypeahead {...props} ref={ref} />;
+    } else {
+      return <StatelessTypeahead {...props} ref={ref} />;
+    }
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.2.7",
+  "version": "0.2.8-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {