@saleor/macaw-ui 0.7.3 → 0.7.4

package/dist/components/ExperimentalFilters/operators.d.ts

@@ -0,0 +1,11 @@
+import { ComboboxOperator, DateOperator, DateTimeOperator, InputOperator, MultiselectOperator, NumberRangeOperator, SelectOperator, SelectedOperator } from "./types";
+export declare const isTextInput: (value: SelectedOperator) => value is InputOperator;
+export declare const isNumberInput: (value: SelectedOperator) => value is InputOperator;
+export declare const isMultiselect: (value: SelectedOperator) => value is MultiselectOperator;
+export declare const isCombobox: (value: SelectedOperator) => value is ComboboxOperator;
+export declare const isSelect: (value: SelectedOperator) => value is SelectOperator;
+export declare const isNumberRange: (value: SelectedOperator) => value is NumberRangeOperator;
+export declare const isDate: (value: SelectedOperator) => value is DateOperator;
+export declare const isDateTime: (value: SelectedOperator) => value is DateTimeOperator;
+export declare const isDateRange: (value: SelectedOperator) => value is DateOperator;
+export declare const isDateTimeRange: (value: SelectedOperator) => value is DateTimeOperator;

package/dist/components/ExperimentalFilters/types.d.ts

@@ -0,0 +1,152 @@
+import { Option, RangeValue } from "..";
+export type DisabledScope = "left" | "right" | "condition";
+export type RightOperatorOption = Option & {
+    slug: string;
+};
+export type LeftOperatorOption = Option & {
+    type: string;
+};
+export type ConditionOption<T extends string> = Option & {
+    type: T;
+};
+export type Error = {
+    row: number;
+    leftText?: string;
+    conditionText?: string;
+    rightText?: string;
+};
+type ConditionOptionTypes = ConditionOption<"text" | "number" | "multiselect" | "combobox" | "select" | "number.range" | "date" | "datetime" | "date.range" | "datetime.range">;
+export type Row = {
+    value: {
+        label: string;
+        value: string;
+        type: string;
+    } | null;
+    loading?: boolean;
+    constraint?: {
+        dependsOn: string[];
+        disabled?: DisabledScope[];
+        removable?: boolean;
+    };
+    condition: {
+        loading?: boolean;
+        options: Array<ConditionOptionTypes>;
+        selected: SelectedOperator;
+    };
+};
+export type SelectedOperator = InputOperator | MultiselectOperator | ComboboxOperator | SelectOperator | NumberRangeOperator | DateOperator | DateTimeOperator | DateRangeOperator | DateTimeRangeOperator;
+export type InputOperator = {
+    value: string;
+    conditionValue: ConditionOption<"text" | "number"> | null;
+};
+export type MultiselectOperator = {
+    value: RightOperatorOption[];
+    conditionValue: ConditionOption<"multiselect"> | null;
+    options: Array<RightOperatorOption>;
+    loading?: boolean;
+};
+export type ComboboxOperator = {
+    value: RightOperatorOption;
+    conditionValue: ConditionOption<"combobox"> | null;
+    options: Array<RightOperatorOption>;
+    loading?: boolean;
+};
+export type SelectOperator = {
+    value: RightOperatorOption;
+    conditionValue: ConditionOption<"select"> | null;
+    options: Array<RightOperatorOption>;
+};
+export type NumberRangeOperator = {
+    value: RangeValue;
+    conditionValue: ConditionOption<"number.range"> | null;
+};
+export type DateOperator = {
+    value: string;
+    conditionValue: ConditionOption<"date"> | null;
+};
+export type DateTimeOperator = {
+    value: string;
+    conditionValue: ConditionOption<"datetime"> | null;
+};
+export type DateRangeOperator = {
+    value: RangeValue;
+    conditionValue: ConditionOption<"date.range"> | null;
+};
+export type DateTimeRangeOperator = {
+    value: RangeValue;
+    conditionValue: ConditionOption<"datetime.range"> | null;
+};
+export interface FilterEvent extends Event {
+    detail?: RowAddData | RowRemoveData | LeftOperatorChangeData | LeftOperatorFocusData | LeftOperatorBlurData | LeftOperatorInputValueChangeData | ConditionChangeData | ConditionFocusData | ConditionBlurData | RightOperatorChangeData | RightOperatorFocusData | RightOperatorBlurData | RightOperatorInputValueChangeData;
+}
+export type RowAddData = {
+    type: "row.add";
+    rowType: string;
+};
+export type RowRemoveData = {
+    type: "row.remove";
+    path: `${number}`;
+    index: number;
+};
+export type LeftOperatorChangeData = {
+    type: "leftOperator.onChange";
+    path: `${number}`;
+    index: number;
+    value: LeftOperatorOption;
+    rowType: string;
+};
+export type LeftOperatorFocusData = {
+    type: "leftOperator.onFocus";
+    path: `${number}`;
+    index: number;
+};
+export type LeftOperatorBlurData = {
+    type: "leftOperator.onBlur";
+    path: `${number}`;
+    index: number;
+};
+export type LeftOperatorInputValueChangeData = {
+    type: "leftOperator.onInputValueChange";
+    path: `${number}`;
+    index: number;
+    value: string;
+};
+export type ConditionChangeData = {
+    type: "condition.onChange";
+    path: `${number}.condition.selected`;
+    index: number;
+    value: ConditionOptionTypes;
+};
+export type ConditionFocusData = {
+    type: "condition.onFocus";
+    path: `${number}.condition.selected`;
+    index: number;
+};
+export type ConditionBlurData = {
+    type: "condition.onBlur";
+    path: `${number}.condition.selected`;
+    index: number;
+};
+export type RightOperatorChangeData = {
+    type: "rightOperator.onChange";
+    path: `${number}.condition.selected.value`;
+    index: number;
+    value: string | RightOperatorOption[] | RightOperatorOption | RangeValue;
+};
+export type RightOperatorFocusData = {
+    type: "rightOperator.onFocus";
+    path: `${number}.condition.selected.value`;
+    index: number;
+};
+export type RightOperatorBlurData = {
+    type: "rightOperator.onBlur";
+    path: `${number}.condition.selected.value`;
+    index: number;
+};
+export type RightOperatorInputValueChangeData = {
+    type: "rightOperator.onInputValueChange";
+    path: `${number}.condition.selected.value`;
+    index: number;
+    value: string;
+};
+export {};

package/dist/components/ExperimentalFilters/useEvents.d.ts

@@ -0,0 +1,9 @@
+import { FilterEvent } from "./types";
+import { FilterEventEmitter } from "./EventEmitter";
+type UseEventsProps = {
+    onChange?: (event: FilterEvent["detail"]) => void;
+};
+export declare const useEventEmitter: ({ onChange }: UseEventsProps) => {
+    emitter: FilterEventEmitter;
+};
+export {};

package/dist/components/Expression/AutosizeInput/index.d.ts

@@ -0,0 +1,23 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface CalculationChange {
+    left: number;
+    rect: DOMRect;
+}
+type AutosizeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "width" | "height" | "size"> & {
+    value?: string;
+    defaultWidth?: number;
+    onCalculationChange?: ({ left, rect }: CalculationChange) => void;
+};
+interface InputContainerProps {
+    children: ReactNode;
+    focused?: boolean;
+}
+export declare const InputContainer: {
+    ({ children, focused, }: InputContainerProps): JSX.Element;
+    displayName: string;
+};
+export declare const AutosizeInput: {
+    ({ value, placeholder, defaultWidth, onChange, onCalculationChange, type, ...props }: AutosizeInputProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Expression/AutosizeInput/useTextMetrics.d.ts

@@ -0,0 +1,5 @@
+import { MutableRefObject } from "react";
+export declare const useTextMetrics: (elementRef: MutableRefObject<HTMLElement | undefined>) => {
+    measureText: (text: string) => number;
+    measureTextWithPaddings: (text: string) => number;
+};

package/dist/components/Expression/Condition.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { DropdownItemProps } from "./Dropdown";
+export interface ConditionItemProps extends Omit<DropdownItemProps, "condition"> {
+    children: React.ReactNode;
+}
+export declare const ConditionItem: import("react").ForwardRefExoticComponent<ConditionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ConditionProps {
+    currentConditon: string;
+    children: React.ReactNode;
+}
+export declare const Condition: {
+    ({ children, currentConditon }: ConditionProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/Expression/Dropdown.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode, MouseEvent, ComponentProps } from "react";
+import { Box } from "../Box";
+type DropdownContentProps = ComponentProps<typeof Box> & {
+    children: ReactNode;
+    absolute?: boolean;
+};
+export declare const DropdownContent: import("react").ForwardRefExoticComponent<Pick<DropdownContentProps, "fontSize" | "borderRadius" | "lineHeight" | "fontWeight" | "letterSpacing" | "boxShadow" | "borderWidth" | "size" | "alignItems" | "alignSelf" | "aspectRatio" | "backgroundColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftStyle" | "borderLeftWidth" | "borderRightStyle" | "borderRightWidth" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "columnGap" | "content" | "cursor" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoFlow" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifySelf" | "left" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "opacity" | "order" | "outlineStyle" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "transform" | "translate" | "visibility" | "whiteSpace" | "width" | "wordBreak" | "zIndex" | "borderColor" | "borderStyle" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "transition" | "fill" | "stroke" | "src" | "children" | "value" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "id" | "start" | "hidden" | "default" | "wrap" | "absolute" | "open" | "multiple" | "disabled" | "paddingX" | "paddingY" | "marginX" | "marginY" | "typeSize" | "borderXWidth" | "borderYWidth" | "borderXStyle" | "borderYStyle" | "placeholder" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "__fontSize" | "__borderRadius" | "__lineHeight" | "__fontWeight" | "__letterSpacing" | "__boxShadow" | "__borderWidth" | "__alignItems" | "__alignSelf" | "__aspectRatio" | "__backgroundColor" | "__borderBottomLeftRadius" | "__borderBottomRightRadius" | "__borderBottomStyle" | "__borderBottomWidth" | "__borderLeftStyle" | "__borderLeftWidth" | "__borderRightStyle" | "__borderRightWidth" | "__borderTopLeftRadius" | "__borderTopRightRadius" | "__borderTopStyle" | "__borderTopWidth" | "__bottom" | "__color" | "__columnGap" | "__cursor" | "__display" | "__flexBasis" | "__flexDirection" | "__flexGrow" | "__flexShrink" | "__flexWrap" | "__gridAutoFlow" | "__gridColumnEnd" | "__gridColumnStart" | "__gridRowEnd" | "__gridRowStart" | "__gridTemplateAreas" | "__gridTemplateColumns" | "__gridTemplateRows" | "__height" | "__justifyContent" | "__justifySelf" | "__left" | "__listStyleImage" | "__listStylePosition" | "__listStyleType" | "__marginBottom" | "__marginLeft" | "__marginRight" | "__marginTop" | "__maxHeight" | "__maxWidth" | "__minHeight" | "__minWidth" | "__objectFit" | "__opacity" | "__order" | "__outlineStyle" | "__overflowX" | "__overflowY" | "__paddingBottom" | "__paddingLeft" | "__paddingRight" | "__paddingTop" | "__pointerEvents" | "__position" | "__right" | "__rowGap" | "__textAlign" | "__textOverflow" | "__textTransform" | "__top" | "__transform" | "__visibility" | "__whiteSpace" | "__width" | "__wordBreak" | "__zIndex" | "__borderColor" | "__borderStyle" | "__flex" | "__gap" | "__gridArea" | "__gridColumn" | "__gridRow" | "__inset" | "__margin" | "__overflow" | "__padding" | "__placeItems" | "__textDecoration" | "__transition" | "__fill" | "__stroke" | "__paddingX" | "__paddingY" | "__marginX" | "__marginY" | "__typeSize" | "__borderXWidth" | "__borderYWidth" | "__borderXStyle" | "__borderYStyle" | "key"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownItemProps {
+    children: ReactNode;
+    onClick?: (event: MouseEvent) => void;
+    condition?: boolean;
+}
+export declare const DropdownItem: import("react").ForwardRefExoticComponent<DropdownItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownProps {
+    children: ReactNode;
+    triggerText?: string;
+    variant: "operand" | "condition";
+}
+export declare const Dropdown: {
+    ({ children, triggerText, variant }: DropdownProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Expression/Expression.css.d.ts

@@ -0,0 +1,37 @@
+export declare const dropdownContent: import("@vanilla-extract/recipes").RuntimeFn<{
+    absolute: {
+        true: string;
+        false: {};
+    };
+}>;
+export declare const dropdownContentScroller: string;
+export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    condition: {
+        true: string;
+        false: string;
+    };
+}>;
+export declare const dropdownTrigger: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        operand: string;
+        condition: string;
+    };
+    opened: {
+        true: string;
+    };
+}>;
+export declare const inputContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    focused: {
+        true: string;
+    };
+}>;
+export declare const input: import("@vanilla-extract/recipes").RuntimeFn<{
+    isNumber: {
+        true: string;
+    };
+}>;
+export declare const numberInputSign: string;
+export declare const autocompleteContainer: string;
+export declare const autocompleteInput: string;
+export declare const rangeItem: string;
+export declare const expression: string;

package/dist/components/Expression/Expression.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Expression } from "./index";
+declare const meta: Meta<typeof Expression>;
+export default meta;
+type Story = StoryObj<typeof Expression>;
+export declare const Primary: Story;
+export declare const AutocompletionOperand: Story;
+export declare const TextOperand: Story;
+export declare const NumberOperand: Story;
+export declare const NumberRangeOperand: Story;