@westpac/ui 0.3.0 → 0.4.0

package/.storybook/main.ts

@@ -8,6 +8,8 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-styling',
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
   ],
   framework: {
     name: '@storybook/react-vite',
@@ -18,6 +20,9 @@ const config: StorybookConfig = {
   },
   async viteFinal(config) {
     return mergeConfig(config, {
+      optimizeDeps: {
+        exclude: ['@duetds/date-picker/dist/loader'],
+      },
       define: {
         'process.env': {},
       },

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- 3182ae2: added auto complete, date picker, progress rope, panel, list, mega input, pagination and compacta
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/components/accordion/accordion.component.d.ts

@@ -24,8 +24,8 @@ declare const _Accordion: {
         default: string;
     };
 }, undefined>> & {
-    color?: "primary" | "hero" | ({
-        [x: string]: "primary" | "hero" | undefined;
+    color?: "hero" | "primary" | ({
+        [x: string]: "hero" | "primary" | undefined;
     } & string) | undefined;
     justify?: boolean | undefined;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {

package/dist/components/accordion/accordion.stories.js

@@ -27,7 +27,7 @@ const meta = {
             }, React.createElement(Story, null))
     ],
     parameters: {
-        layout: 'center'
+        layout: 'fullscreen'
     }
 };
 export default meta;

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -19,10 +19,10 @@ export const styles = tv({
         },
         color: {
             hero: {
-                itemHeader: 'border-l-5 border-l-border transition-colors'
+                itemHeader: 'border-l-[0.375rem] border-l-border transition-colors'
             },
             primary: {
-                itemHeader: 'border-l-5 border-l-border transition-colors'
+                itemHeader: 'border-l-[0.375rem] border-l-border transition-colors'
             }
         },
         isOpen: {
@@ -76,14 +76,14 @@ export const styles = tv({
                 'content'
             ],
             color: 'hero',
-            className: 'border-l-5 border-l-border'
+            className: 'border-l-[0.375rem] border-l-border'
         },
         {
             slots: [
                 'content'
             ],
             color: 'primary',
-            className: 'border-l-5 border-l-border'
+            className: 'border-l-[0.375rem] border-l-border'
         }
     ]
 }, {

package/dist/components/autocomplete/autocomplete.component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type AutocompleteProps } from './autocomplete.types.js';
+export declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, ...props }: AutocompleteProps<T>): JSX.Element;
+export declare namespace Autocomplete {
+    var Item: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
+}

package/dist/components/autocomplete/autocomplete.component.js

@@ -0,0 +1,94 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import * as React from 'react';
+import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
+import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';
+import { ClearIcon } from '../icon/index.js';
+import { styles as autocompleteStyles } from './autocomplete.styles.js';
+import { ListBox, Popover } from './components/index.js';
+export function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , ...props }) {
+    const { contains  } = useFilter({
+        sensitivity: 'base'
+    });
+    const state = useComboBoxState({
+        isDisabled,
+        ...props,
+        defaultFilter: contains
+    });
+    const inputRef = React.useRef(null);
+    const listBoxRef = React.useRef(null);
+    const popoverRef = React.useRef(null);
+    const { inputProps , listBoxProps , labelProps  } = useComboBox({
+        ...props,
+        isDisabled,
+        inputRef,
+        listBoxRef,
+        popoverRef
+    }, state);
+    const styles = autocompleteStyles({
+        isDisabled,
+        isFocused: state.isFocused,
+        size,
+        invalid
+    });
+    const searchProps = {
+        label: props.label,
+        value: state.inputValue,
+        onChange: (v)=>state.setInputValue(v)
+    };
+    const searchState = useSearchFieldState(searchProps);
+    const { clearButtonProps  } = useSearchField({
+        ...searchProps,
+        'aria-label': props['aria-label'],
+        'aria-labelledby': props['aria-labelledby']
+    }, searchState, inputRef);
+    const clearButtonRef = React.useRef(null);
+    const { buttonProps  } = useButton(clearButtonProps, clearButtonRef);
+    const outerRef = React.useRef(null);
+    return React.createElement("div", {
+        className: styles.base()
+    }, React.createElement("label", _extends({}, labelProps, {
+        className: styles.label()
+    }), props.label), React.createElement("div", {
+        ref: outerRef,
+        className: styles.outerWrapper()
+    }, React.createElement("input", _extends({}, inputProps, {
+        ref: inputRef,
+        className: styles.input()
+    })), React.createElement("button", _extends({}, buttonProps, {
+        ref: clearButtonRef,
+        style: {
+            visibility: state.inputValue !== '' ? 'visible' : 'hidden'
+        },
+        className: styles.clearButton()
+    }), React.createElement(ClearIcon, {
+        "aria-hidden": "true",
+        color: "muted",
+        size: "small"
+    }))), state.isOpen && React.createElement(Popover, {
+        popoverRef: popoverRef,
+        triggerRef: outerRef,
+        state: state,
+        isNonModal: true,
+        placement: "bottom start",
+        portalContainer: portalContainer
+    }, React.createElement(ListBox, _extends({}, listBoxProps, {
+        listBoxRef: listBoxRef,
+        state: state
+    })), footer && React.createElement("div", {
+        className: "border-t border-t-border px-3 py-2"
+    }, footer)));
+}
+Autocomplete.Item = Item;

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

@@ -0,0 +1,29 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Autocomplete } from './autocomplete.component.js';
+declare const meta: Meta<typeof Autocomplete>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Controlled usage example
+ */
+export declare const ControlledStory: Story;
+/**
+ * > Disabled usage example
+ */
+export declare const DisabledStory: Story;
+/**
+ * > Invalid usage example
+ */
+export declare const InvalidStory: Story;
+/**
+ * > Sizes example
+ */
+export declare const SizesStory: Story;
+/**
+ * > Footer example
+ */
+export declare const FooterStory: Story;

package/dist/components/autocomplete/autocomplete.stories.js

@@ -0,0 +1,200 @@
+import { useState } from 'react';
+import { Autocomplete } from './autocomplete.component.js';
+const meta = {
+    title: 'Example/Autocomplete',
+    component: Autocomplete,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "h-30 p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        'aria-label': 'Animals',
+        children: [
+            React.createElement(Autocomplete.Item, {
+                key: "red panda"
+            }, "Red Panda"),
+            React.createElement(Autocomplete.Item, {
+                key: "cat"
+            }, "Cat"),
+            React.createElement(Autocomplete.Item, {
+                key: "dog"
+            }, "Dog"),
+            React.createElement(Autocomplete.Item, {
+                key: "aardvark"
+            }, "Aardvark"),
+            React.createElement(Autocomplete.Item, {
+                key: "kangaroo"
+            }, "Kangaroo"),
+            React.createElement(Autocomplete.Item, {
+                key: "snake"
+            }, "Snake")
+        ]
+    }
+};
+export const ControlledStory = {
+    args: {},
+    render: ()=>{
+        const [selectedKey, setSelectedKey] = useState();
+        const handleSelectionChange = (key)=>{
+            setSelectedKey(key);
+        };
+        return React.createElement(Autocomplete, {
+            onSelectionChange: handleSelectionChange,
+            selectedKey: selectedKey,
+            "aria-label": "Animals"
+        }, React.createElement(Autocomplete.Item, {
+            key: "red panda"
+        }, "Red Panda"), React.createElement(Autocomplete.Item, {
+            key: "cat"
+        }, "Cat"), React.createElement(Autocomplete.Item, {
+            key: "dog"
+        }, "Dog"), React.createElement(Autocomplete.Item, {
+            key: "aardvark"
+        }, "Aardvark"), React.createElement(Autocomplete.Item, {
+            key: "kangaroo"
+        }, "Kangaroo"), React.createElement(Autocomplete.Item, {
+            key: "snake"
+        }, "Snake"));
+    }
+};
+export const DisabledStory = {
+    args: {
+        isDisabled: true,
+        'aria-label': 'Disable example',
+        children: [
+            React.createElement(Autocomplete.Item, {
+                key: "red panda"
+            }, "Red Panda"),
+            React.createElement(Autocomplete.Item, {
+                key: "cat"
+            }, "Cat"),
+            React.createElement(Autocomplete.Item, {
+                key: "dog"
+            }, "Dog"),
+            React.createElement(Autocomplete.Item, {
+                key: "aardvark"
+            }, "Aardvark"),
+            React.createElement(Autocomplete.Item, {
+                key: "kangaroo"
+            }, "Kangaroo"),
+            React.createElement(Autocomplete.Item, {
+                key: "snake"
+            }, "Snake")
+        ]
+    }
+};
+export const InvalidStory = {
+    args: {
+        invalid: true,
+        'aria-label': 'Invalid example',
+        children: [
+            React.createElement(Autocomplete.Item, {
+                key: "red panda"
+            }, "Red Panda"),
+            React.createElement(Autocomplete.Item, {
+                key: "cat"
+            }, "Cat"),
+            React.createElement(Autocomplete.Item, {
+                key: "dog"
+            }, "Dog"),
+            React.createElement(Autocomplete.Item, {
+                key: "aardvark"
+            }, "Aardvark"),
+            React.createElement(Autocomplete.Item, {
+                key: "kangaroo"
+            }, "Kangaroo"),
+            React.createElement(Autocomplete.Item, {
+                key: "snake"
+            }, "Snake")
+        ]
+    }
+};
+export const SizesStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement(React.Fragment, null, [
+            'small',
+            'medium',
+            'large',
+            'xlarge'
+        ].map((size)=>React.createElement("div", {
+                className: "py-2",
+                key: size
+            }, React.createElement(Autocomplete, {
+                label: size,
+                size: size,
+                "aria-label": `size ${size}`
+            }, React.createElement(Autocomplete.Item, {
+                key: "red panda"
+            }, "Red Panda"), React.createElement(Autocomplete.Item, {
+                key: "cat"
+            }, "Cat"), React.createElement(Autocomplete.Item, {
+                key: "dog"
+            }, "Dog"), React.createElement(Autocomplete.Item, {
+                key: "aardvark"
+            }, "Aardvark"), React.createElement(Autocomplete.Item, {
+                key: "kangaroo"
+            }, "Kangaroo"), React.createElement(Autocomplete.Item, {
+                key: "snake"
+            }, "Snake")))));
+    }
+};
+export const FooterStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "py-2"
+        }, React.createElement(Autocomplete, {
+            label: "With footer",
+            footer: React.createElement("h3", null, "Footer")
+        }, React.createElement(Autocomplete.Item, {
+            key: "red panda"
+        }, "Red Panda"), React.createElement(Autocomplete.Item, {
+            key: "cat"
+        }, "Cat"), React.createElement(Autocomplete.Item, {
+            key: "dog"
+        }, "Dog"), React.createElement(Autocomplete.Item, {
+            key: "aardvark"
+        }, "Aardvark"), React.createElement(Autocomplete.Item, {
+            key: "kangaroo"
+        }, "Kangaroo"), React.createElement(Autocomplete.Item, {
+            key: "snake"
+        }, "Snake"), React.createElement(Autocomplete.Item, {
+            key: "elephant"
+        }, "Elephant"), React.createElement(Autocomplete.Item, {
+            key: "giraffe"
+        }, "Giraffe"), React.createElement(Autocomplete.Item, {
+            key: "lion"
+        }, "Lion"), React.createElement(Autocomplete.Item, {
+            key: "tiger"
+        }, "Tiger"), React.createElement(Autocomplete.Item, {
+            key: "penguin"
+        }, "Penguin"), React.createElement(Autocomplete.Item, {
+            key: "octopus"
+        }, "Octopus"), React.createElement(Autocomplete.Item, {
+            key: "cheetah"
+        }, "Cheetah"), React.createElement(Autocomplete.Item, {
+            key: "polar bear"
+        }, "Polar Bear"), React.createElement(Autocomplete.Item, {
+            key: "koala"
+        }, "Koala"), React.createElement(Autocomplete.Item, {
+            key: "dolphin"
+        }, "Dolphin"), React.createElement(Autocomplete.Item, {
+            key: "flamingo"
+        }, "Flamingo"), React.createElement(Autocomplete.Item, {
+            key: "elephant seal"
+        }, "Elephant Seal"), React.createElement(Autocomplete.Item, {
+            key: "orca"
+        }, "Orca")));
+    }
+};

package/dist/components/autocomplete/autocomplete.styles.d.ts

@@ -0,0 +1,87 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    invalid: {
+        true: {
+            outerWrapper: string;
+        };
+        false: {
+            outerWrapper: string;
+        };
+    };
+    size: {
+        small: {
+            input: string;
+        };
+        medium: {
+            input: string;
+        };
+        large: {
+            input: string;
+        };
+        xlarge: {
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            outerWrapper: string;
+            input: string;
+        };
+        false: {};
+    };
+    isFocused: {
+        true: {
+            outerWrapper: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    label: string;
+    outerWrapper: string;
+    input: string;
+    clearButton: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    invalid: {
+        true: {
+            outerWrapper: string;
+        };
+        false: {
+            outerWrapper: string;
+        };
+    };
+    size: {
+        small: {
+            input: string;
+        };
+        medium: {
+            input: string;
+        };
+        large: {
+            input: string;
+        };
+        xlarge: {
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            outerWrapper: string;
+            input: string;
+        };
+        false: {};
+    };
+    isFocused: {
+        true: {
+            outerWrapper: string;
+        };
+        false: {};
+    };
+}, {
+    base: string;
+    label: string;
+    outerWrapper: string;
+    input: string;
+    clearButton: string;
+}>;

package/dist/components/autocomplete/autocomplete.styles.js

@@ -0,0 +1,55 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'relative flex flex-col',
+        label: 'block text-left text-sm font-medium text-text',
+        outerWrapper: 'form-control relative flex w-full flex-row items-center overflow-hidden pr-2 disabled:form-control-disabled focus:focus-outline',
+        input: 'w-full appearance-none bg-[transparent] outline-none',
+        clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60'
+    },
+    variants: {
+        invalid: {
+            true: {
+                outerWrapper: 'border-danger'
+            },
+            false: {
+                outerWrapper: 'border-borderDark'
+            }
+        },
+        size: {
+            small: {
+                input: 'form-control-small'
+            },
+            medium: {
+                input: 'form-control-medium'
+            },
+            large: {
+                input: 'form-control-large'
+            },
+            xlarge: {
+                input: 'form-control-xlarge'
+            }
+        },
+        isDisabled: {
+            true: {
+                outerWrapper: 'form-control-disabled',
+                input: 'cursor-not-allowed'
+            },
+            false: {}
+        },
+        isFocused: {
+            true: {
+                outerWrapper: 'focus-outline'
+            },
+            false: {}
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,16 @@
+import { type ComboBoxProps } from '@react-types/combobox';
+import { type AriaLabelingProps } from '@react-types/shared';
+import { type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './autocomplete.styles.js';
+import { PopoverProps } from './components/index.js';
+export type AutocompleteProps<T extends object> = {
+    /**
+     * Tag to render
+     */
+    footer?: ReactNode;
+    /**
+     * Element where the popover will be rendered, by default it will be into the body
+     */
+    portalContainer?: PopoverProps['portalContainer'];
+} & VariantProps<typeof styles> & ComboBoxProps<T> & AriaLabelingProps;

package/dist/components/autocomplete/autocomplete.types.js

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

package/dist/components/autocomplete/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './list-box/index.js';
+export * from './popover/index.js';

package/dist/components/autocomplete/components/index.js

@@ -0,0 +1,2 @@
+export * from './list-box/index.js';
+export * from './popover/index.js';

package/dist/components/autocomplete/components/list-box/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './list-box-option/index.js';
+export * from './list-box-section/index.js';

package/dist/components/autocomplete/components/list-box/components/index.js

@@ -0,0 +1,2 @@
+export * from './list-box-option/index.js';
+export * from './list-box-section/index.js';

package/dist/components/autocomplete/components/list-box/components/list-box-option/index.d.ts

@@ -0,0 +1,2 @@
+export { Option } from './list-box-option.component.js';
+export { type OptionProps } from './list-box-option.types.js';

package/dist/components/autocomplete/components/list-box/components/list-box-option/index.js

@@ -0,0 +1 @@
+export { Option } from './list-box-option.component.js';

package/dist/components/autocomplete/components/list-box/components/list-box-option/list-box-option.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Node } from '@react-types/shared';
+import { type ListState } from 'react-stately';
+interface OptionProps<T = any> {
+    item: Node<T>;
+    state: ListState<T>;
+}
+export declare function Option({ item, state }: OptionProps): JSX.Element;
+export {};

package/dist/components/autocomplete/components/list-box/components/list-box-option/list-box-option.component.js

@@ -0,0 +1,31 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import * as React from 'react';
+import { useOption } from 'react-aria';
+import { styles } from './list-box-option.styles.js';
+export function Option({ item , state  }) {
+    const ref = React.useRef(null);
+    const { optionProps , isDisabled , isSelected , isFocused  } = useOption({
+        key: item.key
+    }, state, ref);
+    return React.createElement("li", _extends({}, optionProps, {
+        ref: ref,
+        className: styles({
+            isFocused,
+            isSelected,
+            isDisabled
+        })
+    }), item.rendered);
+}

package/dist/components/autocomplete/components/list-box/components/list-box-option/list-box-option.styles.d.ts

@@ -0,0 +1,23 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isFocused: {
+        true: string;
+    };
+    isSelected: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}, undefined, "flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white", {
+    responsiveVariants: string[];
+}, {
+    isFocused: {
+        true: string;
+    };
+    isSelected: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+}, undefined>;