@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/baseui/payment-card/icons/visa.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Visa = function (_a) {
+    var size = _a.size;
+    return (_jsxs("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M23 4H1V20H23V4Z", fill: "#16216B" }, void 0), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.98 14.5C11.99 14.5 11.34 14.21 10.87 13.95L11.53 13.01C11.95 13.23 12.28 13.48 13.04 13.48C13.28 13.48 13.52 13.42 13.65 13.21C13.84 12.9 13.61 12.73 13.06 12.45L12.79 12.29C11.98 11.78 11.63 11.3 12.01 10.45C12.25 9.90995 12.9 9.5 13.95 9.5C14.68 9.5 15.37 9.78996 15.76 10.08L15 10.91C14.61 10.62 14.29 10.47 13.92 10.47C13.63 10.47 13.4 10.57 13.32 10.72C13.17 10.99 13.37 11.17 13.79 11.41L14.11 11.6C15.09 12.17 15.32 12.77 15.08 13.33C14.67 14.28 13.84 14.5 12.98 14.5ZM18.62 11.5601C18.6 11.2101 18.59 10.7299 18.62 10.4399H18.6C18.52 10.6799 17.47 12.78 17.47 12.78H18.69L18.62 11.5601ZM18.78 14.36L18.74 13.65H17L16.64 14.36H15.12L17.87 9.60999H19.73L20.2 14.36H18.78ZM7.93 9.60999L6.67 11.63C6.35 12.16 6.16 12.43 6.07 12.76H6.06C6.08 12.34 6.02 11.82 6.01 11.52L5.87 9.60999H3.52L3.5 9.73999C4.1 9.73999 4.46 10.02 4.56 10.59L5.02 14.37H6.47L9.39 9.60999H7.93ZM8.55 14.36L10.11 9.59998H11.51L9.95 14.36H8.55Z", fill: "#fff" }, void 0)] }), void 0));
+};
+export default Visa;

package/esm/baseui/payment-card/index.d.ts

@@ -0,0 +1,7 @@
+export { default as StatefulPaymentCard } from './stateful-payment-card';
+export { StatefulContainer } from '../input';
+export { default as PaymentCard } from './payment-card';
+export { default as valid } from 'card-validator';
+export { SIZE } from '../input';
+export { IconWrapper as StyledIconWrapper } from './styled-components';
+export * from './types';

package/esm/baseui/payment-card/index.js

@@ -0,0 +1,14 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as StatefulPaymentCard } from './stateful-payment-card';
+export { StatefulContainer } from '../input';
+export { default as PaymentCard } from './payment-card';
+export { default as valid } from 'card-validator';
+export { SIZE } from '../input';
+// Styled elements
+export { IconWrapper as StyledIconWrapper } from './styled-components';
+export * from './types';

package/esm/baseui/payment-card/payment-card.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { PaymentCardProps } from './types';
+declare class PaymentCard extends React.Component<PaymentCardProps> {
+    static defaultProps: {
+        autoComplete: string;
+        autoFocus: boolean;
+        disabled: boolean;
+        name: string;
+        error: boolean;
+        onBlur: () => void;
+        onFocus: () => void;
+        overrides: {};
+        required: boolean;
+        size: string;
+        startEnhancer: null;
+        endEnhancer: null;
+    };
+    caretPosition: number;
+    inRef: HTMLInputElement | HTMLTextAreaElement | null;
+    constructor(props: PaymentCardProps);
+    componentDidUpdate(prevProps: PaymentCardProps): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default PaymentCard;

package/esm/baseui/payment-card/payment-card.js

@@ -0,0 +1,111 @@
+import { __assign, __extends, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import * as valid from 'card-validator';
+import { addGaps, getCaretPosition } from './utils';
+import { getOverrides } from '../helpers/overrides';
+import { Input, SIZE } from '../input';
+import AmexIcon from './icons/amex';
+import DinersClubIcon from './icons/dinersclub';
+import DiscoverIcon from './icons/discover';
+import EloIcon from './icons/elo';
+import GenericIcon from './icons/generic';
+import JcbIcon from './icons/jcb';
+import MaestroIcon from './icons/maestro';
+import MastercardIcon from './icons/mastercard';
+import UnionPayIcon from './icons/unionpay';
+import VisaIcon from './icons/visa';
+import UatpIcon from './icons/uatp';
+import { IconWrapper as StyledIconWrapper } from './styled-components';
+import { CUSTOM_CARDS_CONFIGURATION } from './custom-cards.config';
+var CardTypeToComponent = {
+    visa: VisaIcon,
+    mastercard: MastercardIcon,
+    'american-express': AmexIcon,
+    'diners-club': DinersClubIcon,
+    discover: DiscoverIcon,
+    jcb: JcbIcon,
+    unionpay: UnionPayIcon,
+    maestro: MaestroIcon,
+    elo: EloIcon,
+    generic: GenericIcon,
+    uatp: UatpIcon,
+};
+var PaymentCard = /** @class */ (function (_super) {
+    __extends(PaymentCard, _super);
+    function PaymentCard(props) {
+        var _this = _super.call(this, props) || this;
+        _this.caretPosition = 0;
+        _this.inRef = null;
+        // For adding new custom card type, add card config to custom-cards.config.js
+        CUSTOM_CARDS_CONFIGURATION.forEach(function (cardTypeConfig) { return valid.creditCardType.addCard(cardTypeConfig); });
+        return _this;
+    }
+    PaymentCard.prototype.componentDidUpdate = function (prevProps) {
+        if (this.inRef && prevProps.value !== this.props.value) {
+            this.inRef.setSelectionRange(this.caretPosition, this.caretPosition);
+        }
+    };
+    PaymentCard.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.size, size = _c === void 0 ? SIZE.default : _c, onChange = _a.onChange, value = _a.value, _d = _a["aria-label"], ariaLabel = _d === void 0 ? 'Please enter a debit or credit card number.' : _d, restProps = __rest(_a, ["overrides", "size", "onChange", "value", 'aria-label']);
+        var IconWrapperOverride = overrides.IconWrapper, restOverrides = __rest(overrides, ["IconWrapper"]);
+        var _e = __read(getOverrides(IconWrapperOverride, StyledIconWrapper), 2), IconWrapper = _e[0], iconWrapperProps = _e[1];
+        // todo(flow->ts): maybe incorrect typecast, should it be `${value}`?
+        var validatedValue = valid.number(value);
+        var gaps = [];
+        var type = undefined;
+        if (validatedValue.card) {
+            gaps = validatedValue.card.gaps || [];
+            type = validatedValue.card.type;
+        }
+        // @ts-ignore
+        var getBeforeComponent = function () {
+            var _a;
+            var iconSize = (_a = {},
+                _a[SIZE.mini] = '16pz',
+                _a[SIZE.compact] = '24px',
+                _a[SIZE.default] = '32px',
+                _a[SIZE.large] = '40px',
+                _a);
+            return function () { return (_jsx(IconWrapper, __assign({ "$size": size }, iconWrapperProps, { children: React.createElement(CardTypeToComponent[type || 'generic'] || GenericIcon, {
+                    size: iconSize[size],
+                }) }), void 0)); };
+        };
+        return (_jsx(Input, __assign({ size: size, "aria-label": ariaLabel, "data-baseweb": "payment-card-input", inputMode: "numeric", overrides: Object.freeze(__assign(__assign({}, restOverrides), { Before: getBeforeComponent() })), onChange: function (e) {
+                var _a = __read(getCaretPosition(e.target.value, _this.props.value ? String(_this.props.value) : '', 
+                // @ts-ignore
+                e.target.selectionStart), 2), position = _a[0], value = _a[1];
+                // @ts-expect-error todo(flow->ts): looks dangerous
+                _this.caretPosition = position;
+                _this.inRef = e.target;
+                // @ts-expect-error todo(flow->ts): looks dangerous
+                e.target.value = value;
+                onChange && onChange(e);
+            }, value: addGaps(gaps, String(value) || '') }, restProps), void 0));
+    };
+    PaymentCard.defaultProps = {
+        autoComplete: 'cc-number',
+        autoFocus: false,
+        disabled: false,
+        name: '',
+        error: false,
+        onBlur: function () { },
+        onFocus: function () { },
+        overrides: {},
+        required: false,
+        size: 'default',
+        // @ts-ignore
+        startEnhancer: null,
+        // @ts-ignore
+        endEnhancer: null,
+    };
+    return PaymentCard;
+}(React.Component));
+export default PaymentCard;

package/esm/baseui/payment-card/stateful-payment-card.d.ts

@@ -0,0 +1,2 @@
+import type { StatefulPaymentCardProps } from './types';
+export default function StatefulPaymentCard(props: StatefulPaymentCardProps): import("react/jsx-runtime").JSX.Element;

package/esm/baseui/payment-card/stateful-payment-card.js

@@ -0,0 +1,7 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import StatefulContainer from '../input/stateful-container';
+import PaymentCard from './payment-card';
+export default function StatefulPaymentCard(props) {
+    return (_jsx(StatefulContainer, __assign({}, props, { children: function (childrenProps) { return _jsx(PaymentCard, __assign({}, childrenProps), void 0); } }), void 0));
+}

package/esm/baseui/payment-card/styled-components.d.ts

@@ -0,0 +1 @@
+export declare const IconWrapper: import("../../style/styled").StyledComponent;

package/esm/baseui/payment-card/styled-components.js

@@ -0,0 +1,9 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { styled } from '../../style';
+export var IconWrapper = styled('div', 'flex items-center h-full');
+IconWrapper.displayName = 'IconWrapper';

package/esm/baseui/payment-card/types.d.ts

@@ -0,0 +1,11 @@
+import type { InputOverrides, InputProps, StInputPropsDiff } from '../input';
+import type { Override } from '../helpers/overrides';
+export declare type PaymentCardOverrides = {
+    IconWrapper?: Override;
+} & InputOverrides;
+export declare type PaymentCardProps = {
+    overrides: PaymentCardOverrides;
+} & InputProps;
+export declare type StatefulPaymentCardProps = {
+    overrides?: PaymentCardOverrides;
+} & StInputPropsDiff;

package/esm/baseui/payment-card/types.js

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

package/esm/baseui/payment-card/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const addGaps: (gaps: number[], value: string) => string;
+export declare const sanitizeNumber: (input: string) => string;
+export declare const getCaretPosition: (value: string, prevValue: string, position: number) => (string | number)[];

package/esm/baseui/payment-card/utils.js

@@ -0,0 +1,43 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as valid from 'card-validator';
+export var addGaps = function (gaps, value) {
+    return gaps.reduce(function (prev, gap, index) { return "".concat(prev.slice(0, gap + index), " ").concat(prev.slice(gap + index)).trim(); }, "".concat(value));
+};
+export var sanitizeNumber = function (input) {
+    var number = input.replace(/[^0-9]/gi, '');
+    var validatedValue = valid.number(number);
+    if (validatedValue.card && Array.isArray(validatedValue.card.lengths)) {
+        return number.slice(0, validatedValue.card.lengths[validatedValue.card.lengths.length - 1]);
+    }
+    // CC number NEVER can have more than 19 digits
+    return number.slice(0, 19);
+};
+export var getCaretPosition = function (value, prevValue, position) {
+    var cleanValue = sanitizeNumber(value);
+    var validatedValue = valid.number(cleanValue);
+    // skipping over a gap
+    if (validatedValue.card && Array.isArray(validatedValue.card.gaps)) {
+        var gaps = validatedValue.card.gaps;
+        var valueWithGaps = addGaps(gaps, cleanValue);
+        if (cleanValue.length > prevValue.length && valueWithGaps[position - 1] === ' ') {
+            return [position + 1, cleanValue];
+        }
+    }
+    // deleting a gap
+    var prevValidatedValue = valid.number(prevValue);
+    if (prevValidatedValue.card && Array.isArray(prevValidatedValue.card.gaps)) {
+        var gaps = prevValidatedValue.card.gaps;
+        var valueWithGaps = addGaps(gaps, prevValue);
+        if (prevValue === cleanValue && valueWithGaps.length > value.length) {
+            var newValue = valueWithGaps.slice(0, position - 1) + valueWithGaps.slice(position);
+            return [position - 1, sanitizeNumber(newValue)];
+        }
+    }
+    // change without crossing a gap
+    return [position, cleanValue];
+};

package/esm/baseui/popover/constants.d.ts

@@ -0,0 +1,45 @@
+export declare const PLACEMENT: {
+    readonly auto: "auto";
+    readonly topLeft: "topLeft";
+    readonly top: "top";
+    readonly topRight: "topRight";
+    readonly rightTop: "rightTop";
+    readonly right: "right";
+    readonly rightBottom: "rightBottom";
+    readonly bottomRight: "bottomRight";
+    readonly bottom: "bottom";
+    readonly bottomLeft: "bottomLeft";
+    readonly leftBottom: "leftBottom";
+    readonly left: "left";
+    readonly leftTop: "leftTop";
+};
+export declare const TRIGGER_TYPE: {
+    readonly click: "click";
+    readonly hover: "hover";
+};
+export declare const STATE_CHANGE_TYPE: {
+    readonly open: "open";
+    readonly close: "close";
+};
+export declare const ACCESSIBILITY_TYPE: {
+    readonly none: "none";
+    readonly menu: "menu";
+    readonly tooltip: "tooltip";
+};
+export declare const POPOVER_MARGIN = 8;
+export declare const ARROW_SIZE = 6;
+export declare const ANIMATE_OUT_TIME = 0;
+export declare const ANIMATE_IN_TIME = 20;
+/**
+ * Since we use a 45-degree rotated div to render the arrow, the
+ * width/height of this div is different than the arrow size itself
+ *
+ * The arrow size is essentially half the diagonal of the rotated div,
+ * using pythagorean theorem:
+ *   width^2 + height^2 = (arrow_size * 2)^2
+ * In this case width = height so:
+ *   2 * width^2 = (arrow_size * 2)^2
+ * Simplifies to:
+ *   width = √((arrow_size * 2)^2 / 2)
+ */
+export declare const ARROW_WIDTH: number;

package/esm/baseui/popover/constants.js

@@ -0,0 +1,51 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export var PLACEMENT = {
+    auto: 'auto',
+    topLeft: 'topLeft',
+    top: 'top',
+    topRight: 'topRight',
+    rightTop: 'rightTop',
+    right: 'right',
+    rightBottom: 'rightBottom',
+    bottomRight: 'bottomRight',
+    bottom: 'bottom',
+    bottomLeft: 'bottomLeft',
+    leftBottom: 'leftBottom',
+    left: 'left',
+    leftTop: 'leftTop',
+};
+export var TRIGGER_TYPE = {
+    click: 'click',
+    hover: 'hover',
+};
+export var STATE_CHANGE_TYPE = {
+    open: 'open',
+    close: 'close',
+};
+export var ACCESSIBILITY_TYPE = {
+    none: 'none',
+    menu: 'menu',
+    tooltip: 'tooltip',
+};
+export var POPOVER_MARGIN = 8;
+export var ARROW_SIZE = 6;
+export var ANIMATE_OUT_TIME = 0;
+export var ANIMATE_IN_TIME = 20;
+/**
+ * Since we use a 45-degree rotated div to render the arrow, the
+ * width/height of this div is different than the arrow size itself
+ *
+ * The arrow size is essentially half the diagonal of the rotated div,
+ * using pythagorean theorem:
+ *   width^2 + height^2 = (arrow_size * 2)^2
+ * In this case width = height so:
+ *   2 * width^2 = (arrow_size * 2)^2
+ * Simplifies to:
+ *   width = √((arrow_size * 2)^2 / 2)
+ */
+export var ARROW_WIDTH = Math.ceil(Math.sqrt(Math.pow((ARROW_SIZE * 2), 2) / 2));

package/esm/baseui/popover/default-props.d.ts

@@ -0,0 +1,3 @@
+import type { BasePopoverProps } from './types';
+declare const baseDefaultProps: Partial<BasePopoverProps>;
+export default baseDefaultProps;

package/esm/baseui/popover/default-props.js

@@ -0,0 +1,24 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants';
+var baseDefaultProps = {
+    accessibilityType: ACCESSIBILITY_TYPE.menu,
+    focusLock: false,
+    autoFocus: true,
+    returnFocus: true,
+    // Remove the `ignoreBoundary` prop in the next major version
+    // and have it replaced with the TetherBehavior props overrides
+    ignoreBoundary: false,
+    overrides: {},
+    onMouseEnterDelay: 200,
+    onMouseLeaveDelay: 200,
+    placement: PLACEMENT.auto,
+    showArrow: false,
+    triggerType: TRIGGER_TYPE.click,
+    renderAll: false,
+};
+export default baseDefaultProps;

package/esm/baseui/popover/index.d.ts

@@ -0,0 +1,6 @@
+export { default as StatefulPopover } from './stateful-popover';
+export { default as StatefulContainer } from './stateful-container';
+export { default as Popover } from './popover';
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, } from './constants';
+export { Arrow as StyledArrow, Body as StyledBody, Inner as StyledInner, Padding as StyledPadding, } from './styled-components';
+export * from './types';

package/esm/baseui/popover/index.js

@@ -0,0 +1,15 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as StatefulPopover } from './stateful-popover';
+export { default as StatefulContainer } from './stateful-container';
+export { default as Popover } from './popover';
+// Constants
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, STATE_CHANGE_TYPE, ANIMATE_IN_TIME, ANIMATE_OUT_TIME, } from './constants';
+// Styled elements
+export { Arrow as StyledArrow, Body as StyledBody, Inner as StyledInner, Padding as StyledPadding, } from './styled-components';
+// Flow
+export * from './types';

package/esm/baseui/popover/popover.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { PopoverProps } from './types';
+declare const Popover: {
+    (props: import("./types").BasePopoverProps & {
+        children: React.ReactNode;
+        content: React.ReactNode | import("./types").ContentRenderProp;
+        isOpen: boolean;
+        onClickOutside?: ((event: MouseEvent) => unknown) | undefined;
+        onEsc?: (() => unknown) | undefined;
+    } & {
+        innerRef?: React.Ref<HTMLElement> | undefined;
+    }): import("react/jsx-runtime").JSX.Element;
+    defaultProps: Partial<import("./types").BasePopoverProps>;
+};
+export default Popover;