@bspk/ui 1.3.10 → 1.3.16

package/src/components/Calendar/calendar.scss

@@ -7,13 +7,9 @@
     color: var(--foreground-neutral-on-surface);
     gap: var(--spacing-sizing-01);
     background: var(--surface-neutral-t1-base);
+    border-radius: var(--radius-lg);
     padding: var(--spacing-sizing-02);
 
-    &[data-variant='elevated'] {
-        border-radius: var(--radius-lg);
-        box-shadow: var(--drop-shadow-float);
-    }
-
     [data-header] {
         display: flex;
         justify-content: space-between;
@@ -30,58 +26,68 @@
             [data-bspk='button'] {
                 font: inherit;
 
-                &[data-month] {
-                    padding-right: var(--spacing-sizing-01);
-                }
-
+                &[data-month],
                 &[data-year] {
-                    padding-left: var(--spacing-sizing-01);
+                    padding: 0;
+                    min-width: var(--spacing-sizing-12);
                 }
             }
         }
-    }
-
-    [data-day-headers] {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr);
-        text-align: center;
-        color: var(--foreground-neutral-on-surface-variant-01);
 
-        span {
-            height: var(--spacing-sizing-12);
-            line-height: var(--spacing-sizing-12);
+        [data-bspk='button'] {
+            border-radius: var(--radius-sm);
         }
     }
 
-    [data-body] {
-        display: grid;
+    table {
+        display: flex;
+        flex-direction: column;
 
-        [data-bspk='button'] {
-            margin: auto;
+        tr {
+            display: contents;
         }
 
-        [data-non-month-day] {
-            color: var(--foreground-neutral-on-surface-variant-02);
+        td,
+        th {
+            height: var(--spacing-sizing-12);
+            line-height: var(--spacing-sizing-12);
+            text-align: center;
+            border-radius: var(--radius-sm);
+            font-weight: inherit;
         }
-    }
 
-    &[data-kind='day'] {
-        padding: var(--spacing-sizing-01);
-
-        [data-body] {
+        thead {
+            display: grid;
             grid-template-columns: repeat(7, calc(100% / 7));
-        }
-    }
+            text-align: center;
 
-    &[data-kind='month'] {
-        [data-body] {
-            grid-template-columns: repeat(3, calc(100% / 3));
+            th {
+                color: var(--foreground-neutral-on-surface-variant-01);
+            }
         }
-    }
 
-    &[data-kind='year'] {
-        [data-body] {
-            grid-template-columns: repeat(4, calc(100% / 4));
+        tbody {
+            display: grid;
+            grid-template-columns: repeat(7, calc(100% / 7));
+
+            [data-non-month-day] {
+                color: var(--foreground-neutral-on-surface-variant-02);
+            }
+
+            td {
+                &:hover,
+                &:focus-visible {
+                    cursor: pointer;
+                    outline: 2px solid var(--stroke-neutral-focus);
+                    outline-offset: -2px;
+                }
+
+                &[data-selected] {
+                    background: var(--surface-brand-primary);
+                    color: var(--foreground-brand-on-primary);
+                    outline-offset: 2px;
+                }
+            }
         }
     }
 }

package/src/components/Calendar/index.tsx

@@ -1 +1,2 @@
 export * from './Calendar';
+export * from './utils';

package/src/components/Calendar/utils.tsx

@@ -0,0 +1,98 @@
+import { addDays, addMonths, format, isSameDay, parse, isValid } from 'date-fns';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+
+export const COLUMNS_COUNT = 7;
+
+export function parseDate(next: string | undefined) {
+    // don't allow parsing unless the format is approximately mm/dd/yyyy
+    if (!/^\d{1,2}\/\d{1,2}\/\d{2,4}$/.test(next || '')) return undefined;
+
+    const parsedDate = next ? parse(next, 'MM/dd/yyyy', new Date()) : undefined;
+
+    if (!isValid(parsedDate)) return undefined;
+
+    if (parsedDate && parsedDate.getFullYear() < 100) {
+        parsedDate.setFullYear(parsedDate.getFullYear() + 2000);
+    }
+
+    return parsedDate;
+}
+
+export function optionIdGenerator(baseId: string) {
+    return (date: Date) => `${baseId}-option-${format(date, 'MM-dd-yyyy')}`;
+}
+
+type Direction = 'down' | 'left' | 'right' | 'up';
+
+const DIRECTION_INCREMENT: Record<Direction, number> = {
+    // same day next week
+    down: 1 * COLUMNS_COUNT,
+    // next day
+    right: 1,
+    // same day previous week
+    up: -1 * COLUMNS_COUNT,
+    // previous day
+    left: -1,
+};
+
+export const useKeyDownCaptures = ({
+    activeDate,
+    setActiveDate,
+    rows,
+    focusActiveDay,
+}: {
+    activeDate: Date;
+    setActiveDate: (date: Date) => void;
+    rows: Date[][];
+    focusActiveDay: () => void;
+}) => {
+    const handleItemArrows = (direction: Direction) => () => {
+        const next = addDays(activeDate, DIRECTION_INCREMENT[direction]);
+        setActiveDate(next);
+        focusActiveDay();
+    };
+
+    const handleEnterOrSpace = (event: React.KeyboardEvent) => {
+        const target = event.target as HTMLElement;
+        if (target.nodeName === 'TD') target.click();
+    };
+
+    return {
+        handleKeyDownCapture: handleKeyDown(
+            {
+                ArrowDown: handleItemArrows('down'),
+                ArrowUp: handleItemArrows('up'),
+                ArrowLeft: handleItemArrows('left'),
+                ArrowRight: handleItemArrows('right'),
+                End: () => {
+                    const next = rows.find((r) => r.some((d) => isSameDay(d, activeDate)))?.[COLUMNS_COUNT - 1];
+                    if (!next || isSameDay(next, activeDate)) return;
+
+                    setActiveDate(next);
+                    focusActiveDay();
+                },
+                Home: () => {
+                    const next = rows.find((r) => r.some((d) => isSameDay(d, activeDate)))?.[0];
+                    if (!next || isSameDay(next, activeDate)) return;
+
+                    setActiveDate(next);
+                    focusActiveDay();
+                },
+                PageDown: () => {
+                    setActiveDate(addMonths(activeDate, 1));
+                    focusActiveDay();
+                },
+                PageUp: () => {
+                    setActiveDate(addMonths(activeDate, -1));
+                    focusActiveDay();
+                },
+                Space: handleEnterOrSpace,
+                Enter: handleEnterOrSpace,
+            },
+            {
+                preventDefault: true,
+                stopPropagation: true,
+            },
+        ),
+    };
+};

package/src/components/Card/Card.tsx

@@ -35,7 +35,7 @@ export type CardProps = {
  *     </Card>;
  *
  * @name Card
- * @phase UXReview
+ * @phase Stable
  */
 export function Card({ children, variant = 'elevated', innerRef, ...props }: ElementProps<CardProps, 'div'>) {
     return (

package/src/components/Carousel/Carousel.tsx

@@ -52,17 +52,17 @@ export type CarouselProps = {
  *     import { Carousel } from '@bspk/ui/Carousel';
  *
  *     <Carousel label="Example Carousel" width="1/2">
- *         <div>child 1</div>
- *         <div>child 2</div>
- *         <div>child 3</div>
- *         <div>child 4</div>
- *         <div>child 5</div>
- *         <div>child 6</div>
- *         <div>child 7</div>
+ *         <ExamplePlaceholder>Slide 1</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 2</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 3</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 4</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 5</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 6</ExamplePlaceholder>
+ *         <ExamplePlaceholder>Slide 7</ExamplePlaceholder>
  *     </Carousel>;
  *
  * @name Carousel
- * @phase UXReview
+ * @phase Stable
  */
 
 export function Carousel({

package/src/components/Carousel/carousel.scss

@@ -9,7 +9,6 @@
     align-items: center;
     width: 100%;
     position: relative;
-    background: #fff;
     gap: var(--spacing-sizing-02);
 
     [data-items-container] {

package/src/components/Checkbox/Checkbox.tsx

@@ -60,7 +60,7 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  * @element
  *
  * @name Checkbox
- * @phase UXReview
+ * @phase Stable
  */
 export function Checkbox({
     checked: checkedProp = false,

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -63,7 +63,7 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
  *     };
  *
  * @name CheckboxGroup
- * @phase UXReview
+ * @phase Stable
  */
 export function CheckboxGroup({
     onChange,

package/src/components/CheckboxGroupField/CheckboxGroupField.tsx

@@ -10,7 +10,7 @@ export type CheckboxGroupFieldProps = FormFieldControlProps<CheckboxGroupProps>;
  * This component takes properties from the FormField and CheckboxGroup components.
  *
  * @name CheckboxGroupField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/src/components/CheckboxOption/CheckboxOption.tsx

@@ -30,7 +30,7 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  *     };
  *
  * @name CheckboxOption
- * @phase UXReview
+ * @phase Stable
  */
 export function CheckboxOption({
     label: labelProp,

package/src/components/Chip/Chip.tsx

@@ -68,7 +68,7 @@ export type ChipProps = {
  *     </Chip>;
  *
  * @name Chip
- * @phase UXReview
+ * @phase Stable
  */
 export function Chip({
     flat = false,

package/src/components/ChipGroup/ChipGroup.rtl.test.tsx

@@ -1,6 +1,5 @@
 import { ChipGroup } from './ChipGroup';
 import { presets } from './ChipGroupExample';
-import { Chip } from '-/components/Chip';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
@@ -9,22 +8,28 @@ describe('ChipGroup (RTL)', () => {
         it(
             `has no basic a11y issues - ${preset.label}`,
             hasNoBasicA11yIssues(
-                <ChipGroup {...preset.propState}>
-                    <Chip label="suggestion 1" onClick={() => {}} />
-                    <Chip label="suggestion 2" onClick={() => {}} />
-                    <Chip label="suggestion 3" onClick={() => {}} />
-                </ChipGroup>,
+                <ChipGroup
+                    {...preset.propState}
+                    items={[
+                        { label: 'suggestion 1', onClick: () => {} },
+                        { label: 'suggestion 2', onClick: () => {} },
+                        { label: 'suggestion 3', onClick: () => {} },
+                    ]}
+                />,
             ),
         );
     });
 
     it('renders', () => {
         const { getByText } = render(
-            <ChipGroup {...presets[1].propState}>
-                <Chip label="suggestion 1" onClick={() => {}} />
-                <Chip label="suggestion 2" onClick={() => {}} />
-                <Chip label="suggestion 3" onClick={() => {}} />
-            </ChipGroup>,
+            <ChipGroup
+                {...presets[1].propState}
+                items={[
+                    { label: 'suggestion 1', onClick: () => {} },
+                    { label: 'suggestion 2', onClick: () => {} },
+                    { label: 'suggestion 3', onClick: () => {} },
+                ]}
+            />,
         );
 
         expect(getByText('suggestion 1')).toBeInTheDocument();

package/src/components/ChipGroup/ChipGroup.tsx

@@ -1,23 +1,17 @@
 import './chip-group.scss';
 
-import { ReactNode } from 'react';
-
-import { ChipProps } from '-/components/Chip';
-
-export type ChipGroupItem = Pick<
-    ChipProps,
-    'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'
->;
+import { Chip, ChipProps } from '-/components/Chip';
 
 export type ChipGroupProps = {
     /**
-     * To allow chips to wrap. If set to false chips will scroll.
+     * Controls the overflow behavior of the chip group. If set to `scroll`, the chip group will be scrollable
+     * horizontally. If set to `wrap`, the chip group will wrap to multiple lines as needed.
      *
-     * @default true
+     * @default wrap
      */
-    wrap?: boolean;
-    /** Only Chip components should be used as children. */
-    children?: ReactNode;
+    overflow?: 'scroll' | 'wrap';
+    /** Only Chip components should be used as items. */
+    items?: ChipProps[];
 };
 /**
  * A component that manages the layout of a group of chips.
@@ -26,34 +20,22 @@ export type ChipGroupProps = {
  *     import { Chip } from '@bspk/ui/Chip';
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     <ChipGroup wrap={false}>
- *         <Chip
- *             label="chip 1"
- *             leadingIcon={<SvgLightbulb />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 2"
- *             leadingIcon={<SvgIcecream />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 3"
- *             leadingIcon={<SvgSignLanguage />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgClose />}
- *         />
- *     </ChipGroup>;
+ *     <ChipGroup
+ *         overflow="scroll"
+ *         items={[
+ *             { label: 'chip 1', leadingIcon: <SvgLightbulb />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 2', leadingIcon: <SvgIcecream />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 3', leadingIcon: <SvgSignLanguage />, onClick: () => {}, trailingIcon: <SvgClose /> },
+ *         ]}
+ *     />;
  *
  * @name ChipGroup
- * @phase UXReview
+ * @phase Stable
  */
-export function ChipGroup({ children, wrap = true }: ChipGroupProps) {
+export function ChipGroup({ overflow = 'wrap', items }: ChipGroupProps) {
     return (
-        <div data-bspk="chip-group" data-wrap={wrap || undefined}>
-            {children}
+        <div data-bspk="chip-group" data-scroll={overflow === 'scroll' || undefined}>
+            {items?.length ? items.map((item, idx) => <Chip {...item} key={item.label ?? idx} />) : null}
         </div>
     );
 }

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -7,53 +7,81 @@ import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
 
-import { Chip } from '-/components/Chip';
+// import { Chip } from '-/components/Chip';
 import { ChipGroupProps } from '-/components/ChipGroup';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 export const presets: Preset<ChipGroupProps>[] = [
-    { label: 'scroll', propState: { wrap: false } },
-    { label: 'wrap', propState: { wrap: true } },
+    {
+        label: 'Scroll',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                { label: 'chip 1', leadingIcon: <SvgLightbulb />, trailingIcon: <SvgChevronRight /> },
+                { label: 'chip 2', leadingIcon: <SvgIcecream />, trailingIcon: <SvgChevronRight /> },
+                { label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+                { label: 'chip 4', leadingIcon: <SvgOpportunities />, trailingIcon: <SvgClose /> },
+                { label: 'chip 5', leadingIcon: <SvgCloud />, trailingIcon: <SvgKeyboardArrowDown /> },
+            ],
+        },
+    },
+    {
+        label: 'Scroll: Flat chips',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                {
+                    flat: true,
+                    label: 'chip 1',
+                    leadingIcon: <SvgLightbulb />,
+                    trailingBadge: { count: 9, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 2',
+                    leadingIcon: <SvgIcecream />,
+                    trailingBadge: { count: 2, size: 'x-small' },
+                },
+                { flat: true, label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+                {
+                    flat: true,
+                    label: 'chip 4',
+                    leadingIcon: <SvgOpportunities />,
+                    trailingBadge: { count: 5, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 5',
+                    leadingIcon: <SvgCloud />,
+                    trailingBadge: { count: 3, size: 'x-small' },
+                },
+            ],
+        },
+    },
 ];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
     containerStyle: { width: '600px' },
     presets,
+    defaultState: {
+        overflow: 'wrap',
+        items: [
+            { label: 'chip 1', leadingIcon: <SvgLightbulb />, trailingIcon: <SvgChevronRight /> },
+            { label: 'chip 2', leadingIcon: <SvgIcecream />, trailingIcon: <SvgChevronRight /> },
+            { label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+            { label: 'chip 4', leadingIcon: <SvgOpportunities />, trailingIcon: <SvgClose /> },
+            { label: 'chip 5', leadingIcon: <SvgCloud />, trailingIcon: <SvgKeyboardArrowDown /> },
+        ],
+    },
     render: ({ props, Component }) => {
-        const handleChipInputClick = () => action('Chip clicked!');
         return (
-            <Component {...props}>
-                <Chip
-                    label="chip 1"
-                    leadingIcon={<SvgLightbulb />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgChevronRight />}
-                />
-                <Chip
-                    label="chip 2"
-                    leadingIcon={<SvgIcecream />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgChevronRight />}
-                />
-                <Chip
-                    label="chip 3"
-                    leadingIcon={<SvgSignLanguage />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgClose />}
-                />
-                <Chip
-                    label="chip 4"
-                    leadingIcon={<SvgOpportunities />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgClose />}
-                />
-                <Chip
-                    label="chip 5"
-                    leadingIcon={<SvgCloud />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgKeyboardArrowDown />}
-                />
-            </Component>
+            <Component
+                {...props}
+                items={props.items?.map((item) => ({
+                    ...item,
+                    onClick: () => action('Chip clicked!'),
+                }))}
+            />
         );
     },
 });

package/src/components/ChipGroup/chip-group.scss

@@ -2,10 +2,12 @@
     display: flex;
     gap: var(--spacing-sizing-02);
     width: 100%;
-    overflow: auto;
+    flex-flow: row wrap;
+    padding-bottom: var(--spacing-sizing-01);
 
-    &[data-wrap] {
-        flex-flow: row wrap;
+    &[data-scroll] {
+        overflow: auto;
+        flex-wrap: nowrap;
     }
 }
 

package/src/components/DatePicker/DatePicker.rtl.test.tsx

@@ -3,7 +3,7 @@ import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
 const TestBed = () => (
-    <DatePicker name="calendar input" onChange={() => {}} placeholder="Select Date" value={new Date()} />
+    <DatePicker name="calendar input" onChange={() => {}} placeholder="Select Date" value="06/03/1985" />
 );
 
 describe('DatePicker', () => {