@via-profit/ui-kit 0.2.6 → 0.4.0

package/Selectbox/index.d.ts

@@ -33,7 +33,7 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
     /**
      * Anchor position\
      * \
-     * Default: `bottom`
+     * Default: `bottom-fill`
      */
     readonly anchorPos?: AnchorPos;
     readonly positionStrategy?: PositionStrategy;
@@ -94,6 +94,21 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
      * ```
      */
     readonly selectedItemToString: ItemToString<T, Multiple>;
+    /**
+     * Renders the button content for the selected value instead of `selectedItemToString`,
+     * e.g. badges for the multiple selectbox.\
+     * Not called when nothing is selected, `notSetLabel` is shown then.\
+     * Do not render interactive elements (buttons, links): the content is placed inside a `<button>`
+     * Example:
+     * ```tsx
+     * <Selectbox
+     *   multiple
+     *   renderValue={items => items.map(item => <Badge key={item.id}>{item.name}</Badge>)}
+     *   ...
+     * />
+     * ```
+     */
+    readonly renderValue?: RenderValue<T, Multiple>;
     /**
      * A function that determines which of the elements is currently selected\
      * Example:
@@ -135,7 +150,7 @@ export interface SelectboxOverrides {
     /**
      * Icon
      */
-    readonly Icon?: React.ComponentType<SelectboxChevronIconProps & React.RefAttributes<SVGElement>>;
+    readonly Icon?: React.ComponentType<Omit<SelectboxChevronIconProps, 'ref'> & React.RefAttributes<SVGSVGElement>>;
     /**
      * Component for display error text
      */
@@ -158,6 +173,7 @@ export type Children<T> = (data: {
     index: number;
 }, itemProps: MenuItemProps) => React.ReactNode;
 export type ItemToString<T, Multiple extends boolean | undefined = undefined> = (item: Multiple extends undefined ? T : readonly T[]) => string;
+export type RenderValue<T, Multiple extends boolean | undefined = undefined> = (value: Multiple extends undefined ? T : readonly T[]) => React.ReactNode;
 export type OnChange<T, Multiple extends boolean | undefined = undefined> = (item: Value<T, Multiple>) => void;
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectboxProps<T, Multiple> & {
     ref?: React.ForwardedRef<HTMLButtonElement> | undefined;

package/Selectbox/index.js

@@ -60,37 +60,23 @@ const DEFAULT_OVERRIDES = {
     ButtonWrapper: SelectboxButtonWrapper_1.default,
     Container: SelectboxContainer_1.default,
 };
-const generateGuid = () => {
-    const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-    return [
-        u.substring(0, 8),
-        u.substring(8, 12),
-        '4000-8' + u.substring(13, 16),
-        u.substring(16, 28),
-    ].join('-');
-};
 const Selectbox = React.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
     const menuRef = React.useRef(null);
     const [anchorElement, setAnchorElement] = React.useState(null);
     const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);
-    const inputID = React.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
-        }
-        return generateGuid();
-    }, [id]);
-    React.useEffect(() => {
-        if (isOpen && menuRef.current) {
-            menuRef.current.scrollToFirstSelected();
-        }
-    }, [isOpen]);
-    const renderValueAsString = React.useCallback(() => {
-        if ((!multiple && !value) || (multiple && value.length === 0)) {
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
+    const renderButtonContent = React.useCallback(() => {
+        if ((!multiple && value == null) || (multiple && value.length === 0)) {
             return notSetLabel;
         }
-        return selectedItemToString(value);
-    }, [multiple, selectedItemToString, value, notSetLabel]);
+        const selected = value;
+        return typeof renderValue === 'function'
+            ? renderValue(selected)
+            : selectedItemToString(selected);
+    }, [multiple, selectedItemToString, renderValue, value, notSetLabel]);
     const handleButtonClick = React.useCallback((event) => {
         var _a;
         if (isOpen) {
@@ -101,6 +87,17 @@ const Selectbox = React.forwardRef((props, ref) => {
         }
         (_a = nativeButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
     }, [isOpen, nativeButtonProps, onRequestClose, onRequestOpen]);
+    // As a native select, the arrows open the list; the list then takes the focus
+    const handleButtonKeyDown = React.useCallback((event) => {
+        var _a;
+        (_a = nativeButtonProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
+        if (!isOpen &&
+            !event.defaultPrevented &&
+            (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.preventDefault();
+            onRequestOpen(event);
+        }
+    }, [isOpen, nativeButtonProps, onRequestOpen]);
     const setRefs = React.useCallback((el) => {
         if (anchorElement !== el) {
             setAnchorElement(el);
@@ -128,28 +125,31 @@ const Selectbox = React.forwardRef((props, ref) => {
         }
     }, [onRequestClose, anchorElement]);
     React.useEffect(() => {
+        // A closed selectbox has nothing to close
+        if (!isOpen) {
+            return undefined;
+        }
         window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
         return () => {
             window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
         };
-    }, [handleMouseDown]);
+    }, [handleMouseDown, isOpen]);
     const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
         error,
         isOpen,
-        anchorPos, endIcon: isLoading ? React.createElement(Spinner_1.default, null) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
+        anchorPos, 
+        // The static indicator: the default one is an overlay over the nearest positioned ancestor
+        endIcon: isLoading ? React.createElement(Spinner_1.default, { size: "1.2em" }) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, anchorPos, isLoading, overridesMap, nativeButtonProps]);
     const labelProps = React.useMemo(() => ({
         htmlFor: inputID,
         error,
     }), [inputID, error]);
-    if (!(items === null || items === void 0 ? void 0 : items.length) && !isLoading) {
-        return null;
-    }
     return (React.createElement(overridesMap.Container, null,
         label != null && (React.createElement(overridesMap.Label, Object.assign({}, labelProps),
             label,
-            requiredAsterisk != null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+            requiredAsterisk != null && requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
         React.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error, isOpen: isOpen },
-            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { onClick: handleButtonClick, ref: setRefs }), renderValueAsString())),
+            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { id: inputID, onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, ref: setRefs }), renderButtonContent())),
         React.createElement(overridesMap.ErrorText, { error: error }, errorText),
         React.createElement(SelectboxMenu_1.default, { multiple: multiple, items: items, value: value, isOpen: isOpen, anchorPos: anchorPos, positionStrategy: positionStrategy, autoFlip: autoFlip, alternativePlacements: ['bottom-fill', 'top-fill'], anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, ref: menuRef }, children)));
 });

package/Stack/index.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Spacing } from '../utils/spacing';
+export type { Spacing };
+export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `column` — the elements go one under another, `row` — in a line\
+     * **Default:** `column`
+     */
+    readonly direction?: 'column' | 'row';
+    /**
+     * The gap between the elements: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing;
+    /**
+     * The alignment across the direction (`align-items`)\
+     * **Default:** `stretch` for the column, `center` for the row
+     */
+    readonly align?: React.CSSProperties['alignItems'];
+    /**
+     * The alignment along the direction (`justify-content`)
+     */
+    readonly justify?: React.CSSProperties['justifyContent'];
+    /**
+     * The elements of the row wrap to the next line when they do not fit
+     */
+    readonly wrap?: boolean;
+    /**
+     * The stack takes the width of its content (`inline-flex`) instead of the full width
+     */
+    readonly inline?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `column` — the elements go one under another, `row` — in a line\
+     * **Default:** `column`
+     */
+    readonly direction?: "row" | "column" | undefined;
+    /**
+     * The gap between the elements: a step of the theme spacing scale or any CSS length\
+     * **Default:** `md`
+     */
+    readonly gap?: Spacing | undefined;
+    /**
+     * The alignment across the direction (`align-items`)\
+     * **Default:** `stretch` for the column, `center` for the row
+     */
+    readonly align?: import("csstype").Property.AlignItems | undefined;
+    /**
+     * The alignment along the direction (`justify-content`)
+     */
+    readonly justify?: import("csstype").Property.JustifyContent | undefined;
+    /**
+     * The elements of the row wrap to the next line when they do not fit
+     */
+    readonly wrap?: boolean | undefined;
+    /**
+     * The stack takes the width of its content (`inline-flex`) instead of the full width
+     */
+    readonly inline?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Stack/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const spacing_1 = require("../utils/spacing");
+const StyledStack = styled_1.default.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  flex-direction: ${({ $direction }) => $direction};
+  flex-wrap: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};
+  align-items: ${({ $align, $direction }) => $align !== null && $align !== void 0 ? $align : ($direction === 'row' ? 'center' : 'stretch')};
+  justify-content: ${({ $justify }) => $justify !== null && $justify !== void 0 ? $justify : 'flex-start'};
+  gap: ${({ theme, $gap }) => (0, spacing_1.resolveSpacing)(theme, $gap)};
+  /* A flex child shrinks below its content only with min-width: 0 */
+  min-width: 0;
+`;
+/**
+ * The elements in a column or in a row with the same gap between them.
+ * The children stay the plain elements: no wrappers for the items
+ */
+const Stack = (props, ref) => {
+    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline"]);
+    return (react_1.default.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(Stack);

package/Surface/SurfaceContainer.js

@@ -31,6 +31,12 @@ const StyledSurfaceContainer = styled_1.default.div `
     (0, react_2.css) `
       border-radius: 100%;
     `}
+
+  ${({ $noPadding }) => $noPadding &&
+    (0, react_2.css) `
+      /* The content reaches the edges, so it must follow the rounded corners */
+      overflow: hidden;
+    `}
 `;
 const SurfaceContainer = (props, ref) => {
     const { inline, children, rounded, noPadding } = props, nativeProps = __rest(props, ["inline", "children", "rounded", "noPadding"]);

package/Surface/index.js

@@ -55,9 +55,13 @@ const Surface = (props, ref) => {
         Content: (overrides === null || overrides === void 0 ? void 0 : overrides.Content) || SurfaceContent_1.default,
         Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || SurfaceFooter_1.default,
     }), [overrides]);
-    if (!hasHeader && hasSubheader) {
-        console.warn('[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header');
-    }
+    // Warn once when the combination appears, not on every render
+    const isSubheaderWithoutHeader = !hasHeader && hasSubheader;
+    React.useEffect(() => {
+        if (isSubheaderWithoutHeader) {
+            console.warn('[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header');
+        }
+    }, [isSubheaderWithoutHeader]);
     return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, rounded: rounded, ref: ref }),
         hasHeader && (React.createElement(overridesMap.Header, { noPadding: noPadding, rounded: rounded }, header)),
         hasSubheader && (React.createElement(overridesMap.Subheader, { noPadding: noPadding, rounded: rounded }, subheader)),

package/Swiper/Swiper.d.ts

@@ -33,7 +33,20 @@ export type SwiperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>
     readonly threshold?: number;
     readonly resistance?: boolean;
     readonly slidesPerView?: number;
-    readonly children?: readonly SwiperSlideBaseElement[];
+    /**
+     * Arrow keys switch the slides when the swiper is focused\
+     * **Default:** `true`
+     */
+    readonly keyboardControl?: boolean;
+    /**
+     * The label of the slide for screen readers\
+     * **Default:** `(index, total) => \`${index + 1} / ${total}\``
+     */
+    readonly slideLabel?: (index: number, total: number) => string;
+    /**
+     * The slides: `<SwiperSlide>` elements. `null`, `false` and other non-elements are skipped
+     */
+    readonly children?: React.ReactNode;
     readonly overrides?: SwiperOverrides;
 };
 export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -49,7 +62,20 @@ export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttr
     readonly threshold?: number | undefined;
     readonly resistance?: boolean | undefined;
     readonly slidesPerView?: number | undefined;
-    readonly children?: readonly SwiperSlideBaseElement[] | undefined;
+    /**
+     * Arrow keys switch the slides when the swiper is focused\
+     * **Default:** `true`
+     */
+    readonly keyboardControl?: boolean | undefined;
+    /**
+     * The label of the slide for screen readers\
+     * **Default:** `(index, total) => \`${index + 1} / ${total}\``
+     */
+    readonly slideLabel?: ((index: number, total: number) => string) | undefined;
+    /**
+     * The slides: `<SwiperSlide>` elements. `null`, `false` and other non-elements are skipped
+     */
+    readonly children?: React.ReactNode;
     readonly overrides?: SwiperOverrides | undefined;
 } & React.RefAttributes<SwiperRef>>;
 export default Swiper;