@saleor/macaw-ui 0.4.0 → 0.5.2

package/src/MultipleValueAutocomplete/useMultipleValueAutocomplete.ts

@@ -0,0 +1,172 @@
+import {
+  useCombobox,
+  UseComboboxGetItemPropsOptions,
+  useMultipleSelection,
+} from "downshift";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import { SyntheticChangeEvent } from "../../types/utils";
+import { Choice } from "../Filter";
+import { useTextWidth } from "../tools/useTextWidth";
+import { mergeRefs } from "../utils/mergeRefs";
+
+export interface UseMultipleValueAutocomplete {
+  choices: Choice[];
+  enableReinitialize?: boolean;
+  name?: string;
+  initialValue: Choice[];
+  onChange?: (event: SyntheticChangeEvent<string[]>) => void;
+  onInputChange?: (value: string) => void;
+}
+
+function useMultipleValueAutocomplete({
+  choices,
+  enableReinitialize,
+  initialValue,
+  name,
+  onChange,
+  onInputChange,
+}: UseMultipleValueAutocomplete) {
+  const anchor = useRef<HTMLDivElement>();
+  const input = useRef<HTMLInputElement>();
+
+  const [inputWidth, setInputText] = useTextWidth(
+    window
+      .getComputedStyle(input.current ?? document.body, null)
+      .getPropertyValue("font")
+  );
+
+  const {
+    getSelectedItemProps,
+    getDropdownProps,
+    addSelectedItem,
+    removeSelectedItem,
+    selectedItems,
+    setSelectedItems,
+  } = useMultipleSelection({
+    initialSelectedItems: initialValue,
+    onSelectedItemsChange: ({ selectedItems }) => {
+      if (onChange) {
+        onChange({
+          target: {
+            name: name ?? "",
+            value: selectedItems!.map((choice) => choice.value),
+          },
+        });
+      }
+    },
+  });
+  const filteredChoices = useMemo(
+    () =>
+      choices.filter(
+        (choice) =>
+          !selectedItems.find(
+            (selectedChoice) => selectedChoice.value === choice.value
+          )
+      ),
+    [choices, selectedItems]
+  );
+
+  useEffect(() => {
+    if (enableReinitialize) setSelectedItems(initialValue);
+  }, [initialValue]);
+
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getComboboxProps,
+    highlightedIndex,
+    getItemProps: baseGetItemProps,
+    openMenu,
+    inputValue,
+    setInputValue,
+    selectItem,
+  } = useCombobox({
+    circularNavigation: false,
+    defaultHighlightedIndex: 0,
+    items: filteredChoices,
+    onInputValueChange: ({ inputValue }) => {
+      setInputText(inputValue || "");
+      if (onInputChange && inputValue) {
+        onInputChange(inputValue);
+      }
+    },
+    onSelectedItemChange: ({ selectedItem }) => {
+      if (selectedItem) {
+        addSelectedItem(selectedItem);
+        setInputValue("");
+      }
+    },
+    stateReducer: (_, actionAndChanges) => {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.FunctionSelectItem:
+          const index = filteredChoices.findIndex(
+            (choice) => choice.value === changes.selectedItem?.value
+          );
+          return {
+            ...changes,
+            highlightedIndex: index > 0 ? index - 1 : 0,
+            isOpen: true,
+          };
+      }
+      return changes;
+    },
+    selectedItem: null,
+    itemToString: () => "",
+  });
+
+  // Downshift doesn't like portals like popper
+  // https://github.com/downshift-js/downshift/issues/287
+  const getItemProps = useCallback(
+    (options: UseComboboxGetItemPropsOptions<Choice>) => {
+      const baseProps = baseGetItemProps(options);
+
+      return {
+        ...baseProps,
+        onClick: () => selectItem(options.item),
+        selected: highlightedIndex === options.index,
+      };
+    },
+    [baseGetItemProps, highlightedIndex]
+  );
+
+  const labelProps = getLabelProps();
+  const { ref: comboboxDownshiftRef, ...comboboxProps } = getComboboxProps();
+  const { ref: downshiftRef, ...inputProps } = getInputProps({
+    ...getDropdownProps(),
+    onFocus: () => {
+      if (!isOpen) {
+        input.current?.select();
+        openMenu();
+      }
+    },
+  });
+  const menuProps = getMenuProps({}, { suppressRefError: true });
+
+  return {
+    anchor,
+    comboboxProps,
+    filteredChoices,
+    getItemProps,
+    getSelectedItemProps,
+    getToggleButtonProps,
+    highlightedIndex,
+    inputProps,
+    inputRef: mergeRefs(downshiftRef, input),
+    inputValue,
+    inputWidth,
+    isOpen,
+    labelProps,
+    menuProps,
+    ref: mergeRefs(comboboxDownshiftRef, anchor),
+    removeSelectedItem,
+    selectedItems,
+  };
+}
+
+export default useMultipleValueAutocomplete;

package/src/SwitchSelector/SwitchSelector.stories.tsx

@@ -0,0 +1,63 @@
+import { Typography } from "@material-ui/core";
+import { Meta, Story } from "@storybook/react";
+import React, { useState } from "react";
+
+import useGuideStyles from "../utils/guideStyles";
+import { SwitchSelector } from "./SwitchSelector";
+import { SwitchSelectorButton } from "./SwitchSelectorButton";
+
+type SwitchSelectorButtonOptions = {
+  label: string | React.ReactNode;
+  value: string;
+};
+
+const INITIAL_TAB = "op2";
+
+const OPTIONS: SwitchSelectorButtonOptions[] = [
+  { label: "Option 1", value: "op1" },
+  { label: "Option 2", value: "op2" },
+  { label: "Option 3", value: "op3" },
+  { label: "Option 4", value: "op4" },
+];
+
+const DefaultStory: React.FC = () => {
+  const guideClasses = useGuideStyles();
+  const [active, setActive] = useState(INITIAL_TAB);
+
+  const currentTab = OPTIONS.find((option) => option.value === active);
+
+  return (
+    <div>
+      <Typography className={guideClasses.headline} variant="h1">
+        Switch Selector
+      </Typography>
+      <Typography className={guideClasses.paragraph} component="p">
+        Switch Selector has the functionality of a radio button group. It is
+        used to change an active tab to toggle context.
+      </Typography>
+      <div>
+        <SwitchSelector>
+          {OPTIONS.map(({ label, value }) => (
+            <SwitchSelectorButton
+              value={value}
+              onClick={() => setActive(value)}
+              activeTab={active}
+            >
+              {label}
+            </SwitchSelectorButton>
+          ))}
+        </SwitchSelector>
+
+        <div style={{ marginTop: "2em" }}>
+          <Typography>{`You have selected ${currentTab?.label}`}</Typography>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = () => <DefaultStory />;
+
+export default {
+  title: "Switch selector",
+} as Meta;

package/src/SwitchSelector/SwitchSelector.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import { makeStyles } from "..";
+
+const useStyles = makeStyles((theme) => ({
+  switchSelector: {
+    border: `1px solid ${theme.palette.saleor.main[5]}`,
+    padding: "6px",
+    borderRadius: 4,
+    width: "fit-content",
+  },
+}));
+
+export const SwitchSelector: React.FC<{}> = ({ children }) => {
+  const classes = useStyles();
+
+  return <div className={classes.switchSelector}>{children}</div>;
+};
+
+SwitchSelector.displayName = "SwitchSelector";

package/src/SwitchSelector/SwitchSelectorButton.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx";
+import React from "react";
+
+import { Button, makeStyles } from "..";
+
+interface SwitchSelectorButtonProps {
+  value: string;
+  activeTab?: string;
+  onClick: () => void;
+}
+
+const useSwitchSelectorButtonStyles = makeStyles((theme) => ({
+  root: {
+    color: "#77738C",
+    background: "none",
+    borderColor: "transparent",
+    cursor: "pointer",
+
+    "&:not(:first-child)": {
+      marginLeft: theme.spacing(1),
+    },
+
+    "&:hover": {
+      backgroundColor: theme.palette.common.white,
+      color: theme.palette.saleor.active[1],
+      border: `1px solid ${theme.palette.saleor.active[1]}`,
+    },
+
+    "&:active": {
+      backgroundColor: theme.palette.saleor.active[5],
+    },
+  },
+  buttonSelected: {
+    color: theme.palette.common.white,
+    backgroundColor: theme.palette.saleor.active[1],
+  },
+}));
+
+export const SwitchSelectorButton: React.FC<SwitchSelectorButtonProps> = ({
+  onClick,
+  value,
+  children,
+  activeTab,
+}) => {
+  const classes = useSwitchSelectorButtonStyles();
+
+  return (
+    <Button
+      key={value}
+      onClick={onClick}
+      className={clsx(classes.root, {
+        [classes.buttonSelected]: value === activeTab,
+      })}
+    >
+      {children}
+    </Button>
+  );
+};
+
+SwitchSelectorButton.displayName = "SwitchSelectorButton";

package/src/SwitchSelector/index.ts

@@ -0,0 +1,2 @@
+export * from "./SwitchSelector";
+export * from "./SwitchSelectorButton";

package/src/consts.ts

@@ -1 +1,5 @@
 export const isWindowDefined = typeof window !== "undefined";
+export const zIndex = {
+  dialog: 1300,
+  popper: 1301,
+};

package/src/index.tsx

@@ -33,3 +33,6 @@ export * from "./List";
 export * from "./NavigationCard";
 export * from "./Pill";
 export * from "./CircleIndicator";
+export * from "./SwitchSelector";
+export * from "./Autocomplete";
+export * from "./MultipleValueAutocomplete";

package/src/theme/createSaleorTheme/createSaleorTheme.tsx

@@ -163,7 +163,6 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
           "&$selected, &$selected:focus, &$selected:hover": {
             backgroundColor: [colors.active[5], "!important"] as any,
             color: colors.active[1],
-            fontWeight: 700,
           },
           "&:hover": {
             backgroundColor: [colors.active[5], "!important"] as any,
@@ -171,6 +170,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme =>
           "@media(min-width: 600px)": {
             minHeight: 48,
           },
+          cursor: "pointer",
         },
       },
       MuiSelect: {

package/src/tools/useTextWidth.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+export function useTextWidth(
+  font: string
+): [number, Dispatch<SetStateAction<string>>] {
+  const [text, setText] = useState("");
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    context.font = font;
+    const { width: newWidth } = context.measureText(text);
+    canvas.remove();
+
+    setWidth(newWidth + 8);
+  }, [text, font]);
+
+  return [width, setText];
+}

package/src/utils/mergeRefs.ts

@@ -0,0 +1,14 @@
+import type { Ref } from "react";
+
+export function mergeRefs<T>(...refs: Ref<T>[]) {
+  return (node: T) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        // ref.current is typed as readonly
+        (ref as any).current = node;
+      }
+    }
+  };
+}

package/src/utils/useMockAutocomplete.ts

@@ -0,0 +1,37 @@
+import { score } from "fuzzaldrin";
+import { sortBy } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+
+const pageSize = 10;
+
+export function useMockAutocomplete(
+  choices: Array<Record<"label" | "value", string>>
+) {
+  const [query, setQuery] = useState("");
+  const [slice, setSlice] = useState(pageSize);
+  const results = useMemo(
+    () =>
+      sortBy(
+        choices.map((choice) => ({
+          ...choice,
+          score: -score(choice.label, query),
+        })),
+        "score"
+      ).slice(0, slice),
+    [query]
+  );
+
+  useEffect(() => {
+    setSlice(pageSize);
+  }, [query]);
+
+  const search = (query: string) => setTimeout(() => setQuery(query), 300);
+
+  const more = () => setSlice((s) => s + pageSize);
+
+  return {
+    search,
+    results,
+    more,
+  };
+}

package/dist/types/Chip/ColorSwatch.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface ColorSwatchProps {
-    color: string;
-    className?: string;
-}
-export declare const ColorSwatch: ({ color, className }: ColorSwatchProps) => JSX.Element;

package/dist/types/Chip/common/ChipMovable.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { ChipProps } from "../Chip";
-export interface ChipMovableProps extends ChipProps {
-}
-export declare const ChipMovable: React.ForwardRefExoticComponent<Pick<ChipMovableProps, "children" | "slot" | "style" | "title" | "dir" | "color" | "translate" | "hidden" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "key" | "endAdornment" | "startAdornment"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/Chip/common/ChipRemovable.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { ChipProps } from "../Chip";
-export interface ChipRemovableProps extends ChipProps {
-    onRemove?: () => void;
-}
-export declare const ChipRemovable: React.ForwardRefExoticComponent<Pick<ChipRemovableProps, "children" | "slot" | "style" | "title" | "dir" | "color" | "translate" | "hidden" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "key" | "endAdornment" | "startAdornment" | "onRemove"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/Chip/common/ChipSwatch.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { ChipProps } from "../Chip";
-export interface ChipSwatchProps extends Omit<ChipProps, "startAdornment"> {
-    onRemove?: () => void;
-    color: string;
-}
-export declare const ChipSwatch: React.ForwardRefExoticComponent<Pick<ChipSwatchProps, "children" | "slot" | "style" | "title" | "dir" | "color" | "translate" | "hidden" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "key" | "endAdornment" | "onRemove"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/Chip/common/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./ChipMovable";
-export * from "./ChipRemovable";
-export * from "./ChipSwatch";