@bodynarf/react.components 1.13.8 → 1.14.0

package/components/primitives/timePicker/component/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { LabeledElement } from "../../../../types";
+import "./style.scss";
+import { TimePickerProps } from "../types";
+/** TimePicker input component */
+declare const TimePicker: FC<Omit<TimePickerProps, "label"> & LabeledElement>;
+export default TimePicker;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/timePicker/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/timePicker/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAwB,MAAM,OAAO,CAAC;AAI9D,OAAO,EAAe,cAAc,EAAE,MAAM,YAAY,CAAC;AAKzD,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,eAAe,EAAa,MAAM,UAAU,CAAC;AA+CtD,iCAAiC;AACjC,QAAA,MAAM,UAAU,EAAE,EAAE,CAChB,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG,cAAc,CA6FlD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/primitives/timePicker/component/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { emptyFn, generateGuid, getClassName, isNullish, isStringEmpty } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+import { getSizeClassName, getStyleClassName, mapDataAttributes } from "../../../../utils";
+import ComponentWithLabel from "../../internal/componentWithLabel";
+import InternalHint from "../../internal/hint";
+import "./style.scss";
+/** Parse time string to TimeValue */
+const parseTimeString = (timeString, showSeconds) => {
+    if (isStringEmpty(timeString)) {
+        return undefined;
+    }
+    const parts = timeString.split(":");
+    if (parts.length < 2) {
+        return undefined;
+    }
+    const hours = parseInt(parts[0], 10);
+    const minutes = parseInt(parts[1], 10);
+    const seconds = showSeconds && parts.length >= 3 ? parseInt(parts[2], 10) : undefined;
+    if (isNaN(hours) || isNaN(minutes)) {
+        return undefined;
+    }
+    return {
+        hours,
+        minutes,
+        seconds: showSeconds ? (seconds ?? 0) : undefined,
+    };
+};
+/** Format TimeValue to string */
+const formatTimeValue = (value, showSeconds) => {
+    if (isNullish(value)) {
+        return "";
+    }
+    const hours = value.hours.toString().padStart(2, "0");
+    const minutes = value.minutes.toString().padStart(2, "0");
+    if (showSeconds) {
+        const seconds = (value.seconds ?? 0).toString().padStart(2, "0");
+        return `${hours}:${minutes}:${seconds}`;
+    }
+    return `${hours}:${minutes}`;
+};
+/** TimePicker input component */
+const TimePicker = ({ defaultValue, onValueChange = emptyFn, validationState, name = generateGuid(), style, size = ElementSize.Normal, readonly = false, disabled = false, rounded = false, loading = false, autoFocus = false, label, onBlur, onKeyDown, onKeyUp, showSeconds = false, step = 1, min, max, placeholder, className, title, data, hint, }) => {
+    const elClassName = useMemo(() => getClassName([
+        className,
+        getSizeClassName(size, ElementSize.Normal),
+        getStyleClassName(style, validationState),
+        rounded === true ? "is-rounded" : "",
+        "input",
+        "bbr-time-picker",
+    ]), [className, size, style, validationState, rounded]);
+    const inputContainerClassName = useMemo(() => getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+    ]), [loading]);
+    const stringifiedDefValue = useMemo(() => formatTimeValue(defaultValue, showSeconds), [defaultValue, showSeconds]);
+    const onChange = useCallback((event) => {
+        const parsed = parseTimeString(event.target.value, showSeconds);
+        onValueChange(parsed);
+    }, [onValueChange, showSeconds]);
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: name, size: size, label: label, children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { id: name, min: min, max: max, type: "time", name: name, title: title, onBlur: onBlur, onKeyUp: onKeyUp, ...dataAttributes, onChange: onChange, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown, autoFocus: autoFocus, className: elClassName, placeholder: placeholder, defaultValue: stringifiedDefValue, step: showSeconds === true ? step : step * 60 }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default TimePicker;

package/components/primitives/timePicker/component/style.scss

@@ -0,0 +1,26 @@
+.control.is-loading input[type="time"]::-webkit-calendar-picker-indicator {
+    display: none;
+}
+
+.control input[type="time"] {
+    // Extra padding for AM/PM text to not overlap with clock icon
+    padding-right: 2.5rem;
+
+    &::-webkit-calendar-picker-indicator {
+        position: absolute;
+        right: 0.75rem;
+        cursor: pointer;
+    }
+
+    &.is-small {
+        padding-right: 2rem;
+    }
+
+    &.is-medium {
+        padding-right: 3rem;
+    }
+
+    &.is-large {
+        padding-right: 3.5rem;
+    }
+}

package/components/primitives/timePicker/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/timePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/timePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/primitives/timePicker/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/primitives/timePicker/types.d.ts

@@ -0,0 +1,33 @@
+import { BaseNullableInputElementProps, BlurableElement, KeyboardElement } from "../../../types";
+/** Time value representation */
+export interface TimeValue {
+    /** Hours (0-23) */
+    hours: number;
+    /** Minutes (0-59) */
+    minutes: number;
+    /** Seconds (0-59), optional */
+    seconds?: number;
+}
+/** TimePicker component props type */
+export type TimePickerProps = BaseNullableInputElementProps<TimeValue> & BlurableElement & KeyboardElement & {
+    /**
+     * Show seconds input.
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * Step for minutes (and seconds if shown).
+     * See html input step documentation.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Minimum time value (format: "HH:MM" or "HH:MM:SS").
+     */
+    min?: string;
+    /**
+     * Maximum time value (format: "HH:MM" or "HH:MM:SS").
+     */
+    max?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/primitives/timePicker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/timePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7F,gCAAgC;AAChC,MAAM,WAAW,SAAS;IACtB,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,6BAA6B,CAAC,SAAS,CAAC,GAChE,eAAe,GACf,eAAe,GACf;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/components/primitives/timePicker/types.js

@@ -0,0 +1 @@
+export {};

package/components/search/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAQ/D,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA8F3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/search/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,EAAE,EAAyB,MAAM,OAAO,CAAC;AAS/D,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,uBAAuB;AACvB,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAsH3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/search/component/index.js

@@ -4,9 +4,10 @@ import { getClassName } from "@bodynarf/utils";
 import { ElementSize } from "../../../types";
 import { getSizeClassName, mapDataAttributes } from "../../../utils";
 import Button, { ButtonStyle } from "../../button";
+import Icon from "../../icon";
 import "./style.scss";
 /** Search component */
-const Search = ({ searchType, onSearch, caption, defaultValue = "", size = ElementSize.Normal, isLoading = false, rounded = false, disabled = false, autoFocus = false, searchButtonCaption = "Search", searchButtonTitle, className, title, data, }) => {
+const Search = ({ searchType, onSearch, caption, defaultValue = "", size = ElementSize.Normal, isLoading = false, rounded = false, disabled = false, autoFocus = false, searchButtonCaption = "Search", searchButtonTitle, showIcon = false, className, title, data, }) => {
     const [searchValue, setSearchValue] = useState(defaultValue);
     const onChange = useCallback((event) => {
         const elementValue = event.target.value;
@@ -23,6 +24,7 @@ const Search = ({ searchType, onSearch, caption, defaultValue = "", size = Eleme
         getSizeClassName(size),
         isLoading ? "is-loading" : "",
         searchType === "byButton" ? "is-expanded" : "",
+        showIcon ? "has-icons-left" : "",
     ]);
     const inputClassName = getClassName([
         "input",
@@ -32,8 +34,12 @@ const Search = ({ searchType, onSearch, caption, defaultValue = "", size = Eleme
     ]);
     const dataAttributes = mapDataAttributes(data);
     if (searchType === "byButton") {
-        return (_jsxs("div", { className: "field has-addons", children: [_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", title: title, disabled: disabled, onChange: onChange, ...dataAttributes, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName }) }), _jsx("div", { className: "control", children: _jsx(Button, { size: size, rounded: rounded, disabled: disabled, isLoading: isLoading, style: ButtonStyle.Info, title: searchButtonTitle, caption: searchButtonCaption, onClick: onSearchButtonClick }) })] }));
+        return (_jsxs("div", { className: "field has-addons", children: [_jsxs("div", { className: elClassName, children: [_jsx("input", { type: "search", title: title, disabled: disabled, onChange: onChange, ...dataAttributes, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName }), showIcon
+                            ? (_jsx("span", { className: `icon is-left ${getSizeClassName(size)}`, children: _jsx(Icon, { size: size, name: "search" }) }))
+                            : null] }), _jsx("div", { className: "control", children: _jsx(Button, { size: size, rounded: rounded, disabled: disabled, isLoading: isLoading, style: ButtonStyle.Info, title: searchButtonTitle, caption: searchButtonCaption, onClick: onSearchButtonClick }) })] }));
     }
-    return (_jsx("div", { className: elClassName, children: _jsx("input", { type: "search", title: title, disabled: disabled, onChange: onChange, ...dataAttributes, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName }) }));
+    return (_jsxs("div", { className: elClassName, children: [_jsx("input", { type: "search", title: title, disabled: disabled, onChange: onChange, ...dataAttributes, placeholder: caption, autoFocus: autoFocus, defaultValue: searchValue, className: inputClassName }), showIcon
+                ? (_jsx("span", { className: `icon is-left ${getSizeClassName(size)}`, children: _jsx(Icon, { size: size, name: "search" }) }))
+                : null] }));
 };
 export default Search;

package/components/search/types.d.ts

@@ -36,6 +36,11 @@ export type SearchProps = BaseElementProps & {
      * Visible only in `searchType = "byButton"`
      */
     searchButtonTitle?: string;
+    /**
+     * Should search icon (magnifying glass) be displayed
+     * @default false
+     */
+    showIcon?: boolean;
     /** Search handler */
     onSearch: (searchPattern: string) => void;
 };

package/components/search/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG;IACzC;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/search/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE3D,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAG;IACzC;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC"}

package/components/stepper/component/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./style.scss";
+import { StepperProps } from "../types";
+/** Stepper component for displaying step-by-step progress */
+declare const Stepper: FC<StepperProps>;
+export default Stepper;
+//# sourceMappingURL=index.d.ts.map

package/components/stepper/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AAOjD,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAY,YAAY,EAAc,MAAM,UAAU,CAAC;AAsB9D,6DAA6D;AAC7D,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA4G7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/stepper/component/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { getClassName, isNullish } from "@bodynarf/utils";
+import { ElementColor, ElementSize } from "../../../types";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../utils";
+import "./style.scss";
+/** Get step status based on current step */
+const getStepStatus = (steps, currentStepId, stepId) => {
+    const currentIndex = steps.findIndex(s => s.id === currentStepId);
+    const stepIndex = steps.findIndex(s => s.id === stepId);
+    if (stepIndex < currentIndex) {
+        return "completed";
+    }
+    if (stepIndex === currentIndex) {
+        return "current";
+    }
+    return "upcoming";
+};
+/** Stepper component for displaying step-by-step progress */
+const Stepper = ({ steps, currentStep, size = ElementSize.Normal, color = ElementColor.Primary, vertical = false, showNumbers = true, clickable = false, showConnectors = true, animated = false, showArrows = false, onStepClick, className, title, data, }) => {
+    const containerClassName = useMemo(() => getClassName([
+        "bbr-stepper",
+        className,
+        getSizeClassName(size, ElementSize.Normal),
+        getElementColorClassName(color),
+        vertical ? "is-vertical" : "",
+        showConnectors === true || showArrows === true ? "has-connectors" : "",
+        animated ? "is-animated" : "",
+    ]), [className, size, color, vertical, showConnectors, animated, showArrows]);
+    const handleStepClick = useCallback((step, index, status) => {
+        if (!clickable || isNullish(onStepClick)) {
+            return;
+        }
+        const isStepClickable = step.clickable !== false && status === "completed";
+        if (isStepClickable) {
+            onStepClick(step, index);
+        }
+    }, [clickable, onStepClick]);
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsx("div", { title: title, ...dataAttributes, className: containerClassName, children: steps.map((step, index) => {
+            const status = getStepStatus(steps, currentStep, step.id);
+            const isClickable = clickable && step.clickable !== false && status === "completed";
+            const stepClassName = getClassName([
+                "bbr-stepper-step",
+                `is-${status}`,
+                isClickable ? "is-clickable" : "",
+            ]);
+            return (_jsxs("div", { className: stepClassName, onClick: () => handleStepClick(step, index, status), children: [_jsx("div", { className: "bbr-stepper-marker", children: status === "completed" && !showNumbers ? (_jsx("span", { className: "bbr-stepper-icon", children: _jsx("i", { className: "fas fa-check" }) })) : step.icon && !showNumbers ? (_jsx("span", { className: "bbr-stepper-icon", children: _jsx("i", { className: `fas ${step.icon}` }) })) : (_jsx("span", { className: "bbr-stepper-number", children: index + 1 })) }), _jsxs("div", { className: "bbr-stepper-content", children: [_jsx("div", { className: "bbr-stepper-title", children: step.title }), step.description !== undefined && step.description !== "" && (_jsx("div", { className: "bbr-stepper-description", children: step.description }))] }), index < steps.length - 1 && (_jsx("div", { className: getClassName([
+                            "bbr-stepper-connector",
+                            status === "completed" ? "is-completed" : "",
+                            showArrows === true ? "has-arrow" : "",
+                            showConnectors !== true && showArrows !== true ? "is-hidden" : "",
+                        ]) }))] }, step.id));
+        }) }));
+};
+export default Stepper;