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

package/lib/components/TokenListInput/TokenListInput.module.css

@@ -0,0 +1,147 @@
+@value (
+  spaceNone,
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  colorFocusPrimary,
+  colorFocusDanger,
+
+  colorFillDisabled,
+
+  colorBorderPrimary,
+  colorBorderTertiary,
+  colorBorderDanger,
+
+  colorFillPrimary
+) from '../../styles/variables/_color.css';
+
+@value (
+  borderWidthPrimary,
+  borderRadiusMedium,
+  borderRadiusSmall,
+  borderWidthNone,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
+@value (
+  size2,
+  size8,
+  size4,
+  size228,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value tokenListHeaderHeight: 18px;
+@value smallBoxHeight: 34px;
+@value mediumBoxHeight: 42px;
+
+.box {
+  display: flex;
+  gap: size8;
+  align-items: center;
+  flex-wrap: wrap;
+  width: sizeFluid;
+  max-height: size228;
+  flex: 0 0 auto;
+  overflow: auto;
+  cursor: pointer;
+}
+
+.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {
+  border: borderWidthPrimary solid colorBorderPrimary;
+}
+
+.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden):hover {
+  border: borderWidthPrimary solid colorBorderTertiary;
+}
+
+.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden):focus-within {
+  border: borderWidthPrimary solid colorFillPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.box.withError {
+  border: borderWidthPrimary solid colorBorderDanger;
+}
+
+.box.withError:focus-within {
+  border: borderWidthPrimary solid colorBorderDanger;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+}
+
+.box.inputLocked {
+  border: borderWidthPrimary solid colorBorderPrimary;
+  border-style: dashed;
+}
+
+.box.inputDisabled {
+  border: borderWidthPrimary solid colorBorderPrimary;
+  background-color: colorFillDisabled;
+}
+
+.tokenListContainer {
+  display: flex;
+  position: relative;
+  flex-flow: column;
+  width: sizeFluid;
+}
+
+.tokenListHeader {
+  display: flex;
+  width: sizeFluid;
+  height: tokenListHeaderHeight;
+  justify-content: space-between;
+}
+
+.clearAllButton {
+  cursor: pointer;
+}
+
+.clearAllButton:focus-visible {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.medium {
+  border-radius: borderRadiusMedium;
+  padding: spaceXSmall spaceSmall;
+  min-height: mediumBoxHeight;
+}
+
+.small {
+  border-radius: borderRadiusSmall;
+  padding: spaceXXSmall spaceSmall;
+  min-height: smallBoxHeight;
+}
+
+.inputMedium {
+  composes: formInputMedium from '../../styles/typography.module.css';
+  min-width: calc(sizeFluid/4);
+  outline: none;
+  border: none;
+  background-color: transparent;
+  padding: spaceNone spaceNone spaceNone spaceNone;
+  flex: 1 0;
+}
+
+.inputSmall {
+  composes: formInputSmall from '../../styles/typography.module.css';
+  min-width: calc(sizeFluid/4);
+  outline: none;
+  border: none;
+  background-color: transparent;
+  padding: spaceNone spaceNone spaceNone spaceNone;
+  flex: 1 0;
+}
+
+.lockIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+}

package/lib/components/TokenListInput/TokenValueChips.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TokenValueChips = TokenValueChips;
+var React = _interopRequireWildcard(require("react"));
+var _without = _interopRequireDefault(require("lodash/without"));
+var _Chip = require("../Chip");
+var _Tooltip = require("../Tooltip");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 defaultResolveTokenValue(_ref) {
+  let {
+    token,
+    disabled,
+    onDismiss
+  } = _ref;
+  // $FlowFixMe[prop-missing] - assumes token has label and key
+  return (
+    /*#__PURE__*/
+    // $FlowFixMe - assumes token has label and key
+    React.createElement(_Tooltip.Tooltip, {
+      body: token?.label
+    }, /*#__PURE__*/React.createElement(_Chip.Chip
+    // $FlowFixMe - assumes token has key
+    , {
+      key: token?.key,
+      onDismiss: onDismiss,
+      dismissable: true,
+      semantic: 'primary',
+      disabled: disabled
+    }, token?.label))
+  );
+}
+function TokenValueChips(props) {
+  const {
+    values,
+    disabled,
+    locked,
+    onChange,
+    resolveTokenValue = defaultResolveTokenValue
+  } = props;
+  return values.map(token => {
+    const onDismiss = e => {
+      !disabled && !locked && onChange((0, _without.default)(values, token));
+    };
+    const resolvedTokenValue = resolveTokenValue({
+      token,
+      onDismiss,
+      disabled,
+      locked
+    });
+    return resolvedTokenValue;
+  });
+}
+TokenValueChips.displayName = 'TokenValueChips';

package/lib/components/TokenListInput/TokenValueChips.js.flow

@@ -0,0 +1,71 @@
+// @flow strict
+import * as React from 'react';
+import without from 'lodash/without';
+
+import {Chip} from '../Chip';
+import {Tooltip} from '../Tooltip';
+
+
+type Props<T> = {
+  values: Array<T>,
+  disabled?: boolean,
+  locked?: boolean,
+  onChange: (Array<T>) => mixed,
+  resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
+};
+
+export type ResolveTokenValueProps<T> = {
+  token: T,
+  disabled?: boolean,
+  onDismiss?: (e: SyntheticEvent<HTMLElement>) => mixed,
+  locked?: boolean,
+};
+
+function defaultResolveTokenValue<T>({
+  token,
+  disabled,
+  onDismiss,
+}: ResolveTokenValueProps<T>): React.Node {
+  // $FlowFixMe[prop-missing] - assumes token has label and key
+  return (
+    // $FlowFixMe - assumes token has label and key
+    <Tooltip body={token?.label}>
+      <Chip
+        // $FlowFixMe - assumes token has key
+        key={token?.key}
+        onDismiss={onDismiss}
+        dismissable={true}
+        semantic={'primary'}
+        disabled={disabled}
+      >
+        {/* $FlowFixMe - assumes token has label */}
+        {token?.label}
+      </Chip>
+    </Tooltip>
+  );
+}
+
+export function TokenValueChips<T>(props: Props<T>): React.Node {
+  const {
+    values,
+    disabled,
+    locked,
+    onChange,
+    resolveTokenValue = defaultResolveTokenValue,
+  } = props;
+
+  return values.map((token) => {
+    const onDismiss = (e) => {
+      !disabled && !locked && onChange(without(values, token));
+    };
+    const resolvedTokenValue = resolveTokenValue({
+      token,
+      onDismiss,
+      disabled,
+      locked,
+    });
+    return resolvedTokenValue;
+  });
+}
+
+TokenValueChips.displayName = 'TokenValueChips';

package/lib/components/TokenListInput/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TokenListInput = require("./TokenListInput");
+Object.keys(_TokenListInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TokenListInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TokenListInput[key];
+    }
+  });
+});

package/lib/components/TokenListInput/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './TokenListInput';

package/lib/components/index.js

@@ -718,6 +718,17 @@ Object.keys(_Toggle).forEach(function (key) {
     }
   });
 });
+var _TokenListInput = require("./TokenListInput");
+Object.keys(_TokenListInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TokenListInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TokenListInput[key];
+    }
+  });
+});
 var _Tooltip = require("./Tooltip");
 Object.keys(_Tooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -65,6 +65,7 @@ export * from './Textarea';
 export * from './TextTile';
 export * from './Toast';
 export * from './Toggle';
+export * from './TokenListInput';
 export * from './Tooltip';
 export * from './Truncate';
 export * from './TruncatedTextWithTooltip';

package/lib/hooks/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _useArbitraryOptionAddition = require("./useArbitraryOptionAddition");
+Object.keys(_useArbitraryOptionAddition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useArbitraryOptionAddition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useArbitraryOptionAddition[key];
+    }
+  });
+});
 var _useCopyToClipboard = require("./useCopyToClipboard");
 Object.keys(_useCopyToClipboard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -25,6 +36,17 @@ Object.keys(_useFileUpload).forEach(function (key) {
     }
   });
 });
+var _useFilteredOptions = require("./useFilteredOptions");
+Object.keys(_useFilteredOptions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFilteredOptions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFilteredOptions[key];
+    }
+  });
+});
 var _useInputState = require("./useInputState");
 Object.keys(_useInputState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -1,7 +1,9 @@
 // @flow strict
 
+export * from './useArbitraryOptionAddition';
 export * from './useCopyToClipboard';
 export * from './useFileUpload';
+export * from './useFilteredOptions';
 export * from './useInputState';
 export * from './useLockedBody';
 export * from './useModal';

package/lib/hooks/useArbitraryOptionAddition/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useArbitraryOptionAddition = require("./useArbitraryOptionAddition");
+Object.keys(_useArbitraryOptionAddition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useArbitraryOptionAddition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useArbitraryOptionAddition[key];
+    }
+  });
+});

package/lib/hooks/useArbitraryOptionAddition/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useArbitraryOptionAddition';

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useArbitraryOptionAddition = useArbitraryOptionAddition;
+var _useFilteredOptions = require("../useFilteredOptions");
+
+function useArbitraryOptionAddition(_ref) {
+  let {
+    searchTerm,
+    options = [],
+    excludedKeys = [],
+    allowArbitraryValues = true,
+    allowMultiArbitraryValues = false,
+    validateArbitraryValue = value => value.trim() !== '',
+    // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+    makeArbitraryValue = searchTerm => ({
+      key: searchTerm,
+      label: searchTerm,
+      arbitrary: true
+    }),
+    // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+    makeMultiArbitraryValue = searchTerm => {
+      const regex = /^(?=.*[,\n]).+$/s;
+      if (regex.test(searchTerm)) {
+        // $FlowFixMe - Object literal is compatible with V due to type constraint
+        return {
+          key: searchTerm,
+          label: searchTerm,
+          multiArbitrary: true
+        };
+      }
+    },
+    groupTitleOptions = [],
+    arbitraryGroup = {
+      groupTitle: '',
+      showLineDivider: false,
+      options: []
+    },
+    searchOptionsBy = (option, searchTerm) => {
+      // $FlowFixMe
+      const {
+        label,
+        key
+      } = option;
+      return key.toLowerCase().includes(searchTerm) || label.toLowerCase().includes(searchTerm);
+    }
+  } = _ref;
+  const trimmedSearchTerm = (searchTerm || '').trim().toLowerCase();
+  const {
+    filteredOptions,
+    filteredGroupTitleOptions
+  } = (0, _useFilteredOptions.useFilteredOptions)({
+    searchTerm: trimmedSearchTerm,
+    options,
+    // $FlowFixMe[incompatible-call]
+    groupTitleOptions,
+    searchOptionsBy
+  });
+
+  // Find if an arbitrary option should be added
+  const arbitraryOption = allowArbitraryValues && trimmedSearchTerm &&
+  // $FlowFixMe - Array methods are valid here
+  !filteredOptions.some(option => option.key === trimmedSearchTerm) &&
+  // $FlowFixMe - Array methods are valid here
+  !filteredGroupTitleOptions.some(group => Array.isArray(group.options) &&
+  // $FlowFixMe- option has key property
+  group.options.some(option => option.key === trimmedSearchTerm)) && !excludedKeys.includes(trimmedSearchTerm) && validateArbitraryValue(trimmedSearchTerm) && makeArbitraryValue(trimmedSearchTerm);
+
+  // Find if a multi-arbitrary option should be added
+  const multiArbitraryOption = allowMultiArbitraryValues && trimmedSearchTerm && makeMultiArbitraryValue(trimmedSearchTerm);
+
+  // Compose the results
+  let optionsWithArbitrary = filteredOptions;
+  let groupTitleOptionsWithArbitrary = groupTitleOptions;
+  if (arbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [arbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [{
+      ...arbitraryGroup,
+      options: [arbitraryOption]
+    }, ...groupTitleOptionsWithArbitrary];
+  }
+  if (multiArbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [multiArbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [{
+      ...arbitraryGroup,
+      options: [multiArbitraryOption]
+    }, ...groupTitleOptionsWithArbitrary];
+  }
+  // $FlowFixMe[incompatible-return]
+  return {
+    optionsWithArbitrary,
+    groupTitleOptionsWithArbitrary
+  };
+}

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.js.flow

@@ -0,0 +1,117 @@
+// @flow strict
+
+import type {GroupTitleOption} from '../useFilteredOptions';
+import {useFilteredOptions} from '../useFilteredOptions';
+
+
+export type ArbitraryOption = {
+  key: string,
+  label: string,
+  arbitrary?: boolean,
+  multiArbitrary?: boolean,
+};
+
+export function useArbitraryOptionAddition<V>({
+  searchTerm,
+  options = [],
+  excludedKeys = [],
+  allowArbitraryValues = true,
+  allowMultiArbitraryValues = false,
+  validateArbitraryValue = (value: string): boolean => value.trim() !== '',
+  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+  makeArbitraryValue = (searchTerm): V => ({
+    key: searchTerm,
+    label: searchTerm,
+    arbitrary: true,
+  }),
+  // $FlowFixMe[incompatible-return] - Object literal is compatible with V due to type constraint
+  makeMultiArbitraryValue = (searchTerm): V => {
+    const regex = /^(?=.*[,\n]).+$/s;
+    if (regex.test(searchTerm)) {
+      // $FlowFixMe - Object literal is compatible with V due to type constraint
+      return {key: searchTerm, label: searchTerm, multiArbitrary: true};
+    }
+  },
+  groupTitleOptions = [],
+  arbitraryGroup = {groupTitle: '', showLineDivider: false, options: []},
+  searchOptionsBy = (option: V, searchTerm: string): boolean => {
+    // $FlowFixMe
+    const {label, key}: {label: string, key: string} = option;
+    return (
+      key.toLowerCase().includes(searchTerm) ||
+      label.toLowerCase().includes(searchTerm)
+    );
+  },
+}: {
+  searchTerm: string,
+  options?: V[],
+  excludedKeys?: string[],
+  allowArbitraryValues?: boolean,
+  allowMultiArbitraryValues?: boolean,
+  validateArbitraryValue?: (string) => boolean,
+  makeArbitraryValue?: (string) => V,
+  makeMultiArbitraryValue?: (string) => V,
+  groupTitleOptions?: GroupTitleOption<V>[],
+  arbitraryGroup?: GroupTitleOption<V>,
+  searchOptionsBy?: (option: V, searchTerm: string) => boolean,
+}): {
+  optionsWithArbitrary: Array<V>,
+  groupTitleOptionsWithArbitrary: Array<GroupTitleOption<V>>,
+} {
+  const trimmedSearchTerm = (searchTerm || '').trim().toLowerCase();
+
+  const {filteredOptions, filteredGroupTitleOptions} = useFilteredOptions({
+    searchTerm: trimmedSearchTerm,
+    options,
+    // $FlowFixMe[incompatible-call]
+    groupTitleOptions,
+    searchOptionsBy,
+  });
+
+  // Find if an arbitrary option should be added
+  const arbitraryOption =
+    allowArbitraryValues &&
+    trimmedSearchTerm &&
+    // $FlowFixMe - Array methods are valid here
+    !filteredOptions.some((option) => option.key === trimmedSearchTerm) &&
+    // $FlowFixMe - Array methods are valid here
+    !filteredGroupTitleOptions.some(
+      (group) =>
+        Array.isArray(group.options) &&
+        // $FlowFixMe- option has key property
+        group.options.some((option) => option.key === trimmedSearchTerm),
+    ) &&
+    !excludedKeys.includes(trimmedSearchTerm) &&
+    validateArbitraryValue(trimmedSearchTerm) &&
+    makeArbitraryValue(trimmedSearchTerm);
+
+  // Find if a multi-arbitrary option should be added
+  const multiArbitraryOption =
+    allowMultiArbitraryValues &&
+    trimmedSearchTerm &&
+    makeMultiArbitraryValue(trimmedSearchTerm);
+
+  // Compose the results
+  let optionsWithArbitrary = filteredOptions;
+  let groupTitleOptionsWithArbitrary = groupTitleOptions;
+
+  if (arbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [arbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [
+      {...arbitraryGroup, options: [arbitraryOption]},
+      ...groupTitleOptionsWithArbitrary,
+    ];
+  }
+
+  if (multiArbitraryOption) {
+    // $FlowFixMe[incompatible-type] - Array spread is valid here
+    optionsWithArbitrary = [multiArbitraryOption, ...optionsWithArbitrary];
+    groupTitleOptionsWithArbitrary = [
+      {...arbitraryGroup, options: [multiArbitraryOption]},
+      ...groupTitleOptionsWithArbitrary,
+    ];
+  }
+  // $FlowFixMe[incompatible-return]
+  return {optionsWithArbitrary, groupTitleOptionsWithArbitrary};
+}

package/lib/hooks/useFilteredOptions/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useFilteredOptions = require("./useFilteredOptions");
+Object.keys(_useFilteredOptions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFilteredOptions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFilteredOptions[key];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useFilteredOptions';