@bspk/ui 1.1.34 → 1.3.0

package/dist/components/SegmentedControl/SegmentedControlExample.js

@@ -4,34 +4,64 @@ import { SvgDiamond } from '@bspk/icons/Diamond';
 import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
 import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
-export const SegmentedControlExample = {
-    containerStyle: { width: '100%' },
-    presets: [
-        {
+const PRESET_OPTIONS = [
+    {
+        value: '1',
+        label: 'Option 1',
+        icon: _jsx(SvgDiamond, {}),
+        iconSelected: _jsx(SvgDiamondFill, {}),
+    },
+    {
+        value: '2',
+        label: 'Disabled 2',
+        disabled: true,
+        icon: _jsx(SvgCircle, {}),
+    },
+    {
+        value: '3',
+        label: 'Option 3',
+        icon: _jsx(SvgSquare, {}),
+        iconSelected: _jsx(SvgSquareFill, {}),
+    },
+];
+export const presets = [
+    {
+        label: 'With icons',
+        propState: {
+            options: PRESET_OPTIONS,
+            iconsOnly: undefined,
             label: 'With icons',
-            propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: _jsx(SvgDiamond, {}),
-                        iconActive: _jsx(SvgDiamondFill, {}),
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: _jsx(SvgCircle, {}),
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: _jsx(SvgSquare, {}),
-                        iconActive: _jsx(SvgSquareFill, {}),
-                    },
-                ],
-            },
+            value: '1',
+        },
+    },
+    {
+        label: 'Icons only',
+        propState: {
+            label: 'Icons only',
+            value: '1',
+            options: PRESET_OPTIONS,
+            iconsOnly: true,
         },
-    ],
+    },
+    {
+        label: 'Long label text',
+        propState: {
+            label: 'Long label text',
+            value: '1',
+            iconsOnly: undefined,
+            options: PRESET_OPTIONS.map((option) => ({
+                ...option,
+                label: `${option.label} with a very long label text that should be truncated if it exceeds the width of the control`,
+            })),
+        },
+    },
+];
+export const SegmentedControlExample = {
+    containerStyle: { width: '100%', overflow: 'auto', alignItems: 'start' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
+    presets,
+    variants: false,
 };
 //# sourceMappingURL=SegmentedControlExample.js.map

package/dist/components/SegmentedControl/SegmentedControlExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlExample.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControlExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMvD,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,UAAU,KAAG;wBACpB,UAAU,EAAE,KAAC,cAAc,KAAG;qBACjC;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,KAAC,SAAS,KAAG;qBACtB;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,UAAU,EAAE,KAAC,aAAa,KAAG;qBAChC;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"SegmentedControlExample.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControlExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAKvD,MAAM,cAAc,GAA6B;IAC7C;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,UAAU,KAAG;QACpB,YAAY,EAAE,KAAC,cAAc,KAAG;KACnC;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,KAAC,SAAS,KAAG;KACtB;IACD;QACI,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,KAAC,SAAS,KAAG;QACnB,YAAY,EAAE,KAAC,aAAa,KAAG;KAClC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAoC;IACpD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,GAAG;SACb;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,GAAG;YACV,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE,IAAI;SAClB;KACJ;IACD;QACI,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE;YACP,KAAK,EAAE,iBAAiB;YACxB,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,SAAS;YACpB,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gBACrC,GAAG,MAAM;gBACT,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,8FAA8F;aACvH,CAAC,CAAC;SACN;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE;IACxE,YAAY,EAAE;QACV,OAAO,EAAE,cAAc;KAC1B;IACD,OAAO;IACP,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/SegmentedControl/segmented-control.css

@@ -1,90 +1,43 @@
-[data-bspk=segmented-control] {
-  display: flex;
-  flex-direction: row;
-  max-width: 100%;
-  overflow: scroll;
-  --outer-height: var(--spacing-sizing-10);
-  --inner-height: var(--spacing-sizing-08);
-  --svg-width: 20px;
+ul[data-bspk=segmented-control] {
+  background: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-sizing-01);
+  --padding: var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
+ul[data-bspk=segmented-control][data-width=fill] {
   margin: 0 var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=hug] {
-  width: fit-content;
-  --btn-flex-grow: 0;
+ul[data-bspk=segmented-control][data-size=small] {
+  --padding: var(--spacing-sizing-03);
 }
-[data-bspk=segmented-control][data-size=small] {
-  --outer-height: var(--spacing-sizing-08);
-  --inner-height: var(--spacing-sizing-06);
-  --svg-width: 16px;
+ul[data-bspk=segmented-control][data-size=large] {
+  --padding: var(--spacing-sizing-05);
 }
-[data-bspk=segmented-control] svg {
-  width: var(--svg-width) !important;
-}
-[data-bspk=segmented-control] button {
-  border: 0;
-  cursor: pointer;
-  color: var(--foreground-neutral-on-surface);
-  flex-grow: var(--btn-flex-grow);
-  font: var(--labels-small);
-  margin: 0;
-  height: var(--spacing-sizing-12);
-  background: transparent;
-  position: relative;
-  white-space: nowrap;
-}
-[data-bspk=segmented-control] button [data-focus-ring] {
-  display: none;
+ul[data-bspk=segmented-control]:focus-within li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover {
+  background: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=segmented-control] button [data-outer] {
-  height: var(--outer-height);
-  background: var(--surface-neutral-t3-low);
-  margin: var(--spacing-sizing-01) 0;
-  padding: var(--spacing-sizing-01) 0;
-  display: block;
+ul[data-bspk=segmented-control]:focus-within li[aria-selected=true][data-active]:not([aria-disabled]), ul[data-bspk=segmented-control] li[aria-selected=true]:not([aria-disabled]):hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=segmented-control] button [data-inner] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: var(--inner-height);
-  border-bottom: 1px solid transparent;
-  justify-content: center;
-  gap: var(--spacing-sizing-01);
+ul[data-bspk=segmented-control] li {
+  color: var(--foreground-neutral-on-surface);
+  padding: 0 var(--padding);
   border-radius: var(--radius-sm);
-  padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
-}
-[data-bspk=segmented-control] button:first-of-type [data-outer] {
-  border-top-left-radius: var(--radius-md);
-  border-bottom-left-radius: var(--radius-md);
-  padding-left: var(--spacing-sizing-01);
-}
-[data-bspk=segmented-control] button:last-of-type [data-outer] {
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-  padding-right: var(--spacing-sizing-01);
 }
-[data-bspk=segmented-control] button:not(:disabled):hover [data-inner] {
-  background: var(--interactions-neutral-hover-opacity);
+ul[data-bspk=segmented-control] li:has([data-icon]) {
+  padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
 }
-[data-bspk=segmented-control] button:not(:disabled):active [data-inner] {
-  background: var(--interactions-neutral-press-opacity);
+ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
+  padding-right: var(--padding);
 }
-[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner] {
+ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected=true] {
   background: var(--surface-neutral-t1-base);
+  box-shadow: 0 0 1px 0 var(--shadow-variant-03), 0 1px 1px 0 var(--shadow-variant-05);
 }
-[data-bspk=segmented-control] button:not(:disabled):focus-visible {
-  z-index: 2;
-  outline: solid 2px var(--stroke-neutral-focus);
+ul[data-bspk=segmented-control] li:not([aria-disabled]):active {
+  background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=segmented-control] button:disabled {
-  pointer-events: none;
+ul[data-bspk=segmented-control] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
   cursor: not-allowed;
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SegmentedControl/segmented-control.css.js

@@ -1,96 +1,48 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=segmented-control] {
-  display: flex;
-  flex-direction: row;
-  max-width: 100%;
-  overflow: scroll;
-  --outer-height: var(--spacing-sizing-10);
-  --inner-height: var(--spacing-sizing-08);
-  --svg-width: 20px;
+style.appendChild(document.createTextNode(`ul[data-bspk=segmented-control] {
+  background: var(--surface-neutral-t3-low);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-sizing-01);
+  --padding: var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
+ul[data-bspk=segmented-control][data-width=fill] {
   margin: 0 var(--spacing-sizing-04);
 }
-[data-bspk=segmented-control][data-width=hug] {
-  width: fit-content;
-  --btn-flex-grow: 0;
+ul[data-bspk=segmented-control][data-size=small] {
+  --padding: var(--spacing-sizing-03);
 }
-[data-bspk=segmented-control][data-size=small] {
-  --outer-height: var(--spacing-sizing-08);
-  --inner-height: var(--spacing-sizing-06);
-  --svg-width: 16px;
+ul[data-bspk=segmented-control][data-size=large] {
+  --padding: var(--spacing-sizing-05);
 }
-[data-bspk=segmented-control] svg {
-  width: var(--svg-width) !important;
-}
-[data-bspk=segmented-control] button {
-  border: 0;
-  cursor: pointer;
-  color: var(--foreground-neutral-on-surface);
-  flex-grow: var(--btn-flex-grow);
-  font: var(--labels-small);
-  margin: 0;
-  height: var(--spacing-sizing-12);
-  background: transparent;
-  position: relative;
-  white-space: nowrap;
-}
-[data-bspk=segmented-control] button [data-focus-ring] {
-  display: none;
+ul[data-bspk=segmented-control]:focus-within li:not([aria-disabled])[data-active], ul[data-bspk=segmented-control] li:not([aria-disabled]):hover {
+  background: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=segmented-control] button [data-outer] {
-  height: var(--outer-height);
-  background: var(--surface-neutral-t3-low);
-  margin: var(--spacing-sizing-01) 0;
-  padding: var(--spacing-sizing-01) 0;
-  display: block;
+ul[data-bspk=segmented-control]:focus-within li[aria-selected=true][data-active]:not([aria-disabled]), ul[data-bspk=segmented-control] li[aria-selected=true]:not([aria-disabled]):hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=segmented-control] button [data-inner] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: var(--inner-height);
-  border-bottom: 1px solid transparent;
-  justify-content: center;
-  gap: var(--spacing-sizing-01);
+ul[data-bspk=segmented-control] li {
+  color: var(--foreground-neutral-on-surface);
+  padding: 0 var(--padding);
   border-radius: var(--radius-sm);
-  padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
-}
-[data-bspk=segmented-control] button:first-of-type [data-outer] {
-  border-top-left-radius: var(--radius-md);
-  border-bottom-left-radius: var(--radius-md);
-  padding-left: var(--spacing-sizing-01);
-}
-[data-bspk=segmented-control] button:last-of-type [data-outer] {
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-  padding-right: var(--spacing-sizing-01);
 }
-[data-bspk=segmented-control] button:not(:disabled):hover [data-inner] {
-  background: var(--interactions-neutral-hover-opacity);
+ul[data-bspk=segmented-control] li:has([data-icon]) {
+  padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
 }
-[data-bspk=segmented-control] button:not(:disabled):active [data-inner] {
-  background: var(--interactions-neutral-press-opacity);
+ul[data-bspk=segmented-control] li:has([data-icon]):has([data-label]) {
+  padding-right: var(--padding);
 }
-[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner] {
+ul[data-bspk=segmented-control] li:not([aria-disabled])[aria-selected=true] {
   background: var(--surface-neutral-t1-base);
+  box-shadow: 0 0 1px 0 var(--shadow-variant-03), 0 1px 1px 0 var(--shadow-variant-05);
 }
-[data-bspk=segmented-control] button:not(:disabled):focus-visible {
-  z-index: 2;
-  outline: solid 2px var(--stroke-neutral-focus);
+ul[data-bspk=segmented-control] li:not([aria-disabled]):active {
+  background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=segmented-control] button:disabled {
-  pointer-events: none;
+ul[data-bspk=segmented-control] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
   cursor: not-allowed;
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/Select/Select.d.ts

@@ -1,46 +1,64 @@
-import { CommonProps, ElementProps } from '../../index.js';
-import { ComboboxProps } from '../Combobox';
 import './select.scss';
-export type SelectOption = Record<string, unknown> & {
-    /** The value of the option. */
+import { KeyboardEvent, MouseEvent } from 'react';
+import { ListItemProps } from '-/components/ListItem';
+import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
+import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+/**
+ * An option in a Select component.
+ *
+ * Essentially the props of ListItemProps. Except for `value` which is required.
+ */
+export type SelectOption = Omit<ListItemProps, 'id' | 'onClick' | 'subText' | 'value'> & {
     value: string;
-    /** The label of the option. This is the text that will be displayed on the option. */
-    label: string;
 };
-export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'name' | 'size'> & Pick<ComboboxProps<T>, 'disabled' | 'errorMessage' | 'id' | 'invalid' | 'isMulti' | 'itemDisplayCount' | 'label' | 'onChange' | 'readOnly' | 'selectAll' | 'value'> & {
+export type SelectItem = SelectOption & {
+    id: string;
+};
+export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & FormFieldControlProps & ScrollListItemsStyleProps & {
     /**
      * Array of options to display in the select
      *
      * @example
      *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2' },
-     *         { value: '3', label: 'Option 3' },
-     *         { value: '4', label: 'Option 4' },
-     *         { value: '5', label: 'Option 5' },
-     *         { value: '6', label: 'Option 6' },
-     *         { value: '7', label: 'Option 7' },
-     *         { value: '8', label: 'Option 8' },
-     *         { value: '9', label: 'Option 9' },
-     *         { value: '10', label: 'Option 10' },
+     *         { id: '1', label: 'Option 1' },
+     *         { id: '2', label: 'Option 2' },
+     *         { id: '3', label: 'Option 3' },
+     *         { id: '4', label: 'Option 4' },
+     *         { id: '5', label: 'Option 5' },
+     *         { id: '6', label: 'Option 6' },
+     *         { id: '7', label: 'Option 7' },
+     *         { id: '8', label: 'Option 8' },
+     *         { id: '9', label: 'Option 9' },
+     *         { id: '10', label: 'Option 10' },
      *     ];
      *
      * @type Array<SelectOption>
      * @required
      */
-    options: T[];
+    options: SelectOption[];
+    /** Selected value */
+    value: string;
     /**
-     * Placeholder for the select
+     * The function to call when the selected values change.
      *
-     * @default Select one
+     * @example
+     *     (value, event) => setState({ value });
+     *
+     * @required
      */
-    placeholder?: string;
+    onChange: (value: string, event?: KeyboardEvent | MouseEvent) => void;
+    /**
+     * The label for the select element, used for accessibility, and the dropdown modal header.
+     *
+     * @required
+     */
+    label: string;
     /**
-     * The description for the select.
+     * Placeholder for the select
      *
-     * This is typically used to provide additional context or instructions for the user.
+     * @default Select one
      */
-    description?: string;
+    placeholder?: string;
 };
 /**
  * A field element that allows users to select one option from a list of available choices.
@@ -57,16 +75,16 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'na
  *                 name="example-select"
  *                 onChange={setSelected}
  *                 options={[
- *                     { value: '1', label: 'Option 1' },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                     { value: '4', label: 'Option 4' },
- *                     { value: '5', label: 'Option 5' },
- *                     { value: '6', label: 'Option 6' },
- *                     { value: '7', label: 'Option 7' },
- *                     { value: '8', label: 'Option 8' },
- *                     { value: '9', label: 'Option 9' },
- *                     { value: '10', label: 'Option 10' },
+ *                     { id: '1', label: 'Option 1' },
+ *                     { id: '2', label: 'Option 2' },
+ *                     { id: '3', label: 'Option 3' },
+ *                     { id: '4', label: 'Option 4' },
+ *                     { id: '5', label: 'Option 5' },
+ *                     { id: '6', label: 'Option 6' },
+ *                     { id: '7', label: 'Option 7' },
+ *                     { id: '8', label: 'Option 8' },
+ *                     { id: '9', label: 'Option 9' },
+ *                     { id: '10', label: 'Option 10' },
  *                 ]}
  *                 placeholder="Select an option"
  *                 size="medium"
@@ -76,11 +94,7 @@ export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'na
  *     }
  *
  * @name Select
- * @phase DesignReview
+ * @phase Dev
  */
-declare function Select({ options, value: selected, onChange, label, placeholder, size, itemDisplayCount, disabled, id: propId, invalid, errorMessage, readOnly, name, isMulti, selectAll, description, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Select {
-    var bspkName: string;
-}
-export { Select };
+export declare function Select({ options: optionsProp, value, onChange, label, placeholder, size, disabled, id: idProp, invalid, readOnly, name, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, scrollLimit, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Select/Select.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import './select.css.js';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { useMemo } from 'react';
-import { Combobox } from '../Combobox';
 import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { useFloating } from '../../hooks/useFloating';
 import { useId } from '../../hooks/useId';
-import './select.css.js';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { getElementById } from '../../utils/dom';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
 /**
  * A field element that allows users to select one option from a list of available choices.
  *
@@ -20,16 +26,16 @@ import './select.css.js';
  *                 name="example-select"
  *                 onChange={setSelected}
  *                 options={[
- *                     { value: '1', label: 'Option 1' },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                     { value: '4', label: 'Option 4' },
- *                     { value: '5', label: 'Option 5' },
- *                     { value: '6', label: 'Option 6' },
- *                     { value: '7', label: 'Option 7' },
- *                     { value: '8', label: 'Option 8' },
- *                     { value: '9', label: 'Option 9' },
- *                     { value: '10', label: 'Option 10' },
+ *                     { id: '1', label: 'Option 1' },
+ *                     { id: '2', label: 'Option 2' },
+ *                     { id: '3', label: 'Option 3' },
+ *                     { id: '4', label: 'Option 4' },
+ *                     { id: '5', label: 'Option 5' },
+ *                     { id: '6', label: 'Option 6' },
+ *                     { id: '7', label: 'Option 7' },
+ *                     { id: '8', label: 'Option 8' },
+ *                     { id: '9', label: 'Option 9' },
+ *                     { id: '10', label: 'Option 10' },
  *                 ]}
  *                 placeholder="Select an option"
  *                 size="medium"
@@ -39,23 +45,87 @@ import './select.css.js';
  *     }
  *
  * @name Select
- * @phase DesignReview
+ * @phase Dev
  */
-function Select({ options = [], value: selected, onChange, label, placeholder = 'Select one', size = 'medium', itemDisplayCount = 5, disabled, id: propId, invalid, errorMessage, readOnly, name, isMulti, selectAll, description, ...props }) {
-    const id = useId(propId);
-    const selectedItem = useMemo(() => {
-        if (isMulti)
-            return {
-                label: `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`,
-                value: selected?.join(', ') || '',
-            };
-        return options.find((o) => o.value === selected?.[0]) || { label: placeholder, value: '' };
-    }, [isMulti, options, placeholder, selected]);
-    return (_jsx(Combobox, { description: description || '', disabled: disabled, errorMessage: errorMessage, header: placeholder || label, id: id, invalid: invalid, isMulti: isMulti, itemDisplayCount: itemDisplayCount, items: options, label: label, onChange: onChange, readOnly: readOnly, selectAll: selectAll, value: selected || [], children: ({ setReference, toggleProps }) => (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("button", { "aria-label": label || selectedItem?.label || placeholder, "data-bspk": "select", "data-empty": selectedItem?.label ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, ref: (node) => {
-                        if (node)
-                            setReference(node);
-                    }, ...props, ...toggleProps, children: [_jsx(ListItem, { as: "span", "data-placeholder": true, ...selectedItem, readOnly: true }), _jsx("span", { "data-icon": true, children: _jsx(SvgChevronRight, {}) })] })] })) }));
+export function Select({ options: optionsProp = [], value = '', onChange, label, placeholder = 'Select one', size = 'medium', disabled, id: idProp, invalid, readOnly, name, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, scrollLimit, ...props }) {
+    const id = useId(idProp);
+    const menuId = useMemo(() => `${id}-menu`, [id]);
+    const { items, availableItems } = useMemo(() => {
+        const nextItems = optionsProp.map((item, index) => ({
+            ...item,
+            id: `${id}-item-${index}`,
+            'aria-label': item.label,
+            'aria-selected': value.includes(item.value),
+        }));
+        return { items: nextItems, availableItems: nextItems.filter((item) => !item.disabled) };
+    }, [optionsProp, id, value]);
+    const closeMenu = () => {
+        setActiveElementId(null);
+    };
+    const selectedItem = useMemo(() => items.find((o) => o.value === value?.[0]), [items, value]);
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: availableItems.map((i) => i.id),
+    });
+    const open = Boolean(activeElementId);
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: true,
+    });
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: closeMenu,
+        disabled: !open,
+    });
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId)
+            getElementById(activeElementId)?.click();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: value }), !ariaLabelledBy && (_jsx("div", { "data-sr-only": true, id: `${id}-label`, children: label })), _jsxs("button", { ...props, "aria-activedescendant": activeElementId || undefined, "aria-autocomplete": "list", "aria-controls": activeElementId ? menuId : undefined, "aria-describedby": ariaDescribedBy || undefined, "aria-disabled": disabled || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-labelledby": ariaLabelledBy || `${id}-label`, "aria-readonly": readOnly || undefined, "data-bspk": "select", "data-invalid": invalid || undefined, "data-open": open || undefined, "data-size": size, id: id, onBlur: (event) => {
+                    const targetOutsideOfMenu = event.relatedTarget && !elements.floating?.contains(event.relatedTarget);
+                    if (targetOutsideOfMenu)
+                        closeMenu();
+                }, onClick: () => {
+                    if (disabled || readOnly || !items.length)
+                        return;
+                    if (!open) {
+                        const nextActiveId = selectedItem?.id || items[0].id;
+                        setActiveElementId(nextActiveId);
+                        return;
+                    }
+                    closeMenu();
+                }, onKeyDown: handleKeyDown({
+                    ...arrowKeyCallbacks,
+                    ArrowDown: (event) => {
+                        if (!open)
+                            spaceEnter();
+                        arrowKeyCallbacks.ArrowDown?.(event);
+                    },
+                    Space: spaceEnter,
+                    Enter: spaceEnter,
+                    'Ctrl+Option+Space': spaceEnter,
+                }, { preventDefault: true, stopPropagation: true }), ref: elements.setReference, role: "combobox", tabIndex: 0, type: "button", children: [_jsx(ListItem, { as: "span", "data-bspk-owner": "select", "data-placeholder": !selectedItem || undefined, id: `${id}-selected-value`, label: selectedItem?.label || placeholder, leading: selectedItem?.leading, onClick: undefined, owner: "select", trailing: selectedItem?.trailing }), _jsx(SvgKeyboardArrowDown, {})] }), _jsx(Menu, { "aria-autocomplete": undefined, "aria-label": label, as: "div", id: menuId, innerRef: elements.setFloating, label: label, onClickCapture: () => {
+                    // Prevent the menu from closing when clicking inside it
+                    // maintain focus on the select control
+                    elements.reference?.focus();
+                }, onFocus: () => {
+                    elements.reference?.focus();
+                }, owner: "select", role: "listbox", style: {
+                    ...(open ? scrollListItemsStyle(scrollLimit, items.length) : {}),
+                    ...floatingStyles,
+                }, tabIndex: -1, children: items.map((item) => {
+                    const isActive = activeElementId === item.id;
+                    const isSelected = value.includes(item.value);
+                    return (_jsx(ListItem, { ...item, active: isActive || undefined, "aria-label": undefined, "aria-selected": isSelected, as: "li", onClick: () => {
+                            if (item.disabled || item.readOnly)
+                                return;
+                            onChange(item.value);
+                            closeMenu();
+                        }, owner: "select", role: "option", tabIndex: -1, value: undefined }, item.id));
+                }) })] }));
 }
-Select.bspkName = 'Select';
-export { Select };
 //# sourceMappingURL=Select.js.map