@spaced-out/ui-design-system 0.3.37 → 0.3.38

package/lib/hooks/useFilteredOptions/useFilteredOptions.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFilteredOptions = useFilteredOptions;
+var React = _interopRequireWildcard(require("react"));
+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; }
+
+// TODO: V should generic with constraints.
+
+function useFilteredOptions(_ref) {
+  let {
+    searchTerm,
+    options = [],
+    excludedKeys = [],
+    groupTitleOptions = [],
+    searchOptionsBy = (option, searchTerm) => {
+      // $FlowFixMe
+      const {
+        label,
+        key
+      } = option;
+      return key.toLowerCase().includes(searchTerm) || (label ? label.toLowerCase().includes(searchTerm) : false);
+    }
+  } = _ref;
+  // Memoize the filterExcluded function for performance
+  const filterExcluded = React.useCallback(list =>
+  // $FlowFixMe - list has key property
+  list ? list.filter(option => !excludedKeys.includes(option.key)) : [], [excludedKeys]);
+  return React.useMemo(() => {
+    const trimmedValue = (searchTerm || '').trim().toLowerCase();
+
+    // Initialize filteredOptions as an empty array if options are not provided
+    let filteredOptions = [];
+    if (options.length) {
+      filteredOptions = filterExcluded(options);
+
+      // Apply search term filtering
+      if (trimmedValue) {
+        filteredOptions = filteredOptions.filter(option => searchOptionsBy(option, trimmedValue));
+      }
+    }
+    let filteredGroupTitleOptions = [];
+
+    // Process groupTitleOptions if provided
+    if (Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
+      filteredGroupTitleOptions = groupTitleOptions.map(group => {
+        const filtered = filterExcluded(group.options).filter(option => !trimmedValue || searchOptionsBy(option, trimmedValue));
+        return {
+          ...group,
+          options: filtered
+        };
+      }).filter(group => group.options ? group.options.length > 0 : false);
+    }
+    return {
+      filteredOptions,
+      filteredGroupTitleOptions
+    };
+  }, [searchTerm, options, excludedKeys, groupTitleOptions, searchOptionsBy, filterExcluded]);
+}

package/lib/hooks/useFilteredOptions/useFilteredOptions.js.flow

@@ -0,0 +1,81 @@
+// @flow strict
+import * as React from 'react';
+
+
+export type GroupTitleOption<V> = {
+  groupTitle: React.Node,
+  options?: V[],
+  showLineDivider?: boolean,
+};
+
+// TODO: V should generic with constraints.
+
+export function useFilteredOptions<V>({
+  searchTerm,
+  options = [],
+  excludedKeys = [],
+  groupTitleOptions = [],
+  searchOptionsBy = (option: V, searchTerm: string): boolean => {
+    // $FlowFixMe
+    const {label, key}: {label: string, key: string} = option;
+
+    return (
+      key.toLowerCase().includes(searchTerm) ||
+      (label ? label.toLowerCase().includes(searchTerm) : false)
+    );
+  },
+}: {
+  searchTerm: string,
+  options?: V[],
+  groupTitleOptions?: GroupTitleOption<V>[],
+  excludedKeys?: string[],
+  searchOptionsBy?: (option: V, searchTerm: string) => boolean,
+}): {filteredOptions?: V[], filteredGroupTitleOptions?: GroupTitleOption<V>[]} {
+  // Memoize the filterExcluded function for performance
+  const filterExcluded = React.useCallback(
+    (list?: V[]): V[] =>
+      // $FlowFixMe - list has key property
+      list ? list.filter((option) => !excludedKeys.includes(option.key)) : [],
+    [excludedKeys],
+  );
+
+  return React.useMemo(() => {
+    const trimmedValue = (searchTerm || '').trim().toLowerCase();
+
+    // Initialize filteredOptions as an empty array if options are not provided
+    let filteredOptions: V[] = [];
+    if (options.length) {
+      filteredOptions = filterExcluded(options);
+
+      // Apply search term filtering
+      if (trimmedValue) {
+        filteredOptions = filteredOptions.filter((option) =>
+          searchOptionsBy(option, trimmedValue),
+        );
+      }
+    }
+
+    let filteredGroupTitleOptions: GroupTitleOption<V>[] = [];
+
+    // Process groupTitleOptions if provided
+    if (Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
+      filteredGroupTitleOptions = groupTitleOptions
+        .map((group) => {
+          const filtered = filterExcluded(group.options).filter(
+            (option) => !trimmedValue || searchOptionsBy(option, trimmedValue),
+          );
+          return {...group, options: filtered};
+        })
+        .filter((group) => (group.options ? group.options.length > 0 : false));
+    }
+
+    return {filteredOptions, filteredGroupTitleOptions};
+  }, [
+    searchTerm,
+    options,
+    excludedKeys,
+    groupTitleOptions,
+    searchOptionsBy,
+    filterExcluded,
+  ]);
+}

package/lib/hooks/useInputState/useInputState.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useInputState = void 0;
-var _react = require("react");
+var React = _interopRequireWildcard(require("react"));
+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; }
 
 /**
  * Simple Hook to use with input tag. The primary purpose is an abstraction over input onChange property.
@@ -16,8 +18,8 @@ var _react = require("react");
  */
 const useInputState = function () {
   let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [state, setState] = (0, _react.useState)(initialState);
-  const setInputState = (0, _react.useCallback)(event => setState(event && event.target.value), []);
+  const [state, setState] = React.useState(initialState);
+  const setInputState = React.useCallback(event => setState(event && event.target.value), []);
   return [state, setInputState];
 };
 exports.useInputState = useInputState;

package/lib/hooks/useInputState/useInputState.js.flow

@@ -1,6 +1,6 @@
 // @flow strict
 
-import {useCallback, useState} from 'react';
+import * as React from 'react';
 
 
 type ReturnType = [
@@ -17,9 +17,9 @@ type ReturnType = [
  * }
  */
 export const useInputState = (initialState: string = ''): ReturnType => {
-  const [state, setState] = useState(initialState);
+  const [state, setState] = React.useState(initialState);
 
-  const setInputState = useCallback(
+  const setInputState = React.useCallback(
     (event) => setState(event && event.target.value),
     [],
   );

package/lib/utils/token-list-input/token-list-input.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFirstOptionFromGroup = exports.getFirstOption = void 0;
+var React = _interopRequireWildcard(require("react"));
+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; }
+
+const getFirstOption = options => {
+  // pick the first option from the options
+  if (options.length > 0) {
+    return options[0];
+  }
+  return null;
+};
+exports.getFirstOption = getFirstOption;
+const getFirstOptionFromGroup = groupTitleOptions => {
+  if (groupTitleOptions.length > 0) {
+    const firstGroup = groupTitleOptions[0];
+    if (firstGroup.options && firstGroup.options.length > 0) {
+      return firstGroup.options[0];
+    }
+  }
+  return null;
+};
+exports.getFirstOptionFromGroup = getFirstOptionFromGroup;

package/lib/utils/token-list-input/token-list-input.js.flow

@@ -0,0 +1,37 @@
+// @flow strict
+import * as React from 'react';
+
+
+type V = {
+  key: string,
+  label: string,
+  arbitrary?: boolean,
+  multiarbitrary?: boolean,
+  ...
+};
+
+type Group<V> = {
+  options: Array<V>,
+  groupTitle?: React.Node,
+  ...
+};
+
+export const getFirstOption = (options: Array<V>): V | null => {
+  // pick the first option from the options
+  if (options.length > 0) {
+    return options[0];
+  }
+  return null;
+};
+
+export const getFirstOptionFromGroup = (
+  groupTitleOptions: Array<Group<V>>,
+): V | null => {
+  if (groupTitleOptions.length > 0) {
+    const firstGroup = groupTitleOptions[0];
+    if (firstGroup.options && firstGroup.options.length > 0) {
+      return firstGroup.options[0];
+    }
+  }
+  return null;
+};

package/package.json

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