npm - linkedunion-design-kit - Versions diffs - 1.11.6 → 1.11.8 - Mend

linkedunion-design-kit 1.11.6 → 1.11.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/src/components/DateRangePicker/{DateRangePicker.js → DateRangePicker.jsx} RENAMED Viewed

@@ -1,15 +1,4 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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)
@@ -30,7 +19,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { format, startOfDay } from "date-fns";
 import { cn } from "../../lib/utils";
 import { Calendar } from "../ui/calendar";
@@ -74,7 +62,17 @@ export function DateRangePicker(_a) {
             ? format(dateRange.from, dateFormat)
             : startLabel;
         var endText = hasEndDate ? format(dateRange.to, dateFormat) : endLabel;
-        return (_jsxs(_Fragment, { children: [_jsx(Body, { as: "span", className: cn(!hasStartDate && "text-muted-foreground"), children: startText }), _jsx(Body, { as: "span", className: "text-gray-400 mx-2", children: separator }), _jsx(Body, { as: "span", className: cn(!hasEndDate && "text-muted-foreground"), children: endText })] }));
+        return (<>
+        <Body as="span" className={cn(!hasStartDate && "text-muted-foreground")}>
+          {startText}
+        </Body>
+        <Body as="span" className="text-gray-400 mx-2">
+          {separator}
+        </Body>
+        <Body as="span" className={cn(!hasEndDate && "text-muted-foreground")}>
+          {endText}
+        </Body>
+      </>);
     };
     var handlePresetClick = function (range) {
         if (showApplyButton) {
@@ -127,35 +125,85 @@ export function DateRangePicker(_a) {
             }
         }
     };
-    return (_jsxs(Popover, { open: !disabled && open, onOpenChange: disabled ? undefined : handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative", children: [startIcon && (_jsx(LUIcon, { icon: startIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left) })), _jsx(Button, { color: "light-gray", "aria-expanded": open, "data-slot": "date-range-picker-input", className: cn("w-full justify-between !p-0", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !hasStartDate && "text-muted-foreground", open &&
-                                color === "default" &&
-                                "border-blue-600 ring-2 ring-blue-200", disabled && [
-                                variant === "filled" && "bg-gray-100",
-                                "border border-gray-300 cursor-not-allowed pointer-events-none opacity-50",
-                            ]), shape: inputVariantConfig.shape[shape], disabled: disabled, tabIndex: disabled ? -1 : 0, children: _jsx("div", { className: cn("flex-grow flex items-center gap-2", paddingClass), children: renderDateRange() }) }), hasClearButton && (_jsx("span", { onClick: handleClear, children: _jsx(LUIcon, { icon: "xMark", size: "lg", color: "gray", variant: "padded", className: cn("absolute top-1/2 -translate-y-1/2 z-10", iconPosition.right) }) })), !hasClearButton && endIcon && (_jsx(LUIcon, { icon: endIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.right) }))] }) }), _jsxs(PopoverContent, __assign({ align: "start", className: cn("w-auto p-0 bg-white", shadow && "rounded-md shadow-lg border border-gray-200", presets && "flex", className) }, props, { children: [presets && presets.length > 0 && (_jsxs("div", { className: "flex flex-col gap-1 p-3 border-r border-gray-200", children: [_jsx(Body, { variant: "body-sm-500", className: "mb-2", children: "Quick Select" }), presets.map(function (preset, index) { return (_jsx(Button, { variant: "ghost", size: "sm", className: "justify-start text-left whitespace-nowrap", onClick: function () { return handlePresetClick(preset.range); }, children: preset.label }, index)); })] })), _jsxs("div", { className: "flex flex-col", children: [isMobile && (_jsxs("div", { className: "px-4 py-3 border-b border-gray-200 bg-gray-50", children: [_jsxs(Body, { variant: "body-sm-500", className: "mb-1", children: [mobileStep === "start" && "Select start date", mobileStep === "end" && "Select end date", mobileStep === "complete" && "Date range selected"] }), mobileStep === "end" && (tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.from) && (_jsxs(Caption, { variant: "sm", color: "gray", children: ["From: ", format(tempDateRange.from, dateFormat)] })), mobileStep === "complete" &&
-                                        (tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.from) &&
-                                        (tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.to) && (_jsxs(Caption, { variant: "sm", color: "gray", children: [format(tempDateRange.from, dateFormat), " -", " ", format(tempDateRange.to, dateFormat)] }))] })), _jsx(Calendar, __assign({}, {
-                                mode: "range",
-                                selected: showApplyButton
-                                    ? (tempDateRange !== null && tempDateRange !== void 0 ? tempDateRange : undefined)
-                                    : (dateRange !== null && dateRange !== void 0 ? dateRange : undefined),
-                                onSelect: function (selectedRange) {
-                                    if (isMobile) {
-                                        handleMobileDateSelect(selectedRange);
-                                    }
-                                    else if (showApplyButton) {
-                                        setTempDateRange(selectedRange !== null && selectedRange !== void 0 ? selectedRange : null);
-                                    }
-                                    else {
-                                        onChange === null || onChange === void 0 ? void 0 : onChange(selectedRange !== null && selectedRange !== void 0 ? selectedRange : null);
-                                        if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
-                                            setOpen(false);
-                                        }
-                                    }
-                                },
-                                calendarSize: size,
-                                autoFocus: true,
-                                numberOfMonths: isMobile ? 1 : numberOfMonths,
-                                disabled: disabledDates,
-                            })), (showApplyButton || (isMobile && mobileStep === "complete")) && (_jsxs("div", { className: "flex items-center justify-end gap-2 p-3 border-t border-gray-200", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancel, className: "text-gray-700", children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleApply, disabled: !(tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.from) || !(tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.to), className: "bg-black text-white hover:!bg-gray-900", children: "Apply" })] }))] })] }))] }));
+    return (<Popover open={!disabled && open} onOpenChange={disabled ? undefined : handleOpenChange}>
+      <PopoverTrigger asChild>
+        <div className="relative">
+          {startIcon && (<LUIcon icon={startIcon} size={iconSizeClass} className={cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left)}/>)}
+          <Button color="light-gray" aria-expanded={open} data-slot="date-range-picker-input" className={cn("w-full justify-between !p-0", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !hasStartDate && "text-muted-foreground", open &&
+            color === "default" &&
+            "border-blue-600 ring-2 ring-blue-200", disabled && [
+            variant === "filled" && "bg-gray-100",
+            "border border-gray-300 cursor-not-allowed pointer-events-none opacity-50",
+        ])} shape={inputVariantConfig.shape[shape]} disabled={disabled} tabIndex={disabled ? -1 : 0}>
+            <div className={cn("flex-grow flex items-center gap-2", paddingClass)}>
+              {renderDateRange()}
+            </div>
+          </Button>
+          {hasClearButton && (<span onClick={handleClear}>
+              <LUIcon icon="xMark" size="lg" color="gray" variant="padded" className={cn("absolute top-1/2 -translate-y-1/2 z-10", iconPosition.right)}/>
+            </span>)}
+          {!hasClearButton && endIcon && (<LUIcon icon={endIcon} size={iconSizeClass} className={cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.right)}/>)}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={cn("w-auto p-0 bg-white", shadow && "rounded-md shadow-lg border border-gray-200", presets && "flex", className)} {...props}>
+        {presets && presets.length > 0 && (<div className="flex flex-col gap-1 p-3 border-r border-gray-200">
+            <Body variant="body-sm-500" className="mb-2">
+              Quick Select
+            </Body>
+            {presets.map(function (preset, index) { return (<Button key={index} variant="ghost" size="sm" className="justify-start text-left whitespace-nowrap" onClick={function () { return handlePresetClick(preset.range); }}>
+                {preset.label}
+              </Button>); })}
+          </div>)}
+        <div className="flex flex-col">
+          {isMobile && (<div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+              <Body variant="body-sm-500" className="mb-1">
+                {mobileStep === "start" && "Select start date"}
+                {mobileStep === "end" && "Select end date"}
+                {mobileStep === "complete" && "Date range selected"}
+              </Body>
+              {mobileStep === "end" && (tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.from) && (<Caption variant="sm" color="gray">
+                  From: {format(tempDateRange.from, dateFormat)}
+                </Caption>)}
+              {mobileStep === "complete" &&
+                (tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.from) &&
+                (tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.to) && (<Caption variant="sm" color="gray">
+                    {format(tempDateRange.from, dateFormat)} -{" "}
+                    {format(tempDateRange.to, dateFormat)}
+                  </Caption>)}
+            </div>)}
+          <Calendar {...{
+        mode: "range",
+        selected: showApplyButton
+            ? (tempDateRange !== null && tempDateRange !== void 0 ? tempDateRange : undefined)
+            : (dateRange !== null && dateRange !== void 0 ? dateRange : undefined),
+        onSelect: function (selectedRange) {
+            if (isMobile) {
+                handleMobileDateSelect(selectedRange);
+            }
+            else if (showApplyButton) {
+                setTempDateRange(selectedRange !== null && selectedRange !== void 0 ? selectedRange : null);
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(selectedRange !== null && selectedRange !== void 0 ? selectedRange : null);
+                if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
+                    setOpen(false);
+                }
+            }
+        },
+        calendarSize: size,
+        autoFocus: true,
+        numberOfMonths: isMobile ? 1 : numberOfMonths,
+        disabled: disabledDates,
+    }}/>
+          {(showApplyButton || (isMobile && mobileStep === "complete")) && (<div className="flex items-center justify-end gap-2 p-3 border-t border-gray-200">
+              <Button variant="ghost" size="sm" onClick={handleCancel} className="text-gray-700">
+                Cancel
+              </Button>
+              <Button size="sm" onClick={handleApply} disabled={!(tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.from) || !(tempDateRange === null || tempDateRange === void 0 ? void 0 : tempDateRange.to)} className="bg-black text-white hover:!bg-gray-900">
+                Apply
+              </Button>
+            </div>)}
+        </div>
+      </PopoverContent>
+    </Popover>);
 }

package/dist/src/components/DateRangePicker/DateRangePicker.stories.d.ts CHANGED Viewed

@@ -3,22 +3,22 @@ import { DateRangePickerProps } from ".";
 declare const _default: Meta;
 export default _default;
 export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DateRangePickerProps>;
-export declare const WithStartEndLabels: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithIcons: () => import("react/jsx-runtime").JSX.Element;
-export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
-export declare const Variants: () => import("react/jsx-runtime").JSX.Element;
-export declare const Shapes: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithPresets: () => import("react/jsx-runtime").JSX.Element;
-export declare const SingleMonth: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithDateRestrictions: () => import("react/jsx-runtime").JSX.Element;
-export declare const DisabledState: () => import("react/jsx-runtime").JSX.Element;
-export declare const CustomFormatting: () => import("react/jsx-runtime").JSX.Element;
-export declare const Colors: () => import("react/jsx-runtime").JSX.Element;
-export declare const FormIntegration: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithTooltip: () => import("react/jsx-runtime").JSX.Element;
-export declare const RealWorldExamples: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithClearButton: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithApplyButton: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithApplyButtonAndPresets: () => import("react/jsx-runtime").JSX.Element;
-export declare const ClearButtonCallbacks: () => import("react/jsx-runtime").JSX.Element;
-export declare const MobileResponsive: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithStartEndLabels: () => import("react").JSX.Element;
+export declare const WithIcons: () => import("react").JSX.Element;
+export declare const Sizes: () => import("react").JSX.Element;
+export declare const Variants: () => import("react").JSX.Element;
+export declare const Shapes: () => import("react").JSX.Element;
+export declare const WithPresets: () => import("react").JSX.Element;
+export declare const SingleMonth: () => import("react").JSX.Element;
+export declare const WithDateRestrictions: () => import("react").JSX.Element;
+export declare const DisabledState: () => import("react").JSX.Element;
+export declare const CustomFormatting: () => import("react").JSX.Element;
+export declare const Colors: () => import("react").JSX.Element;
+export declare const FormIntegration: () => import("react").JSX.Element;
+export declare const WithTooltip: () => import("react").JSX.Element;
+export declare const RealWorldExamples: () => import("react").JSX.Element;
+export declare const WithClearButton: () => import("react").JSX.Element;
+export declare const WithApplyButton: () => import("react").JSX.Element;
+export declare const WithApplyButtonAndPresets: () => import("react").JSX.Element;
+export declare const ClearButtonCallbacks: () => import("react").JSX.Element;
+export declare const MobileResponsive: () => import("react").JSX.Element;