@spaced-out/ui-design-system 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.2.4](https://github.com/spaced-out/ui-design-system/compare/v0.2.3...v0.2.4) (2024-10-15)
+
+
+### Bug Fixes
+
+* ♳ fixes an issue with typeahead when when events are controlled from trigger the menu toggles b/w open and close states ([#276](https://github.com/spaced-out/ui-design-system/issues/276)) ([230b754](https://github.com/spaced-out/ui-design-system/commit/230b754b1f69d30ea4770daf9ea9b9cf6af7f8b7))
+
+### [0.2.3](https://github.com/spaced-out/ui-design-system/compare/v0.2.2...v0.2.3) (2024-10-10)
+
+
+### Features
+
+* new weekday-picker component ([#274](https://github.com/spaced-out/ui-design-system/issues/274)) ([5e3d8bc](https://github.com/spaced-out/ui-design-system/commit/5e3d8bc230581890f9f41389c4c699eb3f57817b))
+
+
+### Bug Fixes
+
+* sets totalbars to 5 in simple scorebar story ([#269](https://github.com/spaced-out/ui-design-system/issues/269)) ([ef1754a](https://github.com/spaced-out/ui-design-system/commit/ef1754ae4193705595a4582c91069a799b0ff29e))
+
 ### [0.2.2](https://github.com/spaced-out/ui-design-system/compare/v0.2.2-beta.0...v0.2.2) (2024-10-04)
 
 

package/lib/components/Button/Button.js

@@ -68,6 +68,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     actionType,
     tabIndex = 0,
     isLoading,
+    role = 'button',
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
@@ -75,7 +76,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } : {}, {
     className: className,
     ref: ref,
-    role: "button",
+    role: role,
     disabled: disabled,
     tabIndex: disabled ? -1 : tabIndex,
     type: actionType,

package/lib/components/Button/Button.js.flow

@@ -54,6 +54,7 @@ export type BaseButtonProps = {
   ariaLabel?: string,
   tabIndex?: number,
   isLoading?: boolean,
+  role?: string,
   ...
 };
 
@@ -107,6 +108,7 @@ export const UnstyledButton: React$AbstractComponent<
       actionType,
       tabIndex = 0,
       isLoading,
+      role = 'button',
       ...props
     }: UnstyledButtonProps,
     ref,
@@ -116,7 +118,7 @@ export const UnstyledButton: React$AbstractComponent<
       {...(ariaLabel ? {'aria-label': ariaLabel} : {})}
       className={className}
       ref={ref}
-      role="button"
+      role={role}
       disabled={disabled}
       tabIndex={disabled ? -1 : tabIndex}
       type={actionType}

package/lib/components/Typeahead/Typeahead.js

@@ -10,6 +10,7 @@ var _size = require("../../styles/variables/_size");
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
 var _Menu = require("../Menu");
 var _SearchInput = require("../SearchInput");
 var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.module.css"));
@@ -69,7 +70,8 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isOpen,
       onOpen,
       clickAway,
-      boundaryRef
+      boundaryRef,
+      triggerRef
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "Typeahead",
@@ -77,7 +79,7 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ref: boundaryRef
     }, /*#__PURE__*/React.createElement(_SearchInput.SearchInput, _extends({}, inputProps, {
       ref: ref,
-      boxRef: refs.setReference,
+      boxRef: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
       size: size,
       placeholder: placeholder,
       value: typeaheadInputText,
@@ -89,14 +91,14 @@ const Typeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         e.stopPropagation();
         onSearch && onSearch(e);
         if (e.target.value.length >= menuOpenOffset) {
-          onOpen();
+          !isOpen && onOpen();
         } else {
           clickAway();
         }
       },
       onFocus: _e => {
         if (typeaheadInputText.length >= menuOpenOffset) {
-          onOpen();
+          !isOpen && onOpen();
         } else {
           clickAway();
         }

package/lib/components/Typeahead/Typeahead.js.flow

@@ -16,6 +16,7 @@ import {sizeFluid} from '../../styles/variables/_size';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {type ClickAwayRefType, ClickAway} from '../../utils/click-away';
+import {mergeRefs} from '../../utils/merge-refs';
 import type {InputProps} from '../Input';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
@@ -98,7 +99,7 @@ export const Typeahead: React$AbstractComponent<
 
     return (
       <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-        {({isOpen, onOpen, clickAway, boundaryRef}) => (
+        {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
           <div
             data-testid="Typeahead"
             className={classify(css.typeaheadContainer, classNames?.wrapper)}
@@ -107,7 +108,7 @@ export const Typeahead: React$AbstractComponent<
             <SearchInput
               {...inputProps}
               ref={ref}
-              boxRef={refs.setReference}
+              boxRef={mergeRefs([refs.setReference, triggerRef])}
               size={size}
               placeholder={placeholder}
               value={typeaheadInputText}
@@ -117,14 +118,14 @@ export const Typeahead: React$AbstractComponent<
                 e.stopPropagation();
                 onSearch && onSearch(e);
                 if (e.target.value.length >= menuOpenOffset) {
-                  onOpen();
+                  !isOpen && onOpen();
                 } else {
                   clickAway();
                 }
               }}
               onFocus={(_e) => {
                 if (typeaheadInputText.length >= menuOpenOffset) {
-                  onOpen();
+                  !isOpen && onOpen();
                 } else {
                   clickAway();
                 }

package/lib/components/WeekdayPicker/WeekdayPicker.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WeekdayPicker = exports.WEEKDAY_PICKER_SIZE = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _WeekdayPickerModule = _interopRequireDefault(require("./WeekdayPicker.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DEFAULT_WEEKDAYS = [{
+  key: 'sun',
+  label: 'S'
+}, {
+  key: 'mon',
+  label: 'M'
+}, {
+  key: 'tue',
+  label: 'T'
+}, {
+  key: 'wed',
+  label: 'W'
+}, {
+  key: 'thu',
+  label: 'T'
+}, {
+  key: 'fri',
+  label: 'F'
+}, {
+  key: 'sat',
+  label: 'S'
+}];
+const WEEKEND_KEYS = ['sat', 'sun'];
+const WEEKDAY_PICKER_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium'
+});
+exports.WEEKDAY_PICKER_SIZE = WEEKDAY_PICKER_SIZE;
+const DayButton = _ref => {
+  let {
+    day,
+    isSelected,
+    isDisabled,
+    onClick,
+    className,
+    size,
+    readOnly
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+    key: day.key,
+    className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayButton, {
+      [_WeekdayPickerModule.default.weekdayButtonMedium]: size === WEEKDAY_PICKER_SIZE.medium,
+      [_WeekdayPickerModule.default.weekdayButtonSmall]: size === WEEKDAY_PICKER_SIZE.small,
+      [_WeekdayPickerModule.default.weekdayButtonSelected]: isSelected,
+      [_WeekdayPickerModule.default.weekdayButtonDisabled]: isDisabled
+    }, className),
+    onClick: onClick,
+    disabled: isDisabled,
+    "aria-label": `Select ${day.label}`,
+    tabIndex: isDisabled || readOnly ? -1 : 0,
+    role: "checkbox"
+  }, day.label);
+};
+const WeekdayPicker = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    size = 'medium',
+    selectedWeekDays = [],
+    disabledWeekDays = [],
+    hiddenWeekDays = [],
+    customDayLabels = DEFAULT_WEEKDAYS,
+    onChange,
+    readOnly = false,
+    classNames = {},
+    showWeekends = true,
+    ariaLabel = 'Select weekdays',
+    label,
+    helperText,
+    disableMultiSelect = false
+  } = _ref2;
+  const [selectedDays, setSelectedDays] = React.useState(selectedWeekDays);
+  const handleDayToggle = (day, event) => {
+    if (readOnly || disabledWeekDays.includes(day.key)) {
+      return;
+    }
+    let updatedSelectedDays = selectedDays;
+    if (disableMultiSelect) {
+      if (selectedDays.some(selected => selected.key === day.key)) {
+        updatedSelectedDays = [];
+      } else {
+        updatedSelectedDays = [day];
+      }
+    } else {
+      const isSelected = selectedDays.some(selected => selected.key === day.key);
+      if (isSelected) {
+        updatedSelectedDays = selectedDays.filter(selected => selected.key !== day.key);
+      } else {
+        updatedSelectedDays = [...selectedDays, day];
+      }
+    }
+    setSelectedDays(updatedSelectedDays);
+    onChange?.(updatedSelectedDays, event);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Weekday-Picker",
+    ref: ref,
+    className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayPickerContainer, classNames.wrapper, {
+      [_WeekdayPickerModule.default.weekdayReadOnly]: readOnly
+    }),
+    "aria-label": ariaLabel
+  }, !!label && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayLabel, classNames.label)
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: _WeekdayPickerModule.default.weekdayPickerDays
+  }, customDayLabels.map(day => {
+    const isWeekend = WEEKEND_KEYS.includes(day.key);
+    const isHidden = hiddenWeekDays.includes(day.key);
+    if (!showWeekends && isWeekend || isHidden) {
+      return null;
+    }
+    const isSelected = selectedDays.some(selected => selected.key === day.key);
+    const isDisabled = disabledWeekDays.includes(day.key);
+    return /*#__PURE__*/React.createElement(DayButton, {
+      key: day.key,
+      day: day,
+      isSelected: isSelected,
+      isDisabled: isDisabled,
+      onClick: event => {
+        if (isDisabled) {
+          event.preventDefault();
+        } else {
+          handleDayToggle(day, event);
+        }
+      },
+      className: classNames.button,
+      size: size,
+      readOnly: readOnly
+    });
+  })), !!helperText && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayHelperText, classNames.helperText)
+  }, helperText));
+});
+exports.WeekdayPicker = WeekdayPicker;

package/lib/components/WeekdayPicker/WeekdayPicker.js.flow

@@ -0,0 +1,217 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+
+import css from './WeekdayPicker.module.css';
+
+
+const DEFAULT_WEEKDAYS = [
+  {key: 'sun', label: 'S'},
+  {key: 'mon', label: 'M'},
+  {key: 'tue', label: 'T'},
+  {key: 'wed', label: 'W'},
+  {key: 'thu', label: 'T'},
+  {key: 'fri', label: 'F'},
+  {key: 'sat', label: 'S'},
+];
+
+const WEEKEND_KEYS = ['sat', 'sun'];
+
+export const WEEKDAY_PICKER_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  button?: string,
+  label?: string,
+  helperText?: string,
+}>;
+type WeekdayPickerSize = $Values<typeof WEEKDAY_PICKER_SIZE>;
+
+type Weekday = {
+  key: string,
+  label: string,
+};
+
+export type WeekdayPickerProps = {
+  size?: WeekdayPickerSize,
+  selectedWeekDays?: Array<Weekday>,
+  hiddenWeekDays?: Array<string>,
+  disabledWeekDays?: Array<string>,
+  customDayLabels?: Array<Weekday>,
+  onChange?: (
+    selectedDays: Array<Weekday>,
+    ?SyntheticEvent<HTMLElement>,
+  ) => mixed,
+  readOnly?: boolean,
+  classNames?: ClassNames,
+  showWeekends?: boolean,
+  ariaLabel?: string,
+  label?: React.Node,
+  helperText?: React.Node,
+  disableMultiSelect?: boolean,
+};
+
+type DayButtonProps = {
+  day: Weekday,
+  isSelected: boolean,
+  isDisabled: boolean,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
+  size: WeekdayPickerSize,
+  readOnly?: boolean,
+};
+
+const DayButton = ({
+  day,
+  isSelected,
+  isDisabled,
+  onClick,
+  className,
+  size,
+  readOnly,
+}: DayButtonProps) => (
+  <UnstyledButton
+    key={day.key}
+    className={classify(
+      css.weekdayButton,
+      {
+        [css.weekdayButtonMedium]: size === WEEKDAY_PICKER_SIZE.medium,
+        [css.weekdayButtonSmall]: size === WEEKDAY_PICKER_SIZE.small,
+        [css.weekdayButtonSelected]: isSelected,
+        [css.weekdayButtonDisabled]: isDisabled,
+      },
+      className,
+    )}
+    onClick={onClick}
+    disabled={isDisabled}
+    aria-label={`Select ${day.label}`}
+    tabIndex={isDisabled || readOnly ? -1 : 0}
+    role="checkbox"
+  >
+    {day.label}
+  </UnstyledButton>
+);
+
+export const WeekdayPicker: React$AbstractComponent<
+  WeekdayPickerProps,
+  HTMLDivElement,
+> = React.forwardRef<WeekdayPickerProps, HTMLDivElement>(
+  (
+    {
+      size = 'medium',
+      selectedWeekDays = [],
+      disabledWeekDays = [],
+      hiddenWeekDays = [],
+      customDayLabels = DEFAULT_WEEKDAYS,
+      onChange,
+      readOnly = false,
+      classNames = {},
+      showWeekends = true,
+      ariaLabel = 'Select weekdays',
+      label,
+      helperText,
+      disableMultiSelect = false,
+    }: WeekdayPickerProps,
+    ref,
+  ) => {
+    const [selectedDays, setSelectedDays] =
+      React.useState<Array<Weekday>>(selectedWeekDays);
+
+    const handleDayToggle = (
+      day: Weekday,
+      event: SyntheticEvent<HTMLElement>,
+    ) => {
+      if (readOnly || disabledWeekDays.includes(day.key)) {
+        return;
+      }
+
+      let updatedSelectedDays = selectedDays;
+
+      if (disableMultiSelect) {
+        if (selectedDays.some((selected) => selected.key === day.key)) {
+          updatedSelectedDays = [];
+        } else {
+          updatedSelectedDays = [day];
+        }
+      } else {
+        const isSelected = selectedDays.some(
+          (selected) => selected.key === day.key,
+        );
+
+        if (isSelected) {
+          updatedSelectedDays = selectedDays.filter(
+            (selected) => selected.key !== day.key,
+          );
+        } else {
+          updatedSelectedDays = [...selectedDays, day];
+        }
+      }
+
+      setSelectedDays(updatedSelectedDays);
+      onChange?.(updatedSelectedDays, event);
+    };
+
+    return (
+      <div
+        data-testid="Weekday-Picker"
+        ref={ref}
+        className={classify(css.weekdayPickerContainer, classNames.wrapper, {
+          [css.weekdayReadOnly]: readOnly,
+        })}
+        aria-label={ariaLabel}
+      >
+        {!!label && (
+          <div className={classify(css.weekdayLabel, classNames.label)}>
+            {label}
+          </div>
+        )}
+        <div className={css.weekdayPickerDays}>
+          {customDayLabels.map((day) => {
+            const isWeekend = WEEKEND_KEYS.includes(day.key);
+            const isHidden = hiddenWeekDays.includes(day.key);
+            if ((!showWeekends && isWeekend) || isHidden) {
+              return null;
+            }
+
+            const isSelected = selectedDays.some(
+              (selected) => selected.key === day.key,
+            );
+            const isDisabled = disabledWeekDays.includes(day.key);
+
+            return (
+              <DayButton
+                key={day.key}
+                day={day}
+                isSelected={isSelected}
+                isDisabled={isDisabled}
+                onClick={(event) => {
+                  if (isDisabled) {
+                    event.preventDefault();
+                  } else {
+                    handleDayToggle(day, event);
+                  }
+                }}
+                className={classNames.button}
+                size={size}
+                readOnly={readOnly}
+              />
+            );
+          })}
+        </div>
+        {!!helperText && (
+          <div
+            className={classify(css.weekdayHelperText, classNames.helperText)}
+          >
+            {helperText}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/WeekdayPicker/WeekdayPicker.module.css

@@ -0,0 +1,97 @@
+@value (
+  colorTextSecondary,
+  colorFillSecondary,
+  colorButtonFillTertiaryHovered,
+  colorTextPrimary,
+  colorButtonFillPrimaryEnabled,
+  colorTextInversePrimary,
+  colorButtonFillPrimaryHovered,
+  colorTextDisabled,
+  colorFillDisabled,
+  colorFocusPrimary
+) from '  ../../styles/variables/_color.css';
+
+@value (spaceXXSmall,spaceXSmall,spaceSmall) from '../../styles/variables/_space.css';
+@value (size42,size34) from '../../styles/variables/_size.css';
+
+@value (borderRadiusSmall,borderWidthNone,borderWidthTertiary) from '../../styles/variables/_border.css';
+
+.weekdayPickerContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXXSmall;
+}
+
+.weekdayPickerDays {
+  display: flex;
+  gap: spaceSmall;
+}
+
+.weekdayButton {
+  composes: formLabelSmall from '../../styles/typography.module.css';
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: colorFillSecondary;
+  color: colorTextSecondary;
+  padding: spaceXSmall spaceSmall;
+  border-radius: borderRadiusSmall;
+
+  &:hover,
+  &:focus-visible {
+    background-color: colorButtonFillTertiaryHovered;
+    color: colorTextPrimary;
+    cursor: pointer;
+  }
+
+  &:focus-visible {
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+  }
+}
+
+.weekdayButtonMedium {
+  composes: buttonTextMedium from '../../styles/typography.module.css';
+  height: size42;
+  width: size42;
+}
+
+.weekdayButtonSmall {
+  composes: buttonTextSmall from '../../styles/typography.module.css';
+  height: size34;
+  width: size34;
+}
+
+.weekdayButtonSelected {
+  background-color: colorButtonFillPrimaryEnabled;
+  color: colorTextInversePrimary;
+
+  &:hover,
+  &:focus-visible {
+    background-color: colorButtonFillPrimaryHovered;
+    color: colorTextInversePrimary;
+  }
+}
+
+.weekdayButtonDisabled {
+  background-color: colorFillDisabled;
+  color: colorTextDisabled;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.weekdayLabel {
+  composes: formLabelSmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.weekdayHelperText {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.weekdayReadOnly {
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/lib/components/WeekdayPicker/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _WeekdayPicker = require("./WeekdayPicker");
+Object.keys(_WeekdayPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _WeekdayPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _WeekdayPicker[key];
+    }
+  });
+});

package/lib/components/WeekdayPicker/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './WeekdayPicker';

package/lib/components/index.js

@@ -651,4 +651,15 @@ Object.keys(_Typeahead).forEach(function (key) {
       return _Typeahead[key];
     }
   });
+});
+var _WeekdayPicker = require("./WeekdayPicker");
+Object.keys(_WeekdayPicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _WeekdayPicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _WeekdayPicker[key];
+    }
+  });
 });

package/lib/components/index.js.flow

@@ -59,3 +59,4 @@ export * from './Tooltip';
 export * from './Truncate';
 export * from './TruncatedTextWithTooltip';
 export * from './Typeahead';
+export * from './WeekdayPicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {