@enact/limestone 1.3.0

package/Skinnable/Skinnable.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Skinnable = void 0;
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _Skinnable = _interopRequireDefault(require("@enact/ui/Skinnable"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Exports the {@link limestone/Skinnable.Skinnable} higher-order component (HOC).
+ *
+ * @module limestone/Skinnable
+ * @exports Skinnable
+ * @public
+ */
+
+var defaultConfig = {
+  skins: {
+    neutral: 'neutral',
+    light: 'light',
+    game: 'game'
+  },
+  allowedVariants: ['focusRing', 'highContrast', 'largeText', 'grayscale'],
+  defaultVariants: null
+};
+
+/**
+ * This higher-order component is based on {@link ui/Skinnable.Skinnable|ui/Skinnable}.
+ *
+ * `Skinnable` comes pre-configured for Limestone's supported skins: "neutral" (default) and "light".
+ * It is used to apply the relevant skinning classes to each component and has been used to
+ * pre-select specific skins for some components.
+ *
+ * Note: This HoC passes `className` to the wrapped component. It must be passed to the main DOM
+ * node.
+ *
+ * @class Skinnable
+ * @memberof limestone/Skinnable
+ * @extends ui/Skinnable.Skinnable
+ * @hoc
+ * @public
+ */
+var Skinnable = exports.Skinnable = (0, _hoc["default"])(defaultConfig, _Skinnable["default"]);
+
+/**
+ * Select a skin by name by specifying this property.
+ *
+ * Available Limestone skins are `"neutral"` (default) and `"light"`. This may be changed at runtime.
+ * All components already use their defaults, but a skin may be changed via this prop or by using
+ * `Skinnable` directly and a config object.
+ *
+ * Example:
+ * ```
+ * <Button skin="light">
+ * ```
+ *
+ * @name skin
+ * @type {String}
+ * @default 'neutral'
+ * @memberof limestone/Skinnable.Skinnable
+ * @instance
+ * @public
+ */
+var _default = exports["default"] = Skinnable;

package/Skinnable/package.json

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

package/Slider/Slider.d.ts

@@ -0,0 +1,218 @@
+// Type definitions for limestone/Slider
+
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
+import { SliderDecoratorProps as ui_Slider_SliderDecoratorProps } from "@enact/ui/Slider";
+import * as React from "react";
+import { SliderBaseProps as ui_Slider_SliderBaseProps } from "@enact/ui/Slider";
+
+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 SliderBaseProps
+  extends Omit<ui_Slider_SliderBaseProps, "progressBarComponent"> {
+  /**
+ * Activates the component when selected so that it may be manipulated via the directional
+input keys.
+ */
+  activateOnSelect?: boolean;
+  /**
+   * Sets the knob to selected state and allows it to move via 5-way controls.
+   */
+  active?: boolean;
+  /**
+ * 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:
+ * *  `slider`  - The root component class
+ */
+  css?: object;
+  /**
+   * Disables component and does not generate events.
+   */
+  disabled?: boolean;
+  /**
+ * Indicates that the slider has gained focus and if the tooltip is present, it will be
+shown.
+ */
+  focused?: boolean;
+  /**
+ * Controls the keydown frequency with which the acceleration will "freeze".
+While frozen, the value of the slider is not changed via arrow key.
+ * 
+ * To customize the key acceleration speed, pass an array for   .
+Each number represents a number of an event for sampling.
+For example, 1 means to process all events while 3 means to process one of the three events.
+If the number is large, the slider value changes slowly.
+Example for accelerating:
+ * ```
+keyFrequency={[3, 3, 3, 2, 2, 2, 1]}
+```
+ */
+  keyFrequency?: number[];
+  /**
+ * The amount to increment or decrement the position of the knob via 5-way controls.
+ * 
+ * It must evenly divide into the range designated by  `min`  and  `max` . If not specified,
+ `step`  is used for the default value.
+ */
+  knobStep?: number;
+  /**
+ * The maximum value of the slider.
+ * 
+ * The range between  `min`  and  `max`  should be evenly divisible by
+  .
+ */
+  max?: number;
+  /**
+ * The minimum value of the slider.
+ * 
+ * The range between  `min`  and  `max`  should be evenly divisible by
+  .
+ */
+  min?: number;
+  /**
+   * Disable wheel event.
+   */
+  noWheel?: boolean;
+  /**
+   * The handler when the knob is activated or deactivated by selecting it via 5-way
+   */
+  onActivate?: Function;
+  /**
+ * Called when a key is pressed down while the slider is focused.
+ * 
+ * When a directional key is pressed down and the knob is active (either by first
+pressing enter or when  `activateOnSelect`  is disabled), the Slider will increment or
+decrement the current value and emit an  `onChange`  event. This default behavior can be
+prevented by calling  `preventDefault()`  on the event passed to this callback.
+ */
+  onKeyDown?: Function;
+  /**
+ * Called when a key is released while the slider is focused.
+ * 
+ * When the enter key is released and  `activateOnSelect`  is enabled, the slider will be
+activated to enable incrementing or decrementing the value via directional keys. This
+default behavior can be prevented by calling  `preventDefault()`  on the event passed to
+this callback.
+ */
+  onKeyUp?: Function;
+  /**
+   * Displays an anchor at  `progressAnchor` .
+   */
+  showAnchor?: boolean;
+  /**
+   * The amount to increment or decrement the value.
+   *
+   * It must evenly divide into the range designated by  `min`  and  `max` .
+   */
+  step?: number;
+  /**
+ * Enables the built-in tooltip
+ * 
+ * To customize the tooltip, pass either a custom tooltip component or an instance of
+   with additional props configured.
+ * ```
+<Slider
+  tooltip={
+    <SliderTooltip percent side="after" />
+  }
+/>
+```
+ 
+ * The tooltip may also be passed as a child via the  `"tooltip"`  slot. See
+   for more information on how slots can be used.
+ * ```
+<Slider>
+  <SliderTooltip percent side="after" />
+</Slider>
+```
+ 
+ * If a custom tooltip is provided, it will receive the following props:
+ * *  `children`  - The  `value`  prop from the slider
+ * *  `visible`  -  `true`  if the tooltip should be displayed
+ * *  `orientation`  - The value of the  `orientation`  prop from the slider
+ * *  `proportion`  - A number between 0 and 1 representing the proportion of the  `value`  in
+terms of  `min`  and  `max`
+ */
+  tooltip?: boolean | JSX.Element | Function;
+  /**
+   * The value of the slider.
+   *
+   * Defaults to the value of  `min` .
+   */
+  value?: number;
+  /**
+ * The interval (in milliseconds) between valid wheel events.
+ * 
+ * For example, 200 means to ignore wheel events occurred within 200ms
+of the last processed wheel event while 0 means to process all wheel events.
+If the number is large, the slider value changes slowly.
+ */
+  wheelInterval?: number;
+}
+/**
+ * Range-selection input component.
+ */
+
+export class SliderBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, SliderBaseProps>
+> {}
+
+export interface SliderDecoratorProps
+  extends Merge<
+    Merge<
+      Merge<
+        Merge<
+          ui_Changeable_ChangeableProps,
+          spotlight_Spottable_SpottableProps
+        >,
+        limestone_Skinnable_SkinnableProps
+      >,
+      ui_Slottable_SlottableProps
+    >,
+    ui_Slider_SliderDecoratorProps
+  > {}
+export function SliderDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & SliderDecoratorProps>;
+
+export interface SliderProps extends SliderDecoratorProps {
+  /**
+ * Overrides the  `aria-valuetext`  for the slider.
+ * 
+ * By default,  `aria-valuetext`  is set to the current value. This should only be used when
+the parent controls the value of the slider directly through the props.
+ */
+  "aria-valuetext"?: string | number;
+}
+/**
+ * Slider input with Limestone styling,   ,
+   and   
+applied.
+ * 
+ * By default,  `Slider`  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 Slider extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, SliderProps>
+> {}
+
+export interface SliderTooltipProps {}
+/**
+ * A    specifically adapted for use with
+   or
+  .
+ */
+
+export class SliderTooltip extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, SliderTooltipProps>
+> {}
+
+export default Slider;