@westpac/ui 0.4.0 → 0.5.0

package/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx

@@ -0,0 +1,48 @@
+import React, { createContext } from 'react';
+import { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+
+import { SelectorRadioGroupOption } from './components/index.js';
+import { styles } from './selector-radio-group.styles.js';
+import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
+
+export const SelectorRadioGroupContext = createContext<SelectorRadioGroupContextState>({
+  // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
+  name: '',
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  validationState: null,
+  selectedValue: null,
+  setSelectedValue: () => null,
+  lastFocusedValue: null,
+  setLastFocusedValue: () => null,
+  orientation: 'vertical',
+});
+
+export function SelectorRadioGroup({
+  className,
+  children,
+  label,
+  orientation = 'vertical',
+  errorMessage,
+  ...props
+}: SelectorRadioGroupProps) {
+  const state = useRadioGroupState({ ...props, errorMessage, label, orientation });
+  const { radioGroupProps, labelProps, errorMessageProps } = useRadioGroup({ ...props, label, orientation }, state);
+
+  return (
+    <div className={styles({ className, orientation })} {...radioGroupProps}>
+      <span {...labelProps}>{label}</span>
+      <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
+        {children}
+      </SelectorRadioGroupContext.Provider>
+      {errorMessage && state.validationState === 'invalid' && (
+        <div {...errorMessageProps} className="typography-body-10 text-danger">
+          {errorMessage}
+        </div>
+      )}
+    </div>
+  );
+}
+SelectorRadioGroup.Option = SelectorRadioGroupOption;

package/src/components/selector/components/selector-radio-group/selector-radio-group.styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex gap-2 md:gap-3',
+    variants: {
+      orientation: {
+        vertical: 'flex-col',
+        horizontal: 'flex-row',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/selector/components/selector-radio-group/selector-radio-group.types.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes } from 'react';
+import { type AriaRadioGroupProps } from 'react-aria';
+import { type RadioGroupState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './selector-radio-group.styles.js';
+
+export type SelectorRadioGroupProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  AriaRadioGroupProps &
+  Omit<HTMLAttributes<Element>, 'onChange'>;
+
+export type SelectorRadioGroupContextState = {
+  /**
+   * Controls orientation of `Radio` components, can't be applied directly on `Radio`
+   */
+  orientation: 'vertical' | 'horizontal';
+} & RadioGroupState;

package/src/components/selector/index.ts

@@ -0,0 +1,2 @@
+export { Selector } from './selector.component.js';
+export { type SelectorProps } from './selector.types.js';

package/src/components/selector/selector.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  FlexiCellAdornment,
+  FlexiCellBody,
+  FlexiCellButton,
+  FlexiCellCircle,
+  FlexiCellFooter,
+  FlexiCellHint,
+  FlexiCellLabel,
+} from '../flexi-cell/components/index.js';
+
+import { SelectorCheckboxGroup, SelectorRadioGroup } from './components/index.js';
+import { SelectorCheckboxGroupOption } from './components/selector-checkbox-group/components/index.js';
+import { SelectorRadioGroupOption } from './components/selector-radio-group/components/index.js';
+import { type SelectorProps } from './selector.types.js';
+
+// TODO: react-aria doesn't consider the click as focus. so the focusRing will appeared just with the tab.
+export function Selector(props: SelectorProps) {
+  if (props.type === 'checkbox') {
+    return <SelectorCheckboxGroup {...props} />;
+  }
+  return <SelectorRadioGroup {...props} />;
+}
+
+Selector.Radio = SelectorRadioGroupOption;
+Selector.Checkbox = SelectorCheckboxGroupOption;
+Selector.Body = FlexiCellBody;
+Selector.Footer = FlexiCellFooter;
+Selector.Adornment = FlexiCellAdornment;
+Selector.Hint = FlexiCellHint;
+Selector.Label = FlexiCellLabel;
+Selector.Button = FlexiCellButton;
+Selector.Circle = FlexiCellCircle;