@jobber/components 8.13.1 → 8.14.1

package/dist/AnimatedSwitcher-cjs.js

@@ -1,95 +0,0 @@
-'use strict';
-
-var React = require('react');
-var framerMotion = require('framer-motion');
-var Icon = require('./Icon-cjs.js');
-
-const DURATION_SIMPLE = 0.1;
-const DURATION_AVERAGE = 0.2;
-const FADE = {
-    visible: { opacity: 1 },
-    hidden: { opacity: 0 },
-};
-const SLIDE_IN_UP = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "10%", opacity: 0 },
-};
-const SLIDE_IN_DOWN = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "-10%", opacity: 0 },
-};
-const SPIN_COUNTER_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: 180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-const SPIN_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: -180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-
-function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
-    const [ref, setRef] = React.useState(null);
-    const isSwitchingBetweenIcons = initialChild.type === Icon.Icon && switchTo.type === Icon.Icon;
-    const { key, transition, child, duration } = getChildData();
-    return (React.createElement(framerMotion.AnimatePresence, { mode: "wait", initial: false },
-        React.createElement(framerMotion.motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
-    function getDisplayValue() {
-        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
-            return window.getComputedStyle(ref.firstElementChild).display;
-        }
-    }
-    function getChildData() {
-        let data = {
-            key: `${initialChild.type.toString()}_1`,
-            child: initialChild,
-        };
-        if (switched) {
-            data = { key: `${switchTo.type.toString()}_2`, child: switchTo };
-        }
-        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
-    }
-    function getTransitionType() {
-        if (isSwitchingBetweenIcons) {
-            if (switched)
-                return SPIN_COUNTER_CLOCK_WISE;
-            return SPIN_CLOCK_WISE;
-        }
-        else if (type === "fade") {
-            return FADE;
-        }
-        else {
-            if (switched)
-                return SLIDE_IN_UP;
-            return SLIDE_IN_DOWN;
-        }
-    }
-    function getTransitionDuration() {
-        switch (type) {
-            case "fade":
-                return DURATION_AVERAGE;
-            default:
-                return DURATION_SIMPLE;
-        }
-    }
-}
-AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
-    return (React.createElement(AnimatedSwitcher, { switched: switched, initialChild: React.createElement(Icon.Icon, { name: initialIcon }), switchTo: React.createElement(Icon.Icon, { name: switchToIcon }) }));
-};
-
-exports.AnimatedSwitcher = AnimatedSwitcher;

package/dist/AnimatedSwitcher-es.js

@@ -1,93 +0,0 @@
-import React__default, { useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { I as Icon } from './Icon-es.js';
-
-const DURATION_SIMPLE = 0.1;
-const DURATION_AVERAGE = 0.2;
-const FADE = {
-    visible: { opacity: 1 },
-    hidden: { opacity: 0 },
-};
-const SLIDE_IN_UP = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "10%", opacity: 0 },
-};
-const SLIDE_IN_DOWN = {
-    visible: { y: 0, opacity: 1 },
-    hidden: { y: "-10%", opacity: 0 },
-};
-const SPIN_COUNTER_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: 180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-const SPIN_CLOCK_WISE = {
-    visible: {
-        rotate: 0,
-        scale: 1,
-        transition: { duration: DURATION_AVERAGE, ease: "easeOut" },
-    },
-    hidden: {
-        rotate: -180,
-        scale: 0.6,
-        transition: { duration: DURATION_AVERAGE, ease: "easeIn" },
-    },
-};
-
-function AnimatedSwitcher({ initialChild, switched, switchTo, type = "slideFromBottom", }) {
-    const [ref, setRef] = useState(null);
-    const isSwitchingBetweenIcons = initialChild.type === Icon && switchTo.type === Icon;
-    const { key, transition, child, duration } = getChildData();
-    return (React__default.createElement(AnimatePresence, { mode: "wait", initial: false },
-        React__default.createElement(motion.div, { ref: setRef, key: key, variants: transition, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration }, style: { display: getDisplayValue() } }, child)));
-    function getDisplayValue() {
-        if (ref === null || ref === void 0 ? void 0 : ref.firstElementChild) {
-            return window.getComputedStyle(ref.firstElementChild).display;
-        }
-    }
-    function getChildData() {
-        let data = {
-            key: `${initialChild.type.toString()}_1`,
-            child: initialChild,
-        };
-        if (switched) {
-            data = { key: `${switchTo.type.toString()}_2`, child: switchTo };
-        }
-        return Object.assign(Object.assign({}, data), { transition: getTransitionType(), duration: getTransitionDuration() });
-    }
-    function getTransitionType() {
-        if (isSwitchingBetweenIcons) {
-            if (switched)
-                return SPIN_COUNTER_CLOCK_WISE;
-            return SPIN_CLOCK_WISE;
-        }
-        else if (type === "fade") {
-            return FADE;
-        }
-        else {
-            if (switched)
-                return SLIDE_IN_UP;
-            return SLIDE_IN_DOWN;
-        }
-    }
-    function getTransitionDuration() {
-        switch (type) {
-            case "fade":
-                return DURATION_AVERAGE;
-            default:
-                return DURATION_SIMPLE;
-        }
-    }
-}
-AnimatedSwitcher.Icon = function AnimatedSwitcherIcon({ switchToIcon, switched, initialIcon, }) {
-    return (React__default.createElement(AnimatedSwitcher, { switched: switched, initialChild: React__default.createElement(Icon, { name: initialIcon }), switchTo: React__default.createElement(Icon, { name: switchToIcon }) }));
-};
-
-export { AnimatedSwitcher as A };

package/dist/Combobox/Combobox.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import type { ComboboxProps } from "./Combobox.types";
-import { ComboboxAction } from "./components/ComboboxAction";
-import { ComboboxOption as ComboboxOptionComponent } from "./components/ComboboxOption/ComboboxOption";
-import { ComboboxActivator } from "./components/ComboboxActivator";
-export declare function Combobox(props: ComboboxProps): React.JSX.Element;
-export declare namespace Combobox {
-    var Activator: typeof ComboboxActivator;
-    var Action: typeof ComboboxAction;
-    var Option: typeof ComboboxOptionComponent;
-}

package/dist/Combobox/ComboboxProvider.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import type { RefObject } from "react";
-import { type ComboboxOption } from "./Combobox.types";
-export interface ComboboxProviderProps {
-    readonly children: React.ReactNode;
-    readonly selected: ComboboxOption[];
-    readonly selectionHandler: (option: ComboboxOption) => void;
-    readonly open: boolean;
-    readonly handleClose: () => void;
-    readonly handleOpen: () => void;
-    readonly shouldScroll: RefObject<boolean>;
-    readonly searchValue: string;
-    readonly label?: string;
-    readonly onClear?: () => void;
-    readonly onSelectAll?: (selection: ComboboxOption[]) => void;
-}
-export declare const ComboboxContext: React.Context<Omit<ComboboxProviderProps, "children">>;
-export declare function ComboboxContextProvider({ children, ...props }: ComboboxProviderProps): React.JSX.Element;

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { ComboboxActionProps } from "../../Combobox.types";
-export declare function ComboboxAction(props: ComboboxActionProps): React.JSX.Element | null;

package/dist/Combobox/components/ComboboxAction/index.cjs

@@ -1,12 +0,0 @@
-'use strict';
-
-var ComboboxAction = require('../../../ComboboxAction-cjs.js');
-require('react');
-require('../../../Typography-cjs.js');
-require('classnames');
-require('../../../ComboboxProvider-cjs.js');
-require('../../../tslib.es6-cjs.js');
-
-
-
-exports.ComboboxAction = ComboboxAction.ComboboxAction;

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

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

package/dist/Combobox/components/ComboboxAction/index.mjs

@@ -1,6 +0,0 @@
-export { C as ComboboxAction } from '../../../ComboboxAction-es.js';
-import 'react';
-import '../../../Typography-es.js';
-import 'classnames';
-import '../../../ComboboxProvider-es.js';
-import '../../../tslib.es6-es.js';

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { ComboboxActivatorProps } from "../../Combobox.types";
-export declare function ComboboxActivator(props: ComboboxActivatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

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

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

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { ComboboxContentProps } from "../../Combobox.types";
-export declare function ComboboxContent(props: ComboboxContentProps): React.JSX.Element;

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { ComboboxHeaderProps } from "../../../Combobox.types";
-export declare function ComboboxContentHeader(props: ComboboxHeaderProps): React.JSX.Element;

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

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

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { ComboboxListProps } from "../../../Combobox.types";
-export declare function ComboboxContentList(props: ComboboxListProps): React.JSX.Element;

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

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

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { ComboboxSearchProps } from "../../../Combobox.types";
-export declare function ComboboxContentSearch(props: ComboboxSearchProps): React.JSX.Element;

package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/index.cjs

@@ -1,10 +0,0 @@
-'use strict';
-
-var ComboboxContentSearch = require('../../../../ComboboxContentSearch-cjs.js');
-require('react');
-require('../../../../Icon-cjs.js');
-require('@jobber/design');
-
-
-
-exports.ComboboxContentSearch = ComboboxContentSearch.ComboboxContentSearch;

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

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

package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/index.mjs

@@ -1,4 +0,0 @@
-export { C as ComboboxContentSearch } from '../../../../ComboboxContentSearch-es.js';
-import 'react';
-import '../../../../Icon-es.js';
-import '@jobber/design';

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

@@ -1,6 +0,0 @@
-import React from "react";
-interface ComboboxLoadMoreProps {
-    readonly onLoadMore: () => void;
-}
-export declare function ComboboxLoadMore({ onLoadMore }: ComboboxLoadMoreProps): React.JSX.Element;
-export {};

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var ComboboxLoadMore = require('../../../../ComboboxLoadMore-cjs.js');
-require('react');
-require('@jobber/hooks');
-
-
-
-exports.ComboboxLoadMore = ComboboxLoadMore.ComboboxLoadMore;

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

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

package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.mjs

@@ -1,3 +0,0 @@
-export { C as ComboboxLoadMore } from '../../../../ComboboxLoadMore-es.js';
-import 'react';
-import '@jobber/hooks';

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

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

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

@@ -1,3 +0,0 @@
-import React from "react";
-import { type ComboboxOptionProps } from "../../Combobox.types";
-export declare function ComboboxOption(props: ComboboxOptionProps): React.JSX.Element;

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

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

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

@@ -1,3 +0,0 @@
-import React from "react";
-import type { ComboboxTriggerProps } from "../../Combobox.types";
-export declare function ComboboxTrigger({ label, selected, activatorRef, }: ComboboxTriggerProps): React.JSX.Element;

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

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

package/dist/Combobox/constants.d.ts

@@ -1 +0,0 @@
-export declare const COMBOBOX_MENU_ID = "ATL-Combobox-Content";

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

@@ -1,17 +0,0 @@
-import type { Dispatch, MutableRefObject } from "react";
-import type React from "react";
-import type { UseMakeComboboxHandlersReturn } from "./useMakeComboboxHandlers";
-import { type ComboboxOption } from "../Combobox.types";
-type UseComboboxReturn = {
-    wrapperRef: React.RefObject<HTMLDivElement | null>;
-    searchValue: string;
-    setSearchValue: Dispatch<React.SetStateAction<string>>;
-    open: boolean;
-    selectedOptions: ComboboxOption[];
-    selectedStateSetter: (selection: ComboboxOption[]) => void;
-    shouldScroll: MutableRefObject<boolean>;
-    internalFilteredOptions: ComboboxOption[];
-    handleSearchChange: (value: string) => void;
-} & UseMakeComboboxHandlersReturn;
-export declare function useCombobox(selected: ComboboxOption[], onSelect: (selection: ComboboxOption[]) => void, options: ComboboxOption[], onClose?: () => void, multiSelect?: boolean, onSearch?: (searchValue: string) => void, debounceTime?: number): UseComboboxReturn;
-export {};

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

@@ -1,9 +0,0 @@
-import type { UseInteractionsReturn } from "@floating-ui/react";
-import { type ComboboxOption } from "../Combobox.types";
-export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement | null>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement | null>): {
-    floatingRef: React.RefObject<HTMLDivElement | null>;
-    floatingStyles: React.CSSProperties;
-    floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
-    nodeId?: string;
-    parentNodeId: string | null;
-};

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

@@ -1,2 +0,0 @@
-import type { ComboboxActivatorAccessibility } from "../Combobox.types";
-export declare function useComboboxActivatorAccessibility(): ComboboxActivatorAccessibility;

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

@@ -1,9 +0,0 @@
-import type { RefObject } from "react";
-import { type ComboboxOption } from "../Combobox.types";
-interface useComboboxContent {
-    optionsListRef: RefObject<HTMLUListElement | null>;
-    onClear?: () => void;
-    onSelectAll?: (selection: ComboboxOption[]) => void;
-}
-export declare function useComboboxContent(open: boolean, selected: ComboboxOption[]): useComboboxContent;
-export {};

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

@@ -1,12 +0,0 @@
-import type { ReactElement } from "react";
-import { type ComboboxActionProps, type ComboboxActivatorProps, type ComboboxOptionProps, type ComboboxProps } from "../Combobox.types";
-export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox must have exactly one Trigger element";
-export declare function useComboboxValidation(children?: ComboboxProps["children"]): {
-    triggerElement?: ReactElement<ComboboxActivatorProps>;
-    optionElements?: ReactElement<ComboboxOptionProps>[];
-    actionElements?: ReactElement<ComboboxActionProps>[];
-};
-/**
- * Return all instances child component that matches the `type` provided
- */
-export declare function getCompoundComponents<T>(type: ReactElement<T>["type"], children?: ComboboxProps["children"]): ReactElement<T>[];

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

@@ -1,8 +0,0 @@
-import type React from "react";
-import { type ComboboxOption } from "../Combobox.types";
-export interface UseMakeComboboxHandlersReturn {
-    handleClose: () => void;
-    handleSelection: (selection: ComboboxOption) => void;
-    handleOpen: () => void;
-}
-export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, open: boolean, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.RefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;

package/dist/Combobox/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./Combobox";
-export { ComboboxContextProvider } from "./ComboboxProvider";
-export { type ComboboxCustomActivatorProps, type ComboboxOption, } from "./Combobox.types";

package/dist/ComboboxLoadMore-cjs.js

@@ -1,16 +0,0 @@
-'use strict';
-
-var React = require('react');
-var jobberHooks = require('@jobber/hooks');
-
-var styles = {"trigger":"jPB--ZCYNNI-","spinning":"aW61BrnGmcw-"};
-
-function ComboboxLoadMore({ onLoadMore }) {
-    const [inViewRef, isInView] = jobberHooks.useInView();
-    React.useEffect(() => {
-        isInView && onLoadMore();
-    }, [isInView]);
-    return (React.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
-}
-
-exports.ComboboxLoadMore = ComboboxLoadMore;

package/dist/ComboboxProvider-cjs.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-cjs.js');
-var React = require('react');
-
-const ComboboxContext = React.createContext({});
-function ComboboxContextProvider(_a) {
-    var { children } = _a, props = tslib_es6.__rest(_a, ["children"]);
-    return (React.createElement(ComboboxContext.Provider, { value: props }, children));
-}
-
-exports.ComboboxContext = ComboboxContext;
-exports.ComboboxContextProvider = ComboboxContextProvider;

package/dist/ComboboxProvider-es.js

@@ -1,10 +0,0 @@
-import { _ as __rest } from './tslib.es6-es.js';
-import React__default from 'react';
-
-const ComboboxContext = React__default.createContext({});
-function ComboboxContextProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (React__default.createElement(ComboboxContext.Provider, { value: props }, children));
-}
-
-export { ComboboxContextProvider as C, ComboboxContext as a };

package/dist/docs/AnimatedSwitcher/AnimatedSwitcher.md

@@ -1,34 +0,0 @@
-# AnimatedSwitcher
-
-Smoothly switch between two components that aim to add delight when the user
-interacts with them.
-
-
-## Configuration
-
-Animating between 2 icons is done in a more opinionated way where it would spin
-from 1 icon to another. The animation reverses when you want to go back to the
-initial icon. See
-[AnimatedSwitcher/Icon example](/storybook/web/?path=/story/components-utilities-animatedswitcher--icon).
-
-
-## Props
-
-### Web
-
-#### AnimatedSwitcher
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `initialChild` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `false` |
-| `switched` | `boolean` | Yes | `false` | Determines when to switch the component to the `switchTo` prop. |
-| `switchTo` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | Yes | — | The component that shows up when the `switched` prop is `true` |
-| `type` | `"fade" | "slideFromBottom"` | No | `slideFromBottom` | Change the transition between 2 elements. |
-
-#### AnimatedSwitcher.Icon
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `initialIcon` | `IconNames` | Yes | — |  |
-| `switched` | `boolean` | Yes | `false` | Determines when to switch the component to the `switchTo` prop. |
-| `switchToIcon` | `IconNames` | Yes | — |  |