@narmi/design_system 6.20.0 → 6.20.1

package/dist/types/Combobox/ComboboxAction.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface ComboboxActionProps {
+    /** Side effect to run on selection */
+    onSelect: () => void;
+    /** Label for action */
+    label: string;
+    /** Never set on Combobox.Action; `value` belongs to selectable Combobox.Items */
+    value?: never;
+    searchValue?: never;
+}
+declare const ComboboxAction: {
+    ({ onSelect }: ComboboxActionProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /** Side effect to run on selection */
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        /** Label for action */
+        label: PropTypes.Validator<string>;
+    };
+};
+export default ComboboxAction;
+//# sourceMappingURL=ComboboxAction.d.ts.map

package/dist/types/Combobox/ComboboxAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxAction.d.ts","sourceRoot":"","sources":["../../../src/Combobox/ComboboxAction.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IAClC,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAID,QAAA,MAAM,cAAc;mBAAyB,mBAAmB;;;QAK9D,sCAAsC;;QAEtC,uBAAuB;;;CAPiD,CAAC;AAW3E,eAAe,cAAc,CAAC"}

package/dist/types/Combobox/ComboboxCategory.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface ComboboxCategoryProps {
+    label: string;
+    children?: React.ReactNode;
+}
+declare const ComboboxCategory: {
+    ({ children }: ComboboxCategoryProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        label: PropTypes.Validator<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default ComboboxCategory;
+//# sourceMappingURL=ComboboxCategory.d.ts.map

package/dist/types/Combobox/ComboboxCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxCategory.d.ts","sourceRoot":"","sources":["../../../src/Combobox/ComboboxCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,gBAAgB;mBAAkB,qBAAqB;;;;;;CAE5D,CAAC;AAYF,eAAe,gBAAgB,CAAC"}

package/dist/types/Combobox/ComboboxHeading.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface ComboboxHeadingProps {
+    /**
+     * Text of the heading
+     */
+    text: string;
+    /**
+     * Display variant of heading
+     * `bold` - Dark, large headings
+     * `hint` - Light, small headings
+     */
+    kind?: "bold" | "hint";
+    /** Never set on Combobox.Heading; headings are not selectable */
+    value?: never;
+    searchValue?: never;
+    label?: never;
+}
+declare const ComboboxHeading: {
+    ({ text, kind }: ComboboxHeadingProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Text of the heading
+         */
+        text: PropTypes.Validator<string>;
+        /**
+         * Display variant of heading
+         * `bold` - Dark, large headings
+         * `hint` - Light, small headings
+         */
+        kind: PropTypes.Requireable<string>;
+    };
+};
+export default ComboboxHeading;
+//# sourceMappingURL=ComboboxHeading.d.ts.map

package/dist/types/Combobox/ComboboxHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxHeading.d.ts","sourceRoot":"","sources":["../../../src/Combobox/ComboboxHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,QAAA,MAAM,eAAe;qBAA6B,oBAAoB;;;QAOpE;;WAEG;;QAEH;;;;WAIG;;;CAbJ,CAAC;AAiBF,eAAe,eAAe,CAAC"}

package/dist/types/Combobox/ComboboxItem.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface ComboboxItemProps {
+    /**
+     * String representation of the option.
+     *
+     * This value is also used as a typeahead; if a user types "n" while
+     * the Select is open, highlight will move to the first item with a
+     * value starting with `n`.
+     */
+    value: string;
+    /**
+     * Custom typeahead string. By default, typeahead uses `value`.
+     * Use this prop to pass in a custom string you'd like the user to search
+     * against when using typeahead.
+     */
+    searchValue?: string;
+    children?: React.ReactNode;
+    /** Never set on Combobox.Item; `label` is what identifies a Combobox.Action */
+    label?: never;
+}
+declare const ComboboxItem: {
+    ({ children, value }: ComboboxItemProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * String representation of the option.
+         *
+         * This value is also used as a typeahead; if a user types "n" while
+         * the Select is open, highlight will move to the first item with a
+         * value starting with `n`.
+         */
+        value: PropTypes.Validator<string>;
+        /**
+         * Custom typeahead string. By default, typeahead uses `value`.
+         * Use this prop to pass in a custom string you'd like the user to search
+         * against when using typeahead.
+         */
+        searchValue: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default ComboboxItem;
+//# sourceMappingURL=ComboboxItem.d.ts.map

package/dist/types/Combobox/ComboboxItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxItem.d.ts","sourceRoot":"","sources":["../../../src/Combobox/ComboboxItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+EAA+E;IAC/E,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,QAAA,MAAM,YAAY;0BAAyB,iBAAiB;;;QAO1D;;;;;;WAMG;;QAEH;;;;WAIG;;;;CAjBJ,CAAC;AAyBF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,146 @@
+import { default as React } from 'react';
+import { VALID_ICON_NAMES } from '../icons/iconNames';
+import { ComboboxItemProps } from './ComboboxItem';
+import { ComboboxHeadingProps } from './ComboboxHeading';
+import { ComboboxCategoryProps } from './ComboboxCategory';
+import { ComboboxActionProps } from './ComboboxAction';
+import { IconName } from '../types/Icon.types';
+export { VALID_ICON_NAMES };
+type ComboboxItemElement = React.ReactElement<ComboboxItemProps>;
+type ComboboxActionElement = React.ReactElement<ComboboxActionProps>;
+type ComboboxHeadingElement = React.ReactElement<ComboboxHeadingProps>;
+type ComboboxChild = ComboboxItemElement | ComboboxActionElement | ComboboxHeadingElement;
+/**
+ * @param item Combobox.{Action|Item|Heading} component
+ * @returns true if the item is a Combobox.Action
+ */
+export declare const isAction: (item: React.ReactNode) => item is ComboboxActionElement;
+/**
+ * @param component a Combobox.Item or Combobox.Heading component
+ * @returns true if the item is a selectable Combobox.Item or Action
+ */
+export declare const isSelectable: (component: ComboboxChild | null | undefined) => boolean;
+/**
+ * @param inputValue current value of the combobox input
+ * @param highlightedIndex index of highlighted item from downshift
+ * @param displayedItems list of all items currently displayed
+ * @param categoryChildren list of items in category
+ * @param selectedItem the currently selected item
+ * @returns if the category should be forced open
+ */
+export declare const shouldOpenCategory: (inputValue: string | undefined, highlightedIndex: number, displayedItems: ComboboxChild[], categoryChildren: ComboboxChild[], selectedItem: ComboboxChild | null | undefined) => boolean;
+/**
+ * @param displayedItems currently displayed combobox items
+ * @param categoryChildren items in category
+ * @returns [] containing which category items should be visible
+ */
+export declare const getVisibleChildrenByCategory: (displayedItems: ComboboxChild[], categoryChildren: ComboboxChild[]) => ComboboxChild[];
+/**
+ * @param items all selectable Combobox.Item children
+ * @param inputValue lowercase value of input
+ * @returns Combobox.Item children, filtered by the input value
+ */
+export declare const defaultFilterItemsByInput: (items: ComboboxItemElement[], inputValue: string) => ComboboxItemElement[];
+/**
+ *
+ * @param isOpen whether the combobox is open
+ * @returns chevron icon that toggles based on the open state of the combobox
+ */
+export declare const defaultRenderEndContent: (isOpen: boolean) => React.JSX.Element;
+export interface ComboboxProps {
+    /** Combobox.Item, Combobox.Action, Combobox.Heading, or Combobox.Category children */
+    children: React.ReactNode;
+    /** Label for the input */
+    label: string;
+    /** Change callback.
+     * Called when an item is selected, with the `value` of the selected item.
+     * Called with empty string when the user clears the input.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Sets value of the input in a controlled manner.
+     * When using the `inputValue` prop, you **must** update it via the
+     * `onInputChange` handler.
+     */
+    inputValue?: string;
+    /** Input change callback. Called whenever the user updates the value of the input. */
+    onInputChange?: (inputValue: string) => void;
+    /**
+     * Set to `true` to disable the default behavior of filtering the list
+     * as the user types.
+     */
+    disableFiltering?: boolean;
+    /**
+     * When `true`, selecting an action will clear any existing selection.
+     */
+    clearSelectionOnAction?: boolean;
+    /**
+     * Optionally pass a function to customize filtering behavior
+     *
+     * Signature: `(items, inputValue) => [...filteredItems]`
+     */
+    filterItemsByInput?: (items: ComboboxItemElement[], inputValue: string) => ComboboxItemElement[];
+    /**
+     * Error message.
+     * When passed, this will cause the input to render in error state.
+     */
+    errorText?: string;
+    /** Name of icon to place at the start of the input */
+    icon?: IconName;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+    /** Function to render content at the end of the input.
+     * Defaults to a function that renders a chevron icon that toggles based on the open state of the combobox.
+     *
+     * Signature: `(isOpen) => React.ReactNode`
+     */
+    renderEndContent?: (isOpen: boolean) => React.ReactNode;
+}
+/**
+ * Autocomplete input component following the accessible
+ * [ARIA combobox pattern](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role).
+ *
+ * Autocomplete options are defined by passing the `Combobox.Item` subcomponent
+ * as children. To add heading dividers, use the `Combobox.Heading` subcomponent.
+ *
+ * By default options will be filtered down as the user types in the input. This
+ * behavior can be disabled via the `disableFiltering` prop.
+ */
+declare const Combobox: {
+    ({ label, onChange, onInputChange, inputValue: inputValueProp, filterItemsByInput, children, disableFiltering, clearSelectionOnAction, errorText, icon, testId, renderEndContent, }: ComboboxProps): React.JSX.Element;
+    Item: {
+        ({ children, value }: ComboboxItemProps): React.JSX.Element;
+        displayName: string;
+        propTypes: {
+            value: import('prop-types').Validator<string>;
+            searchValue: import('prop-types').Requireable<string>;
+            children: import('prop-types').Requireable<NonNullable<import('prop-types').ReactNodeLike>>;
+        };
+    };
+    Heading: {
+        ({ text, kind }: ComboboxHeadingProps): React.JSX.Element;
+        displayName: string;
+        propTypes: {
+            text: import('prop-types').Validator<string>;
+            kind: import('prop-types').Requireable<string>;
+        };
+    };
+    Category: {
+        ({ children }: ComboboxCategoryProps): React.JSX.Element;
+        displayName: string;
+        propTypes: {
+            label: import('prop-types').Validator<string>;
+            children: import('prop-types').Requireable<NonNullable<import('prop-types').ReactNodeLike>>;
+        };
+    };
+    Action: {
+        ({ onSelect }: ComboboxActionProps): React.JSX.Element;
+        displayName: string;
+        propTypes: {
+            onSelect: import('prop-types').Validator<(...args: any[]) => any>;
+            label: import('prop-types').Validator<string>;
+        };
+    };
+};
+export default Combobox;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Combobox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAyB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAuB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAMvE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAIpD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,KAAK,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACjE,KAAK,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;AACrE,KAAK,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;AAEvE,KAAK,aAAa,GACd,mBAAmB,GACnB,qBAAqB,GACrB,sBAAsB,CAAC;AAO3B;;;GAGG;AACH,eAAO,MAAM,QAAQ,GACnB,MAAM,KAAK,CAAC,SAAS,KACpB,IAAI,IAAI,qBAMV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,WAAW,aAAa,GAAG,IAAI,GAAG,SAAS,YAMvE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,GAC7B,YAAY,MAAM,GAAG,SAAS,EAC9B,kBAAkB,MAAM,EACxB,gBAAgB,aAAa,EAAE,EAC/B,kBAAkB,aAAa,EAAE,EACjC,cAAc,aAAa,GAAG,IAAI,GAAG,SAAS,YA2B/C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,GACvC,gBAAgB,aAAa,EAAE,EAC/B,kBAAkB,aAAa,EAAE,oBAYlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GACpC,OAAO,mBAAmB,EAAE,EAC5B,YAAY,MAAM,0BAKhB,CAAC;AAEL;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,OAAO,sBAMtD,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,sFAAsF;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sFAAsF;IACtF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CACnB,KAAK,EAAE,mBAAmB,EAAE,EAC5B,UAAU,EAAE,MAAM,KACf,mBAAmB,EAAE,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;CACzD;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,QAAQ;yLAaX,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Uf,CAAC;AAMF,eAAe,QAAQ,CAAC"}

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

@@ -6,8 +6,8 @@ export interface DropdownTriggerProps extends React.ButtonHTMLAttributes<HTMLBut
     showOpenIndicator?: boolean;
     /** Variant of the trigger. Use "table" when used inside table cells */
     kind?: "default" | "table";
-    /** Text of `label` element */
-    labelText?: string;
+    /** Content of the `label` element */
+    labelText?: ReactNode;
     /** Props to spread onto the `label` element */
     labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
     /**

package/dist/types/DropdownTrigger/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DropdownTrigger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,SAAS,CAAC;IACrC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,gGA6EpB,CAAC;AAGF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DropdownTrigger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACzF,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,+DAA+D;IAC/D,kBAAkB,CAAC,EAAE,MAAM,SAAS,CAAC;IACrC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,gGA6EpB,CAAC;AAGF,eAAe,eAAe,CAAC"}

package/dist/types/MultiSelect/MultiSelectItem.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface MultiSelectItemProps {
+    /**
+     * String representation of the option.
+     *
+     * This value is also used as a typeahead; if a user types "n" while
+     * the Select is open, highlight will move to the first item with a
+     * value starting with `n`.
+     */
+    value: string;
+    /** String to use for typeahead behavior */
+    searchValue?: string;
+    /**
+     * Text to display in the token and summary for this item.
+     * Falls back to `searchValue`, then `value`, when not provided.
+     */
+    tokenLabel?: string;
+    /** JSX representation of item */
+    children?: React.ReactNode;
+}
+declare const MultiSelectItem: {
+    ({ children }: MultiSelectItemProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * String representation of the option.
+         *
+         * This value is also used as a typeahead; if a user types "n" while
+         * the Select is open, highlight will move to the first item with a
+         * value starting with `n`.
+         */
+        value: PropTypes.Validator<string>;
+        /** String to use for typeahead behavior */
+        searchValue: PropTypes.Requireable<string>;
+        /**
+         * Text to display in the token and summary for this item.
+         * Falls back to `searchValue`, then `value`, when not provided.
+         */
+        tokenLabel: PropTypes.Requireable<string>;
+        /** JSX representation of item */
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default MultiSelectItem;
+//# sourceMappingURL=MultiSelectItem.d.ts.map

package/dist/types/MultiSelect/MultiSelectItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectItem.d.ts","sourceRoot":"","sources":["../../../src/MultiSelect/MultiSelectItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,oBAAoB;IACnC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe;mBAAkB,oBAAoB;;;QAKzD;;;;;;WAMG;;QAEH,2CAA2C;;QAE3C;;;WAGG;;QAEH,iCAAiC;;;CApB4C,CAAC;AA2BhF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,98 @@
+import { default as React } from 'react';
+import { UseMultipleSelectionReturnValue } from 'downshift';
+import { MultiSelectItemProps } from './MultiSelectItem';
+type MultiSelectItemElement = React.ReactElement<MultiSelectItemProps>;
+export interface MultiSelectSummaryFormatterArgs {
+    /** Currently selected item React elements */
+    selectedItems: MultiSelectItemElement[];
+    /** downshift helper for token props */
+    getSelectedItemProps: UseMultipleSelectionReturnValue<MultiSelectItemElement>["getSelectedItemProps"];
+    /** Removes a token */
+    removeSelectedItem: (item: MultiSelectItemElement) => void;
+    /** Flag indicating if the component is disabled */
+    disabled: boolean;
+    /** Placeholder text when no items are selected */
+    label: string;
+}
+export interface MultiSelectProps {
+    /**
+     * unique name attribute for the input (used for `id` and `name`).
+     * The trigger id falls back to a value derived from `label`.
+     */
+    name?: string;
+    /** Label for the select control */
+    label: string;
+    /** MultiSelect.Item children */
+    children?: React.ReactNode;
+    /**
+     * When passed, the MultiSelect becomes fully controlled.
+     * Use `onSelectedItemsChange` to manage this value.
+     */
+    selectedItems?: string[];
+    /**
+     * Change callback for user actions that select or deselect items.
+     * Called with an array of selected item values.
+     */
+    onSelectedItemsChange?: (values: string[]) => void;
+    /**
+     * Disables the input and all user interaction.
+     * You may still pass in `selectedItems` if items need to be selected
+     * when the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Value for the input with the given `name` prop.
+     * This should be the value of the field in the submitted form.
+     */
+    fieldValue?: string;
+    /**
+     * Error message.
+     * When passed, this will cause the trigger to render in error state.
+     */
+    errorText?: string;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+    /** Optional label override for the clear all button */
+    clearLabel?: string;
+    /** If true, renders a "Clear all" button on the right side of the trigger */
+    isClearable?: boolean;
+    /**
+     * Optional function to format the summary content shown in the trigger.
+     * Must return a React node.
+     */
+    summaryFormatter?: (args: MultiSelectSummaryFormatterArgs) => React.ReactNode;
+    /**
+     * Function with signature `(userInputValue, selectItemNode) => {}`,
+     * used to customize typeahead filtering behavior.
+     * See "Changing Typeahead Behavior" story for example.
+     */
+    getTypeaheadString?: (userInput: string, selectItem: MultiSelectItemElement) => string;
+}
+/**
+ * Accessible multiple select control for giving users the ability to select
+ * multiple options from a list of options.
+ *
+ * Typeahead is enabled based on the `value` prop of `MultiSelect.Item`
+ * elements passed in. You may also set a custom `searchValue`
+ * on each `MultiSelect.Item` for control over typeahead behavior.
+ *
+ * - isClearable: if true, a "Clear all" button is rendered on the right side of the input.
+ * - clearLabel: overridable text for the clear all button.
+ * - summaryFormatter: an optional function that receives the number of selected items and an array of labels,
+ *         and returns a string summary.
+ */
+declare const MultiSelect: {
+    ({ name, label, children, selectedItems: selectedItemsProp, onSelectedItemsChange: onChangeProp, disabled, fieldValue, errorText, testId, clearLabel, isClearable, summaryFormatter, getTypeaheadString, }: MultiSelectProps): React.JSX.Element;
+    Item: {
+        ({ children }: MultiSelectItemProps): React.JSX.Element;
+        displayName: string;
+        propTypes: {
+            value: import('prop-types').Validator<string>;
+            searchValue: import('prop-types').Requireable<string>;
+            tokenLabel: import('prop-types').Requireable<string>;
+            children: import('prop-types').Requireable<NonNullable<import('prop-types').ReactNodeLike>>;
+        };
+    };
+};
+export default MultiSelect;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/MultiSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MultiSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAGL,+BAA+B,EAChC,MAAM,WAAW,CAAC;AAKnB,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,KAAK,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;AAoCvE,MAAM,WAAW,+BAA+B;IAC9C,6CAA6C;IAC7C,aAAa,EAAE,sBAAsB,EAAE,CAAC;IACxC,uCAAuC;IACvC,oBAAoB,EAAE,+BAA+B,CAAC,sBAAsB,CAAC,CAAC,sBAAsB,CAAC,CAAC;IACtG,sBAAsB;IACtB,kBAAkB,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC3D,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAqCD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,sBAAsB,KAC/B,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,WAAW;gNAed,gBAAgB;;;;;;;;;;;CAoOlB,CAAC;AAGF,eAAe,WAAW,CAAC"}

package/dist/types/Select/SelectAction.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface SelectActionProps {
+    /** Side effect to run on selection */
+    onSelect: () => void;
+    children?: React.ReactNode;
+    /** Never set on Select.Action; `value` belongs to selectable Select.Items */
+    value?: never;
+    searchValue?: never;
+}
+declare const SelectAction: {
+    ({ children }: SelectActionProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /** Side effect to run on selection */
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default SelectAction;
+//# sourceMappingURL=SelectAction.d.ts.map

package/dist/types/Select/SelectAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAction.d.ts","sourceRoot":"","sources":["../../../src/Select/SelectAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,QAAA,MAAM,YAAY;mBAAkB,iBAAiB;;;QAKnD,sCAAsC;;;;CALiC,CAAC;AAa1E,eAAe,YAAY,CAAC"}

package/dist/types/Select/SelectCategory.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface SelectCategoryProps {
+    label?: string;
+    /**
+     * heading: default bold heading
+     * label: match input floating label
+     */
+    kind?: "heading" | "label";
+    children?: React.ReactNode;
+    isFlat?: boolean;
+}
+declare const SelectCategory: {
+    ({ children }: SelectCategoryProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        label: PropTypes.Requireable<string>;
+        /**
+         * heading: default bold heading
+         * label: match input floating label
+         */
+        kind: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        isFlat: PropTypes.Requireable<boolean>;
+    };
+};
+export default SelectCategory;
+//# sourceMappingURL=SelectCategory.d.ts.map

package/dist/types/Select/SelectCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCategory.d.ts","sourceRoot":"","sources":["../../../src/Select/SelectCategory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,cAAc;mBAAkB,mBAAmB;;;;QAQvD;;;WAGG;;;;;CATJ,CAAC;AAkBF,eAAe,cAAc,CAAC"}

package/dist/types/Select/SelectItem.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+export interface SelectItemProps {
+    /**
+     * String representation of the option.
+     *
+     * This value is also used as a typeahead; if a user types "n" while
+     * the Select is open, highlight will move to the first item with a
+     * value starting with `n`.
+     */
+    value: string;
+    /**
+     * Custom typeahead string. By default typeahead uses `value`.
+     * Use this prop to pass in a custom string you'd like the user to search
+     * against when using typeahead.
+     */
+    searchValue?: string;
+    children?: React.ReactNode;
+    /** Never set on Select.Item; `onSelect` is what identifies a Select.Action */
+    onSelect?: never;
+}
+declare const SelectItem: {
+    ({ children }: SelectItemProps): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * String representation of the option.
+         *
+         * This value is also used as a typeahead; if a user types "n" while
+         * the Select is open, highlight will move to the first item with a
+         * value starting with `n`.
+         */
+        value: PropTypes.Validator<string>;
+        /**
+         * Custom typeahead string. By default typeahead uses `value`.
+         * Use this prop to pass in a custom string you'd like the user to search
+         * against when using typeahead.
+         */
+        searchValue: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default SelectItem;
+//# sourceMappingURL=SelectItem.d.ts.map

package/dist/types/Select/SelectItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.d.ts","sourceRoot":"","sources":["../../../src/Select/SelectItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,QAAA,MAAM,UAAU;mBAAkB,eAAe;;;QAK/C;;;;;;WAMG;;QAEH;;;;WAIG;;;;CAjBgE,CAAC;AAyBtE,eAAe,UAAU,CAAC"}