@peculiar/react-components 0.0.2-alpha.264 → 0.0.2-alpha.270

package/dist/esnext/hooks/use_event_callback.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export function useEventCallback(fn) {
+    const ref = React.useRef(fn);
+    React.useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return React.useCallback((...args) => 
+    // @ts-expect-error hide `this`
+    // tslint:disable-next-line:ban-comma-operator
+    // eslint-disable-next-line implicit-arrow-linebreak
+    (0, ref.current)(...args), []);
+}
+//# sourceMappingURL=use_event_callback.js.map

package/dist/esnext/hooks/use_event_callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_event_callback.js","sourceRoot":"","sources":["../../../src/hooks/use_event_callback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAC9B,EAA6B;IAE7B,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAE7B,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,WAAW,CACtB,CAAC,GAAG,IAAU,EAAE,EAAE;IAChB,+BAA+B;IAC/B,8CAA8C;IAC9C,oDAAoD;IACpD,CAAC,CAAC,EAAE,GAAG,CAAC,OAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,EAC5B,EAAE,CACH,CAAC;AACJ,CAAC"}

package/dist/esnext/index.js

@@ -19,7 +19,7 @@ export * from './Popover';
 export * from './Portal';
 export * from './Radio';
 export * from './Select';
-export * from './SelectPicker';
+export * from './Autocomplete';
 export * from './Slide';
 export * from './Slider';
 export * from './Tabs';

package/dist/types/Autocomplete/autocomplete.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { UseAutocompleteProps, AutocompleteValue } from '../hooks';
+/**
+ * Types.
+ */
+export declare type AutocompleteRenderGroupParams = {
+    key: string | number;
+    group: string;
+    children?: React.ReactNode;
+};
+export declare type AutocompleteProps<T, Multiple extends boolean | undefined = undefined> = UseAutocompleteProps<T, Multiple> & {
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * Text to display when there are no options.
+     */
+    noOptionsText?: React.ReactNode;
+    /**
+     * If `true`, the component is in a loading state.
+     * This shows the `loadingText` in place of suggestions (only if there are no
+     * suggestions to show, e.g. `options` are empty).
+     */
+    loading?: boolean;
+    /**
+     * Text to display when in a loading state.
+     */
+    loadingText?: React.ReactNode;
+    /**
+     * The maximum number of tags that will be visible when not focused.
+     */
+    limitTags?: number;
+    /**
+     * If `true`, the popup search input will be hidden.
+     */
+    disableSearch?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * Text to display when in the create button element.
+     */
+    createOptionText?: string;
+    /**
+     * If `true`, the create button element will be shown.
+     */
+    allowCreateOption?: boolean;
+    /**
+     * Render the root element.
+     */
+    renderRoot?: (props: object, value: AutocompleteValue<T, Multiple>) => React.ReactNode;
+    /**
+     * Render the option, use `getOptionLabel` by default.
+     */
+    renderOption?: (props: object, option: T) => React.ReactNode;
+    /**
+     * The label to display when the tags are truncated (`limitTags`).
+     */
+    getLimitTagsText?: (more: number) => string;
+    /**
+     * Callback fired when the create button clicked.
+     */
+    onCreate?: (event: React.SyntheticEvent, value: string) => void;
+};
+/**
+ *
+ */
+export declare function Autocomplete<T, Multiple extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple>): JSX.Element;
+export declare namespace Autocomplete {
+    var defaultProps: {
+        disableSearch: boolean;
+        noOptionsText: string;
+        loading: boolean;
+        loadingText: string;
+        limitTags: number;
+        required: boolean;
+        allowCreateOption: boolean;
+        createOptionText: string;
+    };
+}

package/dist/types/Autocomplete/index.d.ts

@@ -0,0 +1 @@
+export { Autocomplete } from './autocomplete';

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

@@ -19,7 +19,7 @@ declare type BaseProps = {
     /**
      * The color of the component.
      */
-    color?: ('secondary' | 'wrong');
+    color?: ('secondary' | 'wrong' | 'default');
     /**
      * The className of the component.
      */

package/dist/types/Modal/modal.d.ts

@@ -28,7 +28,7 @@ declare type BaseProps = {
     /**
      * Callback fired when the component requests to be closed.
      */
-    onClose?: () => void;
+    onClose?: (event: React.SyntheticEvent) => void;
     /**
      * Always keep the children in the DOM.
      */

package/dist/types/Popover/popover.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Placement } from '@popperjs/core';
+import { PopperProps } from 'react-popper';
 import { ModalProps } from '../Modal';
 declare type BaseProps = {
     /**
@@ -17,15 +17,19 @@ declare type BaseProps = {
     /**
      * Popover placement.
      */
-    placement?: Placement;
+    placement?: PopperProps<unknown>['placement'];
     /**
      * Callback fired when the component requests to be closed.
      */
-    onClose?: () => void;
+    onClose?: (event: React.SyntheticEvent) => void;
     /**
      * Props applied to the `Modal` element.
      */
     modalProps?: Partial<ModalProps>;
+    /**
+     * Make your popover the same width as the reference.
+     */
+    allowUseSameWidth?: boolean;
 };
 export declare type PopoverProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 export declare const Popover: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/Popper/popper.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Placement } from '@popperjs/core';
+import { PopperProps as PopperReactProps } from 'react-popper';
 declare type BaseProps = {
     /**
      * If `true`, the popper is visible.
@@ -16,11 +16,15 @@ declare type BaseProps = {
     /**
      * Popper placement.
      */
-    placement?: Placement;
+    placement?: PopperReactProps<unknown>['placement'];
     /**
      * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
      */
     disablePortal?: boolean;
+    /**
+     * Make your popper the same width as the reference.
+     */
+    allowUseSameWidth?: boolean;
 };
 declare type PopperProps = BaseProps & React.HTMLAttributes<HTMLDivElement>;
 export declare const Popper: React.FC<PopperProps>;

package/dist/types/hooks/index.d.ts

@@ -5,3 +5,5 @@ export { useControllableState, UseControllableStateProps } from './use_controlla
 export { useId } from './use_id';
 export { useImage } from './use_image';
 export { useWindowEventListener } from './use_window_event_listener';
+export { useAutocomplete, UseAutocompleteProps, UseAutocompleteReturnType, AutocompleteValue, AutocompleteGroupedOption, } from './use_autocomplete';
+export { useEventCallback } from './use_event_callback';

package/dist/types/hooks/use_autocomplete.d.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import type { PopoverProps } from '../Popover';
+/**
+ * Types.
+ */
+export declare type AutocompleteHighlightChangeReason = ('auto' | 'mouse' | 'keyboard');
+export declare type AutocompleteHighlightChangeDirectionType = ('next' | 'previous');
+export declare type AutocompleteHighlightChangeDiffType = (number | 'reset' | 'start' | 'end');
+export declare type FilterOptionsType = <T>(options: ReadonlyArray<T>, value: string, getOptionLabel: (option: T) => string) => T[];
+export declare type AutocompleteValue<T, Multiple> = Multiple extends undefined | false ? T : T[];
+export declare type AutocompleteGroupedOption<T> = {
+    key: number;
+    index: number;
+    group: string;
+    options: T[];
+};
+export declare type UseAutocompleteProps<T, Multiple extends boolean | undefined = undefined> = {
+    /**
+     * This prop is used to help implement the accessibility logic.
+     * If you don't provide an id it will fall back to a randomly generated one.
+     */
+    id?: string;
+    /**
+     * Array of options.
+     */
+    options: ReadonlyArray<T>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: AutocompleteValue<T, Multiple>;
+    /**
+     * The value of the select.
+     */
+    value?: AutocompleteValue<T, Multiple>;
+    /**
+     * If `true`, the popup won't close when a value is selected.
+     */
+    disableCloseOnSelect?: boolean;
+    /**
+     * If `true`, `value` must be an array and the menu will support multiple selections.
+     */
+    multiple?: Multiple;
+    /**
+     * If provided, the options will be grouped under the returned string.
+     */
+    groupBy?: (option: T) => string;
+    /**
+     * Used to determine the string value for a given option. It's used to fill the input.
+     */
+    getOptionLabel?: (option: T) => string;
+    /**
+    * A filter function that determines the options that are eligible.
+    */
+    filterOptions?: FilterOptionsType;
+    /**
+     * Callback fired when the popup requests to be closed.
+     */
+    onClose?: (event: React.SyntheticEvent) => void;
+    /**
+     * Callback fired when the popup requests to be opened.
+     */
+    onOpen?: (event: React.SyntheticEvent) => void;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: React.SyntheticEvent, value: AutocompleteValue<T, Multiple>) => void;
+    /**
+     * Callback fired when the input value changes.
+     */
+    onInputChange?: (event: React.SyntheticEvent, value: string) => void;
+};
+export declare type UseAutocompleteReturnType<T, Multiple extends boolean | undefined = undefined> = {
+    groupedOptions: T[] | AutocompleteGroupedOption<T>[];
+    value: AutocompleteValue<T, Multiple>;
+    searchValue: string;
+    popupOpen: boolean;
+    id: string;
+    getOptionProps: (option: T, index: number) => React.HTMLAttributes<HTMLLIElement>;
+    getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
+    getRootProps: () => React.HTMLAttributes<HTMLDivElement>;
+    getInputProps: () => React.HTMLAttributes<HTMLInputElement>;
+    getPopoverProps: () => Pick<Required<PopoverProps>, 'open' | 'anchorEl' | 'onClose' | 'onKeyDown'>;
+    getTagProps: (option: T, index: number) => {
+        key: number;
+        'data-tag-index': number;
+        tabIndex: -1;
+        onDelete: (event: React.SyntheticEvent) => void;
+    };
+    getOptionLabel?: (option: T) => string;
+};
+export declare function useAutocomplete<T, Multiple extends boolean | undefined = undefined>(props: UseAutocompleteProps<T, Multiple>): UseAutocompleteReturnType<T, Multiple>;

package/dist/types/hooks/use_event_callback.d.ts

@@ -0,0 +1,4 @@
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;

package/dist/types/index.d.ts

@@ -19,7 +19,7 @@ export * from './Popover';
 export * from './Portal';
 export * from './Radio';
 export * from './Select';
-export * from './SelectPicker';
+export * from './Autocomplete';
 export * from './Slide';
 export * from './Slider';
 export * from './Tabs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.0.2-alpha.264+9559b52",
+  "version": "0.0.2-alpha.270+3d51d70",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "packages/react-components"
   },
   "scripts": {
-    "dev": "start-storybook -p 3000 -s ./.storybook/static",
+    "start": "start-storybook -p 3000 -s ./.storybook/static",
     "prebuild": "yarn clean",
     "build": "yarn build:esm && yarn build:cjs && yarn build:esnext",
     "build:esm": "tsc -p tsconfig.build.json",
@@ -41,32 +41,32 @@
   "dependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/css": "^11.7.1",
-    "@peculiar/color": "^0.0.2-alpha.264+9559b52",
+    "@peculiar/color": "^0.0.2-alpha.270+3d51d70",
     "@popperjs/core": "^2.11.2",
     "@types/flat": "^5.0.2",
     "@types/react-transition-group": "^4.4.4",
     "copy-to-clipboard": "^3.3.1",
     "deepmerge": "^4.2.2",
     "flat": "^5.0.2",
-    "focus-trap": "^6.7.2",
-    "nanoid": "^3.2.0",
+    "focus-trap": "^6.7.3",
+    "nanoid": "^3.3.1",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.4.18",
-    "@storybook/addon-actions": "^6.4.18",
-    "@storybook/addon-controls": "^6.4.18",
-    "@storybook/addon-docs": "^6.4.18",
-    "@storybook/addon-viewport": "^6.4.18",
-    "@storybook/react": "^6.4.18",
-    "@storybook/theming": "^6.4.18",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.0",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.13",
     "awesome-typescript-loader": "^5.2.1",
     "jest": "^27.4.7",
     "jest-watch-typeahead": "^1.0.0",
@@ -84,5 +84,5 @@
     "node": ">=12.x"
   },
   "license": "MIT",
-  "gitHead": "9559b529fa815d3ce3de3cb99962f1feedfb7bbe"
+  "gitHead": "3d51d709039c9a75df75d4b11cbc03a25febc2fb"
 }

package/dist/cjs/ComboBox/combo_box.js

@@ -1,262 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBox = void 0;
-var React = __importStar(require("react"));
-var Popover_1 = require("../Popover");
-var Typography_1 = require("../Typography");
-var Chip_1 = require("../Chip");
-var icons_1 = require("../icons");
-var hooks_1 = require("../hooks");
-var styles_1 = require("../styles");
-var stylesInputBase = function () { return styles_1.css({
-    label: 'ComboBox-input',
-    fontFamily: 'inherit',
-    outline: 'none',
-    boxSizing: 'border-box',
-    width: '100%',
-    borderRadius: '4px',
-    color: 'var(--pv-color-black)',
-    backgroundColor: 'var(--pv-color-gray-1)',
-    borderStyle: 'solid',
-    borderWidth: '1px',
-    borderColor: 'var(--pv-color-gray-8)',
-    transition: 'background-color 200ms, color 200ms, border-color 200ms',
-    display: 'block',
-    appearance: 'none',
-    height: 'auto',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    cursor: 'pointer',
-    userSelect: 'none',
-    position: 'relative',
-    minHeight: 'var(--pv-size-base-8)',
-    padding: 'var(--pv-size-base-half) calc(var(--pv-size-base-2) + 24px) var(--pv-size-base-half) var(--pv-size-base-half)',
-    '&::placeholder': {
-        color: 'var(--pv-color-gray-9)',
-    },
-    '&:hover': {
-        backgroundColor: 'var(--pv-color-gray-3)',
-        borderColor: 'var(--pv-color-gray-7)',
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        backgroundColor: 'var(--pv-color-gray-1)',
-        borderColor: 'var(--pv-color-gray-5)',
-        color: 'var(--pv-color-gray-7)',
-    },
-    '&:not(:disabled)': {
-        '&[aria-invalid]': {
-            backgroundColor: 'var(--pv-color-wrong-tint-5)',
-            borderColor: 'var(--pv-color-wrong-tint-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-            borderColor: 'var(--pv-color-secondary-tint-3)',
-        },
-    },
-}, {
-    fontWeight: 'var(--pv-text-c1-weight)',
-    fontSize: 'var(--pv-text-c1-size)',
-    lineHeight: 'var(--pv-text-c1-height)',
-    letterSpacing: 'var(--pv-text-c1-spacing)',
-}); };
-var stylesChipsContainer = function () { return styles_1.css({
-    label: 'ComboBox-chips-container',
-    display: 'flex',
-    flexWrap: 'wrap',
-}); };
-var stylesChip = function () { return styles_1.css({
-    label: 'ComboBox-chip',
-    margin: '2px',
-}); };
-var stylesMenuList = function () { return styles_1.css({
-    label: 'ComboBox-menu-list',
-    padding: 'var(--pv-size-base-2) 0px',
-    outline: 'none',
-    minWidth: '220px',
-}); };
-var stylesMenuItem = function () { return styles_1.css({
-    label: 'ComboBox-menu-item',
-    padding: '0px var(--pv-size-base-2)',
-    fontFamily: 'inherit',
-    outline: 'none',
-    width: '100%',
-    height: 'var(--pv-size-base-7)',
-    display: 'flex',
-    textAlign: 'left',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    textDecoration: 'none',
-    userSelect: 'none',
-    cursor: 'pointer',
-    transition: 'background-color 200ms',
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'var(--pv-color-black)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-4)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-        },
-    },
-    '&:disabled': {
-        color: 'var(--pv-color-gray-7)',
-        cursor: 'not-allowed',
-    },
-}); };
-var stylesLabel = function () { return styles_1.css({
-    label: 'ComboBox-label',
-    marginBottom: '2px',
-    display: 'inline-block',
-}); };
-var stylesCheckbox = function () { return styles_1.css({
-    label: 'ComboBox-checkbox',
-    width: 'var(--pv-size-base-4)',
-    height: 'var(--pv-size-base-4)',
-    margin: '0px var(--pv-size-base-2) 0 var(--pv-size-base)',
-}); };
-var stylesInputArrowIcon = function () { return styles_1.css({
-    label: 'ComboBox-arrow-icon',
-    position: 'absolute',
-    right: '0px',
-    top: 'calc(50% - 12px)',
-    pointerEvents: 'none',
-    margin: '0px var(--pv-size-base)',
-    color: 'var(--pv-color-gray-10)',
-}); };
-exports.ComboBox = React.forwardRef(function (props, ref) {
-    var options = props.options, name = props.name, defaultValue = props.defaultValue, className = props.className, labelProp = props.label, onChange = props.onChange, other = __rest(props, ["options", "name", "defaultValue", "className", "label", "onChange"]);
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var _b = React.useState(defaultValue || []), selected = _b[0], setSelected = _b[1];
-    var rootRef = React.useRef(null);
-    var multiRef = hooks_1.useMergedRef(ref, rootRef);
-    var handleRootClick = function () {
-        setOpen(true);
-    };
-    var handleRootKeyDown = function (event) {
-        if (event.key === 'Enter') {
-            setOpen(true);
-        }
-    };
-    var handlePopoverClose = function () {
-        setOpen(false);
-    };
-    var handleMenuItemClick = function (option) { return function () {
-        var newSelected = [];
-        if (selected.includes(option.value)) {
-            newSelected = selected.filter(function (value) { return value !== option.value; });
-        }
-        else {
-            newSelected = __spreadArray(__spreadArray([], selected), [
-                option.value,
-            ]);
-        }
-        setSelected(newSelected);
-        if (onChange) {
-            var event_1 = new Event('change');
-            Object.defineProperty(event_1, 'target', {
-                writable: true,
-                value: {
-                    name: name,
-                    value: newSelected,
-                },
-            });
-            onChange(event_1);
-        }
-    }; };
-    var renderOption = function (option) {
-        var value = option.value, label = option.label, disabled = option.disabled;
-        var isSelected = selected.includes(value);
-        return (React.createElement("button", { key: value, type: "button", 
-            // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-            role: "option", onClick: handleMenuItemClick(option), disabled: disabled, "data-value": value, "aria-selected": isSelected, className: styles_1.cx(stylesMenuItem()) },
-            React.createElement("input", { type: "checkbox", checked: isSelected, tabIndex: -1, readOnly: true, className: styles_1.cx(stylesCheckbox()) }),
-            React.createElement(Typography_1.Typography, { variant: "b3" }, label)));
-    };
-    var renderHiddenInputs = function () { return (React.createElement("div", null,
-        React.createElement("input", { type: "hidden", value: selected.join(','), name: name }))); };
-    var renderSelectedValue = function (option) {
-        var value = option.value, label = option.label;
-        return (React.createElement(Chip_1.Chip, { key: value, className: styles_1.cx(stylesChip()), onDelete: handleMenuItemClick(option) }, label));
-    };
-    var renderSelectedValues = function () {
-        if (!selected.length) {
-            return null;
-        }
-        return (React.createElement("div", { className: styles_1.cx(stylesChipsContainer()) }, options.map(function (option) {
-            if (selected.includes(option.value)) {
-                return renderSelectedValue(option);
-            }
-            return null;
-        })));
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", __assign({}, other, { ref: multiRef, className: className }),
-            labelProp && (
-            // eslint-disable-next-line jsx-a11y/label-has-associated-control
-            React.createElement("label", { className: styles_1.cx(stylesLabel()) },
-                React.createElement(Typography_1.Typography, { component: "span", variant: "c2", color: "gray-10" }, labelProp))),
-            React.createElement("div", { tabIndex: 0, role: "button", "aria-haspopup": "listbox", onClick: handleRootClick, onKeyDown: handleRootKeyDown, className: styles_1.cx(stylesInputBase()) },
-                renderSelectedValues(),
-                React.createElement(icons_1.ArrowDropDownIcon, { className: styles_1.cx(stylesInputArrowIcon()), "aria-hidden": true })),
-            renderHiddenInputs()),
-        React.createElement(Popover_1.Popover, { modalProps: {
-                disableAutoFocus: true,
-            }, ref: ref, open: open, anchorEl: rootRef.current, onClose: handlePopoverClose, placement: "bottom-start" },
-            React.createElement("div", { role: "listbox", tabIndex: -1, className: styles_1.cx(stylesMenuList()) }, options.map(function (option) { return renderOption(option); })))));
-});
-exports.ComboBox.displayName = 'ComboBox';
-exports.ComboBox.defaultProps = {};
-//# sourceMappingURL=combo_box.js.map

package/dist/cjs/ComboBox/combo_box.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"combo_box.js","sourceRoot":"","sources":["../../../src/ComboBox/combo_box.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/ComboBox/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBox = void 0;
-var combo_box_1 = require("./combo_box");
-Object.defineProperty(exports, "ComboBox", { enumerable: true, get: function () { return combo_box_1.ComboBox; } });
-//# sourceMappingURL=index.js.map