@jobber/components 6.31.2-exp-chips-3fddd2b.0 → 6.33.0

package/dist/DataList/DataList.types.d.ts

@@ -167,6 +167,14 @@ export interface DataListSearchProps {
      * absolutely have to.
      */
     readonly initialValue?: string;
+    /**
+     * The controlled value of the search input.
+     *
+     * Supply this field if you want to take control over the search input's
+     * value. You'll need to use `onSearch` to handle updating your state with
+     * the latest value.
+     */
+    readonly value?: string;
     readonly onSearch: (value: string) => void;
 }
 export interface DataListFiltersProps {

package/dist/DataListSearch-cjs.js

@@ -28,7 +28,7 @@ function InternalDataListSearch() {
     const debouncedSearch = React.useCallback(debounce.debounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
     if (!searchComponent)
         return null;
-    const { placeholder, initialValue } = searchComponent.props;
+    const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
     return (React.createElement("div", { className: classnames(styles.wrapper, {
             [styles.withNoFilters]: !filterComponent && !sorting,
         }) },
@@ -39,7 +39,9 @@ function InternalDataListSearch() {
             // If the initial value changes, reset the input.
             , { 
                 // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
+                key: initialValue, defaultValue: initialValue, value: controlledValue, ref: inputRef, placeholder: getPlaceholder(), onChange: controlledValue !== undefined
+                    ? searchComponent.props.onSearch
+                    : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
         React.createElement("div", { className: styles.searchButton },
             React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {

package/dist/DataListSearch-es.js

@@ -26,7 +26,7 @@ function InternalDataListSearch() {
     const debouncedSearch = useCallback(debounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY), [searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props.onSearch]);
     if (!searchComponent)
         return null;
-    const { placeholder, initialValue } = searchComponent.props;
+    const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
     return (React__default.createElement("div", { className: classnames(styles.wrapper, {
             [styles.withNoFilters]: !filterComponent && !sorting,
         }) },
@@ -37,7 +37,9 @@ function InternalDataListSearch() {
             // If the initial value changes, reset the input.
             , { 
                 // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, ref: inputRef, placeholder: getPlaceholder(), onChange: debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
+                key: initialValue, defaultValue: initialValue, value: controlledValue, ref: inputRef, placeholder: getPlaceholder(), onChange: controlledValue !== undefined
+                    ? searchComponent.props.onSearch
+                    : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
         React__default.createElement("div", { className: styles.searchButton },
             React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {

package/dist/Heading/Heading.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { TypographyOptions } from "../Typography";
+import { TypographyOptions, TypographyProps } from "../Typography";
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 interface HeadingProps {
     /**
@@ -11,7 +11,19 @@ interface HeadingProps {
      * Allows overriding of the element rendered. Defaults to the heading specified with level.
      */
     readonly element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+    /**
+     * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: TypographyProps["UNSAFE_className"];
+    /**
+     * **Use at your own risk:** Custom styles for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: TypographyProps["UNSAFE_style"];
 }
 export type LevelMap = Record<HeadingLevel, TypographyOptions>;
-export declare function Heading({ level, children, element }: HeadingProps): JSX.Element;
+export declare function Heading({ level, children, element, UNSAFE_className, UNSAFE_style, }: HeadingProps): JSX.Element;
 export {};

package/dist/Heading-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var Typography = require('./Typography-cjs.js');
 
-function Heading({ level = 5, children, element }) {
+function Heading({ level = 5, children, element, UNSAFE_className, UNSAFE_style, }) {
     const levelMap = {
         1: {
             element: "h1",
@@ -43,7 +43,7 @@ function Heading({ level = 5, children, element }) {
             textColor: "heading",
         },
     };
-    return (React.createElement(Typography.Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element }), children));
+    return (React.createElement(Typography.Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
 }
 
 exports.Heading = Heading;

package/dist/Heading-es.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
 
-function Heading({ level = 5, children, element }) {
+function Heading({ level = 5, children, element, UNSAFE_className, UNSAFE_style, }) {
     const levelMap = {
         1: {
             element: "h1",
@@ -41,7 +41,7 @@ function Heading({ level = 5, children, element }) {
             textColor: "heading",
         },
     };
-    return (React__default.createElement(Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element }), children));
+    return (React__default.createElement(Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
 }
 
 export { Heading as H };

package/dist/InternalChipDismissible-cjs.js

@@ -43,7 +43,7 @@ function InternalChipDismissibleInput(props) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce.debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        searchValue.length > 0 && (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
             React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
                 allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
                         [styles.activeOption]: activeIndex === i,

package/dist/InternalChipDismissible-es.js

@@ -41,7 +41,7 @@ function InternalChipDismissibleInput(props) {
     }
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        searchValue.length > 0 && (hasAvailableOptions || isLoadingMore) && (React__default.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
+        (hasAvailableOptions || isLoadingMore) && (React__default.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
             React__default.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
                 allOptions.map((option, i) => (React__default.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
                         [styles.activeOption]: activeIndex === i,

package/dist/useDebounce-cjs.js

@@ -19,7 +19,7 @@ function useDebounce(func, wait, options) {
         funcRef.current = func;
     }
     const debounced = React.useMemo(() => {
-        return debounce.debounce(() => funcRef.current(), wait, options);
+        return debounce.debounce((...args) => funcRef.current(...args), wait, options);
         // Note: do not add any dependencies! There is currently no use case where we would change
         // the wait delay or options between renders. By not tracking as dependencies, this allows
         // consumers of useDebounce to provide a raw object for options rather than forcing them to

package/dist/useDebounce-es.js

@@ -17,7 +17,7 @@ function useDebounce(func, wait, options) {
         funcRef.current = func;
     }
     const debounced = useMemo(() => {
-        return debounce(() => funcRef.current(), wait, options);
+        return debounce((...args) => funcRef.current(...args), wait, options);
         // Note: do not add any dependencies! There is currently no use case where we would change
         // the wait delay or options between renders. By not tracking as dependencies, this allows
         // consumers of useDebounce to provide a raw object for options rather than forcing them to

package/dist/utils/useDebounce.d.ts

@@ -7,5 +7,5 @@ type AnyFunction = (...args: any[]) => any;
  * @param options Optional debounce settings.
  * @returns The debounced function.
  */
-export declare function useDebounce<T extends AnyFunction>(func: T, wait: number, options?: Parameters<typeof debounce>[2]): import("lodash").DebouncedFunc<() => any>;
+export declare function useDebounce<T extends AnyFunction>(func: T, wait: number, options?: Parameters<typeof debounce>[2]): import("lodash").DebouncedFunc<(...args: Parameters<T>) => any>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.31.2-exp-chips-3fddd2b.0+3fddd2be",
+  "version": "6.33.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -490,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3fddd2be311b446d87d431a3159df45a35835d4a"
+  "gitHead": "7bd069382ee7b6ad7b80e54457eab37016902192"
 }