@jobber/components 4.44.0 → 4.45.0

package/Combobox.d.ts

@@ -0,0 +1 @@
+export * from "./dist/Combobox";

package/Combobox.js

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

package/dist/Autocomplete/index.js

@@ -10,18 +10,18 @@ var classnames = require('classnames');
 var useEventListener = require('@use-it/event-listener');
 var ReactDOM = require('react-dom');
 var reactPopper = require('react-popper');
-var Text = require('../Text-e7ed0974.js');
+var Text = require('../Text-59bde58c.js');
 var Icon = require('../Icon-405a216c.js');
-var Heading = require('../Heading-a1191b15.js');
-var InputText = require('../InputText-d1a52550.js');
-require('../Typography-fd6f932a.js');
+var Heading = require('../Heading-4562900a.js');
+var InputText = require('../InputText-5ac5cfe0.js');
+require('../Typography-9bff9c91.js');
 require('@jobber/design');
-require('../FormField-d6138b7f.js');
+require('../FormField-bef41ec9.js');
 require('uuid');
 require('react-hook-form');
-require('../Button-fd8413b2.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
-require('../InputValidation-b5a3d92c.js');
+require('../InputValidation-4e809bdd.js');
 require('framer-motion');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/Banner/index.js

@@ -7,10 +7,10 @@ var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Icon = require('../Icon-405a216c.js');
-var Text = require('../Text-e7ed0974.js');
-var Button = require('../Button-fd8413b2.js');
+var Text = require('../Text-59bde58c.js');
+var Button = require('../Button-d89f2271.js');
 require('@jobber/design');
-require('../Typography-fd6f932a.js');
+require('../Typography-9bff9c91.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Button/index.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../Button-fd8413b2.js');
+var Button = require('../Button-d89f2271.js');
 require('react');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fd6f932a.js');
+require('../Typography-9bff9c91.js');
 
 
 

package/dist/{Button-fd8413b2.js → Button-d89f2271.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var reactRouterDom = require('react-router-dom');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
-var Typography = require('./Typography-fd6f932a.js');
+var Typography = require('./Typography-9bff9c91.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/ButtonDismiss/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ButtonDismiss = require('../ButtonDismiss-82680c7d.js');
+var ButtonDismiss = require('../ButtonDismiss-250840a4.js');
 require('react');
-require('../Button-fd8413b2.js');
+require('../Button-d89f2271.js');
 require('classnames');
 require('react-router-dom');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fd6f932a.js');
+require('../Typography-9bff9c91.js');
 
 
 

package/dist/{ButtonDismiss-82680c7d.js → ButtonDismiss-250840a4.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Button = require('./Button-fd8413b2.js');
+var Button = require('./Button-d89f2271.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Card/index.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-cc2ffbaa.js');
+var Card = require('../Card-69304e99.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Heading-a1191b15.js');
-require('../Typography-fd6f932a.js');
-require('../Button-fd8413b2.js');
+require('../Heading-4562900a.js');
+require('../Typography-9bff9c91.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-51f8712f.js');
+require('../Menu-cec53b50.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/{Card-cc2ffbaa.js → Card-69304e99.js}

@@ -3,9 +3,9 @@
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Heading = require('./Heading-a1191b15.js');
-var Button = require('./Button-fd8413b2.js');
-var Menu = require('./Menu-51f8712f.js');
+var Heading = require('./Heading-4562900a.js');
+var Button = require('./Button-d89f2271.js');
+var Menu = require('./Menu-cec53b50.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Checkbox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Checkbox = require('../Checkbox-3bccf65c.js');
+var Checkbox = require('../Checkbox-eac63b7f.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('uuid');
@@ -11,8 +11,8 @@ require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Text-e7ed0974.js');
-require('../Typography-fd6f932a.js');
+require('../Text-59bde58c.js');
+require('../Typography-9bff9c91.js');
 
 
 

package/dist/{Checkbox-3bccf65c.js → Checkbox-eac63b7f.js}

@@ -7,7 +7,7 @@ var classnames = require('classnames');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-e7ed0974.js');
+var Text = require('./Text-59bde58c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/{Chip-4916a642.js → Chip-4d8e6370.js}

@@ -7,14 +7,14 @@ var classnames = require('classnames');
 var useAssert = require('@jobber/hooks/useAssert');
 var Icon = require('./Icon-405a216c.js');
 var Avatar = require('./Avatar-1aa30ee1.js');
-var Typography = require('./Typography-fd6f932a.js');
-var Tooltip = require('./Tooltip-bf67fe6e.js');
+var Typography = require('./Typography-9bff9c91.js');
+var Tooltip = require('./Tooltip-59dbab5b.js');
 var sortBy = require('lodash/sortBy');
 var useLiveAnnounce = require('@jobber/hooks/useLiveAnnounce');
 var debounce = require('lodash/debounce');
 var reactPopper = require('react-popper');
-var Text = require('./Text-e7ed0974.js');
-var Button = require('./Button-fd8413b2.js');
+var Text = require('./Text-59bde58c.js');
+var Button = require('./Button-d89f2271.js');
 var Spinner = require('./Spinner-9d8fc7ff.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/Chips/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Chip = require('../Chip-4916a642.js');
+var Chip = require('../Chip-4d8e6370.js');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
@@ -12,16 +12,16 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Avatar-1aa30ee1.js');
 require('color');
-require('../Typography-fd6f932a.js');
-require('../Tooltip-bf67fe6e.js');
+require('../Typography-9bff9c91.js');
+require('../Tooltip-59dbab5b.js');
 require('react-dom');
 require('framer-motion');
 require('react-popper');
-require('../Text-e7ed0974.js');
+require('../Text-59bde58c.js');
 require('lodash/sortBy');
 require('@jobber/hooks/useLiveAnnounce');
 require('lodash/debounce');
-require('../Button-fd8413b2.js');
+require('../Button-d89f2271.js');
 require('react-router-dom');
 require('../Spinner-9d8fc7ff.js');
 

package/dist/Combobox/Combobox.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+import { ComboboxContent } from "./components/ComboboxContent";
+import { ComboboxAction } from "./components/ComboboxAction";
+import { ComboboxTriggerButton, ComboboxTriggerChip } from "./components/ComboboxTrigger";
+export interface ComboboxProps {
+    readonly children: ReactElement | ReactElement[];
+}
+export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger element";
+export declare const COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE = "Combobox must have a Trigger and Combobox.Content element";
+export declare const Combobox: {
+    (props: ComboboxProps): JSX.Element;
+    TriggerButton: typeof ComboboxTriggerButton;
+    TriggerChip: typeof ComboboxTriggerChip;
+    Content: typeof ComboboxContent;
+    Action: typeof ComboboxAction;
+};

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

@@ -0,0 +1,14 @@
+import { ButtonProps } from "../Button";
+export interface ComboboxTriggerProps {
+    /**
+     * The label text of the trigger.
+     */
+    readonly label: string;
+}
+export interface ComboboxTriggerButtonProps extends ComboboxTriggerProps, Pick<ButtonProps, "type" | "variation" | "icon" | "iconOnRight"> {
+}
+export type ComboboxTriggerChipProps = ComboboxTriggerProps;
+export interface ComboboxOption {
+    id: string | number;
+    label: string;
+}

package/dist/Combobox/ComboboxProvider.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from "react";
+export declare const ComboboxContext: React.Context<{
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    wrapperRef: RefObject<HTMLDivElement>;
+}>;
+export interface ComboboxProviderProps {
+    readonly children: React.ReactNode;
+}
+export declare function ComboboxContextProvider(props: ComboboxProviderProps): JSX.Element;

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

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ComboboxActionProps {
+    /**
+     * The function to call when the action is clicked.
+     */
+    onClick(event: React.MouseEvent<HTMLButtonElement>): void;
+    /**
+     * The label text of the action.
+     */
+    readonly label: string;
+}
+export declare function ComboboxAction(props: ComboboxActionProps): JSX.Element;

package/dist/Combobox/components/ComboboxAction/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxAction, ComboboxActionProps } from "./ComboboxAction";

package/dist/Combobox/components/ComboboxContent/ComboboxContent.d.ts

@@ -0,0 +1,33 @@
+import { ReactElement } from "react";
+import { ComboboxOption } from "../../Combobox.types";
+interface ComboboxContentProps {
+    /**
+     * List of selectable options to display.
+     */
+    readonly options: ComboboxOption[];
+    /**
+     * Callback function invoked upon the selection of an option. Provides the selected option as an argument.
+     */
+    readonly onSelect: (selection: ComboboxOption) => void;
+    /**
+     * Optional action button(s) to display at the bottom of the list.
+     */
+    readonly children?: ReactElement | ReactElement[];
+    /**
+     * Placeholder text to display in the search input. Defaults to "Search".
+     */
+    readonly searchPlaceholder?: string;
+    /**
+     * pre selected option
+     * @default ""
+     * @type string
+     */
+    readonly selected: ComboboxOption | null;
+    /**
+     * The encapsulating noun for the content of the combobox. Used
+     * in the empty state, and search placeholder. Should be pluralized.
+     */
+    readonly subjectNoun?: string;
+}
+export declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;
+export {};

package/dist/Combobox/components/ComboboxContent/ComboboxList.d.ts

@@ -0,0 +1,14 @@
+import React, { SetStateAction } from "react";
+import { ComboboxOption } from "../../Combobox.types";
+interface ComboboxListProps {
+    options: ComboboxOption[];
+    showEmptyState: boolean;
+    selected: ComboboxOption | null;
+    optionsListRef: React.RefObject<HTMLUListElement>;
+    setSelectedElement: React.Dispatch<SetStateAction<HTMLElement | null>>;
+    selectionHandler: (option: ComboboxOption) => void;
+    searchValue: string;
+    subjectNoun?: string;
+}
+export declare function ComboboxList(props: ComboboxListProps): JSX.Element;
+export {};

package/dist/Combobox/components/ComboboxContent/ComboboxSearch.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from "react";
+export declare function ComboboxSearch(props: {
+    placeholder?: string;
+    searchValue: string;
+    open: boolean;
+    setSearchValue: Dispatch<SetStateAction<string>>;
+}): JSX.Element;

package/dist/Combobox/components/ComboboxContent/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxContent } from "./ComboboxContent";

package/dist/Combobox/components/ComboboxTrigger/ComboboxTriggerButton/ComboboxTriggerButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxTriggerButtonProps } from "../../../Combobox.types";
+export declare function ComboboxTriggerButton(props: ComboboxTriggerButtonProps): JSX.Element;

package/dist/Combobox/components/ComboboxTrigger/ComboboxTriggerChip/ComboboxTriggerChip.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ComboboxTriggerChipProps } from "../../../Combobox.types";
+export declare function ComboboxTriggerChip(props: ComboboxTriggerChipProps): JSX.Element;

package/dist/Combobox/components/ComboboxTrigger/index.d.ts

@@ -0,0 +1,2 @@
+export { ComboboxTriggerButton } from "./ComboboxTriggerButton/ComboboxTriggerButton";
+export { ComboboxTriggerChip } from "./ComboboxTriggerChip/ComboboxTriggerChip";

package/dist/Combobox/hooks/useComboboxAccessibility.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ComboboxOption } from "../Combobox.types";
+export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, setOpen: (open: boolean) => void, wrapperRef: React.RefObject<HTMLDivElement>): {
+    popperRef: React.RefObject<HTMLDivElement>;
+    popperStyles: {
+        [key: string]: React.CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+};

package/dist/Combobox/hooks/useComboboxContent.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComboboxOption } from "../Combobox.types";
+export declare function useComboboxContent(options: ComboboxOption[], open: boolean): {
+    searchValue: string;
+    setSearchValue: React.Dispatch<React.SetStateAction<string>>;
+    setSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    filteredOptions: ComboboxOption[];
+    optionsListRef: React.RefObject<HTMLUListElement>;
+};

package/dist/Combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { Combobox, ComboboxProps, COMBOBOX_REQUIRED_CHILDREN_ERROR_MESSAGE, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE, } from "./Combobox";
+export { ComboboxContextProvider } from "./ComboboxProvider";
+export { ComboboxOption } from "./Combobox.types";