@enact/limestone 1.3.0

package/RadioItem/RadioItem.module.css

@@ -0,0 +1,233 @@
+.radioItem .slotBefore > *:first-child {
+  margin-inline-start: var(--primitive-spacing-24);
+}
+.radioItem .slotBefore > *:last-child {
+  margin-inline-end: var(--primitive-spacing-24);
+}
+.radioItem .icon {
+  border-radius: var(--semantic-radius-full);
+  font-size: var(--primitive-font-size-48);
+}
+.radioItem:global(.neutral) .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
+}
+.radioItem:global(.neutral).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+.radioItem:global(.neutral).selected .bg {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .radioItem:global(.neutral):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .radioItem:global(.neutral):global(.spottable):focus .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-key) .radioItem:global(.neutral):global(.spottable):focus.selected .icon,
+:global(.spotlight-input-mouse) .radioItem:global(.neutral):global(.spottable):focus.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.spotlight-input-touch) .radioItem:global(.neutral):global(.spottable):active .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-touch) .radioItem:global(.neutral):global(.spottable):active.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast) .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
+}
+:global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast).selected .bg {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):active .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):active.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+.radioItem:global(.light) .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
+}
+.radioItem:global(.light).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+.radioItem:global(.light).selected .bg {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .radioItem:global(.light):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .radioItem:global(.light):global(.spottable):focus .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-key) .radioItem:global(.light):global(.spottable):focus.selected .icon,
+:global(.spotlight-input-mouse) .radioItem:global(.light):global(.spottable):focus.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.spotlight-input-touch) .radioItem:global(.light):global(.spottable):active .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-touch) .radioItem:global(.light):global(.spottable):active.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+.radioItem:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.radioItem:global(.game) .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
+}
+.radioItem:global(.game).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+.radioItem:global(.game).selected .bg {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .radioItem:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) .radioItem:global(.game):global(.spottable):focus .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-key) .radioItem:global(.game):global(.spottable):focus.selected .icon,
+:global(.spotlight-input-mouse) .radioItem:global(.game):global(.spottable):focus.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.green) .radioItem:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .radioItem:global(.game) .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
+}
+:global(.green) .radioItem:global(.game).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.green) .radioItem:global(.game).selected .bg {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.green) .radioItem:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.green) .radioItem:global(.game):global(.spottable):focus .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-key) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon,
+:global(.spotlight-input-mouse) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.orange) .radioItem:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .radioItem:global(.game) .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive);
+}
+:global(.orange) .radioItem:global(.game).selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.orange) .radioItem:global(.game).selected .bg {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.orange) .radioItem:global(.game):global(.spottable):focus .icon,
+:global(.spotlight-input-mouse) :global(.orange) .radioItem:global(.game):global(.spottable):focus .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-key) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon,
+:global(.spotlight-input-mouse) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}
+:global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active .icon {
+  color: transparent;
+  background-color: transparent;
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-stroke-selection-inactive-focused);
+}
+:global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active.selected .icon {
+  color: var(--semantic-color-on-surface-main-selected);
+  background-color: var(--semantic-color-surface-accent);
+  box-shadow: 0 0 0 0.08333rem var(--semantic-color-surface-accent);
+}

package/RadioItem/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "RadioItem.js"
+}

package/RadioItem/tests/RadioItem-specs.js

@@ -0,0 +1,62 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _RadioItem = _interopRequireWildcard(require("../RadioItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+describe('RadioItem Specs', function () {
+  test('should support a custom icon', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioItem.RadioItemBase, {
+      icon: "check",
+      selected: true,
+      children: "Hello RadioItem"
+    }));
+    var radioItemElement = _react.screen.getByRole('checkbox');
+    var expected = 983489;
+    var actual = radioItemElement.children.item(1).textContent.codePointAt();
+    expect(actual).toBe(expected);
+  });
+  test('should render `children`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioItem.RadioItemBase, {
+      children: "Hello RadioItem"
+    }));
+    var actual = _react.screen.getByText('Hello RadioItem');
+    expect(actual).toBeInTheDocument();
+  });
+  test('should render a disabled RadioItem when `disabled` is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioItem.RadioItemBase, {
+      disabled: true,
+      children: "Hello RadioItem"
+    }));
+    var radioItem = _react.screen.getByRole('checkbox');
+    expect(radioItem).toHaveAttribute('disabled');
+  });
+  test('should render a `slot before`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioItem.RadioItemBase, {
+      slotBefore: "arrowup",
+      children: "Hello RadioItem"
+    }));
+    var actual = _react.screen.getByText('arrowup');
+    expect(actual).toBeInTheDocument();
+  });
+  test('should select RadioItem with click', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioItem["default"], {
+      children: "Hello RadioItem"
+    }));
+    var radioItem = _react.screen.getAllByRole('checkbox');
+    _react.fireEvent.click(radioItem[0]);
+    var expected = 'selected';
+    expect(radioItem[0]).toHaveClass(expected);
+  });
+  test('should not select RadioItem with click when disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioItem["default"], {
+      disabled: true,
+      children: "Hello RadioItem"
+    }));
+    var radioItem = _react.screen.getAllByRole('checkbox');
+    _react.fireEvent.click(radioItem[0]);
+    var expected = 'selected';
+    expect(radioItem[0]).not.toHaveClass(expected);
+  });
+});

package/RangePicker/RangePicker.d.ts

@@ -0,0 +1,174 @@
+// Type definitions for limestone/RangePicker
+
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+import * as React from "react";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface RangePickerBaseProps {
+  /**
+ * The maximum value selectable by the picker (inclusive).
+ * 
+ * The range between  `min`  and  `max`  should be evenly divisible by
+  .
+ */
+  max: number;
+  /**
+ * The minimum value selectable by the picker (inclusive).
+ * 
+ * The range between  `min`  and  `max`  should be evenly divisible by
+  .
+ */
+  min: number;
+  /**
+   * Current value.
+   */
+  value: number;
+  /**
+   * The  `aria-valuetext`  for the picker.
+   *
+   * By default,  `aria-valuetext`  is set to the current selected child value.
+   */
+  "aria-valuetext"?: string;
+  /**
+ * Determines which key to adjust the picker's value for the joined horizontal one.
+ * *  `'enter'`  allows the user to use the enter key to adjust the picker's value
+ * *  `'arrow'`  allows the user to use the left or right keys to adjust the picker's value.
+ * 
+ * The default value for joined horizontal picker is  `'enter'` .
+If    is  `'vertical'`  or
+   is undefined or is  `false` , this prop is ignored.
+ */
+  changedBy?: "enter" | "arrow";
+  /**
+   * Children from which to pick.
+   */
+  children?: React.ReactNode;
+  /**
+   * Class name for component.
+   */
+  className?: string;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `title`  - The title component class
+ * *  `inlineTitle`  - The title component class when  `inlineTitle`  is true
+ */
+  css?: object;
+  /**
+ * A custom icon for the decrementer.
+ * 
+ * All strings supported by    are supported. Without a
+custom icon, the default is used, and is automatically changed when the
+   is changed.
+ */
+  decrementIcon?: string;
+  /**
+   * Disables the picker.
+   */
+  disabled?: boolean;
+  /**
+ * A custom icon for the incrementer.
+ * 
+ * All strings supported by    are supported. Without a
+custom icon, the default is used, and is automatically changed when the
+   is changed.
+ */
+  incrementIcon?: string;
+  /**
+   * Applies inline styling to the title.
+   */
+  inlineTitle?: boolean;
+  /**
+ * Allows the user can use the arrow keys or enter key to adjust the picker's value.
+ * 
+ * The user may no longer use those arrow keys to navigate while this control is focused.
+A default control allows full navigation, but requires individual ENTER presses on the
+incrementer and decrementer buttons. Pointer interaction is the same for both formats.
+ */
+  joined?: boolean;
+  /**
+ * Disables animation.
+ * 
+ * By default, the picker will animate transitions between items, provided a  `width`  is
+defined.
+ */
+  noAnimation?: boolean;
+  /**
+   * Called when  `value`  changes.
+   */
+  onChange?: Function;
+  /**
+   * Orientation of the picker.
+   *
+   * Controls whether the buttons are arranged horizontally or vertically around the value.
+   * *  Values:  `'horizontal'` ,  `'vertical'`
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+ * Pads the display value with zeros up to the number of digits of  `min`  or max`, whichever
+is greater.
+ */
+  padded?: boolean;
+  /**
+ * The smallest value change allowed for the picker.
+ * 
+ * For example, a step of  `2`  would cause the picker to increment from 0 to 2 to 4, etc.
+It must evenly divide into the range designated by  `min`  and  `max` .
+ */
+  step?: number;
+  /**
+   * The primary text of the  `Picker` .
+   */
+  title?: string;
+  /**
+ * The width of the picker.
+ * 
+ * A number can be used to set the minimum number of characters to be shown. Setting a
+number to less than the number of characters in the longest value will cause the width to
+grow for the longer values.
+ * 
+ * A string can be used to select from pre-defined widths:
+ * *  `'small'`  - numeric values
+ * *  `'medium'`  - single or short words
+ * *  `'large'`  - maximum-sized pickers taking full width of its parent
+ * 
+ * By default, the picker will size according to the longest valid value.
+ */
+  width?: "small" | "medium" | "large" | number;
+  /**
+ * Allows picker to continue from the start of the list after it reaches the end and
+vice versa.
+ */
+  wrap?: boolean;
+}
+/**
+ * RangePicker base component.
+ */
+
+export class RangePickerBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, RangePickerBaseProps>
+> {}
+
+export interface RangePickerProps extends ui_Changeable_ChangeableProps {
+  /**
+   * Default value
+   */
+  defaultValue?: number;
+}
+/**
+ * A component that lets the user select a number from a range of numbers.
+ * 
+ * By default,  `RangePicker`  maintains the state of its  `value`  property. Supply the  `defaultValue` 
+property to control its initial value. If you wish to directly control updates to the component,
+supply a value to  `value`  at creation time and update it in response to  `onChange`  events.
+ */
+
+export class RangePicker extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, RangePickerProps>
+> {}
+
+export default RangePicker;