@easypost/easy-ui 1.0.0-alpha.8 → 1.0.0-alpha.80

package/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,123 @@
+import React from "react";
+import { Key, useFilter } from "react-aria";
+import { ComboBoxProps } from "react-aria-components";
+import { AsyncListData, useAsyncList, useListData } from "react-stately";
+import { MenuOverlayProps } from "../Menu/MenuOverlay";
+import { PillProps } from "../PillGroup";
+import { MultiSelectDropdownOption, MultiSelectDropdownOptionText } from "./MultiSelectDropdown";
+export type Item = {
+    key: Key;
+} & PillProps;
+export type MultiSelectProps<T extends object> = {
+    /**
+     * The children to render inside the multi-select component. This can either be a direct
+     * React node or a function that takes an item from the provided collection and returns a React node.
+     */
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+    /**
+     * A list of keys representing disabled items in the dropdown. These items will be
+     * non-selectable in the multi-select input.
+     */
+    disabledKeys?: ComboBoxProps<T>["disabledKeys"];
+    /**
+     * The list of items to display in the dropdown. These items are typically passed down
+     * from a ComboBox component and represent the available options for selection.
+     */
+    dropdownItems: ComboBoxProps<T>["items"];
+    /**
+     * The current input value in the multi-select input field. This is used to filter or search
+     * for items within the dropdown list.
+     */
+    inputValue: ComboBoxProps<T>["inputValue"];
+    /**
+     * A boolean flag that indicates whether the dropdown is in a loading state.
+     * When true, the dropdown will display a loading spinner or indicator.
+     */
+    isLoading?: AsyncListData<T>["isLoading"];
+    /**
+     * The maximum number of items to show before the dropdown becomes scrollable.
+     * This value is passed down from the MenuOverlay component and controls the
+     * appearance of the dropdown when there are too many items to display.
+     */
+    maxItemsUntilScroll?: MenuOverlayProps<T>["maxItemsUntilScroll"];
+    /**
+     * Handler that is triggered whenever the input value changes. It is typically used to
+     * filter or update the available dropdown items based on the input.
+     */
+    onInputChange: ComboBoxProps<T>["onInputChange"];
+    /**
+     * A callback handler that is invoked when the selection changes. It receives the updated
+     * list of selected items and is typically used to manage state or trigger other side effects.
+     */
+    onSelectionChange: (items: T[]) => void;
+    /**
+     * Placeholder text that appears when no items are selected in the multi-select input.
+     */
+    placeholder?: string;
+    /**
+     * Function that renders a "pill" or tag-like element for each selected item in the multi-select.
+     * This is useful for custom rendering of selected items.
+     */
+    renderPill: (item: T) => React.ReactNode;
+    /**
+     * The currently selected items in the collection. This is a controlled value that reflects
+     * the currently selected items.
+     */
+    selectedItems: T[];
+};
+/**
+ * An input and dropdown that allows users to select multiple options from a list.
+ *
+ * @privateRemarks
+ * Some inspiration from
+ * https://github.com/irsyadadl/justd/blob/2.x/components/ui/multiple-select.tsx
+ * Note that there are some limitations to this component until React Aria
+ * builds a dedicated component:
+ * https://github.com/adobe/react-spectrum/issues/2140
+ *
+ * @example
+ * _Sync list:_
+ * ```tsx
+ * const [selectedItems, setSelectedItems] = React.useState<Item[]>([]);
+ * const { contains } = useFilter({ sensitivity: "base" });
+ * const filter = useCallback(
+ *   (item: Item, filterText: string) => contains(item.label, filterText),
+ *   [contains],
+ * );
+ * const list = useListData<Item>({
+ *   initialSelectedKeys: [],
+ *   initialItems: [{ key: 1, label: "Apple" }, { key: 2, label: "Banana" }],
+ *   filter,
+ * });
+ *
+ * <MultiSelect
+ *   isLoading={list.isLoading}
+ *   dropdownItems={list.items}
+ *   inputValue={list.filterText}
+ *   onInputChange={list.setFilterText}
+ *   disabledKeys={selectedItems.map((item) => item.key)}
+ *   selectedItems={selectedItems}
+ *   onSelectionChange={setSelectedItems}
+ *   placeholder="Select a fruit"
+ *   maxItemsUntilScroll={10}
+ *   renderPill={(item) => (
+ *     <MultiSelect.Pill label={item.label} />
+ *   )}
+ * >
+ *   {(item) => (
+ *     <MultiSelect.Option textValue={item.label}>
+ *       <MultiSelect.OptionText>{item.label}</MultiSelect.OptionText>
+ *     </MultiSelect.Option>
+ *   )}
+ * </MultiSelect>
+ * ```
+ */
+export declare function MultiSelect<T extends Item>(props: MultiSelectProps<T>): React.JSX.Element;
+export declare namespace MultiSelect {
+    var Pill: (props: PillProps) => React.JSX.Element;
+    var Option: typeof MultiSelectDropdownOption;
+    var OptionText: typeof MultiSelectDropdownOptionText;
+}
+export { useAsyncList, useFilter, useListData };
+export type { Key };
+//# sourceMappingURL=MultiSelect.d.ts.map

package/MultiSelect/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,SAAS,EAAkB,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAoB,aAAa,EAAS,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAEL,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,MAAM,IAAI,GAAG;IAAE,GAAG,EAAE,GAAG,CAAA;CAAE,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC/C;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAE3D;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAEhD;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzC;;;OAGG;IACH,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3C;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IAEjE;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAEjD;;;OAGG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAEzC;;;OAGG;IACH,aAAa,EAAE,CAAC,EAAE,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,IAAI,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBAmJrE;yBAnJe,WAAW;;;;;AAoK3B,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAChD,YAAY,EAAE,GAAG,EAAE,CAAC"}

package/MultiSelect/MultiSelect.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MultiSelect } from "./MultiSelect";
+type Story = StoryObj<typeof MultiSelect>;
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+export declare const StandardDropdown: Story;
+export declare const AsyncDropdown: Story;
+export declare const WithIcons: Story;
+export declare const DisabledKeys: Story;
+export declare const MaxItemsUntilScroll: Story;
+//# sourceMappingURL=MultiSelect.stories.d.ts.map

package/MultiSelect/MultiSelect.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.stories.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASlD,OAAO,EAEL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAyBvB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAYlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2CvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwCjC,CAAC"}

package/MultiSelect/MultiSelect.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MultiSelect.test.d.ts.map

package/MultiSelect/MultiSelect.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.test.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.test.tsx"],"names":[],"mappings":""}

package/MultiSelect/MultiSelectDropdown.d.ts

@@ -0,0 +1,22 @@
+import React, { RefObject } from "react";
+import { ListBoxItemProps } from "react-aria-components";
+import { AsyncListData } from "react-stately";
+import { MenuOverlayProps } from "../Menu/MenuOverlay";
+import { TextProps } from "../Text";
+import { Item } from "./MultiSelect";
+type MultiSelectDropdownProps<T extends object> = {
+    children: React.ReactNode | ((item: T) => React.ReactNode);
+    isLoading?: AsyncListData<T>["isLoading"];
+    maxItemsUntilScroll?: MenuOverlayProps<T>["maxItemsUntilScroll"];
+    menuRef: RefObject<HTMLDivElement>;
+    triggerRef: RefObject<HTMLDivElement>;
+    width: number;
+};
+type MultiSelectDropdownOptionProps = {
+    children: React.ReactNode;
+} & ListBoxItemProps;
+export declare function MultiSelectDropdown<T extends Item>(props: MultiSelectDropdownProps<T>): React.JSX.Element;
+export declare function MultiSelectDropdownOption(props: MultiSelectDropdownOptionProps): React.JSX.Element;
+export declare function MultiSelectDropdownOptionText(props: TextProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=MultiSelectDropdown.d.ts.map

package/MultiSelect/MultiSelectDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectDropdown.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelectDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAGL,gBAAgB,EAEjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAQvD,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIrC,KAAK,wBAAwB,CAAC,CAAC,SAAS,MAAM,IAAI;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAC1C,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IACjE,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,gBAAgB,CAAC;AAErB,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,IAAI,EAChD,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,qBAuDnC;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,qBAGtC;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,SAAS,qBAE7D"}

package/MultiSelect/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MultiSelect";
+//# sourceMappingURL=index.d.ts.map

package/MultiSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}