@kaizen/components 2.0.0 → 2.0.2

package/src/__alpha__/SingleSelect/types.ts

@@ -1,10 +1,18 @@
-import { type RefObject } from 'react'
-import { type Key } from '@react-types/shared'
+import type { DOMAttributes, RefObject } from 'react'
+
+import type React from 'react'
+import { type ComboBoxState, type ComboBoxStateOptions } from '@react-stately/combobox'
+import type { ListState } from '@react-stately/list'
+import { type SelectState, type SelectStateOptions } from '@react-stately/select'
+import { type Key, type Node } from '@react-types/shared'
+import { type FocusableElement } from '@react-types/shared/src/dom'
+import type { AriaButtonProps, AriaListBoxOptions, AriaPopoverProps } from 'react-aria'
 
 // Shared types
 export type SelectItem = {
   label: string
   value: string
+  key: Key
 }
 
 export type SelectSection = {
@@ -12,23 +20,73 @@ export type SelectSection = {
   options: SelectItem[]
 }
 
-// SingleSelect related types
-export type SingleSelectProps = {
-  children?: React.ReactNode
-  items: (SelectItem | SelectSection)[]
-  onSelectionChange?: (key: Key | null) => void
+// SingleSelect
+export type SelectLabel =
+  | {
+      labelHidden: true
+      label: string
+    }
+  | {
+      labelHidden?: false
+      label: React.ReactNode
+    }
+
+export type SelectBaseProps = {
+  variant?: 'primary' | 'secondary'
+  size?: 'small' | 'medium' | 'large'
+  labelPosition?: 'top' | 'side'
+  isReadOnly?: boolean
+} & SelectLabel
+
+export type SelectProps<T extends SelectItem> = Omit<
+  SelectStateOptions<T>,
+  'label' | 'defaultFilter' | 'menuTrigger' | 'allowsCustomValue'
+> &
+  SelectBaseProps
+
+export type ComboBoxProps<T extends SelectItem> = Omit<
+  ComboBoxStateOptions<T>,
+  'label' | 'defaultFilter' | 'menuTrigger' | 'allowsCustomValue'
+> &
+  SelectBaseProps
+
+export type SingleSelectProps<T extends SelectItem> =
+  | (ComboBoxProps<T> & { isComboBox?: true })
+  | (SelectProps<T> & { isComboBox?: false })
+
+// Trigger
+export type SelectTriggerProps = {
+  triggerProps: AriaButtonProps<'button'>
+  valueProps: DOMAttributes<FocusableElement>
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null>
+}
+
+export type ComboBoxTriggerProps = {
+  inputProps: React.InputHTMLAttributes<HTMLInputElement>
+  inputRef: React.MutableRefObject<HTMLInputElement | null>
+  buttonProps: AriaButtonProps<'button'>
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null>
+  triggerWrapperRef: React.MutableRefObject<HTMLDivElement | null>
+  clearButtonRef: React.MutableRefObject<HTMLButtonElement | null>
 }
 
-// Trigger related types
-export type TriggerProps = {
-  buttonRef: React.RefObject<HTMLButtonElement>
+export type ChevronButtonProps = AriaButtonProps<'button'> & {
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null>
 }
 
-// Popover related types
-export type PopoverProps = {
-  buttonRef: React.RefObject<HTMLElement>
+export type ClearButtonProps = {
+  clearButtonRef: React.RefObject<HTMLButtonElement>
+  inputRef: React.RefObject<HTMLInputElement>
+}
+
+// Popover
+
+export type PopoverProps<T extends SelectItem> = AriaPopoverProps & {
+  state: ComboBoxState<T> | SelectState<T>
+  triggerRef: React.RefObject<HTMLElement>
   popoverRef: React.RefObject<HTMLDivElement>
-  racPopoverRef: React.Ref<any>
+  clearButtonRef?: React.RefObject<HTMLButtonElement>
+  children: React.ReactNode
 }
 
 type PositionDataProp = number | string | undefined
@@ -56,3 +114,25 @@ export type UsePopoverPositioningProps = {
   offset?: number
   preferredPlacement?: 'top' | 'bottom'
 }
+
+// List
+export type ListProps<T extends SelectItem> = {
+  state: ComboBoxState<T> | SelectState<T>
+  listBoxOptions: AriaListBoxOptions<T>
+  listBoxRef: React.RefObject<HTMLUListElement>
+}
+
+// ListItem
+export type ListItemProps<T extends SelectItem> = {
+  item: Node<T>
+  state: ListState<T>
+  selectedIcon?: 'check' | 'radio'
+  selectedPosition?: 'start' | 'end'
+  className?: string
+}
+
+// ListSection
+export type ListSectionProps<T extends SelectItem> = {
+  section: Node<T>
+  state: ComboBoxState<T> | SelectState<T>
+}

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.cjs

@@ -1,57 +0,0 @@
-'use strict';
-
-var React = require('react');
-var reactAriaComponents = require('react-aria-components');
-var Icon = require('../../../../Icon/Icon.cjs');
-var SingleSelectContext = require('../../context/SingleSelectContext.cjs');
-var Trigger_module = require('./Trigger.module.css.cjs');
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-var React__default = /*#__PURE__*/_interopDefault(React);
-function flattenItems(items) {
-  return items.flatMap(function (item) {
-    return 'options' in item ? item.options : item;
-  });
-}
-var Trigger = function (_a) {
-  var buttonRef = _a.buttonRef;
-  var _b = SingleSelectContext.useSingleSelectContext(),
-    isOpen = _b.isOpen,
-    setOpen = _b.setOpen,
-    selectedKey = _b.selectedKey,
-    items = _b.items,
-    anchorName = _b.anchorName;
-  var flattenedItems = React.useMemo(function () {
-    return flattenItems(items);
-  }, [items]);
-  var selectedLabel = React.useMemo(function () {
-    var _a;
-    var key = selectedKey;
-    var item = flattenedItems.find(function (i) {
-      return i.value === key;
-    });
-    return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : React__default.default.createElement("div", null);
-  }, [flattenedItems, selectedKey]);
-  return React__default.default.createElement("div", {
-    style: {
-      position: 'relative'
-    }
-  }, React__default.default.createElement(reactAriaComponents.Button, {
-    className: Trigger_module.button,
-    ref: buttonRef,
-    onPress: function () {
-      return setOpen(!isOpen);
-    },
-    "aria-expanded": isOpen,
-    style: {
-      '--anchor-name': anchorName
-    }
-  }, selectedLabel, React__default.default.createElement(Icon.Icon, {
-    name: "keyboard_arrow_down",
-    isPresentational: true
-  })));
-};
-exports.Trigger = Trigger;

package/dist/cjs/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "button": "Trigger-module_button__giSqA"
-};
-module.exports = styles;

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.mjs

@@ -1,49 +0,0 @@
-import React, { useMemo } from 'react';
-import { Button } from 'react-aria-components';
-import { Icon } from '../../../../Icon/Icon.mjs';
-import { useSingleSelectContext } from '../../context/SingleSelectContext.mjs';
-import styles from './Trigger.module.css.mjs';
-function flattenItems(items) {
-  return items.flatMap(function (item) {
-    return 'options' in item ? item.options : item;
-  });
-}
-var Trigger = function (_a) {
-  var buttonRef = _a.buttonRef;
-  var _b = useSingleSelectContext(),
-    isOpen = _b.isOpen,
-    setOpen = _b.setOpen,
-    selectedKey = _b.selectedKey,
-    items = _b.items,
-    anchorName = _b.anchorName;
-  var flattenedItems = useMemo(function () {
-    return flattenItems(items);
-  }, [items]);
-  var selectedLabel = useMemo(function () {
-    var _a;
-    var key = selectedKey;
-    var item = flattenedItems.find(function (i) {
-      return i.value === key;
-    });
-    return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : /*#__PURE__*/React.createElement("div", null);
-  }, [flattenedItems, selectedKey]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: styles.button,
-    ref: buttonRef,
-    onPress: function () {
-      return setOpen(!isOpen);
-    },
-    "aria-expanded": isOpen,
-    style: {
-      '--anchor-name': anchorName
-    }
-  }, selectedLabel, /*#__PURE__*/React.createElement(Icon, {
-    name: "keyboard_arrow_down",
-    isPresentational: true
-  })));
-};
-export { Trigger };

package/dist/esm/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "button": "Trigger-module_button__giSqA"
-};
-export { styles as default };

package/dist/types/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.d.ts

@@ -1,2 +0,0 @@
-import { type TriggerProps } from '../../types';
-export declare const Trigger: ({ buttonRef }: TriggerProps) => JSX.Element;

package/dist/types/__alpha__/SingleSelect/subcomponents/Trigger/index.d.ts

@@ -1 +0,0 @@
-export * from './Trigger';

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.module.css

@@ -1,19 +0,0 @@
-@layer kz-components {
-  .button {
-    anchor-name: var(--anchor-name);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-family: var(--typography-paragraph-body-font-family);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    font-size: var(--typography-paragraph-body-font-size);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
-    padding: var(--spacing-12);
-    min-height: var(--spacing-48);
-    min-width: var(--spacing-200);
-    background-color: var(--color-white);
-    border-radius: var(--spacing-8);
-    border: 1px solid var(--color-gray-500);
-  }
-}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.tsx

@@ -1,35 +0,0 @@
-import React, { useMemo } from 'react'
-import { Button as RACButton } from 'react-aria-components'
-import { Icon } from '~components/Icon'
-import { useSingleSelectContext } from '../../context'
-import { type SelectItem, type SelectSection, type TriggerProps } from '../../types'
-import styles from './Trigger.module.css'
-
-function flattenItems(items: (SelectItem | SelectSection)[]): SelectItem[] {
-  return items.flatMap((item) => ('options' in item ? item.options : item))
-}
-
-export const Trigger = ({ buttonRef }: TriggerProps): JSX.Element => {
-  const { isOpen, setOpen, selectedKey, items, anchorName } = useSingleSelectContext()
-  const flattenedItems = useMemo(() => flattenItems(items), [items])
-  const selectedLabel = useMemo(() => {
-    const key = selectedKey
-    const item = flattenedItems.find((i) => i.value === key)
-    return item?.label ?? <div></div>
-  }, [flattenedItems, selectedKey])
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <RACButton
-        className={styles.button}
-        ref={buttonRef}
-        onPress={() => setOpen(!isOpen)}
-        aria-expanded={isOpen}
-        style={{ '--anchor-name': anchorName } as React.CSSProperties}
-      >
-        {selectedLabel}
-        <Icon name="keyboard_arrow_down" isPresentational />
-      </RACButton>
-    </div>
-  )
-}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/index.ts

@@ -1 +0,0 @@
-export * from './Trigger'