@redsift/design-system 11.6.0-muiv5-alpha.4 → 11.6.0-muiv5-alpha.5

package/_internal/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sources":["../../src/components/link-button/LinkButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from '../link';\nimport { LinkButtonProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'LinkButton';\nconst CLASSNAME = 'redsift-link-button';\n\n/**\n * The LinkButton is a semantic button that looks like a link.\n *\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic link that looks like a button, please use the ButtonLink component.\n */\nexport const LinkButton: Comp<LinkButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const buttonRef = ref || useRef<HTMLButtonElement>();\n\n  const {\n    children,\n    className,\n    color = 'primary',\n    disabled,\n    isDisabled: propsIsDisabled,\n    leftIcon,\n    leftIconProps,\n    rightIcon,\n    rightIconProps,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n  const isDisabled = propsIsDisabled || disabled;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledLink\n      as=\"button\"\n      {...forwardedProps}\n      $color={color}\n      $isDisabled={isDisabled || disabled}\n      $theme={theme}\n      aria-disabled={isDisabled || disabled}\n      className={classNames(LinkButton.className, className)}\n      disabled={isDisabled || disabled}\n      // @ts-ignore\n      ref={buttonRef as RefObject<HTMLButtonElement>}\n    >\n      {leftIcon || rightIcon ? (\n        <>\n          {leftIcon ? (\n            <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n          ) : null}\n          <span className=\"text\">{children}</span>\n          {rightIcon ? (\n            <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n          ) : null}\n        </>\n      ) : (\n        children\n      )}\n    </StyledLink>\n  );\n});\nLinkButton.className = CLASSNAME;\nLinkButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","LinkButton","forwardRef","props","ref","buttonRef","useRef","children","className","color","disabled","isDisabled","propsIsDisabled","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","as","$color","$isDisabled","$theme","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAC7F,EAAA,MAAMC,SAAS,GAAGD,GAAG,IAAIE,MAAM,EAAqB,CAAA;EAEpD,MAAM;MACJC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,GAAG,SAAS;MACjBC,QAAQ;AACRC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGf,KAAK;AADJgB,IAAAA,cAAc,GAAAC,wBAAA,CACfjB,KAAK,EAAAkB,SAAA,CAAA,CAAA;AACT,EAAA,MAAMV,UAAU,GAAGC,eAAe,IAAIF,QAAQ,CAAA;AAE9C,EAAA,MAAMO,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,cAAA,CAAAC,aAAA,CAACC,UAAU,EAAAC,QAAA,CAAA;AACTC,IAAAA,EAAE,EAAC,QAAA;AAAQ,GAAA,EACPR,cAAc,EAAA;AAClBS,IAAAA,MAAM,EAAEnB,KAAM;IACdoB,WAAW,EAAElB,UAAU,IAAID,QAAS;AACpCoB,IAAAA,MAAM,EAAEb,KAAM;IACd,eAAeN,EAAAA,UAAU,IAAID,QAAS;IACtCF,SAAS,EAAEuB,UAAU,CAAC9B,UAAU,CAACO,SAAS,EAAEA,SAAS,CAAE;IACvDE,QAAQ,EAAEC,UAAU,IAAID,QAAAA;AACxB;AAAA;AACAN,IAAAA,GAAG,EAAEC,SAAAA;GAEJQ,CAAAA,EAAAA,QAAQ,IAAIE,SAAS,gBACpBQ,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAS,QAAA,EACGnB,IAAAA,EAAAA,QAAQ,gBACPU,cAAA,CAAAC,aAAA,CAACS,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAErB,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAACL,IAAAA,SAAS,EAAC,MAAM;AAAC2B,IAAAA,IAAI,EAAC,QAAA;GAAarB,EAAAA,aAAa,CAAG,CAAC,GAC3F,IAAI,eACRS,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMhB,IAAAA,SAAS,EAAC,MAAA;GAAQD,EAAAA,QAAe,CAAC,EACvCQ,SAAS,gBACRQ,cAAA,CAAAC,aAAA,CAACS,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAEnB,SAAU;AAAC,IAAA,aAAA,EAAY,MAAM;AAACP,IAAAA,SAAS,EAAC,OAAO;AAAC2B,IAAAA,IAAI,EAAC,QAAA;GAAanB,EAAAA,cAAc,CAAG,CAAC,GAC9F,IACJ,CAAC,GAEHT,QAEQ,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFN,UAAU,CAACO,SAAS,GAAGR,SAAS,CAAA;AAChCC,UAAU,CAACmC,WAAW,GAAGrC,cAAc;;;;"}

package/_internal/Listbox2.js

@@ -0,0 +1,274 @@
+import { b as _objectWithoutProperties, c as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useCallback, useRef, useReducer, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { a as ListboxActionType, d as ListboxContext, b as ListboxVariant, c as LISTBOX_INITIAL_STATE } from './useListboxItem.js';
+import styled, { css } from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { u as useFocusOnList, F as FocusWithinGroup } from './useFocusOnList.js';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import { u as useId } from './useId.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+
+const _excluded$2 = ["children", "id", "isDisabled", "context"];
+const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _context$state$active;
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const {
+    activedescendant,
+    handleKeyDown: handleFocusKeyDown,
+    handleFocus,
+    handleBlur
+  } = useFocusOnList();
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        var _activedescendant$;
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value: (_activedescendant$ = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$ !== void 0 ? _activedescendant$ : '',
+            activedescendant
+          }
+        });
+      } else {
+        var _activedescendant$2;
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [(_activedescendant$2 = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$2 !== void 0 ? _activedescendant$2 : ''],
+            activedescendant
+          }
+        });
+      }
+    }
+  }, [activedescendant]);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
+    "aria-multiselectable": context.state.selectionMode === 'multiple',
+    tabIndex: 0,
+    style: {
+      outline: 'none'
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseDown: event => event.preventDefault(),
+    onMouseLeave: handleBlur,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+const _excluded$1 = ["children", "id", "isDisabled", "context"];
+const RovingTabindexListbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      id,
+      isDisabled,
+      context
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  return /*#__PURE__*/React__default.createElement(Flexbox, _extends({
+    flexDirection: "column",
+    gap: "8px"
+  }, forwardedProps, {
+    "aria-disabled": isDisabled,
+    ref: ref,
+    id: id,
+    role: "listbox",
+    "aria-multiselectable": context.state.selectionMode === 'multiple'
+  }), /*#__PURE__*/React__default.createElement(ListboxContext.Provider, {
+    value: context
+  }, children));
+});
+
+/**
+ * Component style.
+ */
+const StyledListbox = styled.div`
+  ${baseContainer}
+  outline: none;
+
+  ${_ref => {
+  let {
+    $variant,
+    $isDisabled,
+    $isInvalid
+  } = _ref;
+  return $variant === ListboxVariant.standalone ? css`
+          span.redsift-listbox-label {
+            font-family: var(--redsift-typography-body-font-family);
+            font-weight: var(--redsift-typography-body-font-weight);
+            font-size: var(--redsift-typography-body-font-size);
+            line-height: var(--redsift-typography-body-line-height);
+
+            color: var(--redsift-color-neutral-black);
+            ${$isDisabled ? `
+          color: var(--redsift-color-neutral-mid-grey);
+        ` : ''}
+            ${$isInvalid ? `
+          color: var(--redsift-color-red-n);
+        ` : ''}
+          }
+
+          .redsift-listbox-list {
+            border: 1px solid var(--redsift-color-neutral-mid-grey);
+            padding: 4px;
+            min-width: 200px;
+          }
+        ` : '';
+}}
+`;
+
+const ListboxReducer = (state, action) => {
+  switch (action.type) {
+    case ListboxActionType.TOGGLE:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        if (!state.selectedValues.includes(action.payload.value)) {
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            selectedValues: state.selectedValues.concat(action.payload.value)
+          }, action.payload.activedescendant && {
+            activedescendant: action.payload.activedescendant
+          });
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: state.selectedValues.filter(existingValue => existingValue !== action.payload.value)
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.SET:
+      {
+        if (state.isReadOnly || state.isDisabled) {
+          return state;
+        }
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selectedValues: action.payload.values
+        }, action.payload.activedescendant && {
+          activedescendant: action.payload.activedescendant
+        });
+      }
+    case ListboxActionType.UPDATE_OPTIONS:
+      {
+        return _objectSpread2(_objectSpread2({}, state), action.payload);
+      }
+    default:
+      return state;
+  }
+};
+
+const _excluded = ["children", "className", "defaultValues", "direction", "focusOnClick", "focusType", "id", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "loopAround", "onChange", "selectionMode", "values", "variant"];
+const COMPONENT_NAME = 'Listbox';
+const CLASSNAME = 'redsift-listbox';
+
+/**
+ * The Listbox component.
+ * Can be used as controlled or uncontrolled.
+ */
+const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultValues,
+      direction,
+      focusOnClick = false,
+      focusType = 'roving-tabindex',
+      id: propsId,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      loopAround,
+      onChange,
+      selectionMode = 'single',
+      values,
+      variant = ListboxVariant.standalone
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
+    isDisabled,
+    isReadOnly,
+    selectedValues: values || defaultValues || [],
+    selectionMode
+  }));
+  useEffect(() => {
+    if (values && values.length >= 0) {
+      dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values
+        }
+      });
+    }
+  }, [values]);
+  const context = useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  useEffect(() => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(state.selectedValues);
+  }, [state.selectedValues]);
+  warnIfNoAccessibleLabelFound(props, [label]);
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledListbox, _extends({
+      flexDirection: "column",
+      gap: "8px"
+    }, forwardedProps, {
+      $isDisabled: isDisabled,
+      $isInvalid: isInvalid || isRequired && state.selectedValues.length === 0,
+      $isReadOnly: isReadOnly,
+      className: classNames(Listbox.className, className),
+      ref: divRef,
+      id: id,
+      $variant: variant
+    }), children),
+    condition: variant === ListboxVariant.standalone
+  }, /*#__PURE__*/React__default.createElement(FocusWithinGroup, {
+    direction: direction,
+    focusOnClick: focusOnClick,
+    loopAround: loopAround,
+    focusType: focusType
+  }, label ? /*#__PURE__*/React__default.createElement("span", {
+    id: `${id}-label`,
+    className: `${Listbox.className}-label`
+  }, label, isRequired ? /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, ' *') : null) : null, focusType === 'roving-tabindex' ? /*#__PURE__*/React__default.createElement(RovingTabindexListbox, _extends({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children) : /*#__PURE__*/React__default.createElement(ActiveDescendantListbox, _extends({}, forwardedProps, {
+    className: `${Listbox.className}-list`,
+    context: context,
+    ref: divRef
+  }), children)));
+});
+Listbox.className = CLASSNAME;
+Listbox.displayName = COMPONENT_NAME;
+
+export { ActiveDescendantListbox as A, Listbox as L, RovingTabindexListbox as R, ListboxReducer as a };
+//# sourceMappingURL=Listbox2.js.map

package/_internal/Listbox2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox2.js","sources":["../../src/components/listbox/ActiveDescendantListbox.tsx","../../src/components/listbox/RovingTabindexListbox.tsx","../../src/components/listbox/styles.ts","../../src/components/listbox/reducer.ts","../../src/components/listbox/Listbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, KeyboardEvent } from 'react';\nimport { ListboxActionType, ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\nimport { useFocusOnList } from '../focus-within-group';\n\nexport const ActiveDescendantListbox = forwardRef<\n  HTMLDivElement,\n  Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n  const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n  const { activedescendant, handleKeyDown: handleFocusKeyDown, handleFocus, handleBlur } = useFocusOnList();\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      handleFocusKeyDown(event);\n      const code = event.code;\n      if (code === 'Enter' || code === 'Space') {\n        if (context.state.selectionMode === 'multiple') {\n          context.dispatch({\n            type: ListboxActionType.TOGGLE,\n            payload: { value: activedescendant?.[1] ?? '', activedescendant },\n          });\n        } else {\n          context.dispatch({\n            type: ListboxActionType.SET,\n            payload: {\n              values: [activedescendant?.[1] ?? ''],\n              activedescendant,\n            },\n          });\n        }\n      }\n    },\n    [activedescendant]\n  );\n\n  return (\n    <Flexbox\n      flexDirection=\"column\"\n      gap=\"8px\"\n      {...forwardedProps}\n      aria-disabled={isDisabled}\n      ref={ref}\n      id={id}\n      role=\"listbox\"\n      aria-activedescendant={context.state.activedescendant?.[0]}\n      aria-multiselectable={context.state.selectionMode === 'multiple'}\n      tabIndex={0}\n      style={{ outline: 'none' }}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseDown={(event) => event.preventDefault()}\n      onMouseLeave={handleBlur}\n      onKeyDown={handleKeyDown}\n    >\n      <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n    </Flexbox>\n  );\n});\n","import React, { forwardRef } from 'react';\nimport { ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\n\nexport const RovingTabindexListbox = forwardRef<\n  HTMLDivElement,\n  Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n  const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n  return (\n    <Flexbox\n      flexDirection=\"column\"\n      gap=\"8px\"\n      {...forwardedProps}\n      aria-disabled={isDisabled}\n      ref={ref}\n      id={id}\n      role=\"listbox\"\n      aria-multiselectable={context.state.selectionMode === 'multiple'}\n    >\n      <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n    </Flexbox>\n  );\n});\n","import styled, { css } from 'styled-components';\nimport { ListboxVariant, StyledListboxProps } from './types';\nimport { baseContainer } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledListbox = styled.div<StyledListboxProps>`\n  ${baseContainer}\n  outline: none;\n\n  ${({ $variant, $isDisabled, $isInvalid }) =>\n    $variant === ListboxVariant.standalone\n      ? css`\n          span.redsift-listbox-label {\n            font-family: var(--redsift-typography-body-font-family);\n            font-weight: var(--redsift-typography-body-font-weight);\n            font-size: var(--redsift-typography-body-font-size);\n            line-height: var(--redsift-typography-body-line-height);\n\n            color: var(--redsift-color-neutral-black);\n            ${$isDisabled\n              ? `\n          color: var(--redsift-color-neutral-mid-grey);\n        `\n              : ''}\n            ${$isInvalid\n              ? `\n          color: var(--redsift-color-red-n);\n        `\n              : ''}\n          }\n\n          .redsift-listbox-list {\n            border: 1px solid var(--redsift-color-neutral-mid-grey);\n            padding: 4px;\n            min-width: 200px;\n          }\n        `\n      : ''}\n`;\n","import { ListboxState, ListboxAction, ListboxActionType } from './types';\n\nexport const ListboxReducer = (state: ListboxState, action: ListboxAction): ListboxState => {\n  switch (action.type) {\n    case ListboxActionType.TOGGLE: {\n      if (state.isReadOnly || state.isDisabled) {\n        return state;\n      }\n      if (!state.selectedValues.includes(action.payload.value)) {\n        return {\n          ...state,\n          selectedValues: state.selectedValues.concat(action.payload.value),\n          ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n        };\n      }\n      return {\n        ...state,\n        selectedValues: state.selectedValues.filter((existingValue) => existingValue !== action.payload.value),\n        ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n      };\n    }\n    case ListboxActionType.SET: {\n      if (state.isReadOnly || state.isDisabled) {\n        return state;\n      }\n      return {\n        ...state,\n        selectedValues: action.payload.values,\n        ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n      };\n    }\n    case ListboxActionType.UPDATE_OPTIONS: {\n      return {\n        ...state,\n        ...action.payload,\n      };\n    }\n    default:\n      return state;\n  }\n};\n","import React, { ComponentProps, forwardRef, RefObject, useEffect, useMemo, useReducer, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { ListboxActionType, ListboxContextProps, ListboxProps, ListboxState, ListboxVariant } from './types';\nimport { LISTBOX_INITIAL_STATE } from './context';\nimport { StyledListbox } from './styles';\nimport { ListboxReducer } from './reducer';\nimport { FocusWithinGroup } from '../focus-within-group';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { RovingTabindexListbox } from './RovingTabindexListbox';\nimport { ActiveDescendantListbox } from './ActiveDescendantListbox';\nimport { useId, warnIfNoAccessibleLabelFound } from '../../utils';\n\nconst COMPONENT_NAME = 'Listbox';\nconst CLASSNAME = 'redsift-listbox';\n\n/**\n * The Listbox component.\n * Can be used as controlled or uncontrolled.\n */\nexport const Listbox: Comp<ListboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    defaultValues,\n    direction,\n    focusOnClick = false,\n    focusType = 'roving-tabindex',\n    id: propsId,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    loopAround,\n    onChange,\n    selectionMode = 'single',\n    values,\n    variant = ListboxVariant.standalone,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n  const _ref = useRef<HTMLDivElement>();\n  const divRef = ref ?? _ref;\n\n  const [state, dispatch] = useReducer(ListboxReducer, {\n    ...LISTBOX_INITIAL_STATE,\n    isDisabled,\n    isReadOnly,\n    selectedValues: values || defaultValues || [],\n    selectionMode,\n  } as ListboxState);\n\n  useEffect(() => {\n    if (values && values.length >= 0) {\n      dispatch({\n        type: ListboxActionType.SET,\n        payload: {\n          values,\n        },\n      });\n    }\n  }, [values]);\n\n  const context = useMemo<ListboxContextProps>(\n    () => ({\n      state,\n      dispatch,\n    }),\n    [state]\n  );\n\n  useEffect(() => {\n    onChange?.(state.selectedValues);\n  }, [state.selectedValues]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<keyof JSX.IntrinsicElements>, [label]);\n\n  return (\n    <ConditionalWrapper\n      wrapper={(children) => (\n        <StyledListbox\n          flexDirection=\"column\"\n          gap=\"8px\"\n          {...forwardedProps}\n          $isDisabled={isDisabled}\n          $isInvalid={isInvalid || (isRequired && state.selectedValues.length === 0)}\n          $isReadOnly={isReadOnly}\n          className={classNames(Listbox.className, className)}\n          ref={divRef as RefObject<HTMLDivElement>}\n          id={id}\n          $variant={variant}\n        >\n          {children}\n        </StyledListbox>\n      )}\n      condition={variant === ListboxVariant.standalone}\n    >\n      <FocusWithinGroup direction={direction} focusOnClick={focusOnClick} loopAround={loopAround} focusType={focusType}>\n        {label ? (\n          <span id={`${id}-label`} className={`${Listbox.className}-label`}>\n            {label}\n            {isRequired ? <span aria-hidden=\"true\">{' *'}</span> : null}\n          </span>\n        ) : null}\n        {focusType === 'roving-tabindex' ? (\n          <RovingTabindexListbox\n            {...forwardedProps}\n            className={`${Listbox.className}-list`}\n            context={context}\n            ref={divRef as RefObject<HTMLDivElement>}\n          >\n            {children}\n          </RovingTabindexListbox>\n        ) : (\n          <ActiveDescendantListbox\n            {...forwardedProps}\n            className={`${Listbox.className}-list`}\n            context={context}\n            ref={divRef as RefObject<HTMLDivElement>}\n          >\n            {children}\n          </ActiveDescendantListbox>\n        )}\n      </FocusWithinGroup>\n    </ConditionalWrapper>\n  );\n});\nListbox.className = CLASSNAME;\nListbox.displayName = COMPONENT_NAME;\n"],"names":["ActiveDescendantListbox","forwardRef","props","ref","_context$state$active","children","id","isDisabled","context","forwardedProps","_objectWithoutProperties","_excluded","activedescendant","handleKeyDown","handleFocusKeyDown","handleFocus","handleBlur","useFocusOnList","useCallback","event","code","state","selectionMode","_activedescendant$","dispatch","type","ListboxActionType","TOGGLE","payload","value","_activedescendant$2","SET","values","React","createElement","Flexbox","_extends","flexDirection","gap","role","tabIndex","style","outline","onFocus","onBlur","onMouseDown","preventDefault","onMouseLeave","onKeyDown","ListboxContext","Provider","RovingTabindexListbox","StyledListbox","styled","div","baseContainer","_ref","$variant","$isDisabled","$isInvalid","ListboxVariant","standalone","css","ListboxReducer","action","isReadOnly","selectedValues","includes","_objectSpread","concat","filter","existingValue","UPDATE_OPTIONS","COMPONENT_NAME","CLASSNAME","Listbox","className","defaultValues","direction","focusOnClick","focusType","propsId","isInvalid","isRequired","label","loopAround","onChange","variant","_id","useId","useRef","divRef","useReducer","LISTBOX_INITIAL_STATE","useEffect","length","useMemo","warnIfNoAccessibleLabelFound","ConditionalWrapper","wrapper","$isReadOnly","classNames","condition","FocusWithinGroup","displayName"],"mappings":"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"}

package/_internal/Number2.js

@@ -0,0 +1,69 @@
+import { b as TextProps } from './types28.js';
+import { C as Comp } from './helpers.js';
+
+interface NumberFormatOptions {
+}
+/**
+ * Component props.
+ */
+interface NumberProps extends TextProps {
+    /** Value. */
+    value: number;
+    /** The formatting style to use. */
+    type?: 'decimal' | 'currency' | 'percent' | 'unit';
+    /** Only used when notation is 'compact'. */
+    compactDisplay?: 'short' | 'long';
+    /** The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB */
+    currency?: string;
+    /** How to display the currency in currency formatting. */
+    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';
+    /** In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. */
+    currencySign?: 'standard' | 'accounting';
+    /** The locale matching algorithm to use. */
+    localeMatcher?: 'best fit' | 'lookup';
+    /** The formatting that should be displayed for the number. */
+    notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
+    /** Overrides default numbering system for the current locale. */
+    numberingSystem?: string;
+    /** When to display the sign for the number. */
+    signDisplay?: 'auto' | 'always' | 'exceptZero' | 'never';
+    /** The unit to use in unit formatting. */
+    unit?: string;
+    /** The unit formatting style to use in unit formatting. */
+    unitDisplay?: 'long' | 'short' | 'narrow';
+    /** Whether to use grouping separators. */
+    useGrouping?: boolean;
+    /** Options for rounding modes. */
+    roundingMode?: 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven';
+    /** Specify how rounding conflicts will be resolved. */
+    roundingPriority?: 'auto' | 'morePrecision' | 'lessPrecision';
+    /** Specifies the rounding-increment precision. */
+    roundingIncrement?: 1 | 2 | 5 | 10 | 20 | 25 | 50 | 100 | 200 | 250 | 500 | 1000 | 2000 | 2500 | 5000;
+    /** A string expressing the strategy for displaying trailing zeros on whole numbers. */
+    trailingZeroDisplay?: 'auto' | 'stripIfInteger';
+    /** The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted. */
+    minimumIntegerDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
+    /** The minimum number of fraction digits to use. */
+    minimumFractionDigits?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
+    /** The maximum number of fraction digits to use. */
+    maximumFractionDigits?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20;
+    /** The minimum number of significant digits to use. */
+    minimumSignificantDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
+    /** The maximum number of significant digits to use. */
+    maximumSignificantDigits?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21;
+}
+type StyledNumberProps = Omit<NumberProps, 'as' | 'color' | 'fontFamily' | 'fontSize' | 'value' | 'variant'> & {
+    $color: NumberProps['color'];
+    $fontFamily: NumberProps['fontFamily'];
+    $fontSize: NumberProps['fontSize'];
+    $fontWeight: NumberProps['fontWeight'];
+    $variant: NumberProps['variant'];
+    $theme: NumberProps['theme'];
+};
+
+/**
+ * The Number component.
+ */
+declare const Number: Comp<NumberProps, HTMLDivElement>;
+
+export { NumberFormatOptions as N, StyledNumberProps as S, NumberProps as a, Number as b };

package/_internal/Number2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Number2.js","sources":["../../src/components/number/styles.ts","../../src/components/number/Number.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledText } from '../text/styles';\nimport { StyledNumberProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledNumber = styled(StyledText)<StyledNumberProps>``;\n","import React, { forwardRef, RefObject } from 'react';\nimport { useNumberFormatter } from '../../react-aria/react-aria/i18n';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledNumber } from './styles';\nimport { NumberProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Number';\nconst CLASSNAME = 'redsift-number';\n\n/**\n * The Number component.\n */\nexport const Number: Comp<NumberProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    className,\n    color,\n    compactDisplay = 'short',\n    currency,\n    currencyDisplay = 'symbol',\n    currencySign = 'standard',\n    fontSize,\n    fontFamily,\n    fontWeight,\n    lineHeight,\n    localeMatcher = 'best fit',\n    maximumFractionDigits,\n    maximumSignificantDigits,\n    minimumFractionDigits,\n    minimumIntegerDigits,\n    minimumSignificantDigits,\n    notation = 'standard',\n    noWrap,\n    numberingSystem,\n    roundingIncrement,\n    roundingMode = 'halfExpand',\n    roundingPriority = 'auto',\n    signDisplay = 'auto',\n    theme: propsTheme,\n    trailingZeroDisplay = 'auto',\n    type = 'decimal',\n    unit,\n    unitDisplay = 'short',\n    useGrouping,\n    value,\n    variant,\n    ...forwardedProps\n  } = props;\n  const formatter = useNumberFormatter({\n    compactDisplay,\n    currency,\n    currencyDisplay,\n    currencySign,\n    localeMatcher,\n    ...(maximumFractionDigits !== undefined && { maximumFractionDigits }),\n    ...(maximumSignificantDigits !== undefined && {\n      maximumSignificantDigits,\n    }),\n    ...(minimumFractionDigits !== undefined && { minimumFractionDigits }),\n    ...(minimumIntegerDigits !== undefined && { minimumIntegerDigits }),\n    ...(minimumSignificantDigits !== undefined && {\n      minimumSignificantDigits,\n    }),\n    notation,\n    numberingSystem,\n    // @ts-ignore\n    roundingIncrement,\n    // @ts-ignore\n    roundingMode,\n    // @ts-ignore\n    roundingPriority,\n    signDisplay,\n    style: type,\n    // @ts-ignore\n    trailingZeroDisplay,\n    unit,\n    unitDisplay,\n    useGrouping,\n  });\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledNumber\n      as={as}\n      {...forwardedProps}\n      $as={as}\n      className={classNames(Number.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $color={color}\n      $lineHeight={lineHeight}\n      $fontSize={fontSize}\n      $fontFamily={fontFamily}\n      $fontWeight={fontWeight}\n      $noWrap={noWrap}\n      $theme={theme}\n      $variant={variant}\n    >\n      {formatter.format(value)}\n    </StyledNumber>\n  );\n});\nNumber.className = CLASSNAME;\nNumber.displayName = COMPONENT_NAME;\n"],"names":["StyledNumber","styled","StyledText","COMPONENT_NAME","CLASSNAME","Number","forwardRef","props","ref","as","className","color","compactDisplay","currency","currencyDisplay","currencySign","fontSize","fontFamily","fontWeight","lineHeight","localeMatcher","maximumFractionDigits","maximumSignificantDigits","minimumFractionDigits","minimumIntegerDigits","minimumSignificantDigits","notation","noWrap","numberingSystem","roundingIncrement","roundingMode","roundingPriority","signDisplay","theme","propsTheme","trailingZeroDisplay","type","unit","unitDisplay","useGrouping","value","variant","forwardedProps","_objectWithoutProperties","_excluded","formatter","useNumberFormatter","_objectSpread","undefined","style","useTheme","React","createElement","_extends","$as","classNames","$color","$lineHeight","$fontSize","$fontFamily","$fontWeight","$noWrap","$theme","$variant","format","displayName"],"mappings":"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"}

package/_internal/NumberField.js

@@ -0,0 +1,80 @@
+import { FocusEvent, KeyboardEvent, ChangeEvent } from 'react';
+import { b as TextFieldProps } from './types29.js';
+import { V as ValueOf, C as Comp } from './helpers.js';
+
+/**
+ * Component variant.
+ */
+declare const NumberFieldVariant: {
+    readonly default: "default";
+    readonly underline: "underline";
+};
+type NumberFieldVariant = ValueOf<typeof NumberFieldVariant>;
+/**
+ * Component props.
+ */
+interface NumberFieldProps extends Omit<TextFieldProps, 'defaultValue' | 'onChange' | 'value' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'after' | 'internal' | 'pills' | 'placeholder'> {
+    /** Handler that is called when the element receives focus. */
+    onFocus?: (e: FocusEvent<Element>) => void;
+    /** Handler that is called when the element loses focus. */
+    onBlur?: (e: FocusEvent<Element>) => void;
+    /** Handler that is called when the element's focus status changes. */
+    onFocusChange?: (isFocused: boolean) => void;
+    /** Handler that is called when a key is pressed. */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /** Handler that is called when a key is released. */
+    onKeyUp?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Default value.
+     * Used for uncontrolled version.
+     */
+    defaultValue?: number;
+    /** Method to handle component change. */
+    onChange?(value?: number, name?: string, event?: ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Input value.
+     * Used for controlled version.
+     */
+    value?: number;
+    /** Placeholder. */
+    placeholder?: number;
+    /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */
+    decrementAriaLabel?: string;
+    /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */
+    incrementAriaLabel?: string;
+    /**
+     * Enables or disables changing the value with scroll.
+     */
+    isWheelDisabled?: boolean;
+    /**
+     * Formatting options for the value displayed in the number field.
+     * This also affects what characters are allowed to be typed by the user.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The smallest value allowed for the input. */
+    minValue?: number;
+    /** The largest value allowed for the input. */
+    maxValue?: number;
+    /** The amount that the input value changes with each increment or decrement "tick". */
+    step?: number;
+}
+type StyledNumberFieldProps = Omit<NumberFieldProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange' | 'onBlur' | 'onFocus'> & {
+    $hasLeftIcon: boolean;
+    $hasContent: boolean;
+    $isColored: NumberFieldProps['isColored'];
+    $isDisabled: NumberFieldProps['isDisabled'];
+    $isInvalid: NumberFieldProps['isInvalid'];
+    $isFocused: boolean;
+    $isFocusVisible: boolean;
+    $isRequired: NumberFieldProps['isRequired'];
+    $theme: NumberFieldProps['theme'];
+    $variant: NumberFieldProps['variant'];
+};
+
+/**
+ * The NumberField component.
+ * Can be used as controlled or uncontrolled.
+ */
+declare const NumberField: Comp<NumberFieldProps, HTMLDivElement>;
+
+export { NumberFieldVariant as N, StyledNumberFieldProps as S, NumberFieldProps as a, NumberField as b };